// Act X — THE HEIRLOOM
// God-mode Mood pattern, 5 beats. Photo→twin cross-fades drive the punctum.
//   b0  Augusta sepia wedding photograph full-bleed
//   b1  Cross-fade to Augusta CLO3D digital twin (wall label appears)
//   b2  Cross-fade to Lubov sepia wedding photograph
//   b3  Cross-fade to Lubov CLO3D digital twin (wall label appears)
//   b4  Closing pull quote: "the archive your grandmother can explain"
//
// Pattern: full-bleed image stack, opacity scrubbed by useBeatProgress.
// Wall labels float bottom-right; closing line takes center on the final beat.
// See HANDOFF/2026-04-28-godmode-redesign-design.md.

const ARCHIVE_GRADE = 'sepia(0.28) saturate(0.78) contrast(1.06) brightness(0.96)';
const TWIN_GRADE    = 'sepia(0.06) saturate(0.95) contrast(1.05) brightness(1.02)';
const fill = { position: 'absolute', inset: 0, width: '100%', height: '100%' };
// Contained plate — Svet flagged the full-bleed wedding photos as "huge."
// Now framed at ~42% width × ~76% height of the act stage, centered on the
// left, with the editorial column to the right. Petrol field surrounds.
const PLATE_STYLE = {
  position: 'absolute',
  top: '10%', left: '6%', width: '42%', height: '78%',
  zIndex: 0,
  overflow: 'hidden',
  border: '1px solid rgba(143,166,143,0.18)',
  boxShadow: '0 30px 60px rgba(0,0,0,0.5)',
};
// Editorial column on the right — wall labels + headlines float here.
const COLUMN_STYLE = {
  position: 'absolute',
  top: '12%', left: '54%', right: '6%', height: '76%',
  zIndex: 7,
  display: 'flex', flexDirection: 'column',
  justifyContent: 'center',
};

function ActHeirloomInner({ index, total, act }) {
  // Beat reveal progresses (0..1 each, scrubbed by scroll)
  const p0 = useBeatProgress(0);
  const p1 = useBeatProgress(1);
  const p2 = useBeatProgress(2);
  const p3 = useBeatProgress(3);
  const p4 = useBeatProgress(4);

  // Image-layer opacities — stacked, only one image is "primary" at any time.
  const augustaPhotoOp = Math.max(0, 1 - p2);
  const augustaDressOp = Math.max(0, p1 * (1 - p2));
  const lubovPhotoOp   = Math.max(0, p2 * (1 - p3));
  const lubovDressOp   = Math.max(0, p3);
  const scrimOp        = p4 * 0.78;

  // Chrome / overlay opacities
  const kickerOp        = p0;
  const augustaLabelOp  = Math.max(0, p1 * (1 - Math.min(1, p2 * 1.6)));
  const lubovLabelOp    = Math.max(0, p3 * (1 - p4));
  const pullquoteOp     = p4;

  // Subtle Ken-burns scale on each beat — gives the "camera move" feel
  const augustaPhotoScale = 1.02 + p1 * 0.04;       // 1.02 → 1.06 over Beat 1
  const augustaDressScale = 1.00 + p1 * 0.03;
  const lubovPhotoScale   = 1.02 + p3 * 0.04;
  const lubovDressScale   = 1.00 + p3 * 0.03;

  return (
    <ActFrame act={act} index={index} total={total} bg="var(--petrol-deep)" bleed noGrain>

      {/* CONTAINED IMAGE PLATE ── z:0 */}
      <div style={PLATE_STYLE}>
        {/* Augusta photo */}
        <img
          src="assets/augusta-1960-photo.webp"
          alt="Augusta Shalumova wedding photograph, Leningrad 1960"
          style={{
            ...fill, objectFit: 'cover', objectPosition: 'center 35%',
            filter: ARCHIVE_GRADE,
            opacity: augustaPhotoOp,
            transform: `scale(${augustaPhotoScale})`,
            transition: 'opacity 0.5s ease, transform 1.4s cubic-bezier(0.22,1,0.36,1)',
          }}
        />
        {/* Augusta digital twin — vitrine treatment with gradient backdrop */}
        <div style={{
          ...fill,
          background: 'linear-gradient(180deg, rgba(114,145,232,0.16) 0%, rgba(0,24,37,0.96) 95%)',
          opacity: augustaDressOp,
          transition: 'opacity 0.5s ease',
        }}>
          <img
            src="assets/augusta-1960-dress.webp"
            alt="Augusta dress, CLO3D digital reconstruction"
            style={{
              width: '100%', height: '100%',
              objectFit: 'contain',
              padding: '4% 12%',
              filter: TWIN_GRADE,
              transform: `scale(${augustaDressScale})`,
              transition: 'transform 1.4s cubic-bezier(0.22,1,0.36,1)',
            }}
          />
        </div>
        {/* Lubov photo */}
        <img
          src="assets/lubov-1970-photo.webp"
          alt="Lubov Shalumova wedding photograph, Kyiv 1970"
          style={{
            ...fill, objectFit: 'cover', objectPosition: 'center 30%',
            filter: ARCHIVE_GRADE,
            opacity: lubovPhotoOp,
            transform: `scale(${lubovPhotoScale})`,
            transition: 'opacity 0.5s ease, transform 1.4s cubic-bezier(0.22,1,0.36,1)',
          }}
        />
        {/* Lubov digital twin */}
        <div style={{
          ...fill,
          background: 'linear-gradient(180deg, rgba(114,145,232,0.16) 0%, rgba(0,24,37,0.96) 95%)',
          opacity: lubovDressOp,
          transition: 'opacity 0.5s ease',
        }}>
          <img
            src="assets/lubov-1970-dress.webp"
            alt="Lubov dress, CLO3D digital reconstruction"
            style={{
              width: '100%', height: '100%',
              objectFit: 'contain',
              padding: '4% 12%',
              filter: TWIN_GRADE,
              transform: `scale(${lubovDressScale})`,
              transition: 'transform 1.4s cubic-bezier(0.22,1,0.36,1)',
            }}
          />
        </div>
      </div>

      {/* CLOSING PARCHMENT SCRIM ── z:2 */}
      <div style={{
        ...fill, zIndex: 2,
        background: 'var(--petrol-deep)',
        opacity: scrimOp,
        transition: 'opacity 0.6s ease',
        pointerEvents: 'none',
      }} />

      {/* EDITORIAL COLUMN — right side. Two wall labels stack here, only one
          visible at a time per beat. Whole column fades out on Beat 4 so
          the closing pull quote can take the stage without dual-headline
          overlap. */}
      <div style={{ ...COLUMN_STYLE, opacity: 1 - p4 }}>
        {/* Persistent column header — kicker + headline visible on beats 0–3 */}
        <div style={{
          opacity: kickerOp,
          transform: `translateY(${(1-kickerOp)*8}px)`,
          transition: 'opacity 0.7s ease, transform 0.7s ease',
          marginBottom: 24,
        }}>
          <div className="label-text" style={{
            color: 'var(--sage)', letterSpacing: '0.32em', fontSize: 11,
          }}>Shalumova Archive · The General Tier</div>
          <h2 className="font-display" style={{
            margin: '14px 0 0',
            fontSize: 'clamp(36px, 3.8vw, 60px)',
            lineHeight: 1.0, letterSpacing: '-0.02em',
            color: 'var(--parchment)', textTransform: 'uppercase',
          }}>
            The archive <span style={{ color: 'var(--sage)', fontStyle: 'italic' }}>your grandmother</span> can explain.
          </h2>
        </div>

        {/* Wall label slot — both labels share this anchor; opacity drives
            which is visible at the current beat. */}
        <div style={{ position: 'relative', minHeight: 200 }}>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            opacity: augustaLabelOp,
            transform: `translateY(${(1-augustaLabelOp)*14}px)`,
            transition: 'opacity 0.7s ease, transform 0.7s ease',
            padding: '20px 24px',
            background: 'rgba(0,24,37,0.55)',
            borderLeft: '2px solid var(--sage)',
            backdropFilter: 'blur(4px)',
          }}>
            <WallLabel
              kicker="Augusta · Leningrad · 1960"
              body="Cream rayon, hand-set buttonholes. Sewn from rationed fabric on a hand-cranked Singer — the archive no museum conservator has catalogued."
              maxWidth="100%"
            />
          </div>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0,
            opacity: lubovLabelOp,
            transform: `translateY(${(1-lubovLabelOp)*14}px)`,
            transition: 'opacity 0.7s ease, transform 0.7s ease',
            padding: '20px 24px',
            background: 'rgba(0,24,37,0.55)',
            borderLeft: '2px solid var(--sage)',
            backdropFilter: 'blur(4px)',
          }}>
            <WallLabel
              kicker="Lubov · Kyiv · 1970"
              body="White rayon crepe, embroidered yoke. Sewn by the bride's mother in the weeks before the registry visit."
              maxWidth="100%"
            />
          </div>
        </div>
      </div>

      {/* CLOSING PULL QUOTE ── z:8 */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        opacity: pullquoteOp,
        transform: `translateY(${(1-pullquoteOp)*18}px)`,
        transition: 'opacity 0.8s ease, transform 0.8s ease',
        zIndex: 8,
        padding: '0 80px',
        pointerEvents: 'none',
      }}>
        <div style={{ textAlign: 'center', maxWidth: 1100 }}>
          <div className="label-text" style={{
            color: 'var(--sage)',
            letterSpacing: '0.36em',
            marginBottom: 28,
            fontSize: 11,
          }}>The General Tier · $9.99 / mo</div>
          <PullQuote align="center" size="clamp(48px, 5.6vw, 92px)">
            The archive <span style={{ color: 'var(--sage)' }}>your grandmother</span> can explain.
          </PullQuote>
          <div className="font-editorial" style={{
            marginTop: 28,
            fontSize: 17,
            lineHeight: 1.55,
            color: 'var(--parchment-dim)',
            fontStyle: 'italic',
            maxWidth: 720,
            margin: '28px auto 0',
            textWrap: 'pretty',
          }}>
            Couture belongs in the Pro tier. Heirlooms belong in the General tier.
            Together they are a complete curriculum.
          </div>
        </div>
      </div>

    </ActFrame>
  );
}

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

window.ActHeirloom = ActHeirloom;