function Hero({ onCTA, tweaks }) {
  const headlineHTML = tweaks.heroHeadlineHTML || "Replacing your roof in Bellevue? Get <em>FREE seamless gutters</em> with any roof replacement.";
  const bullets = tweaks.bullets || [];

  const offerEnd = (() => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const end = new Date(today);
    end.setDate(end.getDate() + 9);
    return end.toLocaleDateString('en-US', { month: 'long', day: 'numeric' });
  })();

  const offerPillCopy = (tweaks.offerPillPrefix || "FREE Offer Ends") + " " + offerEnd;

  const scarcityPill = (
    <div className="scarcity-pill-wrap">
      <span className="scarcity-pill">
        <span className="scarcity-pill-dot" aria-hidden="true"></span>
        {offerPillCopy}
      </span>
    </div>
  );

  const ctaRow = (
    <>
      <div className="hero-cta-row">
        <button className="btn btn-primary btn-xl" onClick={onCTA}>
          {tweaks.formCta || "Get Free Estimate & Offer"}
          <Ic.arrow />
        </button>
        <div className="small" style={{display:'flex', alignItems:'center', gap:8}}>
          <Ic.clock size={15} /> Takes 60 seconds &middot; No obligation
        </div>
      </div>
      <div className="hero-trust-row">
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.shield size={18} /></span>
          <div>
            <strong>5-Year Workmanship</strong>
            <span>Warranty included</span>
          </div>
        </div>
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.award size={18} /></span>
          <div>
            <strong>BuzyBee Aftercare</strong>
            <span>We stand behind every roof</span>
          </div>
        </div>
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.check size={16} /></span>
          <div>
            <strong>Licensed &amp; Insured</strong>
            <span>Bonded · WA State</span>
          </div>
        </div>
      </div>
    </>
  );

  const headlineEl = (
    <h1 className="hero-headline" dangerouslySetInnerHTML={{__html: headlineHTML}} />
  );

  const bulletList = (
    <ul className="hero-bullets">
      {bullets.map((b, i) => (
        <li key={i} className="hero-bullet">
          <span className="check"><Ic.check size={13} /></span>
          <span><strong>{b.strong}</strong> {b.rest}</span>
        </li>
      ))}
    </ul>
  );

  return (
    <section className="hero">
      <div className="container header-bar">
        <a href="/gutters/" className="header-logo">
          <img src="/gutters/assets/logo-buzybee.png" alt="BuzyBee Roofing" />
        </a>
      </div>
      <div className="container hero-grid">
        <div>
          {headlineEl}
          {scarcityPill}
          {bulletList}
          {ctaRow}
        </div>
        <div style={{position:'relative'}}>
          <div className="hero-visual">
            <img src="/gutters/assets/hero-roof.jpg" alt="BuzyBee Roofing crew installing a new roof in Bellevue, WA" style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center center'}} />
          </div>
          <div className="float-card tl">
            <div className="fc-icon green"><Ic.award size={18} /></div>
            <div>
              <strong>BuzyBee Aftercare Promise</strong>
              <span>5-yr workmanship warranty</span>
            </div>
          </div>
          <div className="float-card br">
            <div className="fc-icon"><Ic.shield size={18} /></div>
            <div>
              <strong>No-Sting Roof</strong>
              <span>Your quote is your final price — in writing</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;