function Hero({ onCTA, tweaks }) {
  const bullets = [
    { strong: "$100 off every window —", rest: "savings that stack up fast when you replace 4 or more." },
    { strong: "Free Sun Matrix glass upgrade —", rest: "blocks heat without darkening your glass, so rooms stay cooler." },
    { strong: "Free heavy-duty screens on every window —", rest: "stronger frames and tear-resistant mesh built to handle heat, wind, and pets." },
  ];

  const eyebrow = (
    <div className="hero-eyebrow-row">
      <span className="rating-pill rating-pill--prominent">
        <Stars size={15} />
        <strong style={{color:'var(--ink)', fontWeight:700}}>5.0</strong>
        <span style={{color:'var(--ink-2)', fontWeight:500}}>Rated by 85+ Sacramento Homeowners</span>
      </span>
    </div>
  );

  const offerBanner = (
    <div className="offer-banner">
      <span className="offer-banner-ic" aria-hidden="true">🏠</span>
      <span className="offer-banner-text">
        <strong>Up to $3,500 Value</strong>
        <span className="offer-banner-sep">—</span>
        <span>Bonus Upgrades When You Replace 4+ Windows</span>
      </span>
    </div>
  );

  const headlineEl = (
    <h1 className="hero-headline" style={{color:'var(--ink)'}}>
      Looking to Replace Your Windows? Get Up to <em>$3,500 in Bonus Upgrades</em> When You Replace 4+ Windows.
    </h1>
  );

  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>
  );

  const ctaRow = (
    <>
      <div className="hero-cta-row">
        <button className="btn btn-primary btn-xl" onClick={onCTA}>
          Get Free Estimate &amp; 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.award size={18} /></span>
          <div>
            <strong>17+ yrs</strong>
            <span>in business</span>
          </div>
        </div>
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.house size={18} /></span>
          <div>
            <strong>1,000+</strong>
            <span>projects done</span>
          </div>
        </div>
        <div className="hero-trust-stat">
          <span className="hero-trust-ic"><Ic.shield size={16} /></span>
          <div>
            <strong>Licensed &amp; Insured</strong>
            <span>Bonded · CA State</span>
          </div>
        </div>
      </div>
    </>
  );

  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          {eyebrow}
          {headlineEl}
          {bulletList}
          {ctaRow}
        </div>
        <div style={{position:'relative', alignSelf:'flex-start'}}>
          <div className="hero-visual" style={{height:'auto', minHeight:'unset', flex:'none'}} data-hero-visual>
            <img src="uploads/photo-222.jpeg" alt="Installed windows on a home exterior" style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 40%'}} />
          </div>
          <div className="float-card tl">
            <div className="fc-icon green"><Ic.shield size={18} /></div>
            <div>
              <strong>Double Lifetime Warranty</strong>
              <span>Anlin Windows — glass, frame &amp; hardware</span>
            </div>
          </div>
          <div className="float-card br">
            <div className="fc-icon"><Ic.gift size={18} /></div>
            <div>
              <strong>$0 Down, 0% APR</strong>
              <span>Financing available</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;