// Sections 2-7

function SectionLabel({ children, accent = 'var(--d-color-live)' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
      <span style={{
        width: 8, height: 8, borderRadius: '50%', background: accent,
      }}/>
      <span className="d-label" style={{ color: 'var(--d-fg-secondary)' }}>{children}</span>
    </div>
  );
}

// ── How it works ──────────────────────────────────────────────
function HowItWorks() {
  const steps = [
    {
      n: '01',
      title: 'Open the invitation.',
      body: 'Tap a conversation invitation link to join in — or start your own on a topic that matters to you.',
      illo: <IlloInvite/>,
    },
    {
      n: '02',
      title: 'Raise your hand.',
      body: 'Tap to request the mic. The AI manages the queue so you don\u2019t have to fight for it.',
      illo: <IlloRaise/>,
    },
    {
      n: '03',
      title: 'Speak your piece.',
      body: 'When the AI calls your name, you\u2019ve got 30 seconds. Make them count.',
      illo: <IlloSpeak/>,
    },
    {
      n: '04',
      title: 'Listen, then go again.',
      body: 'Stay in the queue. Keep the conversation moving.',
      illo: <IlloListen/>,
    },
  ];
  return (
    <section id="how" className="section-pad bg-app">
      <div className="container">
        <SectionLabel>HOW IT WORKS</SectionLabel>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'end', marginBottom: 56 }}
             className="hiw-head">
          <h2 className="display display-lg">Here&rsquo;s how a Delurk conversation&nbsp;works<span style={{ color: 'var(--d-red)' }}>.</span></h2>
          <p className="lede">Four steps. No learning curve. Just&nbsp;talk.</p>
        </div>
        <div className="steps">
          {steps.map(s => (
            <div key={s.n} className="step">
              <div className="step-illo">{s.illo}</div>
              <div className="step-num">{s.n}</div>
              <h3 style={{ fontSize: 19, fontWeight: 700, color: 'var(--d-fg-heading)', letterSpacing: '-0.01em', margin: 0 }}>
                {s.title}
              </h3>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--d-fg-secondary)', margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) { .hiw-head { grid-template-columns: 1fr !important; gap: 20px !important; } }
      `}</style>
    </section>
  );
}

// Tiny illustrations — abstracted product UI
function IlloInvite() {
  return (
    <div style={{
      width: '85%', height: '78%', background: 'white', borderRadius: 12,
      border: '1px solid var(--d-border)',
      boxShadow: 'var(--d-shadow-card-soft)',
      padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 8,
      fontFamily: 'var(--d-font-mono)', fontSize: 10, color: 'var(--d-fg-secondary)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--d-color-live)' }} className="pulse-dot"/>
        <span className="d-label" style={{ fontSize: 9 }}>LIVE NOW</span>
      </div>
      <div style={{ fontFamily: 'var(--d-font-sans)', fontSize: 13, fontWeight: 700, color: 'var(--d-fg-heading)', lineHeight: 1.25 }}>
        delurk.app/c/<br/>climate-policy-2026
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', gap: -6, alignItems: 'center' }}>
        {['a','b','c','d'].map((id, i) => (
          <span key={i} style={{ width: 18, height: 18, borderRadius: '50%', background: ['#6355e0','#0ea58a','#c47a00','#9a8fa0'][i], border: '2px solid white', marginLeft: i === 0 ? 0 : -6 }}/>
        ))}
        <span style={{ fontSize: 9, marginLeft: 6 }}>+47</span>
      </div>
    </div>
  );
}
function IlloRaise() {
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
      <div style={{
        width: 56, height: 56, borderRadius: '50%',
        background: 'var(--d-purple)', color: 'white',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: 'var(--d-shadow-button-purple)',
        position: 'relative',
      }}>
        <Icon name="hand-raise" size={26} color="white"/>
        <span style={{ position: 'absolute', inset: -8, borderRadius: '50%', border: '2px solid var(--d-purple)', opacity: 0.25, animation: 'pulse-ring 1.6s ease-in-out infinite' }}/>
        <span style={{ position: 'absolute', inset: -16, borderRadius: '50%', border: '2px solid var(--d-purple)', opacity: 0.12, animation: 'pulse-ring 1.6s ease-in-out 0.3s infinite' }}/>
      </div>
    </div>
  );
}
function IlloSpeak() {
  return (
    <div style={{ width: '85%', height: '78%', display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start', justifyContent: 'center' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ position: 'relative' }}>
          <MiniAvatar id="you" name="You" size={32}/>
          <span style={{ position: 'absolute', inset: -3, borderRadius: '50%', border: '2px solid var(--d-color-live)', animation: 'pulse-ring 1.2s ease-in-out infinite' }}/>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
          <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--d-fg-heading)' }}>You</span>
          <span className="d-label" style={{ fontSize: 9, color: 'var(--d-color-live)' }}>SPEAKING</span>
        </div>
      </div>
      <div style={{
        width: '100%', height: 6, borderRadius: 100,
        background: 'var(--d-bg-app)', overflow: 'hidden', position: 'relative',
      }}>
        <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: '60%', background: 'var(--d-color-live)', borderRadius: 100 }}/>
      </div>
      <span style={{ fontFamily: 'var(--d-font-mono)', fontSize: 11, fontWeight: 700, color: 'var(--d-color-live)', letterSpacing: '0.04em' }}>
        00:18 / 00:30
      </span>
    </div>
  );
}
function IlloListen() {
  return (
    <div style={{ width: '85%', height: '78%', display: 'flex', flexDirection: 'column', gap: 7 }}>
      <span className="d-label" style={{ fontSize: 9 }}>UP NEXT · 4</span>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {[
          { n: '01', name: 'Noor', current: false },
          { n: '02', name: 'Jen', current: false },
          { n: '03', name: 'Tao', current: false },
          { n: '04', name: 'You', current: true },
        ].map(p => (
          <div key={p.n} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '4px 8px', borderRadius: 8,
            background: p.current ? 'var(--d-primary-muted)' : 'transparent',
            border: p.current ? '1px solid rgba(99,85,224,0.2)' : '1px solid transparent',
          }}>
            <span style={{ fontFamily: 'var(--d-font-mono)', fontSize: 9, fontWeight: 700, color: p.current ? 'var(--d-purple)' : 'var(--d-fg-muted)' }}>{p.n}</span>
            <MiniAvatar id={p.name} name={p.name} size={18}/>
            <span style={{ fontSize: 11, fontWeight: 600, color: p.current ? 'var(--d-purple)' : 'var(--d-fg-secondary)' }}>{p.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── The AI in the room ─────────────────────────────────────────
function AISection() {
  return (
    <section id="safety" className="section-pad bg-surf" style={{ borderTop: '1px solid var(--d-border)' }}>
      <div className="container">
        <SectionLabel accent="var(--d-purple)">THE AI IN THE ROOM</SectionLabel>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'start', marginBottom: 56 }}
             className="ai-head">
          <h2 className="display display-lg">An AI is in the room<span style={{ color: 'var(--d-red)' }}>.</span> That&rsquo;s the point<span style={{ color: 'var(--d-red)' }}>.</span></h2>
          <p className="lede">Delurk&rsquo;s AI facilitator listens to every conversation and drives it in real time — so people can actually have one.</p>
        </div>

        <AIDemo/>

        <div className="feat-grid" style={{ marginTop: 32 }}>
          <div className="feat">
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: 'var(--d-primary-muted)', color: 'var(--d-purple)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="queue" size={22} color="var(--d-purple)"/>
            </div>
            <h3 className="display display-md" style={{ fontSize: 24 }}>Fair turns</h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--d-fg-secondary)', margin: 0 }}>
              The AI runs the speaking queue. Everyone gets a shot at the mic — not just whoever can shout the loudest.
            </p>
            <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 8 }}>
              <FeatBullet>30 seconds each</FeatBullet>
              <FeatBullet>No interruptions</FeatBullet>
              <FeatBullet>No exceptions</FeatBullet>
            </div>
          </div>

          <div className="feat">
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: 'var(--d-live-subtle)', color: 'var(--d-color-live)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="shield" size={22} color="var(--d-color-live)"/>
            </div>
            <h3 className="display display-md" style={{ fontSize: 24 }}>Real-time safety</h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--d-fg-secondary)', margin: 0 }}>
              Hate speech and threats get an instant ban. Toxicity and profanity get a warning.
            </p>
            <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 8 }}>
              <FeatBullet>Three warnings, you&rsquo;re out</FeatBullet>
              <FeatBullet>Same rules for everyone</FeatBullet>
              <FeatBullet>Audited weekly</FeatBullet>
            </div>
          </div>

          <div className="feat">
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: 'rgba(14,165,138,0.10)', color: 'var(--d-color-online)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="target" size={22} color="var(--d-color-online)"/>
            </div>
            <h3 className="display display-md" style={{ fontSize: 24 }}>On-topic, on purpose</h3>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--d-fg-secondary)', margin: 0 }}>
              The AI tracks the thread of the discussion as it happens. Drift off topic, you&rsquo;ll hear about it.
            </p>
            <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 8 }}>
              <FeatBullet>Topic-aware nudges</FeatBullet>
              <FeatBullet>Conversation summaries</FeatBullet>
              <FeatBullet>Stay focused, end better</FeatBullet>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .ai-head { grid-template-columns: 1fr !important; gap: 24px !important; } }
      `}</style>
    </section>
  );
}

function FeatBullet({ children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--d-fg-secondary)', fontFamily: 'var(--d-font-mono)' }}>
      <Icon name="check" size={14} color="var(--d-fg-muted)"/>
      <span>{children}</span>
    </div>
  );
}

// AI Demo — animated queue advancing
function AIDemo() {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 2800);
    return () => clearInterval(id);
  }, []);

  const speakers = ['Anitra', 'Ravi', 'Noor', 'Jen', 'Tao'];
  const current = tick % speakers.length;
  const queue = [
    speakers[(current + 1) % speakers.length],
    speakers[(current + 2) % speakers.length],
    speakers[(current + 3) % speakers.length],
  ];

  const transcripts = [
    'Anitra is bringing up a tension between automation and craft. Let\u2019s unpack that.',
    'Good point, Ravi — that\u2019s a different angle. 30 seconds, please.',
    'Noor, you\u2019re up. The queue is working through quickly today.',
    'Thanks Jen. Quick reminder: we\u2019re still on the original topic.',
    'Tao, you have the floor. Then we\u2019ll wrap this thread.',
  ];

  return (
    <div style={{
      background: 'white',
      borderRadius: 24,
      border: '1px solid var(--d-border)',
      boxShadow: 'var(--d-shadow-card)',
      padding: '32px',
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr',
      gap: 32,
    }} className="ai-demo">
      <style>{`@media (max-width:880px){.ai-demo{grid-template-columns:1fr!important}}`}</style>

      {/* Left — facilitator output */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <MiniAvatar id="ai" facilitator size={40}/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <span className="d-label">AI FACILITATOR</span>
            <span style={{ fontSize: 13, color: 'var(--d-fg-muted)' }}>Listening · 47 in the room</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
            {[0,1,2].map(i => (
              <span key={i} style={{
                width: 6, height: 6, borderRadius: '50%',
                background: 'var(--d-purple)', opacity: 0.6,
                animation: `pulse-dot 1.4s ease-in-out ${i * 0.2}s infinite`,
              }}/>
            ))}
          </div>
        </div>

        <div style={{
          background: 'var(--d-bg-app)',
          borderRadius: 14,
          padding: '16px 18px',
          fontSize: 15,
          lineHeight: 1.55,
          color: 'var(--d-fg-body)',
          minHeight: 84,
          fontFamily: 'var(--d-font-sans)',
          fontStyle: 'italic',
        }} key={tick}>
          <span style={{ display: 'inline-block', animation: 'fadeIn 600ms ease' }}>
            &ldquo;{transcripts[current]}&rdquo;
          </span>
        </div>
        <style>{`@keyframes fadeIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }`}</style>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14, paddingTop: 8, borderTop: '1px solid var(--d-border)' }}>
          <div style={{ position: 'relative', flexShrink: 0 }}>
            <MiniAvatar id={speakers[current]} name={speakers[current]} size={48}/>
            <span style={{ position: 'absolute', inset: -4, borderRadius: '50%', border: '2.5px solid var(--d-color-live)', animation: 'pulse-ring 1.2s ease-in-out infinite' }}/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <span style={{ fontSize: 16, fontWeight: 700, color: 'var(--d-fg-heading)' }}>{speakers[current]}</span>
            <span className="d-label" style={{ color: 'var(--d-color-live)' }}>SPEAKING · 00:18</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 2, alignItems: 'flex-end', height: 28 }}>
            {[12, 22, 16, 26, 14, 20, 10, 18].map((h, i) => (
              <span key={i} style={{
                width: 3, height: h, borderRadius: 2,
                background: 'var(--d-color-live)',
                animation: `bar 0.${4 + (i%6)}s ease-in-out infinite alternate`,
              }}/>
            ))}
          </div>
          <style>{`@keyframes bar { from { transform: scaleY(0.4) } to { transform: scaleY(1) } }`}</style>
        </div>
      </div>

      {/* Right — queue */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <span className="d-label">UP NEXT · {queue.length}</span>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {queue.map((name, i) => (
            <div key={name + i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              background: i === 0 ? 'var(--d-primary-muted)' : 'var(--d-bg-app)',
              padding: '10px 14px', borderRadius: 12,
              border: i === 0 ? '1px solid rgba(99,85,224,0.2)' : '1px solid transparent',
              transition: 'all 400ms ease',
            }}>
              <span style={{ fontFamily: 'var(--d-font-mono)', fontSize: 12, fontWeight: 700, color: i === 0 ? 'var(--d-purple)' : 'var(--d-fg-muted)', minWidth: 18 }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <MiniAvatar id={name} name={name} size={28}/>
              <span style={{ fontSize: 14, fontWeight: 600, color: i === 0 ? 'var(--d-purple)' : 'var(--d-fg-body)' }}>{name}</span>
              {i === 0 && (
                <span className="d-label" style={{ marginLeft: 'auto', fontSize: 10, color: 'var(--d-purple)' }}>UP NEXT</span>
              )}
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 'auto',
          background: 'var(--d-warn-bg)',
          border: '1px solid var(--d-warn-border)',
          borderRadius: 12,
          padding: '12px 14px',
          fontSize: 13,
          color: 'var(--d-warn)',
          lineHeight: 1.4,
        }}>
          <span className="d-label" style={{ color: 'var(--d-warn)', display: 'block', marginBottom: 4, fontSize: 10 }}>SAFETY · LIVE</span>
          0 warnings issued in this conversation.
        </div>
      </div>
    </div>
  );
}

// ── Tagline divider ────────────────────────────────────────────
function TaglineDivider() {
  return (
    <div className="tagline-divider bg-app">
      <div>
        <span className="word">Talk<span className="dot">.</span></span>
        <span className="word">Listen<span className="dot">.</span></span>
        <span className="word">Be heard<span className="dot">.</span></span>
      </div>
    </div>
  );
}

// ── Who it's for ───────────────────────────────────────────────
function WhoItsFor() {
  const cases = [
    { label: 'FOR DEBATES', title: 'Politics, ethics, ideas worth arguing about.', body: 'The kind of debate where the loudest person doesn\u2019t automatically win.', color: 'var(--d-color-live)' },
    { label: 'FOR COMMUNITIES', title: 'Fan groups, local issues, niche interests.', body: 'A real-time hangout where every member gets a voice.', color: 'var(--d-color-online)' },
    { label: 'FOR TOUGH TOPICS', title: 'Grief, parenting, recovery, identity.', body: 'Conversations that need structure and safety to happen at all.', color: 'var(--d-purple)' },
    { label: 'FOR CURIOUS PEOPLE', title: 'For anyone who\u2019d rather hear five strangers think out loud than scroll one more comment thread.', body: '', color: 'var(--d-color-up-next)' },
  ];
  return (
    <section id="who" className="section-pad bg-surf" style={{ borderTop: '1px solid var(--d-border)' }}>
      <div className="container">
        <SectionLabel accent="var(--d-color-online)">WHO IT&rsquo;S FOR</SectionLabel>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 56, alignItems: 'end', marginBottom: 56 }}
             className="who-head">
          <h2 className="display display-lg">Built for people with something to&nbsp;say<span style={{ color: 'var(--d-red)' }}>.</span></h2>
          <p className="lede">Whether you&rsquo;re starting the conversation or stepping into one, Delurk gives you the floor.</p>
        </div>
        <div className="usecase-grid">
          {cases.map(c => (
            <div key={c.label} className="usecase">
              <span className="label-pill" style={{ color: c.color }}>{c.label}</span>
              <h3 className="display display-md" style={{ fontSize: 26, lineHeight: 1.15 }}>{c.title}</h3>
              {c.body && <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--d-fg-secondary)', margin: 0 }}>{c.body}</p>}
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 720px) { .who-head { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
    </section>
  );
}

// ── FAQ ────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: 'Is Delurk free?', a: 'Yes. Download it, raise your hand, join a conversation. No paywall on the core experience.' },
    { q: 'Do I need an account?', a: 'You\u2019ll set up a profile so the AI can manage your turn in the queue and apply warnings consistently. It takes about 30 seconds.' },
    { q: 'Is the AI recording everything I say?', a: 'No. Delurk doesn\u2019t record or store your voice. Your speech is transcribed to text in real time so the AI can facilitate the conversation and so others can read what was said. The text is stored — the audio isn\u2019t.' },
    { q: 'How does moderation actually work?', a: 'The AI listens in real time to manage the queue and flag rule-breaking. See our Privacy Policy for the specifics on what\u2019s stored, for how long, and what\u2019s never kept.' },
    { q: 'Can I start my own conversation?', a: 'Yes. Pick a topic, set it live, share the invitation link, and the AI will facilitate it the same way it facilitates every other conversation on Delurk.' },
  ];
  return (
    <section id="faq" className="section-pad-sm bg-app" style={{ borderTop: '1px solid var(--d-border)' }}>
      <div className="container" style={{ maxWidth: 880 }}>
        <SectionLabel accent="var(--d-color-up-next)">FAQ</SectionLabel>
        <h2 className="display display-lg" style={{ marginBottom: 40 }}>Questions, answered<span style={{ color: 'var(--d-red)' }}>.</span></h2>
        <div>
          {items.map((it, i) => (
            <details key={i} className="faq-item" open={i === 0}>
              <summary>
                <span>{it.q}</span>
                <span className="icon-toggle"><Icon name="plus" size={16}/></span>
              </summary>
              <div className="answer">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Final CTA ──────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section id="get" className="section-pad" style={{
      background: 'linear-gradient(180deg, #ffffff 0%, var(--d-bg-app) 100%)',
      borderTop: '1px solid var(--d-border)',
      textAlign: 'center',
    }}>
      <div className="container" style={{ maxWidth: 800 }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <HandWaveImg size={72} animated/>
        </div>
        <h2 className="display display-xl" style={{ marginBottom: 18 }}>Raise your hand<span style={{ color: 'var(--d-red)' }}>.</span></h2>
        <p className="lede" style={{ fontSize: 22, marginBottom: 40 }}>Talk. Listen. Be heard.</p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 18 }}>
          <StoreBadge kind="apple" sub="Download on the" label="App Store"/>
          <StoreBadge kind="google" sub="Get it on" label="Google Play"/>
        </div>
        <span className="d-label">FREE · iOS AND ANDROID</span>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <span style={{ width: 28, height: 28, color: 'var(--d-red)' }}><HandWaveImg size={28}/></span>
              <span style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', color: 'white' }}>Delurk</span>
            </div>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.55)', maxWidth: 320, margin: 0 }}>
              Live voice conversations, facilitated by AI.
            </p>
          </div>
          <div>
            <h4>Product</h4>
            <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>
          <div>
            <h4>Company</h4>
            <a href="/privacy.html">Privacy</a>
            <a href="/terms.html">Terms</a>
            <a href="mailto:hello@delurk.app">Contact us</a>
          </div>
        </div>
        <div className="bottom-strip">
          <span>© 2026 Horda Inc.</span>
          <span>Raise your hand. Make your voice heard.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { HowItWorks, AISection, TaglineDivider, WhoItsFor, FAQ, FinalCTA, Footer });
