function WhyUs() {
  const { Icon } = window.PAOLIPlomberieDesignSystem_b9eca4;
  return (
    <section className="section" data-screen-label="Pourquoi Paoli">
      <div className="container">
        <span className="eyebrow">Pourquoi Paoli</span>
        <h2 style={{ marginTop: 10, marginBottom: 36 }}>Un artisan en qui on peut compter</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {window.PaoliData.whyUs.map((w) => (
            <div key={w.title} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <div style={{ width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--color-sauge-100)', color: 'var(--brand-cta)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={w.icon} size={22} />
              </div>
              <h3 style={{ fontSize: 'var(--text-h4-size)' }}>{w.title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-sm-size)', color: 'var(--text-secondary)' }}>{w.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyUs = WhyUs;