// Act I — ENTRANCE
// Layout matched to Svetlana's slide 1 (Keynote, 2026.2 deck):
//   - Top-left dressform circle mark
//   - Hero italic gold sub-headline ("Explore Fashion Past. / Define Fashion Future.")
//   - Center-left VINTAVERSE wordmark — VINTA italic + VERSE regular, in Jost (Futura proxy), white
//   - Chartreuse dash + credit block (CAPSTONE / GFM / FIT / Group 1 / Svetlana / May 5th 2026)
//   - Right composition — hand · phone · spinning-dress video (3 separate layered components)
//
// The hand+phone+video composite is NOT in the exported .pptx — Svetlana built
// it as separate layered components in Keynote. Until those source PNGs are
// shared, the right side uses our `hero-tennis-evolution.webp` (the tennis-dress
// turntable GIF from slide 9) inside a CSS phone frame as a placeholder.
// Replace `HERO_PHONE_IMG` and the rendered frame when the assets land.

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

// VALIDATE: hand+phone+video composite (Svetlana, slide 1, separate layered components)
// When she shares: drop the hand PNG into assets/hand-phone.png and the dress
// video/GIF into assets/hero-dress.webp. The PhoneHero component below renders
// just the phone+gif until then.
const HERO_PHONE_IMG = 'assets/hero-tennis-evolution.webp';

function PhoneHero() {
  return (
    <div
      style={{
        position: 'relative',
        width: 'min(380px, 34vw)',
        aspectRatio: '9 / 19',
        margin: '0 auto',
        filter: 'drop-shadow(0 50px 60px rgba(0,0,0,0.55))',
      }}
    >
      {/* Phone bezel */}
      <div
        style={{
          position: 'absolute', inset: 0,
          borderRadius: '40px',
          background: 'linear-gradient(160deg, #14151c 0%, #2a2c38 60%, #14151c 100%)',
          padding: '11px 10px',
          border: '1px solid rgba(255,255,255,0.08)',
        }}
      >
        {/* Screen */}
        <div
          style={{
            position: 'relative',
            width: '100%', height: '100%',
            borderRadius: '30px',
            overflow: 'hidden',
            background: '#7290e8',
          }}
        >
          <img
            src={HERO_PHONE_IMG}
            alt="Spinning dress turntable inside the phone"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover',
              objectPosition: 'center 32%',
              transform: 'scale(1.18)',
            }}
          />
          {/* Subtle screen sheen */}
          <div aria-hidden style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.18) 100%)',
            pointerEvents: 'none',
          }} />
        </div>
        {/* Notch */}
        <div aria-hidden style={{
          position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)',
          width: 92, height: 22,
          background: '#0a0b10', borderRadius: '12px',
          boxShadow: 'inset 0 0 6px rgba(0,0,0,0.7)',
        }} />
      </div>
      {/* Side buttons */}
      <div aria-hidden style={{ position: 'absolute', right: -3, top: '32%', width: 3, height: 60, background: '#0d0e13', borderRadius: 2 }} />
      <div aria-hidden style={{ position: 'absolute', left: -3, top: '24%', width: 3, height: 30, background: '#0d0e13', borderRadius: 2 }} />
      <div aria-hidden style={{ position: 'absolute', left: -3, top: '34%', width: 3, height: 60, background: '#0d0e13', borderRadius: 2 }} />
      {/* Placeholder marker — hidden until hand+phone source assets land. */}
    </div>
  );
}

function ActEntranceInner({ index, total, act }) {
  // Reduced from 3 beats to 1 (2026-04-29 round 2) — the entrance content
  // (wordmark + tagline + credit) is at 0.92 opacity from the moment the
  // act lands, so the multi-beat reveal was just adding clicker presses.
  // beats=1 means landing on Slide I is the rest position; one click
  // settles it to full opacity, the next advances to Slide II.
  const b0 = useBeatProgress(0);
  // Both eased values share the same progress now — visual reveal is a
  // single eased fade rather than two staggered beats.
  const e0 = Math.max(0.92, 1 - Math.pow(1 - b0, 3));
  const e1 = e0;

  return (
    <ActFrame act={act} index={index} total={total} bg="var(--petrol-deep)">
      {/* Subtle off-axis chartreuse + sky-blue ambient — much quieter than before */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background:
          'radial-gradient(ellipse 38% 38% at 22% 30%, rgba(201,168,76,0.07), transparent 70%),' +
          'radial-gradient(ellipse 50% 50% at 80% 75%, rgba(114,145,232,0.08), transparent 70%)',
        pointerEvents: 'none',
        zIndex: 1,
      }} />

      {/* Top-left dressform mark (the tagline used to live top-right but it
          was small and crowded the phone — moved to a hero sub-headline under
          the wordmark below). */}
      <div style={{
        position: 'absolute', top: 36, left: 56,
        zIndex: 5,
      }}>
        <div style={{
          width: 96, height: 96, borderRadius: '50%',
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.18)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <img
            src="assets/dressform-logo.png"
            alt="VintaVerse dressform mark"
            style={{ width: '74%', height: '74%', objectFit: 'contain' }}
          />
        </div>
      </div>

      <div style={{
        position: 'relative',
        zIndex: 4,
        display: 'grid',
        gridTemplateColumns: '1.15fr 0.85fr',
        gap: 60,
        alignItems: 'center',
        minHeight: 'calc(100vh - 160px)',
        paddingTop: 60,
      }}>
        {/* LEFT — wordmark + credit block */}
        <div style={{
          display: 'flex', flexDirection: 'column', gap: 26,
          opacity: e1,
          transform: `translateY(${(1 - e1) * 14}px)`,
        }}>
          {/* Wordmark — VINTA italic + VERSE regular, all white, Jost */}
          <h1
            className="font-editorial"
            style={{
              margin: 0,
              fontSize: 'clamp(64px, 7.6vw, 124px)',
              lineHeight: 0.9, letterSpacing: '-0.005em',
              color: 'var(--parchment)',
              textTransform: 'uppercase',
              fontWeight: 700,
            }}
          >
            <span style={{
              fontStyle: 'italic',
              fontWeight: 500,
              transform: 'skewX(-3deg)',
              display: 'inline-block',
              marginRight: '0.06em',
              color: 'var(--accent-key)',
            }}>Vinta</span><span style={{ fontWeight: 800 }}>verse</span>
          </h1>

          {/* Tagline — promoted from a tiny top-right caption to a proper
              hero sub-headline directly under the wordmark. */}
          <div className="font-editorial" style={{
            fontStyle: 'italic',
            fontSize: 'clamp(24px, 2.2vw, 38px)',
            lineHeight: 1.25,
            color: 'var(--accent-key)',
            letterSpacing: '-0.005em',
            opacity: e0,
            marginTop: -4,
            textWrap: 'balance',
            maxWidth: '14ch',
          }}>
            <div>Explore Fashion Past.</div>
            <div>Define Fashion Future.</div>
          </div>

          {/* Gold dash separator */}
          <div style={{
            width: 64, height: 3,
            background: 'var(--gold)',
            marginTop: 4,
          }} />

          {/* Credit block — capstone meta */}
          <div style={{
            display: 'flex', flexDirection: 'column', gap: 18,
          }}>
            <div className="font-ui" style={{
              fontFamily: 'var(--font-ui)',
              fontSize: 'clamp(11px, 0.95vw, 13px)',
              letterSpacing: '0.18em',
              color: 'var(--parchment)',
              lineHeight: 1.7,
              textTransform: 'uppercase',
            }}>
              <div>Capstone</div>
              <div>Global Fashion Management</div>
              <div>Fashion Institute of Technology, SUNY</div>
            </div>
            <div className="font-ui" style={{
              fontFamily: 'var(--font-ui)',
              fontSize: 'clamp(11px, 0.95vw, 13px)',
              letterSpacing: '0.18em',
              color: 'var(--parchment-dim)',
              lineHeight: 1.7,
              textTransform: 'uppercase',
            }}>
              <div>Group 1</div>
              <div>Svetlana Shalumova</div>
              <div>May 5<sup style={{ fontSize: '0.6em' }}>th</sup> 2026</div>
            </div>
          </div>

          {/* Scroll prompt removed 2026-04-29 — was a filler beat with no
              real content. The deck already has full clicker chrome to
              indicate "press to advance"; the prompt was redundant. */}
        </div>

        {/* RIGHT — phone hero placeholder */}
        <div style={{
          position: 'relative',
          opacity: e0,
        }}>
          <PhoneHero />
        </div>
      </div>

      <style>{`
        @keyframes bounceDown {
          0%, 100% { transform: translateY(0); opacity: 0.7; }
          50%      { transform: translateY(6px); opacity: 1; }
        }
      `}</style>
    </ActFrame>
  );
}

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

window.ActEntrance = ActEntrance;