function Hero() {
  const [days, setDays] = React.useState(0);
  React.useEffect(() => {
    let start = 0;
    const timer = setInterval(() => {
      start += 1;
      if (start > 7) { clearInterval(timer); setDays(7); }
      else setDays(start);
    }, 180);
    return () => clearInterval(timer);
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero-num">07</div>

      <div className="container">
        <div className="hero-top">
          <div className="eyebrow">Bruce Digital · Auckland, NZ</div>
          <div className="hero-meta">
            <div><span>EST.</span> 2024 — OPERATING FROM TĀMAKI MAKAURAU</div>
            <div><span>FOR</span> TRADES · ADVISERS · SERVICE BUSINESSES</div>
            <div><span>NOW BOOKING</span> {new Date().toLocaleString('en-NZ', {month: 'long'}).toUpperCase()} {new Date().getFullYear()}</div>
          </div>
        </div>

        <h1 className="hero-headline">
          <span className="line"><span className="line-inner">A website</span></span>
          <span className="line"><span className="line-inner">for your business,</span></span>
          <span className="line"><span className="line-inner">built in <em>{days} days</em>.</span></span>
        </h1>

        <div className="hero-bottom">
          <p className="hero-sub">
            <strong>Bruce Digital</strong> is a one-person studio building modern,
            professional websites for small service businesses in Auckland.
            Fixed scope. Fixed price. Live in under a week.
          </p>
          <div className="hero-ctas">
            <div className="day-counter">
              Delivered in <b>5–7 days</b>
            </div>
            <a href="#contact" className="btn btn-primary">
              Start a project
              <svg className="btn-arrow" viewBox="0 0 16 16" fill="none">
                <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <div className="hero-ticker">
        <div className="ticker-track">
          {Array.from({length: 2}).map((_, k) => (
            <span key={k}>
              <span>Full design &amp; build</span><span>·</span>
              <span>Mobile responsive</span><span>·</span>
              <span>Up to <i>5 pages</i></span><span>·</span>
              <span>SSL &amp; hosting</span><span>·</span>
              <span>Copy written by Ben</span><span>·</span>
              <span><i>Live in 5–7 days</i></span><span>·</span>
              <span>Contact form</span><span>·</span>
              <span>2–3 revision rounds</span><span>·</span>
              <span>Video tutorial</span><span>·</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;