// Hero + main app

function TopNav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="nav" style={{ borderBottom: scrolled ? '1px solid rgba(0,0,0,0.05)' : '1px solid transparent' }}>
      <div className="container nav-inner">
        <a href="#top" className="nav-brand">
          <span className="logo-mark"><HandWaveImg size={22}/></span>
          <span>Delurk</span>
        </a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#safety">Safety</a>
          <a href="#who">Who it&rsquo;s for</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#get" className="nav-cta">
          <button className="btn btn-primary" style={{ height: 40, fontSize: 14, padding: '0 18px' }}>
            Get the app
          </button>
        </a>
      </div>
    </nav>
  );
}

function Hero() {
  return (
    <section id="top" style={{
      position: 'relative',
      paddingTop: 'clamp(48px, 7vw, 96px)',
      paddingBottom: 'clamp(48px, 7vw, 96px)',
      background: 'var(--d-gradient-bg)',
      overflow: 'hidden',
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr minmax(0, 340px)',
          gap: 56,
          alignItems: 'center',
        }} className="hero-grid">

          {/* Left — copy */}
          <div>


            <h1 className="display display-xl" style={{ marginBottom: 28 }}>
              Raise your hand<span style={{ color: 'var(--d-red)' }}>.</span><br/>
              Make your voice heard<span style={{ color: 'var(--d-red)' }}>.</span>
            </h1>

            <p className="lede" style={{ marginBottom: 40, fontSize: 'clamp(20px, 2vw, 26px)' }}>
              Live voice conversations, facilitated by AI. No shouting. No hate. No toxicity. Just real people talking about things that matter.
            </p>

            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 24 }}>
              <StoreBadge kind="apple" sub="Download on the" label="App Store"/>
              <StoreBadge kind="google" sub="Get it on" label="Google Play"/>
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: -6 }}>
                {['anitra','ravi','noor','jen','tao'].map((id, i) => (
                  <span key={id} style={{ marginLeft: i === 0 ? 0 : -8 }}>
                    <MiniAvatar id={id} name={id} size={26}/>
                  </span>
                ))}
              </div>
              <span style={{ fontSize: 14, color: 'var(--d-fg-secondary)' }}>
                <strong style={{ color: 'var(--d-fg-heading)', fontWeight: 700 }}>1,200+</strong> conversations live this week
              </span>
            </div>
          </div>

          {/* Right — phone */}
          <div style={{ display: 'flex', justifyContent: 'flex-end', position: 'relative', minWidth: 0 }}>
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div className="phone-bezel">
                <img src="assets/hero-screen.png" alt="Delurk live conversation" className="phone-bezel-img"/>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          .hero-grid > div:last-child { order: 2; }
          .hero-callout-1 { left: -20px !important; }
          .hero-callout-2 { right: -20px !important; }
        }
        @media (max-width: 540px) {
          .hero-callout-1, .hero-callout-2 { display: none; }
        }
      `}</style>
    </section>
  );
}

const TWEAKS = /*EDITMODE-BEGIN*/{
  "hero_layout": "phone-right",
  "hero_h1_size": 104,
  "show_callouts": true,
  "ai_demo_autoplay": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAKS);

  // apply hero h1 size
  React.useEffect(() => {
    document.documentElement.style.setProperty('--hero-h1', tweaks.hero_h1_size + 'px');
  }, [tweaks.hero_h1_size]);

  return (
    <>
      <TopNav/>
      <Hero/>
      <HowItWorks/>
      <AISection/>
      <TaglineDivider/>
      <WhoItsFor/>
      <FAQ/>
      <FinalCTA/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakSlider label="H1 size" value={tweaks.hero_h1_size} min={56} max={140} step={2}
            onChange={(v) => setTweak('hero_h1_size', v)} suffix="px"/>
          <TweakToggle label="Floating callouts" value={tweaks.show_callouts}
            onChange={(v) => {
              setTweak('show_callouts', v);
              document.querySelectorAll('.hero-callout-1, .hero-callout-2').forEach(el => {
                el.style.display = v ? '' : 'none';
              });
            }}/>
        </TweakSection>
        <TweakSection title="AI demo">
          <TweakToggle label="Auto-cycle queue" value={tweaks.ai_demo_autoplay}
            onChange={(v) => setTweak('ai_demo_autoplay', v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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