/* global React */
const { useState, useEffect, useRef } = React;

function BubbleField() {
  const bubbles = React.useMemo(() => {
    const list = [];
    for (let i = 0; i < 14; i++) {
      const size = 30 + Math.random() * 110;
      list.push({
        id: i,
        size,
        top: Math.random() * 100,
        left: Math.random() * 100,
        delay: Math.random() * -8,
        duration: 6 + Math.random() * 8,
        opacity: 0.35 + Math.random() * 0.4,
      });
    }
    return list;
  }, []);
  return (
    <div className="bubble-field" aria-hidden="true">
      {bubbles.map(b => (
        <div key={b.id} className="bubble" style={{
          width: b.size, height: b.size,
          top: `${b.top}%`, left: `${b.left}%`,
          animationDuration: `${b.duration}s`,
          animationDelay: `${b.delay}s`,
          opacity: b.opacity,
        }} />
      ))}
    </div>
  );
}

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-brand" style={{display: 'flex', alignItems: 'center', gap: 8}}>
        <img src="Bubbly Logo New.png" alt="" style={{height: 36, width: 'auto'}} />
        <img src="assets/bubbly-wordmark.png" alt="Bubbly" />
      </div>
      <div className="nav-links">
        <a href="#features">Features</a>
        <a href="#obs">Setup</a>
        <a href="#pricing">Pricing</a>
      </div>
      <div style={{display: 'flex', gap: 10}}>
        <a className="btn btn-primary btn-sm" href="#pricing">
          <WindowsIcon /> Get Bubbly
        </a>
      </div>
    </nav>
  );
}

function DownloadIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="7 10 12 15 17 10" />
      <line x1="12" y1="15" x2="12" y2="3" />
    </svg>
  );
}

function WindowsIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
      <path d="M0 3.449L9.75 2.1v9.45H0V3.449zm10.949-1.548L24 0v11.55H10.949V1.901zM0 12.6h9.75v9.449L0 20.7V12.6zm10.949 0H24V24l-13.051-1.8V12.6z"/>
    </svg>
  );
}

function App() {
  const [t, setTweak] = useTweaks({
    palette: ['#a855f7', '#ec4899', '#22d3ee'],
    showBubbles: true,
    heroHeadline: "playful",
    bubbleDensity: 14,
  });

  // Apply palette tweak
  useEffect(() => {
    const [p1, p2, p3] = t.palette;
    document.documentElement.style.setProperty('--purple', p1);
    document.documentElement.style.setProperty('--pink', p2);
    document.documentElement.style.setProperty('--cyan', p3);
    document.documentElement.style.setProperty('--grad-brand', `linear-gradient(135deg, ${p1}, ${p2})`);
    document.documentElement.style.setProperty('--grad-goal', `linear-gradient(90deg, ${p3}, ${p1}, ${p2})`);
  }, [t.palette]);

  return (
    <>
      {t.showBubbles && <BubbleField />}
      <div className="shell">
        <Nav />
        <Hero headlineStyle={t.heroHeadline} />
        <Features />
        <OBSPanel />
<Pricing />
        <FinalCTA />
        <Footer />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor
            label="Palette"
            value={t.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
              ['#a855f7', '#ec4899', '#22d3ee'],
              ['#7c3aed', '#22d3ee', '#80ed99'],
              ['#ff4d6d', '#ffe66d', '#ff8fab'],
              ['#0ea5e9', '#a855f7', '#22d3ee'],
            ]}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Headline tone"
            value={t.heroHeadline}
            onChange={(v) => setTweak('heroHeadline', v)}
            options={[
              { value: 'playful', label: 'Playful' },
              { value: 'direct', label: 'Direct' },
              { value: 'creator', label: 'Creator' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Background">
          <TweakToggle
            label="Floating bubbles"
            value={t.showBubbles}
            onChange={(v) => setTweak('showBubbles', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

function FinalCTA() {
  return (
    <section className="final-cta">
      <h2>Ready to <span className="grad">go live</span> with a little more sparkle?</h2>
      <p>Drop Bubbly into your stream software, customize the vibe, and let your viewers light up the stream.</p>
      <div className="ctas">
        <button className="btn btn-primary btn-lg">
          <WindowsIcon /> Get Bubbly for Windows
        </button>
      </div>
      <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, marginTop: 12}}>
        <div style={{display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', justifyContent: 'center'}}>
          <span style={{fontSize: 12, fontWeight: 800, color: 'var(--ink-soft)'}}>v0.5.1 Beta</span>
          <span style={{fontSize: 12, fontWeight: 800, color: 'var(--ink-soft)'}}>No account required</span>
        </div>
        <span style={{fontSize: 11, fontWeight: 700, color: 'rgba(90,74,131,0.55)'}}>Windows 10 / 11 · 64-bit</span>
      </div>
      <div className="alpha-note">⚡ Beta is open. Jump in.</div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);