function WhyUs() {
  const items = [
    { icon: <Ic.award size={22} />, title: "17+ years, 1,000+ projects", body: "Over seventeen years of window, siding, and door installations across the Greater Sacramento area. We've seen every house type, every challenge — and we know how to handle it." },
    { icon: <Ic.windowFrame size={22} />, title: "Direct Anlin Windows representative", body: "We're direct reps for Anlin — one of California's most respected window brands. That means better pricing, faster delivery, and a true double lifetime warranty on every window." },
    { icon: <Ic.shield size={22} />, title: "Double warranty protection", body: "Your windows come with Anlin's double lifetime warranty on glass, frame, and hardware — plus our own 10-year workmanship warranty. You're fully covered." },
    { icon: <Ic.leaf size={22} />, title: "Simple, fast, hassle-free installation", body: "From your free estimate to final install, everything is clearly explained and scheduled around your life. Most jobs finish in 1–2 days. No confusion, no mess." },
  ];
  return (
    <section className="section" id="why">
      <div className="container">
        <div className="why-grid">
          <div>
            <span className="eyebrow">Why Elevate</span>
            <h2 className="h2" style={{marginTop:16, marginBottom:24}}>The window installer Sacramento homeowners keep <em>recommending to their neighbors.</em></h2>
            <div className="why-list">
              {items.map((it, i) => (
                <div className="why-item" key={i}>
                  <div className="ic">{it.icon}</div>
                  <div>
                    <h3>{it.title}</h3>
                    <p>{it.body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <p style={{fontSize:14, color:'var(--ink-3)', marginBottom:12, fontStyle:'italic', lineHeight:1.5}}>
              Local family-owned business founded in Fair Oaks, CA.
            </p>
            <div className="why-visual" style={{overflow:'hidden', borderRadius:'var(--radius-lg)'}}>
              <img src="uploads/Realistic_photo_of_202604240935.jpeg" alt="Elevate Construction Group team" style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WhyUs = WhyUs;