// Act IX — THE CONCLUSION
// The penultimate stop. Everything the audience has just seen, folded into a
// single page so the presenter can say, "here is the argument, end to end,
// before I ask for money." Five thesis beats reveal sequentially as the
// presenter scrolls, so the conclusion reads like a prosecutor's closing.
//
// The Shalumova signature anchors the bottom-right — the presenter's name
// attached to the argument, the way a wall label is attached to an object.

const THESIS_BEATS = [
  {
    kicker: 'The gap is not optional',
    head: '87% of educators are teaching around the absence of the source.',
    body: 'Fashion history is being taught without the fashion. Geography, licensing, and fragmentation keep the archive closed to everyone outside a handful of cities.',
  },
  {
    kicker: 'The asset exists',
    head: '150+ museums have already digitized the century.',
    body: 'The archive is not missing. It is unreachable — stuck behind bespoke licensing, proprietary metadata, and no distribution channel built for classrooms.',
  },
  {
    kicker: 'The argument is teachable',
    head: 'One dress hinges the century; three inflections close the loop.',
    body: 'Lenglen 1921 · Open Era 1968 · Raducanu 2022. A primary-source spine that turns a survey course into a citable bibliography.',
  },
  {
    kicker: 'The business is legible',
    head: '24× LTV : CAC · 72% gross margin · breakeven mid-Year 3.',
    body: 'Three tiers, one unit economics. Institutional anchors the floor; Pro drives the consumer engine; General keeps the top of the funnel open to the family closet.',
  },
  {
    kicker: 'The ask is the beginning',
    head: '$1.5M buys eighteen months to prove the motion.',
    body: 'FIT pilot converts. Five institutions signed. Five museum partnerships closed. Series A at $3M, Year 2, on evidence — not on story.',
  },
];

function ThesisRow({ beat, idx, r }) {
  const eased = 1 - Math.pow(1 - r, 3);
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '54px 1fr',
        gap: 22,
        padding: '12px 0',
        borderTop: idx === 0 ? '1px solid rgba(201,168,76,0.3)' : '1px solid rgba(143,166,143,0.14)',
        opacity: eased,
        transform: `translateX(${(1 - eased) * 32}px)`,
      }}
    >
      <div>
        <span
          className="font-display"
          style={{
            fontSize: 28,
            color: 'var(--gold)',
            letterSpacing: '-0.02em',
            lineHeight: 1,
            opacity: 0.9,
            fontStyle: 'italic',
          }}
        >
          {String(idx + 1).padStart(2, '0')}
        </span>
      </div>
      <div>
        <div className="label-text" style={{ color: 'var(--sage)', marginBottom: 5 }}>
          {beat.kicker}
        </div>
        <div
          className="font-display"
          style={{
            fontSize: 'clamp(18px, 1.6vw, 24px)',
            lineHeight: 1.18,
            letterSpacing: '-0.01em',
            color: 'var(--parchment)',
            marginBottom: 5,
            textWrap: 'pretty',
          }}
        >
          {beat.head}
        </div>
        <div
          className="font-editorial"
          style={{
            fontSize: 13.5,
            lineHeight: 1.5,
            color: 'rgba(240,238,233,0.72)',
            maxWidth: 780,
            textWrap: 'pretty',
            fontStyle: 'italic',
          }}
        >
          {beat.body}
        </div>
      </div>
    </div>
  );
}

function ActConclusionInner({ act, index, total }) {
  // Reduced from 7 beats to 5 (2026-04-29). Header lands with beat 0, five
  // theses stagger across the act, footer settles by beat 4 — true to the
  // "five sentences, one argument" framing.
  const headR = useBeatProgress(0);
  const footerR = useBeatProgress(4);
  const rows = useStaggeredBeats(THESIS_BEATS.length, { startBeat: 0, span: 4, ease: 0.65 });

  const headE = 1 - Math.pow(1 - headR, 3);
  const footE = 1 - Math.pow(1 - footerR, 3);

  return (
    <ActFrame act={act} index={index} total={total} bg="var(--petrol)">
      <ActSeam roman={act.roman} />
      <div style={{ paddingTop: 10 }}>
        {/* Header */}
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-end',
            marginBottom: 14,
            opacity: headE,
            transform: `translateY(${(1 - headE) * 16}px)`,
          }}
        >
          <div>
            <span className="label-text" style={{ color: 'var(--gold)' }}>In summary</span>
            <h2
              className="font-display"
              style={{
                fontSize: 'clamp(36px, 4vw, 58px)',
                lineHeight: 1.02,
                letterSpacing: '-0.02em',
                color: 'var(--parchment)',
                margin: '10px 0 0',
                textTransform: 'uppercase',
              }}
            >
              Five sentences. <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>One argument.</span>
            </h2>
          </div>
          <div style={{ textAlign: 'right', maxWidth: 340 }}>
            <div
              className="font-editorial"
              style={{
                fontSize: 14,
                color: 'var(--parchment-dim)',
                lineHeight: 1.55,
                fontStyle: 'italic',
              }}
            >
              If you remember nothing else from this presentation, remember these five lines. Scroll to reveal.
            </div>
          </div>
        </div>

        {/* Thesis stack */}
        <div>
          {THESIS_BEATS.map((b, i) => (
            <ThesisRow key={b.kicker} beat={b} idx={i} r={rows[i]} />
          ))}
        </div>

        {/* Footer lockup — signature anchor, sets up the ask */}
        <div
          style={{
            marginTop: 22,
            paddingTop: 18,
            borderTop: '1px solid rgba(143,166,143,0.25)',
            display: 'grid',
            gridTemplateColumns: '1fr auto',
            gap: 40,
            alignItems: 'flex-end',
            opacity: footE,
            transform: `translateY(${(1 - footE) * 18}px)`,
          }}
        >
          <div>
            <span className="label-text" style={{ color: 'var(--sage)' }}>The move</span>
            <p
              className="font-editorial"
              style={{
                fontSize: 15,
                lineHeight: 1.5,
                color: 'var(--parchment)',
                marginTop: 8,
                maxWidth: 780,
                fontStyle: 'italic',
                textWrap: 'pretty',
              }}
            >
              Build the classroom the archive has been waiting for. Turn every digitized museum into a syllabus. Put a hundred years of primary source into the hands of a first-year student on a Monday morning.
            </p>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div
              className="font-display"
              style={{
                fontSize: 32,
                color: 'var(--sage)',
                fontStyle: 'italic',
                lineHeight: 1,
                letterSpacing: '-0.01em',
              }}
            >
              Shalumova
            </div>
            <div
              className="label-text"
              style={{ color: 'var(--taupe)', marginTop: 6, letterSpacing: '0.28em' }}
            >
              Founder · FIT · 2026
            </div>
          </div>
        </div>
      </div>
    </ActFrame>
  );
}

function ActConclusion({ index, total, act }) {
  return (
    <ScrollBeats beats={5} bg="var(--petrol)">
      <ActConclusionInner act={act} index={index} total={total} />
    </ScrollBeats>
  );
}

window.ActConclusion = ActConclusion;
