// landing-compact.jsx — tight 2-page landing: hero (with live vibe demo card) + one combined section + footer.
// No phone mocks, no real app screens.

// ── Nav ─────────────────────────────────────────────────────
function LPNav() {
  const [stuck, setStuck] = React.useState(false);
  React.useEffect(() => {
    const on = () => setStuck(window.scrollY > 24);
    on(); window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={'lp-nav' + (stuck ? ' lp-stuck' : '')}>
      <div className="lp-wrap lp-nav-in">
        <img className="lp-mark" src="brand/ssup-wordmark.png" alt="Ssup!" style={{ height: 40 }} />
        <div className="lp-nav-links">
          <a href="#how">How it works</a>
          <a href="#download">Download</a>
        </div>
        <a className="lp-nav-pill" href="#download">Get the app<S2Icon name="arrow" size={16} sw={2.4} /></a>
      </div>
    </nav>
  );
}

// ── pulse-city backdrop ─────────────────────────────────────
function CityBackdrop() {
  const dots = [
    { l: '12%', t: '30%', d: 0, live: false }, { l: '24%', t: '64%', d: 1.2, live: true },
    { l: '40%', t: '22%', d: 2.1, live: false }, { l: '52%', t: '74%', d: 0.6, live: false },
    { l: '70%', t: '18%', d: 1.8, live: true }, { l: '82%', t: '54%', d: 2.6, live: false },
    { l: '88%', t: '78%', d: 0.9, live: false }, { l: '34%', t: '44%', d: 3.1, live: false },
    { l: '62%', t: '40%', d: 1.4, live: true }, { l: '16%', t: '82%', d: 2.3, live: false },
  ];
  const rings = [0, 1.4, 2.8, 4.2];
  return (
    <div className="lp-citybg" aria-hidden="true">
      <div className="lp-glowblob"></div>
      <div className="lp-rings">
        {rings.map((d) => <span key={d} className="lp-ring" style={{ animationDelay: `${d}s` }}></span>)}
      </div>
      {dots.map((p, i) => (
        <span key={i} className={'lp-dot' + (p.live ? ' lp-dot-live' : '')}
          style={{ left: p.l, top: p.t, animationDelay: `${p.d}s` }}></span>
      ))}
    </div>
  );
}

// ── live vibe demo (the hero artifact — replaces the phone) ──
const VIBE_MOODS = [
  { k: 'Social', c: 'var(--accent)' },
  { k: 'Chill', c: 'oklch(0.78 0.12 220)' },
  { k: 'Curious', c: 'oklch(0.78 0.13 150)' },
  { k: 'Bold', c: 'oklch(0.72 0.16 310)' },
];
const VIBE_INTENTS = ['Street food', 'Nightlife', 'Outdoors', 'Live music', 'Coffee'];
const VIBE_MOVES = [
  { title: 'Night-market food crawl', meta: '3 stops · 1.8 km', img: S2PH.streetfood, intents: ['Street food'], moods: ['Social', 'Curious', 'Bold'], base: 6 },
  { title: 'Rooftop DJ set @ Vagator', meta: 'Starts 22:00 · 31 going', img: S2PH.party, intents: ['Nightlife', 'Live music'], moods: ['Social', 'Bold'], base: 9 },
  { title: 'Sunset drift to Anjuna', meta: '18:30 · slow walk', img: S2PH.beach, intents: ['Outdoors'], moods: ['Chill', 'Curious'], base: 4 },
  { title: 'Filter-coffee & records', meta: 'Quiet corner · all day', img: S2PH.cafe, intents: ['Coffee'], moods: ['Chill', 'Curious'], base: 3 },
  { title: 'Live acoustic @ the fort', meta: '20:00 · intimate', img: S2PH.festival, intents: ['Live music'], moods: ['Chill', 'Social'], base: 5 },
];

function VibeCard() {
  const [mood, setMood] = React.useState('Social');
  const [intents, setIntents] = React.useState(['Street food', 'Nightlife']);

  const toggleIntent = (v) =>
    setIntents((arr) => (arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]));

  const ranked = React.useMemo(() => {
    return VIBE_MOVES
      .map((m) => {
        const intentHit = m.intents.filter((i) => intents.includes(i)).length;
        const moodHit = m.moods.includes(mood) ? 1 : 0;
        return { ...m, score: intentHit * 2 + moodHit };
      })
      .filter((m) => m.score > 0)
      .sort((a, b) => b.score - a.score)
      .slice(0, 3);
  }, [mood, intents]);

  const people = React.useMemo(() => {
    const raw = ranked.reduce((a, m) => a + m.base + m.score * 2, 0);
    return Math.max(ranked.length ? 3 : 0, raw);
  }, [ranked]);

  return (
    <div className="lp-vibecard">
      <span className="lp-vibenote">try it — no download ✦</span>
      <div className="lp-vibecard-head">
        <Mono on>Set your vibe</Mono>
        <S2LivePill>Goa · Live</S2LivePill>
      </div>

      <div className="lp-field">
        <div className="lp-field-label"><span>How you feel</span></div>
        <div className="lp-chips">
          {VIBE_MOODS.map((m) => (
            <button key={m.k} className={'lp-chip' + (m.k === mood ? ' lp-on' : '')} onClick={() => setMood(m.k)}>
              <span className="lp-cdot" style={{ background: m.c }}></span>{m.k}
            </button>
          ))}
        </div>
      </div>

      <div className="lp-field">
        <div className="lp-field-label"><span>Up for</span><span>pick any</span></div>
        <div className="lp-chips">
          {VIBE_INTENTS.map((i) => (
            <button key={i} className={'lp-chip' + (intents.includes(i) ? ' lp-on' : '')} onClick={() => toggleIntent(i)}>{i}</button>
          ))}
        </div>
      </div>

      <div className="lp-vibe-div"></div>

      {ranked.length ? ranked.map((m) => (
        <div key={m.title} className="lp-resmove">
          <img src={m.img} alt="" />
          <div className="s2-col" style={{ gap: 2, flex: 1, minWidth: 0 }}>
            <span style={{ fontSize: 14.5, fontWeight: 800, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.title}</span>
            <span style={{ fontSize: 12, color: 'var(--text-tertiary)', fontFamily: 'var(--lp-mono)' }}>{m.meta}</span>
          </div>
          <span style={{ color: 'var(--accent)', display: 'flex' }}><S2Icon name="arrow" size={17} sw={2.2} /></span>
        </div>
      )) : (
        <div className="lp-resmove" style={{ justifyContent: 'center', color: 'var(--text-tertiary)', padding: '20px 12px' }}>
          <span style={{ fontSize: 13.5, fontWeight: 600 }}>Pick something you&rsquo;re up for ✦</span>
        </div>
      )}

      <div className="lp-vibe-readout">
        <span className="lp-demo-count">{people}</span>
        <span>people want the same thing rn · <em>that&rsquo;s the whole feed</em></span>
      </div>
    </div>
  );
}

// ── Hero (page 1) ───────────────────────────────────────────
function LPHero() {
  return (
    <header className="lp-hero" id="top">
      <CityBackdrop />
      <div className="lp-wrap lp-hero-grid">
        <div className="lp-hero-copy">
          <Reveal as="h1" eager className="lp-h1" delay={1}>
            The city&rsquo;s<br />already happening.<br /><span className="lp-stickerword">Say ssup!</span>
          </Reveal>
          <Reveal className="lp-lead" eager delay={2}>
            Set a vibe, feel out who&rsquo;s around, and go. Real moves, real people,
            tonight — no feed, no swiping.
          </Reveal>
          <Reveal eager delay={3}><StoreButtons ghostSecond /></Reveal>
          <Reveal as="p" eager className="lp-hero-note" delay={4}>Free to download · verified humans only · live in 40+ cities</Reveal>
        </div>
        <div className="lp-hero-stage-vibe">
          <Reveal eager delay={2} style={{ width: '100%', display: 'flex', justifyContent: 'center' }}>
            <VibeCard />
          </Reveal>
        </div>
      </div>
      <div className="lp-scrollcue"><span>scroll</span><span></span></div>
    </header>
  );
}

// ── Page 2: why + how + CTA, one tight section ──────────────
function LPSecond() {
  const steps = [
    { n: '01', t: 'Set your pulse', d: 'One tap: how you feel, what you\u2019re up for. Fades in 2 hours, so it\u2019s always honest.' },
    { n: '02', t: 'Read the Compass', d: 'Three real moves ranked by overlap with your pulse. A short list, not a feed.' },
    { n: '03', t: 'Cross someone', d: 'Two pulses line up → you both get a Crossing. Say ssup — it\u2019s a plan, not a chat.' },
    { n: '04', t: 'Go', d: 'A shared meet point, a temporary chat, SOS one hold away. Head out and stamp it.' },
  ];
  return (
    <section className="lp-section lp-second" id="how">
      <div className="lp-wrap" style={{ textAlign: 'center' }}>
        <Reveal>
          <span className="lp-eyebrow" style={{ display: 'inline-flex' }}>How it works</span>
        </Reveal>
        <Reveal as="h2" className="lp-bigstatement" delay={1} style={{ marginTop: 20 }}>
          Not a <span className="lp-strike">feed</span>.<br />A reason to <span className="lp-accent">leave the house</span>.
        </Reveal>
        <div className="lp-steps2">
          {steps.map((s, i) => (
            <Reveal key={s.n} className="lp-step2" delay={(i % 4) + 1}>
              <span className="lp-step2-big">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </Reveal>
          ))}
        </div>
      </div>

      <div id="cities">
        <Reveal className="lp-livecities" delay={1}>
          <Mono on style={{ display: 'block', textAlign: 'center' }}>Live rn in</Mono>
          <CityTicker />
        </Reveal>
      </div>

      <div className="lp-wrap" style={{ textAlign: 'center' }}>
        <div id="download">
          <Reveal className="lp-second-cta" delay={2}>
            <h2 className="lp-h2">Say ssup to<br /><span className="lp-stickerword lp-sticker-lime">right now.</span></h2>
            <StoreButtons />
            <p className="lp-hero-note" style={{ marginTop: 18 }}>Verified humans only · your exact location stays blurred · SOS built in</p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ── city ticker (marquee) ────────────────────────────────
function CityTicker() {
  const cities = ['Goa', 'Bengaluru', 'Mumbai', 'Delhi', 'Lisbon', 'Bali', 'Bangkok', 'Berlin', 'Mexico City', 'Cape Town', '+30 more'];
  const run = (key) => (
    <div className="lp-tick-run" key={key} aria-hidden={key === 'b'}>
      {cities.map((c, i) => (
        <span key={c} className={'lp-tick-item' + (i % 2 ? ' lp-ghost' : '')}>
          {c}<span className="lp-tick-sep">✦</span>
        </span>
      ))}
    </div>
  );
  return (
    <div className="lp-ticker">
      <div className="lp-ticker-track">{run('a')}{run('b')}</div>
    </div>
  );
}

// ── Footer ──────────────────────────────────────────────────
function LPFooter() {
  const [time, setTime] = React.useState('');
  React.useEffect(() => {
    const f = () => setTime(new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
    f();
    const t = setInterval(f, 30000);
    return () => clearInterval(t);
  }, []);
  return (
    <footer className="lp-footer">
      <div className="lp-wrap lp-footer-in">
        <img className="lp-mark" src="brand/ssup-wordmark.png" alt="Ssup!" style={{ height: 28 }} />
        <div className="lp-footer-links">
          <a className="lp-flink" href="#top">Top</a>
          <a className="lp-flink" href="#how">How it works</a>
          <a className="lp-flink" href="#cities">Cities</a>
          <a className="lp-flink" href="#download">Download</a>
        </div>
        <small>© 2026 Ssup · {time} rn — the night&rsquo;s still young</small>
      </div>
      <div className="lp-footer-giant" aria-hidden="true">
        ssup!
        <span className="lp-footer-sticker">est. on a rooftop in Goa ✦</span>
      </div>
    </footer>
  );
}

Object.assign(window, { LPNav, CityBackdrop, VibeCard, CityTicker, LPHero, LPSecond, LPFooter });