/* Brainstorm X — Marketing landing page.
   Composes DS primitives from window.BrainstormXDesignSystem_f2a458 + BXIcons. */
(function () {
  const DS = window.BrainstormXDesignSystem_f2a458;
  const { Button, Badge, Card, NameCard, KeywordOrb, AvatarStack } = DS;
  const I = window.BXIcons;
  const { useState } = React;

  function Stars({ count = 40 }) {
    const stars = React.useMemo(() => Array.from({ length: count }, () => ({
      top: Math.random() * 100, left: Math.random() * 100,
      s: Math.random() * 2 + 1, o: Math.random() * 0.6 + 0.2,
      glow: Math.random() > 0.85,
    })), [count]);
    return (
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
        {stars.map((st, i) => (
          <span key={i} style={{
            position: 'absolute', top: st.top + '%', left: st.left + '%',
            width: st.s, height: st.s, borderRadius: '50%', background: '#fff', opacity: st.o,
            boxShadow: st.glow ? '0 0 8px var(--neon-cyan)' : 'none',
          }} />
        ))}
      </div>
    );
  }

  function Nav({ onNav, page }) {
    const link = (id, label) => (
      <button onClick={() => onNav(id)} style={{
        background: 'none', border: 'none', cursor: 'pointer', padding: '6px 4px',
        fontFamily: 'var(--font-sans)', fontSize: 15, fontWeight: 600,
        color: page === id ? 'var(--text-1)' : 'var(--text-2)',
      }}>{label}</button>
    );
    return (
      <header style={{
        position: 'sticky', top: 0, zIndex: 20, display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', padding: '16px 32px', borderBottom: '1px solid var(--line-1)',
        background: 'rgba(10,10,24,0.6)', backdropFilter: 'blur(18px)', WebkitBackdropFilter: 'blur(18px)',
      }}>
        <div onClick={() => onNav('home')} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
          <img src="../../assets/mark-spark.svg" width="32" height="32" alt="" />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>
            Brainstorm<span className="bx-text-nebula"> X</span>
          </span>
        </div>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          {link('home', 'Home')}
          {link('how', 'How it works')}
          <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-2)', textDecoration: 'none' }}>Pricing</a>
          <Button size="sm" variant="secondary">Sign in</Button>
          <Button size="sm" iconRight={<I.ArrowRight size={16} />}>Start a session</Button>
        </nav>
      </header>
    );
  }

  function Hero({ onStart }) {
    return (
      <section style={{ position: 'relative', padding: '76px 32px 90px', overflow: 'hidden' }}>
        <Stars count={46} />
        <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }}>
          <div>
            <span className="bx-eyebrow" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <I.Sparkles size={14} /> Collaborative AI naming
            </span>
            <h1 style={{ fontSize: 'clamp(40px, 5vw, 68px)', margin: '18px 0 0', lineHeight: 1.02 }}>
              Brainstorm brand names in a live <span className="bx-text-nebula">AI-powered 3D space</span>
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-2)', lineHeight: 1.55, margin: '22px 0 0', maxWidth: '52ch' }}>
              Create a naming session, invite your team and watch ideas evolve as everyone votes, boosts and shortlists their favourites. The strongest names rise to the top.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <Button size="lg" onClick={onStart} iconRight={<I.ArrowRight size={18} />}>Start a naming session</Button>
              <Button size="lg" variant="secondary" iconLeft={<I.Compass size={18} />}>See how it works</Button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 30 }}>
              <AvatarStack people={[{ name: 'Sam Lee', ring: true }, { name: 'Alex Roy' }, { name: 'Priya N' }, { name: 'Jo Kim' }]} max={4} size={32} />
              <span style={{ fontSize: 14, color: 'var(--text-3)' }}>No password — just a magic link. Free to start.</span>
            </div>
          </div>
          <div style={{ position: 'relative', height: 460 }}>
            <div style={{ position: 'absolute', top: 10, left: 30, transform: 'scale(0.92)' }}>
              <NameCard name="Pawlio" style="brandable" score={14} heat="on_fire" confidence={82}
                keywords={['pet', 'playful']} counts={{ up: 14, fire: 6 }} shortlisted floating />
            </div>
            <div style={{ position: 'absolute', top: 250, left: 0, transform: 'scale(0.8)' }}>
              <NameCard name="Nuvio" style="evocative" score={5} heat="warm"
                keywords={['fresh']} counts={{ up: 6, down: 1 }} floating />
            </div>
            <div style={{ position: 'absolute', top: 150, right: -10, transform: 'scale(0.84)' }}>
              <NameCard name="Snugglo" style="compound" score={9} heat="hot"
                keywords={['cute', 'cosy']} counts={{ up: 9, fire: 2 }} floating />
            </div>
            <div style={{ position: 'absolute', bottom: 6, right: 70 }}>
              <KeywordOrb label="quirky" state="favourite" weight={3} count={5} floating />
            </div>
          </div>
        </div>
      </section>
    );
  }

  const STEPS = [
    { ic: 'WandSparkles', t: 'Train your session', d: 'A short wizard captures your brand, audience, style and keywords — enough to point the AI in the right direction, without a long brief.' },
    { ic: 'Users', t: 'Invite your team', d: 'Send secure invite links. Collaborators join with no password and start voting, boosting and commenting straight away.' },
    { ic: 'Vote', t: 'Vote in the Name Arena', d: 'Names float in a live 3D space. Up, down, 🔥 and ❄️ react in a click. Liked names grow and glow; weak ones cool down.' },
    { ic: 'Zap', t: 'Generate the next wave', d: 'The AI reads your team\'s votes and keyword boosts, then generates a sharper batch of names. Shortlist the best and export a naming report.' },
  ];

  function HowItWorks() {
    return (
      <section style={{ position: 'relative', padding: '40px 32px 20px', maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 40px' }}>
          <span className="bx-eyebrow">How it works</span>
          <h2 style={{ fontSize: 'clamp(30px,3.6vw,44px)', margin: '14px 0 0' }}>Naming, turned into a team game</h2>
          <p style={{ fontSize: 17, color: 'var(--text-2)', marginTop: 14 }}>
            Four simple steps take you from a blank page to a shortlist everyone can get behind.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {STEPS.map((s, i) => {
            const Ic = I[s.ic];
            return (
              <Card key={i} hover style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44,
                    borderRadius: 'var(--radius-md)', background: 'color-mix(in srgb, var(--neon-cyan) 14%, transparent)',
                    border: '1px solid color-mix(in srgb, var(--neon-cyan) 40%, transparent)', color: 'var(--neon-cyan)',
                  }}><Ic size={22} /></span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-3)' }}>0{i + 1}</span>
                </div>
                <h3 style={{ fontSize: 18, fontFamily: 'var(--font-display)', color: 'var(--text-1)' }}>{s.t}</h3>
                <p style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.5 }}>{s.d}</p>
              </Card>
            );
          })}
        </div>
      </section>
    );
  }

  function WhyDifferent() {
    const rows = [
      ['Most AI name generators', ['Enter a keyword, click generate', 'Get a static list', 'Copy anything useful', 'You\'re on your own'], false],
      ['Brainstorm X', ['Train the AI through a guided wizard', 'Vote, boost, freeze and combine — together', 'Watch new name waves evolve from feedback', 'Shortlist and export a naming report'], true],
    ];
    return (
      <section style={{ padding: '60px 32px', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
          {rows.map(([title, items, good], i) => (
            <Card key={i} glass={good} glow={good ? 'cyan' : null} style={{ padding: 28 }}>
              <h3 style={{ fontSize: 20, fontFamily: 'var(--font-display)', color: good ? 'var(--neon-cyan)' : 'var(--text-2)', marginBottom: 18 }}>{title}</h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {items.map((it, j) => (
                  <li key={j} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 15, color: good ? 'var(--text-1)' : 'var(--text-3)' }}>
                    <span style={{ color: good ? 'var(--neon-lime)' : 'var(--text-disabled)', marginTop: 1, flex: 'none' }}>
                      {good ? <I.Check size={18} /> : <I.X size={16} />}
                    </span>
                    {it}
                  </li>
                ))}
              </ul>
            </Card>
          ))}
        </div>
      </section>
    );
  }

  function Quote() {
    return (
      <section style={{ position: 'relative', padding: '40px 32px 80px', maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
        <Stars count={20} />
        <p style={{ position: 'relative', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(24px,3vw,34px)', lineHeight: 1.3, color: 'var(--text-1)', letterSpacing: '-0.01em' }}>
          “A catchy product name is one of the best ways to stand out. Viral products had marketing — but they also had names that were <span className="bx-text-nebula">creative and easy to say.</span>”
        </p>
      </section>
    );
  }

  function CTA({ onStart }) {
    return (
      <section style={{ padding: '0 32px 90px', maxWidth: 1100, margin: '0 auto' }}>
        <Card glass glow="violet" style={{ position: 'relative', overflow: 'hidden', padding: '56px 40px', textAlign: 'center', borderRadius: 'var(--radius-2xl)' }}>
          <Stars count={26} />
          <div style={{ position: 'relative' }}>
            <h2 style={{ fontSize: 'clamp(30px,4vw,48px)' }}>Find the name everyone can get behind</h2>
            <p style={{ fontSize: 18, color: 'var(--text-2)', margin: '16px auto 0', maxWidth: '46ch' }}>
              Start a naming session in under a minute. Invite your team and let the best ideas rise.
            </p>
            <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 30, flexWrap: 'wrap' }}>
              <Button size="lg" onClick={onStart} iconRight={<I.ArrowRight size={18} />}>Start a naming session</Button>
              <Button size="lg" variant="ghost">Talk to us</Button>
            </div>
          </div>
        </Card>
      </section>
    );
  }

  function Footer() {
    return (
      <footer style={{ borderTop: '1px solid var(--line-1)', padding: '32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, color: 'var(--text-3)', fontSize: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="../../assets/mark-spark.svg" width="24" height="24" alt="" />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: 'var(--text-2)' }}>Brainstorm X</span>
        </div>
        <span>© 2026 Brainstorm X · A DesignStack prototype · Working name</span>
      </footer>
    );
  }

  function Landing() {
    const [page, setPage] = useState('home');
    const start = () => alert('Demo — this would open the naming wizard.');
    return (
      <div className="bx-nebula-bg" style={{ minHeight: '100vh' }}>
        <Nav onNav={setPage} page={page} />
        {page === 'how'
          ? (<div style={{ paddingTop: 40 }}><HowItWorks /><WhyDifferent /><CTA onStart={start} /></div>)
          : (<><Hero onStart={start} /><HowItWorks /><WhyDifferent /><Quote /><CTA onStart={start} /></>)}
        <Footer />
      </div>
    );
  }

  window.BXLanding = Landing;
})();