function Hero() {
  const { Button, RatingBadge, Icon } = window.PAOLIPlomberieDesignSystem_b9eca4;
  return (
    <section className="section" style={{ paddingBlock: 'var(--space-16)' }} data-screen-label="Hero">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <RatingBadge rating={4.9} count={32} />
          <h1>Plombier à Lattes et Montpellier — dépannage &amp; rénovation</h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, color: 'var(--text-secondary)', maxWidth: 480 }}>
            Urgences 24h/24, 7j/7. Intervention rapide, travail soigné, devis gratuit.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
            <Button as="a" href="tel:+33783289482" variant="urgent" size="lg" icon={<Icon name="phone" size={18} />}>
              Appeler maintenant
            </Button>
            <Button as="a" href="#contact" variant="cta" size="lg">Demander un devis gratuit</Button>
          </div>
        </div>
        <div style={{ borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', aspectRatio: '4/3' }}>
          <img
            src="assets/photos/realisation-3.jpg"
            alt="Douche à l'italienne toute en travertin, réalisation Paoli Plomberie"
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          />
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;