function Guarantees({ onCTA }) {
  const items = [
    {
      icon: <Ic.gift size={24} />,
      value: <><span className="small-prefix">$</span>1,500<span className="unit">value</span></>,
      title: "Free pot filler over your range",
      body: "Fill your stockpot straight from the stove. No hauling a heavy pot across the kitchen. A premium pot filler installed above your range.",
      ribbon: "Next 10 installs only",
      ribbonHighlight: true
    },
    {
      icon: <Ic.shield size={24} />,
      value: <><span className="small-prefix">$</span>250<span className="unit">/day late</span></>,
      title: "On-time guarantee, in writing",
      body: "We agree on a completion date up front. If we miss it, we pay you $250 for every day we're late — up to $2,500 back.",
      ribbon: "Standard"
    },
    {
      icon: <Ic.cube size={24} />,
      value: <><span className="small-prefix">$</span>500<span className="unit">value</span></>,
      title: "Free 3D design rendering",
      body: "Walk through your new kitchen before a single tile is laid. Photorealistic 3D renderings are included with every remodel — no surprises.",
      ribbon: "Included"
    },
  ];

  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 things most remodelers <em>won't put in writing</em>.</h2>
          <p className="lede" style={{textAlign:'center'}}>Book before all 10 spots fill and we'll install a premium pot filler above your range — free. Every remodel also comes with our on-time guarantee and free 3D rendering.</p>
        </div>
        <div className="guarantees-grid">
          {items.map((it, i) => (
            <div className={"guarantee" + (it.ribbonHighlight ? " guarantee--featured" : "")} key={i}>
              <span className={"ribbon" + (it.ribbonHighlight ? " ribbon--hot" : "")}>{it.ribbon}</span>
              <div className="why-item-ic" 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;