function SignalStream() {
  // Live-feel mock: rows cycle in
  const baseRows = [
    { i: <IFunding size={14}/>, who: 'Maya Chen · VP Engineering · Loamhq',     what: 'Series B · $42M · 4 days ago',  meta: '00:03', score: '94' },
    { i: <INewRole size={14}/>, who: 'Devin Park · Head of RevOps · Lumen Bio',   what: 'New role · started 11 days ago', meta: '00:14', score: '91' },
    { i: <ITechStack size={14}/>,who: 'Priya Rao · Director of IT · Northwave',   what: 'Uses Salesforce + Outreach',     meta: '00:22', score: '88' },
    { i: <IHiring size={14}/>,  who: 'Jordan Vey · CRO · Halo Telecom',           what: 'Hiring 3 AEs · posted yesterday',meta: '00:31', score: '90' },
    { i: <IEngagement size={14}/>,who:'Sam Okafor · VP Sales · Brightway',        what: 'Engaged with "RevOps playbook"', meta: '00:44', score: '86' },
    { i: <IViewer size={14}/>,  who: 'Lina Becker · Founder · Quill Studio',      what: 'Visited your website',           meta: '00:52', score: '83' },
    { i: <ICompetitor size={14}/>,who:'Theo Marsh · Director Ops · Inkwell',      what: 'Engaged competitor post',        meta: '01:07', score: '79' },
  ];
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setTick((x) => x + 1), 2200);
    return () => clearInterval(t);
  }, []);
  const rotated = React.useMemo(() => {
    const arr = [...baseRows];
    const off = tick % baseRows.length;
    return [...arr.slice(off), ...arr.slice(0, off)].slice(0, 5);
  }, [tick]);

  return (
    <div className="signal-stream">
      <div className="ss-head">
        <div className="ttl">aida.signals · live feed</div>
        <div className="live"><span className="dot"></span> 1,427 today</div>
      </div>
      {rotated.map((r, idx) => (
        <div className={`ss-row ${idx === 0 ? 'fresh' : ''}`} key={`${tick}-${idx}`}>
          <div className="icn">{r.i}</div>
          <div>
            <div className="who">{r.who}</div>
            <div className="what">{r.what}</div>
          </div>
          <div className="meta">
            +{r.meta}
            <div className="score">score {r.score}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden></div>
      <div className="hero-grid" aria-hidden></div>
      <div className="wrap hero-inner">
        <div className="hero-row">
          <div>
            <div className="hero-eyebrow">
              <span className="dot"></span>
              Your AI Digital Assistant for LinkedIn outreach
            </div>
            <h1>
              Find hot leads.<br/>
              Start outreach in <span className="accent">under 10 minutes.</span>
            </h1>
            <p className="hero-sub">
              AiDA is your AI Digital Assistant for LinkedIn. It watches real-time buying
              signals across your market, personalizes every message, and launches outreach
              from your profile while you keep closing. Connect LinkedIn, pick a signal,
              hit launch — done before your coffee is.
            </p>
            <div className="hero-ctas">
              <a href="https://app.aidasdr.com/signup" className="btn btn-indigo">Start your 7-day free trial <span className="arrow">→</span></a>
              <a href="#outreach" className="btn btn-ghost-light">See it in action</a>
            </div>
            <div className="hero-meta">
              <span><b>Under 10 min</b> to your first campaign</span>
              <span><b>3–5×</b> response rate vs cold</span>
              <span><b>Your profile</b> · within LinkedIn limits</span>
            </div>
          </div>
          <div>
            <SignalStream />
          </div>
        </div>

        <div className="hero-stat">
          <div>
            <div className="num"><span className="em">&lt; 10 min</span></div>
            <div className="lbl">From signup to launch. Connect LinkedIn, pick a signal, send your first campaign before your coffee is cold.</div>
          </div>
          <div>
            <div className="num"><span className="em">3–5×</span></div>
            <div className="lbl">Higher response rate than cold outreach, because you're reaching people during a moment of change.</div>
          </div>
          <div>
            <div className="num">24/7</div>
            <div className="lbl">AiDA watches signals while you sleep, drafts every message, and queues outreach on your behalf.</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;