function Guarantees({ onCTA }) {
  const items = [
    {
      icon: <Ic.gift size={24} />,
      value: <><span className="small-prefix">$</span>100<span className="unit">off / window</span></>,
      title: "$100 off every window you replace",
      body: "Replace 4 or more windows and save $100 on each one. The more you replace, the more you save — up to $3,500 in total bonus upgrades.",
      ribbon: "Limited time",
      ribbonHighlight: true
    },
    {
      icon: <Ic.gift size={24} />,
      value: <>Free<span className="unit">upgrade</span></>,
      title: "Free Sun Matrix glass on every window",
      body: "Sun Matrix glass blocks heat without darkening your view — keeping rooms cooler and more comfortable year-round. Included at no extra cost with this offer.",
      ribbon: "Limited Time"
    },
    {
      icon: <Ic.gift size={24} />,
      value: <>Free<span className="unit">upgrade</span></>,
      title: "Free heavy-duty screens on every window",
      body: "Stronger frames and tear-resistant mesh built to handle Sacramento heat, wind, and pets. A premium upgrade, on us.",
      ribbon: "Limited Time"
    },
  ];

  return (
    <section className="section section--soft" id="offer">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">Limited-time offer</span>
          <h2 className="h2" style={{textWrap:'balance', fontSize:'clamp(24px, 3vw, 36px)'}}>Three bonus upgrades included with your <em>window replacement.</em></h2>
          <p className="lede" style={{textAlign:'center'}}>Replace 4 or more windows and get all three upgrades at no additional cost. This offer is available while spots last.</p>
        </div>
        <div className="guarantees-grid">
          {items.map((it, i) => (
            <div className="guarantee" key={i}>
              <span className={"ribbon" + (it.ribbonHighlight ? " ribbon--hot" : "")}>{it.ribbon}</span>
              <div style={{width:52, height:52, borderRadius:12, background:'var(--green-tint)', color:'var(--green)', display:'grid', placeItems:'center'}}>
                {it.icon}
              </div>
              <div className="guarantee-value">{it.value}</div>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
        <div style={{display:'flex', justifyContent:'center', marginTop:48}}>
          <button className="btn btn-primary btn-lg" onClick={onCTA}>
            Get Free Estimate &amp; Offer <Ic.arrow />
          </button>
        </div>
      </div>
    </section>
  );
}
window.Guarantees = Guarantees;