function WhyUs() {
  return (
    <section className="why" id="why">
      <div className="container">
        <Reveal className="why-head">
          <Eyebrow>Why Worldliness</Eyebrow>
          <h2>The contractor who <em style={{fontStyle:'italic', color:'var(--bronze-light)', fontWeight:500}}>actually shows up.</em></h2>
          <div className="rule" />
          <p>Most homeowners have been burned. Ghosted after the quote. Surprise costs. Shoddy work.</p>
          <p>We're not that company — and our track record proves it.</p>
        </Reveal>

        <div className="why-list">
          {window.WHY_US.map((p) => (
            <Reveal key={p.number} className="why-item">
              <span className="n">{p.number}</span>
              <div>
                <h3>{p.title}</h3>
                <div className="rule" />
                <p>{p.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyUs = WhyUs;