// Hero with live-feed demo panel + animated topo background
function HeroTopo() {
  // SVG "contour" lines echoing the Australia outline vibe
  const lines = Array.from({ length: 14 }, (_, i) => i);
  return (
    <div className="hero-topo" aria-hidden="true">
      <svg viewBox="0 0 1600 900" preserveAspectRatio="none">
        <defs>
          <linearGradient id="topo-g" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#6683ad" stopOpacity="0.0" />
            <stop offset="45%" stopColor="#6683ad" stopOpacity="0.9" />
            <stop offset="100%" stopColor="#6683ad" stopOpacity="0.0" />
          </linearGradient>
        </defs>
        {lines.map(i => {
          const y = 50 + i * 60;
          const amp = 30 + (i % 5) * 8;
          const freq = 0.004 + (i % 3) * 0.0008;
          const pts = [];
          for (let x = 0; x <= 1600; x += 20) {
            pts.push(`${x},${y + Math.sin(x * freq + i) * amp}`);
          }
          return <polyline key={i} points={pts.join(' ')} fill="none" stroke="url(#topo-g)" strokeWidth="1" opacity={0.3 + (i % 4) * 0.12} />;
        })}
      </svg>
    </div>
  );
}

function LiveFeedPanel() {
  const events = [
    { ts: '9:04:11', label: <><b>Dan @ Ironbark Plumbing</b> · new enquiry · hot water swap</>, tag: 'ok', tagLabel: 'new' },
    { ts: '9:04:14', label: <>Qualify bot · scope, access, suburb (Edge Hill)</>, tag: 'sync', tagLabel: 'route' },
    { ts: '9:04:29', label: <>Auto-quote · <b>$1,280</b> drafted from rate card</>, tag: 'sent', tagLabel: 'built' },
    { ts: '9:04:37', label: <>SMS + PDF sent to 0414 ···</>, tag: 'sent', tagLabel: 'sent' },
    { ts: '9:06:02', label: <>Customer accepted · job card pushed to SimPro</>, tag: 'ok', tagLabel: 'won' },
  ];
  const [visible, setVisible] = React.useState(0);
  React.useEffect(() => {
    if (visible >= events.length) return;
    const t = setTimeout(() => setVisible(v => v + 1), visible === 0 ? 800 : 700);
    return () => clearTimeout(t);
  }, [visible]);

  const tagClass = { ok: 'tag-ok', sent: 'tag-sent', sync: 'tag-sync', new: 'tag-new' };

  return (
    <div className="hero-panel" aria-hidden="true">
      <div className="panel-head">
        <div className="dots"><span/><span/><span/></div>
        <div className="title">NorthEdge console · live</div>
        <div className="live">Live</div>
      </div>
      <div className="panel-feed" style={{ height: 280, overflow: 'hidden' }}>
        {events.slice(0, visible).map((e, i) => (
          <div key={`${visible}-${i}`} className="feed-row" style={{ animationDelay: `${i * 60}ms` }}>
            <span className="ts">{e.ts}</span>
            <span className="label">{e.label}</span>
            <span className={`tag ${tagClass[e.tag]}`}>{e.tagLabel}</span>
          </div>
        ))}
      </div>
      <div className="panel-foot">
        <span>Today · 14 leads · 11 quotes · 6 booked</span>
        <span><b>+$8,420</b> pipeline today</span>
      </div>
    </div>
  );
}

function Hero() {
  const trades = ['Plumbers','Electricians','Roofers','HVAC','Builders','Painters','Fencers','Landscapers','Cleaners','Concreters','Pest control','Glazing'];
  return (
    <section className="hero" id="top">
      <HeroTopo />
      <div className="hero-inner">
        <div className="hero-copy">
          <div className="eyebrow">Automations for Aussie trades · Built in Cairns, FNQ</div>
          <h1 className="display-h1">
            Less admin.
            <span className="line2"><b>more</b> work.</span>
          </h1>
          <p className="hero-lead">
            We build custom automations for Australian trades — so missed calls get answered,
            quotes go out same-day, and jobs flow straight into your job management software (CRM).
            You stay on the tools. The paperwork runs itself.
          </p>
          <div className="hero-ctas">
            <a href="#contact" className="btn btn-accent">Book a free audit call <span className="arrow">→</span></a>
            <a href="#case" className="btn btn-ghost">See a real build</a>
          </div>
          <div className="hero-meta">
            <span><b>6</b> core automations</span>
            <span><b>11+</b> CRMs wired</span>
            <span><b>2–4 weeks</b> build</span>
            <span><b>We host · We run · We fix</b></span>
          </div>
        </div>
        <LiveFeedPanel />
      </div>
      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {Array(3).fill(0).map((_,i) =>
            trades.map((t, j) => (
              <React.Fragment key={`${i}-${j}`}>
                <span>{t}</span>
                <span className="sep">◆</span>
              </React.Fragment>
            ))
          )}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });