// Act IVb — THE ARGUMENT
// The object has been revealed. Now: why it mattered. A split screen —
// thumbnail garment (small, reference-sized) on the left, editorial body +
// construction ledger on the right. The act's job is to make the presenter's
// "and here's why this one dress was the century-hinge" claim land.

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

function LedgerRow({ label, value, i, visible }) {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '150px 1fr',
        gap: 22,
        padding: '13px 0',
        borderBottom: '1px dotted rgba(143,166,143,0.22)',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateX(0)' : 'translateX(18px)',
        transition: `all 0.9s ease ${0.4 + i * 0.08}s`,
      }}
    >
      <span className="label-text" style={{ color: 'var(--taupe)' }}>{label}</span>
      <span className="font-editorial" style={{ fontSize: 14.5, color: 'var(--parchment)', lineHeight: 1.5 }}>{value}</span>
    </div>
  );
}

function Consequence({ year, body, i, visible }) {
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '90px 1fr',
        gap: 18,
        padding: '14px 0',
        borderTop: '1px solid rgba(143,166,143,0.18)',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : 'translateY(10px)',
        transition: `all 0.9s ease ${0.9 + i * 0.1}s`,
      }}
    >
      <span className="font-display" style={{ fontSize: 24, color: 'var(--gold)', letterSpacing: '-0.01em' }}>{year}</span>
      <span className="font-editorial" style={{ fontSize: 13.5, color: 'rgba(240,238,233,0.5)', lineHeight: 1.6, fontStyle: 'italic', paddingTop: 3 }}>
        {body}
      </span>
    </div>
  );
}

function ActObjectArgumentInner({ 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: 30 }}>
        {/* Kicker + headline */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32,
          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 argument</span>
            <h2 className="font-display" style={{
              fontSize: 'clamp(44px, 5vw, 72px)',
              lineHeight: 1.02, letterSpacing: '-0.02em',
              color: 'var(--parchment)', margin: '14px 0 0', textTransform: 'uppercase',
            }}>
              Why <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>this</span> dress.
            </h2>
          </div>
          <div style={{ textAlign: 'right', maxWidth: 340 }}>
            <span className="label-text" style={{ color: 'var(--taupe)' }}>Epistemic tag</span>
            <div className="font-editorial" style={{ fontSize: 13, color: 'var(--parchment-dim)', marginTop: 6, fontStyle: 'italic', lineHeight: 1.55 }}>
              Vetted against canonical authorities (Steele, Koda, Troy).
            </div>
          </div>
        </div>

        {/* Body split: thumbnail + editorial left, ledger + consequence right */}
        <div style={{ display: 'grid', gridTemplateColumns: '3fr 4fr', gap: 54, alignItems: 'flex-start' }}>

          {/* Left: reference-sized plate + wall label */}
          <div>
            <div style={{
              position: 'relative',
              aspectRatio: '3 / 4',
              background:
                'radial-gradient(ellipse 60% 60% at 50% 45%, rgba(201,168,76,0.12), transparent 70%),' +
                'linear-gradient(180deg, rgba(7,50,66,0.7), rgba(7,50,66,0.98))',
              border: '1px solid rgba(143,166,143,0.18)',
              overflow: 'hidden',
              opacity: visible ? 1 : 0,
              transform: visible ? 'scale(1)' : 'scale(0.97)',
              transition: 'all 1.4s cubic-bezier(0.16,1,0.3,1) 0.15s',
            }}>
              <div style={{ position: 'absolute', inset: 14, border: '1px solid rgba(143,166,143,0.12)', pointerEvents: 'none' }} />
              <img
                src="assets/lenglen-1920s.png"
                alt="Lenglen tennis dress, thumbnail reference"
                style={{
                  position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain',
                  padding: '30px 16px',
                  filter: 'drop-shadow(0 30px 50px rgba(0,0,0,0.55))',
                }}
              />
              <div style={{ position: 'absolute', bottom: 16, left: 22, display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 8, height: 8, background: 'var(--gold)', display: 'inline-block' }} />
                <span className="label-text" style={{ color: 'var(--parchment-dim)' }}>№ 012 · Patou · 1921</span>
              </div>
            </div>

            <div style={{
              marginTop: 20,
              borderLeft: '2px solid var(--gold)',
              paddingLeft: 18,
              opacity: visible ? 1 : 0,
              transform: visible ? 'translateY(0)' : 'translateY(12px)',
              transition: 'all 1.1s ease 0.4s',
            }}>
              <div className="label-text" style={{ color: 'var(--gold)' }}>Wall label</div>
              <p className="font-editorial" style={{
                fontSize: 15, lineHeight: 1.7, color: 'var(--parchment)',
                marginTop: 10, textWrap: 'pretty',
              }}>
                When Lenglen stepped onto the court in a sleeveless, knee-length pleated dress, she did not merely change tennis fashion — she <span style={{ color: 'var(--gold)' }}>ignited a cultural argument</span>. Silk jersey, previously reserved for lingerie, became the foundational textile of competitive sport.
              </p>
              <p className="font-editorial" style={{
                fontSize: 13.5, lineHeight: 1.7, color: 'rgba(240,238,233,0.72)',
                marginTop: 10, fontStyle: 'italic', textWrap: 'pretty',
              }}>
                Nearly everything in the hundred years that follow is a footnote to this decision.
              </p>
            </div>
          </div>

          {/* Right: ledger + downstream consequence */}
          <div>
            <div style={{
              opacity: visible ? 1 : 0,
              transform: visible ? 'translateY(0)' : 'translateY(12px)',
              transition: 'all 1.1s ease 0.25s',
            }}>
              <span className="label-text" style={{ color: 'var(--sage)' }}>Construction · the technique</span>
              <div style={{ marginTop: 10 }}>
                <LedgerRow label="Silhouette"  value="Sleeveless, drop-waist — 1920s urban cut, adapted for the courtside" i={0} visible={visible} />
                <LedgerRow label="Skirt"       value="Knife-pleated, knee-length — approx. 72 radial folds, hand-set" i={1} visible={visible} />
                <LedgerRow label="Fabric"      value="Silk jersey — first use in competitive sport, 1921" i={2} visible={visible} />
                <LedgerRow label="Accessory"   value="Lenglen headband — silk, orange or amaranth (deep red-magenta), 2–3 inches" i={3} visible={visible} />
                <LedgerRow label="Footwear"    value="Canvas and rubber — first recognizable athletic shoe" i={4} visible={visible} />
                <LedgerRow label="Reference"   value="Maison Patou archive · Paris, 1921" i={5} visible={visible} />
                <LedgerRow label="Reconstruction" value="VintaVerse / CLO3D · 2026" i={6} visible={visible} />
              </div>
            </div>

            <div style={{ marginTop: 40 }}>
              <span className="label-text" style={{ color: 'var(--sage)' }}>Downstream · what this dress authorized</span>
              <div style={{ marginTop: 6 }}>
                <Consequence year="1949" body="Ted Tinling dresses Gertrude Moran in lace-trim underpants at Wimbledon. The All England Club bans him for 33 years."           i={0} visible={visible} />
                <Consequence year="1968" body="Open Era begins. Women's tennis professionalizes. Kit becomes performance-first — a direct inheritance of Lenglen's silk jersey." i={1} visible={visible} />
                <Consequence year="2022" body="Nike's Raducanu kit includes mesh yoke seams that deliberately quote 19th-century corsetry — the hundred-year conversation, still open."       i={2} visible={visible} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </ActFrame>
  );
}

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

window.ActObjectArgument = ActObjectArgument;