// Act XIII — THANK YOU
// Final stop. Pure curtain. No data, no pitch — just the lockup, the tagline,
// and the signature. Reveals in three beats: the THANK YOU plate, the lockup
// itself, and the signature line. Reads as a cinematic end card.

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

function ActThankYouInner({ act, index, total }) {
  // Reduced from 5 beats to 3 (2026-04-29) — Doug click economy pass.
  const b0 = useBeatProgress(0); // THANK YOU + gold seam
  const b1 = useBeatProgress(1); // VINTA | verse lockup
  const b2 = useBeatProgress(2); // tagline + signature + credits + QR
  const e0 = 1 - Math.pow(1 - b0, 3);
  const e1 = 1 - Math.pow(1 - b1, 3);
  const e2 = 1 - Math.pow(1 - b2, 3);

  return (
    <ActFrame act={act} index={index} total={total} bg="var(--petrol-deep)">
      <ActSeam roman={act.roman} />
      <div
        style={{
          position: 'relative',
          minHeight: 'calc(100vh - 160px)',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          textAlign: 'center',
          paddingTop: 40,
          paddingBottom: 40,
        }}
      >
        {/* soft radial warmth rising from below */}
        <div
          aria-hidden
          style={{
            position: 'absolute',
            inset: 0,
            background:
              'radial-gradient(ellipse 60% 90% at 50% 100%, rgba(201,168,76,0.16), transparent 68%)',
            pointerEvents: 'none',
            opacity: e0 * 0.9,
          }}
        />

        {/* Beat 0 — THANK YOU header + gold seam */}
        <div
          style={{
            opacity: e0,
            transform: `translateY(${(1 - e0) * 20}px)`,
          }}
        >
          <div
            className="label-text"
            style={{
              color: 'var(--sage)',
              letterSpacing: '0.5em',
              fontSize: 12,
            }}
          >
            Thank you
          </div>
          <div
            style={{
              width: 2,
              height: 64,
              background: 'var(--gold)',
              boxShadow: '0 0 16px rgba(201,168,76,0.55)',
              margin: '32px auto 0',
              transform: `scaleY(${e0})`,
              transformOrigin: 'top',
            }}
          />
        </div>

        {/* Beat 1 — the VINTA | verse lockup */}
        <div
          style={{
            marginTop: 40,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            gap: 'clamp(10px, 1.2vw, 20px)',
            lineHeight: 0.88,
          }}
        >
          <span
            className="font-display"
            style={{
              fontSize: 'clamp(80px, 13vw, 220px)',
              color: 'var(--parchment)',
              letterSpacing: '-0.015em',
              opacity: e1,
              transform: `translateY(${(1 - e1) * 30}px)`,
            }}
          >
            VINTA
          </span>
          <span
            style={{
              width: 2,
              height: 'clamp(60px, 10vw, 160px)',
              background: 'var(--gold)',
              opacity: e1 * 0.85,
              boxShadow: '0 0 20px rgba(201,168,76,0.55)',
            }}
          />
          <span
            className="font-display"
            style={{
              fontSize: 'clamp(80px, 13vw, 220px)',
              color: 'var(--sage)',
              fontStyle: 'italic',
              letterSpacing: '-0.02em',
              opacity: e1,
              transform: `translateY(${(1 - e1) * 30}px)`,
            }}
          >
            verse
          </span>
        </div>

        {/* Beat 2 — tagline + signature */}
        <div
          style={{
            marginTop: 36,
            opacity: e2,
            transform: `translateY(${(1 - e2) * 18}px)`,
            maxWidth: 760,
          }}
        >
          <p
            className="font-editorial"
            style={{
              fontSize: 'clamp(18px, 1.6vw, 22px)',
              color: 'var(--parchment-dim)',
              fontStyle: 'italic',
              lineHeight: 1.55,
              textWrap: 'pretty',
              margin: 0,
            }}
          >
            Explore Fashion Past. Define Fashion Future.
          </p>
          <div
            className="label-text"
            style={{
              color: 'var(--taupe)',
              marginTop: 36,
              letterSpacing: '0.34em',
            }}
          >
            Svetlana Shalumova · Fashion Institute of Technology · May 5, 2026
          </div>
          <div
            style={{
              marginTop: 32,
              display: 'flex',
              gap: 40,
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <span className="label-text" style={{ color: 'var(--sage)' }}>
              svetlana@vintaverse.com
            </span>
            <span style={{ color: 'var(--taupe)', opacity: 0.5 }}>·</span>
            <span className="label-text" style={{ color: 'var(--sage)' }}>
              Questions welcome
            </span>
          </div>

          {/* With thanks — subtle credit block. Faculty Research Space at FIT
              for the room + research environment; Douglas Goldstein for the
              technical direction on this scroll-deck. */}
          <div style={{
            marginTop: 36,
            paddingTop: 22,
            borderTop: '1px solid rgba(143,166,143,0.22)',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: 8,
          }}>
            <span className="label-text" style={{
              color: 'var(--gold)',
              letterSpacing: '0.42em',
              fontSize: 10,
            }}>
              With gratitude
            </span>
            <div className="font-editorial" style={{
              fontSize: 14,
              fontStyle: 'italic',
              color: 'var(--parchment-dim)',
              letterSpacing: '0.02em',
              lineHeight: 1.55,
              textWrap: 'pretty',
            }}>
              Faculty Research Space, FIT
              <span style={{ color: 'var(--taupe)', margin: '0 12px' }}>·</span>
              Douglas Goldstein, technical direction
            </div>
          </div>

          {/* QR — take-the-deck-with-you. Points at the live deployment so a
              committee member can scan it from the room and walk away with
              the scroll-deck on their phone. */}
          <div style={{
            marginTop: 44,
            display: 'flex', justifyContent: 'center',
            opacity: e2,
            transform: `translateY(${(1 - e2) * 16}px)`,
          }}>
            {window.QRCard ? (
              <window.QRCard
                url="https://vintaverse-presentation.vercel.app"
                kicker="Scan · Take the deck"
                label="vintaverse-presentation.vercel.app"
                size={132}
              />
            ) : null}
          </div>
        </div>

        {/* Decorative corner wings — quarter-ruled marks that bracket the lockup */}
        <div
          style={{
            position: 'absolute',
            top: '18%',
            left: '18%',
            width: 64,
            height: 64,
            borderTop: '1px solid rgba(201,168,76,0.45)',
            borderLeft: '1px solid rgba(201,168,76,0.45)',
            opacity: e1,
          }}
        />
        <div
          style={{
            position: 'absolute',
            bottom: '18%',
            right: '18%',
            width: 64,
            height: 64,
            borderBottom: '1px solid rgba(201,168,76,0.45)',
            borderRight: '1px solid rgba(201,168,76,0.45)',
            opacity: e1,
          }}
        />
      </div>
    </ActFrame>
  );
}

function ActThankYou({ index, total, act }) {
  return (
    <ScrollBeats beats={3} bg="var(--petrol-deep)">
      <ActThankYouInner act={act} index={index} total={total} />
    </ScrollBeats>
  );
}

window.ActThankYou = ActThankYou;
