/* global React, Kicker, Chip, PlayoffLockup, WaitlistForm, FAQ, VideoSlot, SocialProofStrip, MiniTV, MiniPhone */

/* ==========================================================
   LANDING VARIATION 1 — MINIMAL
   A24 deadpan. Near-black. Serif tagline. One wink.

   Layout is fully responsive — class names are defined in the
   landing.html <style> block under the .landing namespace. We
   keep inline styles only for one-off accents (gradients,
   colors, spans of italic serif). Anything that participates
   in the responsive grid + clamp() typography is class-based.
   ========================================================== */

// App-preview video — designer-produced `reel-tvos` cut.
// Render pipeline lives at reel/public/assets/Video Assets/export/
// (README there). Rebuild + copy with:
//   cd "reel/public/assets/Video Assets/export" && \
//     npm run serve & npm run render:tvos && bash ./stitch.sh && \
//     cp playoff-tvos.mp4 ../../landing/video/
// Set to null to show the dashed placeholder while iterating.
const VIDEO_SRC = "/assets/landing/video/playoff-tvos.mp4";

const LandingMinimal = () => (
  <div className="landing">
    {/* NAV */}
    <nav className="landing-section landing-nav">
      <PlayoffLockup size={18}/>
      <div className="landing-nav__links">
        <a href="#how">How it works</a>
        <a href="#faq">FAQ</a>
        <Chip tone="pink">· Beta</Chip>
      </div>
    </nav>

    {/* HERO */}
    <section className="landing-section landing-hero">
      <div>
        <Kicker style={{ marginBottom: 28 }}>TestFlight · Closed beta</Kicker>
        <h1 className="hero-type landing-hero__title">
          Mad Libs meets<br/>
          Cards Against<br/>
          Humanity. <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--pink)', fontWeight: 400 }}>On your&nbsp;TV.</span>
        </h1>
        <p className="landing-hero__copy">
          A party game for the room, not your phone. The TV runs the show.
          Your phone is the controller. Endless rounds, endless play—
          <span style={{ color: 'var(--fog)' }}>leave when someone has to work tomorrow.</span>
        </p>
        <WaitlistForm/>
        <div className="mono" style={{ fontSize: 11, color: 'var(--smoke)', letterSpacing: '0.08em', marginTop: 14 }}>
          No spam. One email when TestFlight opens.
        </div>
      </div>

      {/* TV + phone mock — phone overlaps TV bottom-right on desktop,
          stacks below TV on mobile (handled in CSS). */}
      <div className="landing-hero__mocks">
        <MiniTV state="vote"/>
        <div className="landing-hero__phone">
          <MiniPhone state="submit"/>
        </div>
      </div>
    </section>

    {/* HOW IT WORKS — secondary, low-key, one sentence each */}
    <section id="how" className="landing-section landing-how">
      {[
        { n: '01', t: 'Open Playoff on your TV', d: 'Pick a game. The TV shows a four-letter room code.' },
        { n: '02', t: 'Join on your phone', d: 'Go to playoff.fun, type the code, pick a name. No app install.' },
        { n: '03', t: 'Play as long as you like', d: 'Endless rounds, endless prompts. The game ends when the room does.' },
      ].map((s, i) => (
        <div key={i}>
          <div className="mono landing-how__step-num">{s.n}</div>
          <div className="landing-how__step-title">{s.t}</div>
          <div className="landing-how__step-body">{s.d}</div>
        </div>
      ))}
    </section>

    {/* FEATURES — Kaz + Avatars */}
    <section className="landing-section landing-features">
      <Kicker style={{ marginBottom: 16 }}>What's in it</Kicker>
      <h2 className="landing-features__h2">
        A host who never gets tired. And never stops entertaining...<br/>
        <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--pink)', fontWeight: 400 }}>A bestiary to collect.</span>
      </h2>
      <div className="landing-features__grid">
        {/* Kaz card */}
        <div className="landing-feature-card">
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--reel)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 20 }}>
              Meet your host
            </div>
            <div className="landing-feature-card__title">
              Kaz.
            </div>
            <div className="landing-feature-card__body">
              Professionally voiced, aussie. Reads every prompts calls out the winners, roasts the losers.
              Better than your friend who volunteers to be game master.
            </div>
          </div>
          {/* Waveform accent */}
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 40, marginTop: 32 }}>
            {Array.from({length: 48}).map((_, i) => {
              const h = 6 + Math.abs(Math.sin(i * 0.6) + Math.sin(i * 0.2)) * 15;
              return <div key={i} style={{ width: 3, height: `${h}px`, background: i % 7 === 0 ? 'var(--reel)' : 'var(--line)', borderRadius: 1, flexShrink: 0 }}/>;
            })}
          </div>
        </div>

        {/* Avatars card */}
        <div className="landing-feature-card">
          <div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--pink)', letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 20 }}>
              100+ unlockable avatars
            </div>
            <div className="landing-feature-card__title">
              Collect
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--pink)', fontWeight: 400 }}> them all.</span>
            </div>
            <div className="landing-feature-card__body">
              Bilbies, bunyips, ringtails, kookaburras. Earn them by playing, winning, losing
              with dignity, or being the first in the room to do something specific.
            </div>
          </div>
          {/* avatar dot grid accent */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gap: 6, marginTop: 32 }}>
            {Array.from({length: 30}).map((_, i) => {
              const colors = ['#FF3D6B','#FFE14A','#4ADE80','#A78BFA','#FF8A3D','#FFB23D','#5B8DEF','#C77DFF'];
              const isLocked = i > 18;
              return (
                <div key={i} style={{
                  aspectRatio: '1',
                  background: isLocked ? 'var(--ink-3)' : colors[i % colors.length],
                  opacity: isLocked ? 0.35 : 1,
                  borderRadius: 6,
                  border: isLocked ? '1px dashed var(--line)' : 'none',
                }}/>
              );
            })}
          </div>
        </div>
      </div>
    </section>

    {/* VIDEO */}
    <section className="landing-section landing-video">
      <div className="landing-video__inner">
        <VideoSlot label="30s app preview — Reel round" src={VIDEO_SRC}/>
      </div>
    </section>

    {/* FAQ */}
    <section id="faq" className="landing-section landing-faq">
      <div className="landing-faq__inner">
        <Kicker style={{ marginBottom: 16 }}>FAQ</Kicker>
        <h2 className="landing-faq__h2">
          Reasonable questions.
        </h2>
        <FAQ/>
      </div>
    </section>

    {/* FINAL CTA */}
    <section className="landing-section landing-final">
      <div className="landing-final__quote">
        It's better than the dinner party you didn't want to go to.
      </div>
      <div className="landing-final__form">
        <WaitlistForm/>
      </div>
    </section>

    {/* FOOTER */}
    <footer className="landing-section landing-footer">
      <div>© 2026 JBX Huddle LLC</div>
      <nav className="landing-footer__links" aria-label="Legal">
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
        <a href="/support">Support</a>
        <a href="/faq.html">FAQ</a>
      </nav>
      <div className="mono" style={{ letterSpacing: '0.1em' }}>PLAYOFF.FUN</div>
    </footer>
  </div>
);

window.LandingMinimal = LandingMinimal;