// Act Vb — THREE INFLECTION POINTS
// After the live scrub, the presenter picks out the three moments that
// "broke" the century. Each inflection point is a plate + year + why-it-
// mattered paragraph + downstream note. Reading rhythm beats animation here:
// the trio reveals sequentially, left-to-right.

const { useState, useEffect, useRef, useMemo, useLayoutEffect } = window;

const INFLECTIONS = [
  {
    year: 1921,
    era: 'Liberation',
    title: 'The scandal that made the cover',
    subject: 'Lenglen · Patou',
    img: 'assets/lenglen-1920s.png',
    imgScale: 1.0,
    imgPos: 'center 48%',
    body: 'A sleeveless, knee-length silk-jersey dress on the world\u2019s most-photographed athlete. The crowd at Wimbledon decided, in public, what a woman could wear to compete.',
    downstream: 'The corset exits competitive sport. Silk jersey enters.',
    tint: 'var(--gold)',
  },
  {
    year: 1968,
    era: 'Open Era',
    title: 'Amateurs and professionals share a draw',
    subject: 'Wimbledon · Open Era',
    img: 'assets/tennis-1960.png',
    imgScale: 1.45,
    imgPos: 'center 50%',
    body: 'Tennis professionalizes. The kit follows — lighter fabrics, shorter hems, and for the first time a name on the dress. The uniform becomes a commercial surface.',
    downstream: 'The dress turns into a brand canvas; sponsorship enters the design brief.',
    tint: 'var(--rust)',
  },
  {
    year: 2022,
    era: 'Re-citation',
    title: 'A hundred-year conversation, still open',
    subject: 'Raducanu · Nike',
    img: 'assets/raducanu-2022.webp',
    imgScale: 0.85,
    imgPos: 'center 48%',
    body: 'The current kit includes a mesh yoke and seam lines that deliberately quote 19th-century corsetry — designed, knowingly, by a team that understood exactly what Lenglen had made obsolete.',
    downstream: 'The century closes the loop. The archive is now a design tool.',
    tint: 'var(--sage)',
  },
];

function InflectionCard({ p, i, visible }) {
  return (
    <div
      style={{
        position: 'relative',
        display: 'flex', flexDirection: 'column',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(20px)',
        transition: `all 1.0s cubic-bezier(0.16,1,0.3,1) ${0.3 + i * 0.15}s`,
      }}
    >
      {/* Plate */}
      <div style={{
        position: 'relative',
        aspectRatio: '4 / 4.6',
        background:
          `radial-gradient(ellipse 58% 62% at 50% 48%, ${p.tint === 'var(--gold)' ? 'rgba(201,168,76,0.18)' : p.tint === 'var(--rust)' ? 'rgba(166,74,44,0.18)' : 'rgba(143,166,143,0.18)'}, transparent 70%),` +
          'linear-gradient(180deg, rgba(7,50,66,0.55), rgba(7,50,66,0.98))',
        border: '1px solid rgba(143,166,143,0.15)',
        overflow: 'hidden',
      }}>
        <div style={{ position: 'absolute', inset: 14, border: '1px solid rgba(143,166,143,0.12)', pointerEvents: 'none' }} />
        <img src={p.img} alt={p.title}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain',
            objectPosition: p.imgPos || 'center',
            padding: '24px 16px',
            transform: `scale(${p.imgScale || 1})`,
            transformOrigin: 'center',
            filter: 'drop-shadow(0 30px 50px rgba(0,0,0,0.5))',
          }}
        />
        {/* Huge year watermark */}
        <div style={{
          position: 'absolute', top: 14, right: 14,
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 40, color: p.tint, opacity: 0.85,
          letterSpacing: '-0.02em', lineHeight: 1,
        }}>
          {p.year}
        </div>
        <div style={{
          position: 'absolute', bottom: 16, left: 22,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ width: 8, height: 8, background: p.tint, display: 'inline-block' }} />
          <span className="label-text" style={{ color: 'var(--parchment-dim)' }}>{p.subject}</span>
        </div>
      </div>

      {/* Copy block */}
      <div style={{ paddingTop: 10 }}>
        <div className="label-text" style={{ color: p.tint, fontSize: 9 }}>
          № 0{i + 1} · {p.era}
        </div>
        <div className="font-display" style={{
          fontSize: 16, lineHeight: 1.1, letterSpacing: '-0.01em',
          color: 'var(--parchment)', marginTop: 4,
          textTransform: 'uppercase',
        }}>
          {p.title}
        </div>
        <p className="font-editorial" style={{
          fontSize: 13, lineHeight: 1.5, color: 'rgba(240,238,233,0.9)',
          marginTop: 7, fontStyle: 'italic', textWrap: 'pretty',
        }}>
          {p.body}
        </p>
        <div style={{
          marginTop: 7, paddingTop: 7,
          borderTop: '1px dotted rgba(143,166,143,0.3)',
          display: 'flex', gap: 8,
        }}>
          <span className="label-text" style={{ color: 'var(--sage)', flexShrink: 0, fontSize: 9 }}>↳ after</span>
          <span className="font-editorial" style={{ fontSize: 12, lineHeight: 1.45, color: 'var(--parchment)', fontStyle: 'italic' }}>
            {p.downstream}
          </span>
        </div>
      </div>
    </div>
  );
}

function ActCenturyInflectionsInner({ index, total, act }) {
  const [ref, visible] = useBeatReveal(0);

  return (
    <ActFrame act={act} index={index} total={total} bg="var(--petrol)">
      <ActSeam roman={act.roman} />

      <div ref={ref} style={{ paddingTop: 10 }}>
        {/* Header */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 16,
          opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(12px)',
          transition: 'all 1.2s cubic-bezier(0.16,1,0.3,1)',
        }}>
          <div>
            <span className="label-text" style={{ color: 'var(--sage)' }}>The three moments the century broke</span>
            <h2 className="font-display" style={{
              fontSize: 'clamp(30px, 3.4vw, 50px)',
              lineHeight: 1.02, letterSpacing: '-0.02em',
              color: 'var(--parchment)', margin: '8px 0 0', textTransform: 'uppercase',
            }}>
              Three inflections, one <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>unbroken argument</span>.
            </h2>
          </div>
          <div style={{ textAlign: 'right', maxWidth: 380 }}>
            <div className="font-editorial" style={{ fontSize: 14, color: 'var(--parchment)', fontStyle: 'italic', lineHeight: 1.5, textWrap: 'pretty' }}>
              Each is a primary source · each is citable · each can be handed to a first-year student on Monday morning.
            </div>
          </div>
        </div>

        {/* Three-up */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 22,
        }}>
          {INFLECTIONS.map((p, i) => (
            <InflectionCard key={p.year} p={p} i={i} visible={visible} />
          ))}
        </div>

        {/* Closing beat — tightened so the cards' captions never clip on a
            1080 projector. */}
        <div style={{
          marginTop: 12,
          paddingTop: 10,
          borderTop: '1px solid rgba(143,166,143,0.25)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          opacity: visible ? 1 : 0,
          transition: 'opacity 1.4s ease 0.9s',
        }}>
          <div style={{ maxWidth: 720 }}>
            <span className="label-text" style={{ color: 'var(--sage)', letterSpacing: '0.32em', fontSize: 10 }}>What this gives a design program</span>
            <p className="font-editorial" style={{
              fontSize: 13.5, lineHeight: 1.5, color: 'var(--parchment)',
              marginTop: 6, textWrap: 'pretty', fontStyle: 'italic',
            }}>
              A teachable sequence — not a grid of thumbnails — from the first moment a woman&rsquo;s body was dressed for sport to the moment an algorithm designs her kit.
            </p>
          </div>
          <div style={{ textAlign: 'right' }}>
            <span className="font-display" style={{
              fontSize: 48, color: 'var(--gold)', lineHeight: 1,
              letterSpacing: '-0.02em', fontStyle: 'italic',
            }}>
              100
            </span>
            <div className="label-text" style={{ color: 'var(--taupe)', marginTop: 4, fontSize: 10 }}>
              years · one archive
            </div>
          </div>
        </div>
      </div>
    </ActFrame>
  );
}

function ActCenturyInflections({ index, total, act }) {
  return (
    <ScrollBeats beats={1} bg="var(--petrol)">
      <ActCenturyInflectionsInner index={index} total={total} act={act} />
    </ScrollBeats>
  );
}

window.ActCenturyInflections = ActCenturyInflections;