/* Sticky header + hero */
function Header({ onCTA }) {
  const links = [['How it works', '#how'], ['Calculator', '#calc'], ['Demo', '#demo'], ['Pricing', '#pricing'], ['FAQ', '#faq']];
  return (
    <header className="hdr">
      <div className="site">
        <a className="brand" href="#top">
          <img className="brand-logo" src="assets/logo-full.png" alt="ReplyFirst — after-hours response for trades" />
        </a>
        <nav className="nav">
          {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
        </nav>
        <div className="hdr-cta">
          <Button variant="primary" icon="phoneVolume" className="sm" onClick={onCTA}>Test the demo</Button>
          <button className="burger" aria-label="Menu"><Icon name="bars" size={22} /></button>
        </div>
      </div>
    </header>);

}

/* Ticking hero clock badge — counts up from 02:14:00 */
function ClockBadge() {
  const [s, setS] = useState(0);
  useEffect(() => {const id = setInterval(() => setS((x) => x + 1), 1000);return () => clearInterval(id);}, []);
  const total = 2 * 3600 + 14 * 60 + s;
  const hh = String(Math.floor(total / 3600) % 24).padStart(2, '0');
  const mm = String(Math.floor(total / 60) % 60).padStart(2, '0');
  const ss = String(total % 60).padStart(2, '0');
  return <Badge>{hh}:{mm}:{ss} AM</Badge>;
}

function Hero({ onCTA, animate = true, layout = 'split', copy }) {
  const c = copy || {};
  return (
    <section className={'hero layout-' + layout} id="top">
      <div className="hero-bg"></div>
      <div className="hero-photo">
        <img className="hero-img" src="assets/hero-night-van.jpg" width="1361" height="765" alt="Technician on the phone beside a work van at night" />
        <div className="scrim"></div>
      </div>
      <div className="site">
        <div style={{ maxWidth: 700 }}>
          <div className="hero-eyebrow">
            <Badge live>Live Coverage</Badge>
            <Badge>24/7 Response</Badge>
            <ClockBadge />
          </div>
          <h1 className="display" style={{ margin: "26px 0 0", textAlign: "left" }}>{c.h1 || 'Answer first.'}<br /><span className="yl">{c.h2 || 'Win more jobs.'}</span></h1>
          <p className="hero-sub">{c.sub || 'The 24/7 AI receptionist built for BC trades. It answers the calls you’d miss, books the job, and texts the urgent ones to your phone in seconds.'}</p>
          <div className="hero-cta">
            <Button variant="primary" icon="phoneVolume" onClick={onCTA}>{c.cta1 || 'Test the AI receptionist'}</Button>
            <Button variant="secondary" icon="calendarCheck" onClick={() => { window.location.href = 'mailto:hello@replyfirst.ca?subject=ReplyFirst%20setup%20call'; }}>Book a setup call</Button>
          </div>
          <div className="hero-cta-note"><Icon name="phoneVolume" size={13} /> Hear it answer a live 2 a.m. emergency. No signup, 30 seconds.</div>
          <ul className="hero-proof">
            <li><Icon name="check" size={14} /> Live in days</li>
            <li><Icon name="check" size={14} /> Keep your number</li>
            <li><Icon name="check" size={14} /> No contract</li>
          </ul>
        </div>
        <div><DispatchCard animate={animate} /></div>
      </div>
    </section>);

}

Object.assign(window, { Header, Hero });