// Story — relationship in chapters

const CHAPTERS = [
  {
    n: 'I',
    title: 'The first glance',
    date: 'October, Twenty Twenty Four',
    excerpt: 'Before a word, there was a moment where the room became quieter. Not silent — quieter. As if something had finally arrived.',
  },
  {
    n: 'II',
    title: 'A tea, a long talk',
    date: 'November, Twenty Twenty Four',
    excerpt: 'We spoke until the cups were cold and the café wanted to close. I remember the laugh — the one you try to hide behind your hand.',
  },
  {
    n: 'III',
    title: 'Steady, pt. 2',
    date: 'January, Twenty Twenty Five',
    excerpt: 'You played it in the car and I understood something about you that words had not managed to tell me yet.',
  },
  {
    n: 'IV',
    title: 'The first I love you',
    date: 'February, Twenty Twenty Five',
    excerpt: 'It slipped out the way true things do — unplanned, quiet, and entirely inevitable.',
  },
  {
    n: 'V',
    title: 'This chapter, still writing',
    date: 'Present',
    excerpt: 'Every day since, a sentence. Every week, a paragraph. We are far from done.',
    current: true,
  },
];

function StoryScreen({ memories = [] }) {
  // Roman numerals utility
  const roman = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI', 'XII'];
  
  const items = memories.length > 0 
    ? memories.map((m, i) => ({
        n: roman[i] || String(i + 1),
        title: m.title,
        date: m.date,
        excerpt: m.prompt || 'No description provided.',
        current: i === memories.length - 1 // Last one is "current" chapter
    }))
    : CHAPTERS; // fallback to static if empty

  return (
    <div style={{ position: 'absolute', inset: 0, overflowY: 'auto', paddingBottom: 120 }}>
      {/* Header */}
      <div style={{ padding: '64px 26px 6px' }}>
        <div style={{
          fontFamily: sans, fontSize: 10, letterSpacing: 3,
          color: MUTED, textTransform: 'uppercase',
        }}>Dexter &amp; Kefilwe · in chapters</div>
        <div style={{
          fontFamily: serifDisplay, fontStyle: 'italic', fontWeight: 400,
          fontSize: 44, lineHeight: '48px', color: INK, marginTop: 8, letterSpacing: -0.5,
        }}>Our Story</div>
      </div>

      {/* Subtitle */}
      <div style={{
        padding: '10px 26px 24px',
        fontFamily: serif, fontSize: 16, lineHeight: '24px',
        color: MUTED, fontStyle: 'italic', textWrap: 'pretty',
      }}>
        A book of two people, written as we go.
      </div>

      {/* Timeline */}
      <div style={{ padding: '0 26px', position: 'relative' }}>
        {/* vertical thread */}
        <div style={{
          position: 'absolute', left: 50, top: 10, bottom: 40,
          width: 0.5, background: GOLD, opacity: 0.5,
        }}/>
        {items.map((c, i) => <Chapter key={i} chapter={c} last={i === items.length - 1}/>)}
      </div>

      {/* End flourish */}
      <div style={{
        display: 'flex', justifyContent: 'center', alignItems: 'center',
        gap: 10, margin: '10px 26px 0', opacity: 0.6,
      }}>
        <div style={{ width: 40, height: 1, background: GOLD }} />
        <svg width="10" height="10" viewBox="0 0 10 10">
          <path d="M5 9s-4-2.3-4-5.2A2 2 0 015 2.5 2 2 0 019 3.8C9 6.7 5 9 5 9z" fill={GOLD} opacity="0.7"/>
        </svg>
        <div style={{ width: 40, height: 1, background: GOLD }} />
      </div>
      <div style={{
        textAlign: 'center', marginTop: 10,
        fontFamily: serif, fontStyle: 'italic', fontSize: 14, color: MUTED,
      }}>
        To be continued.
      </div>
    </div>
  );
}

function Chapter({ chapter, last }) {
  return (
    <div style={{
      position: 'relative',
      paddingLeft: 70,
      paddingBottom: last ? 20 : 36,
    }}>
      {/* Chapter numeral medallion */}
      <div style={{
        position: 'absolute', left: 26, top: 2,
        width: 48, height: 48,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: chapter.current ? ROSE : PAPER,
        border: `0.5px solid ${chapter.current ? ROSE : GOLD}`,
        borderRadius: 99,
        boxShadow: '0 2px 8px rgba(20,26,58,0.08)',
      }}>
        <span style={{
          fontFamily: serifDisplay, fontStyle: 'italic',
          fontSize: 20, color: chapter.current ? PAPER : INK,
          fontWeight: 500,
        }}>{chapter.n}</span>
      </div>

      {/* Text */}
      <div>
        <div style={{
          fontFamily: sans, fontSize: 9, letterSpacing: 2.5,
          color: MUTED, textTransform: 'uppercase',
        }}>{chapter.date}</div>

        <div style={{
          fontFamily: serifDisplay, fontStyle: 'italic',
          fontSize: 24, lineHeight: '30px', color: INK,
          marginTop: 4, letterSpacing: -0.2, fontWeight: 400,
        }}>{chapter.title}</div>

        <div style={{
          fontFamily: serif, fontSize: 15, lineHeight: '23px',
          color: 'rgba(27,36,71,0.78)', marginTop: 8, textWrap: 'pretty',
        }}>{chapter.excerpt}</div>

        {!chapter.current && (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            marginTop: 12,
            fontFamily: sans, fontSize: 10, letterSpacing: 2, color: ROSE, textTransform: 'uppercase',
          }}>
            Read the chapter {Icon.chevron(ROSE)}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { StoryScreen });