function ContactSection({ mapsAllowed, onRevealMap }) {
  const { Field, Input, Select, Textarea, Checkbox, Button, Icon } = window.PAOLIPlomberieDesignSystem_b9eca4;
  const [consent, setConsent] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    if (!consent) return;
    setSent(true);
  }

  return (
    <section id="contact" className="section" data-screen-label="Contact / Devis">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 48 }}>
        <div>
          <span className="eyebrow">Contact</span>
          <h2 style={{ marginTop: 10, marginBottom: 24 }}>Demander un devis gratuit</h2>

          {sent ? (
            <div style={{ padding: 20, background: 'var(--surface-section-alt-soft)', borderRadius: 'var(--radius-lg)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <Icon name="check" size={20} color="var(--brand-cta)" />
              <p style={{ margin: 0, fontFamily: 'var(--font-body)', color: 'var(--text-body)' }}>
                Merci ! Votre demande a bien été enregistrée — nous vous recontactons rapidement.
              </p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Field label="Nom" required htmlFor="c-name"><Input id="c-name" required placeholder="Votre nom" /></Field>
                <Field label="Téléphone" required htmlFor="c-tel"><Input id="c-tel" type="tel" required placeholder="06 12 34 56 78" /></Field>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <Field label="Email" required htmlFor="c-email"><Input id="c-email" type="email" required placeholder="vous@exemple.fr" /></Field>
                <Field label="Type de besoin" htmlFor="c-need">
                  <Select id="c-need" options={window.PaoliData.needOptions} />
                </Field>
              </div>
              <Field label="Message" htmlFor="c-msg">
                <Textarea id="c-msg" placeholder="Décrivez votre besoin..." />
              </Field>
              <Checkbox
                id="c-consent"
                checked={consent}
                onChange={(e) => setConsent(e.target.checked)}
                required
                label={<>Vos données servent uniquement à traiter votre demande et ne sont jamais revendues. J'accepte la <a href="politique-confidentialite.html">politique de confidentialité</a>.</>}
              />
              <div>
                <Button type="submit" variant="cta" size="lg" disabled={!consent}>Envoyer ma demande</Button>
              </div>
            </form>
          )}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'var(--font-body)' }}>
            <a href="tel:+33783289482" style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-body)', fontWeight: 600, textDecoration: 'none' }}>
              <Icon name="phone" size={16} color="var(--brand-cta)" /> 07 83 28 94 82
            </a>
            <a href="mailto:paoli.pro34@gmail.com" style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-body)', textDecoration: 'none' }}>
              <Icon name="mail" size={16} color="var(--brand-cta)" /> paoli.pro34@gmail.com
            </a>
            <span style={{ display: 'flex', alignItems: 'flex-start', gap: 8, color: 'var(--text-body)' }}>
              <Icon name="map-pin" size={16} color="var(--brand-cta)" style={{ marginTop: 2 }} /> 80 Avenue Léonard de Vinci, 34970 Lattes
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--text-body)' }}>
              <Icon name="clock" size={16} color="var(--brand-cta)" /> Urgences 24h/24, 7j/7
            </span>
          </div>
          <div style={{ height: 220 }}>
            <MapEmbed allowed={mapsAllowed} onReveal={onRevealMap} />
          </div>
        </div>
      </div>
    </section>
  );
}
window.ContactSection = ContactSection;