/* global React, Kicker, Chip, PlayoffLockup */
const { useState: useStateLS, useEffect: useEffectLS, useRef: useRefLS } = React;

/* ==========================================================
   LANDING — shared primitives (used by all three variations)
   ========================================================== */

/* ----------------------------------------------------------
   WaitlistForm — email only, POSTs to /api/waitlist
   The endpoint is a stub the engineer will implement; it
   should forward to Resend Contacts API.
   ---------------------------------------------------------- */
const WaitlistForm = ({ variant = 'dark', accent = 'var(--pink)', placeholder = 'your@email.com', cta = 'Request beta invite' }) => {
  const [email, setEmail] = useStateLS('');
  const [websiteTrap, setWebsiteTrap] = useStateLS('');
  const [status, setStatus] = useStateLS('idle'); // idle | loading | success | error
  const [msg, setMsg] = useStateLS('');

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email || !/.+@.+\..+/.test(email)) {
      setStatus('error'); setMsg('That email looks off.');
      return;
    }
    setStatus('loading');
    try {
      const res = await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email,
          source: 'landing',
          website: websiteTrap,
          // PostHog cross-surface identity — server-side capture maps
          // to the same anonymous person who scrolled the landing page.
          posthogDistinctId: (window.PlayoffTrack && window.PlayoffTrack.distinctId && window.PlayoffTrack.distinctId()) || null,
        }),
      });
      // 2026-05-13: removed the "prototype fallback" that pretended
      // every error was a success. A Supabase pause silently broke 2
      // days of waitlist signups because the form showed "You're on
      // the list." even on 500. Now: only the documented success path
      // {ok:true} maps to the success UI. Every other branch (400, 429,
      // 500, network failure) surfaces an error the user can act on.
      let payload = null;
      try { payload = await res.json(); } catch { /* non-JSON body */ }
      if (res.ok && payload && payload.ok) {
        setStatus('success'); setMsg('You\'re on the list.');
        return;
      }
      // Map known error codes to user-readable copy. Anything else
      // becomes a generic try-again so the user retries instead of
      // walking away believing it worked.
      const code = (payload && payload.error) || '';
      if (code === 'invalid_email') {
        setStatus('error'); setMsg('That email looks off.');
      } else if (code === 'disposable_email') {
        setStatus('error'); setMsg('Use a permanent address — throwaway email blocked.');
      } else if (res.status === 429 || code === 'rate_limited') {
        setStatus('error'); setMsg('Too many tries — wait a minute and retry.');
      } else {
        // 500 / 503 / unknown — server-side problem. Don't lie.
        setStatus('error'); setMsg('Something broke on our end. Try again in a minute.');
      }
    } catch (err) {
      // Network failure — server unreachable, CORS, offline. Surface it.
      setStatus('error'); setMsg('Couldn\'t reach the server. Check your connection and retry.');
    }
  };

  const isDark = variant === 'dark';
  const inputBg = isDark ? 'var(--ink-2)' : 'rgba(10,11,16,0.06)';
  const inputBd = isDark ? 'var(--line)' : 'rgba(10,11,16,0.15)';
  const inputFg = isDark ? 'var(--paper)' : 'var(--ink)';
  const placeholderFg = isDark ? 'var(--smoke)' : 'rgba(10,11,16,0.4)';

  if (status === 'success') {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14,
        padding: '18px 22px',
        border: `1px solid ${accent}`,
        borderRadius: 'var(--r-md)',
        background: `color-mix(in oklab, ${accent} 8%, transparent)`,
        color: inputFg,
        maxWidth: 520,
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: 999,
          background: accent, color: 'var(--ink)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8.5 L6.5 12 L13 4.5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="square"/></svg>
        </div>
        <div>
          <div style={{ fontWeight: 600, fontSize: 16, letterSpacing: '-0.01em' }}>{msg}</div>
          <div style={{ fontSize: 13, color: isDark ? 'var(--fog)' : 'rgba(10,11,16,0.5)', marginTop: 2 }}>
            We'll email when TestFlight opens up.
          </div>
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} style={{
      display: 'flex', gap: 10, flexWrap: 'wrap', maxWidth: 560,
    }}>
      <style>{`
        .wl-input::placeholder { color: ${placeholderFg}; }
        .wl-input:focus { outline: none; border-color: ${accent}; box-shadow: 0 0 0 3px color-mix(in oklab, ${accent} 25%, transparent); }
      `}</style>
      <div aria-hidden="true" style={{
        position: 'absolute', left: '-9999px', width: 1, height: 1,
        overflow: 'hidden', opacity: 0, pointerEvents: 'none',
      }}>
        <label>Leave this blank
          <input
            type="text" name="website" tabIndex={-1} autoComplete="off"
            value={websiteTrap}
            onChange={(e) => setWebsiteTrap(e.target.value)}
          />
        </label>
      </div>
      <input
        className="wl-input"
        type="email"
        inputMode="email"
        autoComplete="email"
        placeholder={placeholder}
        value={email}
        onChange={(e) => { setEmail(e.target.value); if (status === 'error') setStatus('idle'); }}
        disabled={status === 'loading'}
        style={{
          flex: '1 1 260px', minWidth: 0,
          padding: '16px 18px',
          fontFamily: 'var(--font-body)', fontSize: 16,
          background: inputBg, border: `1px solid ${inputBd}`,
          borderRadius: 'var(--r-md)', color: inputFg,
          transition: 'border-color 150ms ease, box-shadow 150ms ease',
        }}
      />
      <button type="submit" disabled={status === 'loading'} style={{
        padding: '16px 24px',
        fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 600,
        letterSpacing: '-0.005em',
        background: accent, color: 'var(--ink)',
        border: 'none', borderRadius: 'var(--r-md)',
        cursor: status === 'loading' ? 'wait' : 'pointer',
        whiteSpace: 'nowrap',
        transition: 'transform 120ms ease, filter 120ms ease',
      }}
        onMouseEnter={(e) => e.currentTarget.style.filter = 'brightness(1.08)'}
        onMouseLeave={(e) => e.currentTarget.style.filter = 'none'}
      >
        {status === 'loading' ? 'Sending…' : cta}
      </button>
      {status === 'error' && (
        <div style={{ flexBasis: '100%', fontSize: 13, color: accent, marginTop: 2 }}>{msg}</div>
      )}
    </form>
  );
};

/* ----------------------------------------------------------
   FAQ — accordion
   ---------------------------------------------------------- */
const FAQ_ITEMS = [
  {
    q: 'Is it free?',
    a: 'Yes during the beta. We\'ll announce pricing before launch — the plan is free for small groups, paid for hosts one-time.',
  },
  {
    q: 'How does it work?',
    a: 'The TV shows a four-letter room code. Players join from any phone or device. Each round you get a prompt — pick a clip, a GIF or/and write a caption, lock it in. Everyone votes for their favorite, laughs land on the big screen, and the leaderboard shifts. Play 5, 10, 15, or 25 rounds — or run Endless until someone calls it. Remote play available for friends not in your room, full experience anywhere.',
  },
  {
    q: 'What game modes are there?',
    a: 'Normal Reel is the classic flow — GIF or clip plus a caption against a written prompt. Roast Mode swaps the prompt for a photo: players upload their own (your friends, your dog, the host\'s baby pictures) and everyone takes turns roasting it. Pick the heat — Family-safe, Standard, Spicy, or Wild — before you start. We never store or keep your photos.',
  },
  {
    q: 'Do I need an Apple TV?',
    a: 'For now, yes — we ship first on tvOS. Web hosting goes live at launch, and Steam is coming soon after. Tell us what you\'d use and we\'ll push it up.',
  },
  {
    q: 'What do I need on my phone?',
    a: 'Nothing to install. Scan the QR code or enter the room on any phone browser, type the room code, pick a name, play. That\'s it.',
  },
  {
    q: 'Can someone play remotely?',
    a: 'Yes. When you join from your phone, pick "Just on my phone" and the show plays right there with audio — reveals, scores, host narration, all of it. Mix in-room and remote players in the same game; the host doesn\'t need to configure anything.',
  },
  {
    q: 'How many players?',
    a: 'Three to ten per room. Sweet spot is five-plus — enough chaos, not so much you forget whose turn it is. Audience Mode adds up to 25 spectators on top during beta; we\'ll lift that as we scale.',
  },
  {
    q: 'Is my phone being tracked?',
    a: 'No. We store your room code and your submissions for the length of the game. No account, no contacts, no ads.',
  },
];

const FAQ = ({ accent = 'var(--pink)', dark = true }) => {
  const [open, setOpen] = useStateLS(0);
  const fg = dark ? 'var(--paper)' : 'var(--ink)';
  const sub = dark ? 'var(--fog)' : 'rgba(10,11,16,0.6)';
  const line = dark ? 'var(--line)' : 'rgba(10,11,16,0.12)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      {FAQ_ITEMS.map((item, i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ borderTop: `1px solid ${line}` }}>
            <button
              onClick={() => setOpen(isOpen ? -1 : i)}
              style={{
                width: '100%', background: 'transparent', border: 'none',
                padding: '28px 0', textAlign: 'left', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
                color: fg, fontFamily: 'var(--font-display)',
              }}
            >
              <span style={{
                fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em',
              }}>{item.q}</span>
              <span style={{
                width: 28, height: 28, borderRadius: 999,
                border: `1px solid ${line}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: isOpen ? accent : sub, flexShrink: 0,
                transition: 'transform 200ms ease, color 150ms ease',
                transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
              }}>
                <svg width="12" height="12" viewBox="0 0 12 12"><path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg>
              </span>
            </button>
            <div style={{
              display: 'grid',
              gridTemplateRows: isOpen ? '1fr' : '0fr',
              transition: 'grid-template-rows 300ms ease, padding 200ms ease',
              paddingBottom: isOpen ? 24 : 0,
            }}>
              {/* grid-template-rows 0fr ↔ 1fr auto-fits content height
                  regardless of answer length. Inner wrapper needs
                  overflow:hidden + minHeight:0 so the implicit minimum
                  doesn't override the row track during the transition. */}
              <div style={{ overflow: 'hidden', minHeight: 0 }}>
                <div style={{
                  fontSize: 17, lineHeight: 1.55, color: sub,
                  maxWidth: 680, textWrap: 'pretty',
                }}>{item.a}</div>
              </div>
            </div>
          </div>
        );
      })}
      <div style={{ borderTop: `1px solid ${line}` }}/>
    </div>
  );
};

/* ----------------------------------------------------------
   VideoSlot — placeholder for product preview videos
   ---------------------------------------------------------- */
const VideoSlot = ({ label = 'App preview', aspect = '16/9', accent = 'var(--pink)', dark = true, src = null, poster = null }) => (
  <div style={{
    aspectRatio: aspect, width: '100%',
    background: dark ? 'var(--ink-2)' : 'rgba(10,11,16,0.05)',
    border: `1px dashed ${dark ? 'var(--line)' : 'rgba(10,11,16,0.15)'}`,
    borderRadius: 'var(--r-lg)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexDirection: 'column', gap: 12,
    color: dark ? 'var(--smoke)' : 'rgba(10,11,16,0.4)',
    position: 'relative', overflow: 'hidden',
  }}>
    {src ? (
      <video
        src={src}
        poster={poster || undefined}
        autoPlay muted loop playsInline preload="metadata"
        style={{
          position: 'absolute', inset: 0,
          width: '100%', height: '100%', objectFit: 'cover',
          borderRadius: 'var(--r-lg)',
        }}
      />
    ) : (
      <>
        <div style={{
      width: 54, height: 54, borderRadius: 999,
      background: accent, color: 'var(--ink)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <svg width="18" height="18" viewBox="0 0 16 16" fill="currentColor"><polygon points="4,2 14,8 4,14"/></svg>
    </div>
    <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
      {label} · video placeholder
    </div>
      </>
    )}
  </div>
);

/* ----------------------------------------------------------
   SocialProofStrip — stubbed press + quotes
   ---------------------------------------------------------- */
const SocialProofStrip = ({ dark = true }) => {
  const fg = dark ? 'var(--smoke)' : 'rgba(10,11,16,0.45)';
  const line = dark ? 'var(--line)' : 'rgba(10,11,16,0.12)';
  const logos = ['Techly', 'The Spinoff', 'Broadsheet', 'ABC', 'Smith Journal'];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 56, flexWrap: 'wrap',
      padding: '32px 0', borderTop: `1px solid ${line}`, borderBottom: `1px solid ${line}`,
    }}>
      <Kicker style={{ color: fg, fontSize: 10 }}>As seen in · placeholder</Kicker>
      {logos.map((l, i) => (
        <span key={i} style={{
          fontFamily: 'var(--font-serif)', fontSize: 22, color: fg,
          fontStyle: i % 2 ? 'italic' : 'normal',
          letterSpacing: '-0.01em',
        }}>{l}</span>
      ))}
    </div>
  );
};

/* ----------------------------------------------------------
   MiniTV — simplified TV screen for hero embeds
   ---------------------------------------------------------- */
const MiniTV = ({ state = 'lobby', accent = 'var(--pink)' }) => {
  // state: 'lobby' | 'vote' | 'reveal'
  const W = 640, H = 360; // 16:9
  return (
    <div style={{
      width: '100%', aspectRatio: '16/9',
      background: 'var(--ink)', borderRadius: 14,
      border: '1px solid var(--line)',
      position: 'relative', overflow: 'hidden',
      fontFamily: 'var(--font-display)', color: 'var(--paper)',
    }} className="grain">
      {/* chrome */}
      <div style={{
        position: 'absolute', top: 14, left: 20, right: 20,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 10,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          {/* Mini-TV chrome — Playoff lockup only (the standalone Reel
              wordmark went away in the B2.3 rebrand 2026-05-01). */}
          <PlayoffLockup size={11} accent={accent}/>
        </div>
        <div className="mono" style={{ fontSize: 9, color: 'var(--smoke)', letterSpacing: '0.1em' }}>
          ROOM · BUNS
        </div>
      </div>

      {state === 'lobby' && (
        <div style={{ position: 'absolute', inset: '44px 20px 20px', display: 'flex', gap: 16 }}>
          <div style={{ flex: 1 }}>
            <div className="mono" style={{ fontSize: 8, color: 'var(--smoke)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 10 }}>
              playoff.fun · enter
            </div>
            <div style={{ fontSize: 'clamp(56px, 16vw, 120px)', fontWeight: 700, letterSpacing: '-0.08em', lineHeight: 0.82 }}>
              BUNS
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 10 }}>
              <div style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--ok)' }}/>
              <span className="mono" style={{ fontSize: 8, color: 'var(--fog)', letterSpacing: '0.1em' }}>5 PLAYERS IN</span>
            </div>
          </div>
          <div style={{ width: 120, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {['Marnie', 'Dev', 'Ro', 'Alexandria', 'Steve'].map((n, i) => (
              <div key={i} style={{
                padding: '6px 8px', background: 'var(--ink-2)', border: '1px solid var(--line)',
                borderRadius: 6, fontSize: 10, display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <div style={{ width: 16, height: 16, borderRadius: 999, background: ['#FF3D6B','#FFE14A','#4ADE80','#A78BFA','#FF8A3D'][i] }}/>
                {n}
              </div>
            ))}
          </div>
        </div>
      )}

      {state === 'vote' && (
        <div style={{ position: 'absolute', inset: '44px 20px 20px', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
          <div style={{
            fontFamily: 'var(--font-serif)', fontStyle: 'italic',
            // Was a hard 28px — at 390px viewport the prompt wrapped to
            // 4 lines and pushed the 4-tile row past the bottom of the
            // 16:9 box (cropped on mobile). Clamp shrinks to ~15px on
            // narrow viewports so the prompt sits in 2 lines and the
            // GIF row + captions stay inside the TV-screen frame.
            fontSize: 'clamp(13px, 4vw, 28px)',
            color: 'var(--paper)', textWrap: 'balance', lineHeight: 1.15,
            marginBottom: 'clamp(6px, 1.5vw, 14px)',
            // Allow the prompt block to shrink so flex children below
            // (the GIF grid) keep their reserved space.
            flexShrink: 1, minHeight: 0,
          }}>
            "When you walk into a party and realize it's actually a <span style={{ color: accent }}>work thing</span>"
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, flexShrink: 0 }}>
            {[
              { gif: '/assets/landing/gifs/kim-kardashian-cry.webp',      label: 'dog realizing' },
              { gif: '/assets/landing/gifs/aaaaa-surprised.webp',         label: 'the walk in' },
              { gif: '/assets/landing/gifs/nene-bye.webp',                label: 'slow backaway' },
              { gif: '/assets/landing/gifs/problems-with-you-people.webp', label: 'pretending' },
            ].map((tile, i) => (
              <div key={i} style={{
                aspectRatio: '1',
                border: i === 1 ? `2px solid ${accent}` : '1px solid var(--line)',
                borderRadius: 8, position: 'relative', overflow: 'hidden',
                background: 'var(--ink-3)',
              }}>
                <img
                  src={tile.gif}
                  alt={tile.label}
                  loading="lazy"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
                <div style={{
                  position: 'absolute', left: 0, right: 0, bottom: 0,
                  padding: '4px 6px',
                  background: 'linear-gradient(to top, rgba(10,11,16,0.85), rgba(10,11,16,0))',
                  fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 10,
                  color: 'var(--chalk)', textAlign: 'center',
                }}>{tile.label}</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {state === 'reveal' && (
        <div style={{ position: 'absolute', inset: '44px 20px 20px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <div className="mono" style={{ fontSize: 9, color: 'var(--smoke)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8 }}>Round winner</div>
          <div style={{ fontSize: 'clamp(32px, 9vw, 56px)', fontWeight: 700, letterSpacing: '-0.04em', color: accent }}>
            Marnie
          </div>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 'clamp(13px, 3.5vw, 20px)', color: 'var(--chalk)', marginTop: 4 }}>
            "the walk in" · +3 votes
          </div>
        </div>
      )}
    </div>
  );
};

/* ----------------------------------------------------------
   MiniPhone — simplified phone for hero embeds
   ---------------------------------------------------------- */
const MiniPhone = ({ state = 'join', accent = 'var(--pink)', name = 'Marnie' }) => {
  return (
    <div style={{
      // Width is fluid — outer container (.landing-hero__phone or
      // any other call site) sets the box size; we just preserve
      // the iPhone-shaped aspect ratio. Drops the legacy fixed
      // `width: 200` which broke responsive flow on mobile.
      width: '100%', aspectRatio: '390/844',
      background: 'var(--ink)', borderRadius: 26,
      border: '1.5px solid var(--line)',
      position: 'relative', overflow: 'hidden',
      fontFamily: 'var(--font-display)', color: 'var(--paper)',
      boxShadow: '0 24px 60px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3)',
    }}>
      {/* dynamic island */}
      <div style={{
        position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
        width: 54, height: 16, background: '#000', borderRadius: 999, zIndex: 2,
      }}/>
      {state === 'join' && (
        <div style={{ position: 'absolute', inset: '40px 16px 24px' }}>
          <div className="mono" style={{ fontSize: 8, color: 'var(--smoke)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 8 }}>Playoff · join</div>
          <div style={{ fontSize: 11, color: 'var(--chalk)', marginBottom: 12, lineHeight: 1.4 }}>Enter the room code on your TV.</div>
          <div style={{
            padding: '14px 10px', border: '1px solid var(--line)', borderRadius: 8,
            background: 'var(--ink-2)', textAlign: 'center',
            fontSize: 32, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--paper)',
          }}>BUNS</div>
          <div style={{
            marginTop: 10, padding: '12px', border: '1px solid var(--line)', borderRadius: 8,
            background: 'var(--ink-2)', fontSize: 11, color: 'var(--smoke)',
          }}>{name}</div>
          <button style={{
            marginTop: 12, width: '100%', padding: '12px',
            background: accent, color: 'var(--ink)', border: 'none',
            borderRadius: 8, fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-body)',
          }}>Join room</button>
        </div>
      )}
      {state === 'submit' && (
        <div style={{ position: 'absolute', inset: '40px 16px 24px' }}>
          <div className="mono" style={{ fontSize: 8, color: 'var(--smoke)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 6 }}>Round 3 · pick a gif</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14, lineHeight: 1.25, marginBottom: 10, color: 'var(--chalk)' }}>
            When you walk in and realize it's a work thing
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              '/assets/landing/gifs/kim-kardashian-cry.webp',
              '/assets/landing/gifs/jedi-kitten-fight.webp',
              '/assets/landing/gifs/nene-bye.webp',
              '/assets/landing/gifs/aaaaa-surprised.webp',
            ].map((src, i) => (
              <div key={i} style={{
                aspectRatio: '1',
                border: i === 1 ? `2px solid ${accent}` : '1px solid var(--line)',
                borderRadius: 6, overflow: 'hidden',
                background: 'var(--ink-3)',
              }}>
                <img src={src} loading="lazy" alt=""
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
              </div>
            ))}
          </div>
          <div style={{
            marginTop: 10, padding: '10px', border: '1px solid var(--line)', borderRadius: 6,
            background: 'var(--ink-2)', fontSize: 10, color: 'var(--smoke)', fontStyle: 'italic',
            fontFamily: 'var(--font-serif)',
          }}>the walk in_</div>
        </div>
      )}
      {state === 'won' && (
        <div style={{ position: 'absolute', inset: '40px 16px 24px', display: 'flex', flexDirection: 'column', justifyContent: 'center', textAlign: 'center' }}>
          <div className="mono" style={{ fontSize: 8, color: 'var(--smoke)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 6 }}>Round 3</div>
          <div style={{ fontSize: 36, fontWeight: 700, letterSpacing: '-0.04em', color: accent, lineHeight: 1 }}>You won</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--chalk)', marginTop: 6 }}>+3 votes</div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { WaitlistForm, FAQ, FAQ_ITEMS, VideoSlot, SocialProofStrip, MiniTV, MiniPhone });