// contact.jsx — Page Contact 2C ITECH

function ContactPage() {
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    const fd = new FormData(e.target);
    try {
      await fetch("/api/leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          nom: fd.get("nom"),
          email: fd.get("email"),
          telephone: fd.get("telephone") || "",
          entreprise: fd.get("entreprise") || "",
          sujet: fd.get("sujet"),
          message: fd.get("message"),
          source: "contact",
        }),
      });
    } catch (err) {
      console.error("Contact submit error", err);
    }
    setSubmitting(false);
    setSent(true);
  };

  return (
    <>
      <UrgenceBar level="low" />
      <Header active="contact" />
      <main>
        <section style={{ paddingBlock: 60 }}>
          <div className="container">
            <div style={{ textAlign: "center", marginBottom: 48 }}>
              <span className="eyebrow" style={{ justifyContent: "center" }}>Contact</span>
              <h1 className="h-display" style={{ marginTop: 12, fontSize: "clamp(40px, 5vw, 64px)" }}>
                Trois façons<br /><em>de se parler.</em>
              </h1>
              <p className="lede" style={{ margin: "20px auto 0" }}>
                Choisissez ce qui vous convient — même sans rendez-vous, je réponds rapidement.
              </p>
            </div>

            <div className="ct-actions">
              <a href="tel:+33500000000" className="ct-action">
                <div className="ic"><PhoneIconLg /></div>
                <b>Appel direct</b>
                <span>05 00 00 00 00</span>
                <small>Lun–Ven · 9h–19h</small>
              </a>
              <a href="https://wa.me/33000000000" className="ct-action wa">
                <div className="ic"><WhatsAppIconLg /></div>
                <b>WhatsApp</b>
                <span>Messagerie rapide</span>
                <small>Réponse &lt; 1h en journée</small>
              </a>
              <a href="/rendez-vous.html" className="ct-action rdv">
                <div className="ic" style={{ fontSize: 22 }}>📅</div>
                <b>Prendre RDV</b>
                <span>30 min en visio</span>
                <small>1 clic · sans engagement</small>
              </a>
            </div>

            <div className="ct-grid">
              <div className="ct-form-wrap">
                <h2 className="h2">Ou écrivez un message</h2>
                <p className="muted" style={{ fontSize: 14, marginTop: 4 }}>Réponse sous 24h ouvrées.</p>
                {sent ? (
                  <div className="ct-sent">
                    <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--success)", color: "white", display: "grid", placeItems: "center", fontSize: 28, margin: "0 auto" }}>✓</div>
                    <h3 className="h2" style={{ marginTop: 16, textAlign: "center" }}>Message envoyé !</h3>
                    <p className="muted" style={{ textAlign: "center", marginTop: 8 }}>Je reviens vers vous dans la journée.</p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit}>
                    <div className="form-grid">
                      <div><label>Nom *</label><input type="text" name="nom" required placeholder="Marie Lacombe" /></div>
                      <div><label>Email *</label><input type="email" name="email" required placeholder="vous@entreprise.fr" /></div>
                      <div><label>Téléphone</label><input type="tel" name="telephone" placeholder="06 00 00 00 00" /></div>
                      <div><label>Entreprise</label><input type="text" name="entreprise" placeholder="optionnel" /></div>
                      <div className="full">
                        <label>Sujet *</label>
                        <select name="sujet" required defaultValue="">
                          <option value="" disabled>Sélectionnez…</option>
                          <option>Facturation électronique 2026</option>
                          <option>Automatisation / IA</option>
                          <option>Dépannage informatique</option>
                          <option>Maintenance / abonnement</option>
                          <option>Autre</option>
                        </select>
                      </div>
                      <div className="full"><label>Votre message *</label><textarea name="message" rows="5" required placeholder="Décrivez votre situation en quelques mots." /></div>
                    </div>
                    <div className="row" style={{ marginTop: 24, justifyContent: "space-between", alignItems: "center" }}>
                      <span className="muted" style={{ fontSize: 12 }}>* Champs obligatoires · RGPD respecté</span>
                      <button type="submit" className="btn btn-primary" disabled={submitting}>
                        {submitting ? "Envoi…" : "Envoyer"} <span className="arrow">→</span>
                      </button>
                    </div>
                  </form>
                )}
              </div>

              <aside className="ct-info">
                <div className="ct-card">
                  <h3 className="h3">Zone d'intervention</h3>
                  <ul className="ct-zone">
                    <li><b>Bretenoux</b><span>46130</span></li>
                    <li><b>Saint-Céré</b><span>46400</span></li>
                    <li><b>Vallée Dordogne</b><span>50 km autour</span></li>
                    <li><b>Télé-assistance</b><span>France entière</span></li>
                  </ul>
                </div>
                <div className="ct-card">
                  <h3 className="h3">Horaires</h3>
                  <ul className="ct-hours">
                    <li><span>Lun–Ven</span><b>9h–19h</b></li>
                    <li><span>Samedi</span><b>Sur RDV</b></li>
                    <li><span>Dimanche</span><b>Fermé</b></li>
                    <li className="emergency"><span>Urgences</span><b>24h/24 (abonnés)</b></li>
                  </ul>
                </div>
                <div className="ct-map">
                  <div className="map-placeholder">
                    <span className="mono">📍 Bretenoux · Saint-Céré · Lot (46)</span>
                  </div>
                </div>
              </aside>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ChatBubble />
      <style>{`
        .ct-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 64px; }
        @media (max-width: 820px) { .ct-actions { grid-template-columns: 1fr; } }
        .ct-action { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; text-align: center; transition: transform .2s, border-color .2s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
        .ct-action:hover { transform: translateY(-2px); border-color: var(--accent); }
        .ct-action .ic { width: 56px; height: 56px; border-radius: 14px; background: var(--bg); display: grid; place-items: center; margin-bottom: 12px; }
        .ct-action.wa .ic { background: rgba(37,211,102,0.12); color: #25D366; }
        .ct-action.rdv .ic { background: var(--accent-soft); color: var(--accent); }
        .ct-action b { font-size: 18px; font-weight: 600; }
        .ct-action span { font-size: 14px; color: var(--ink-2); font-family: var(--font-mono); }
        .ct-action small { font-size: 12px; color: var(--ink-3); }
        .ct-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; }
        @media (max-width: 920px) { .ct-grid { grid-template-columns: 1fr; } }
        .ct-form-wrap { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; }
        .ct-sent { padding: 40px 0; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
        .form-grid .full { grid-column: 1 / -1; }
        @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
        .ct-info { display: flex; flex-direction: column; gap: 16px; }
        .ct-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
        .ct-zone { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 12px; }
        .ct-zone li { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px dashed var(--line); font-size: 14px; }
        .ct-zone li:last-child { border-bottom: 0; padding-bottom: 0; }
        .ct-zone span { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; }
        .ct-hours { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
        .ct-hours li { display: flex; justify-content: space-between; }
        .ct-hours li.emergency { color: var(--accent); font-weight: 500; padding-top: 12px; border-top: 1px dashed var(--line); margin-top: 4px; }
        .ct-map { aspect-ratio: 1; min-height: 180px; }
        .map-placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(10,30,63,0.04) 0 8px, rgba(10,30,63,0.07) 8px 16px), var(--premium-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; place-items: center; color: var(--bg-deep); font-size: 13px; }
      `}</style>
    </>
  );
}

function PhoneIconLg() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>; }
function WhatsAppIconLg() { return <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 6.32A7.85 7.85 0 0012.05 4a7.94 7.94 0 00-6.88 11.9L4 20l4.21-1.1a7.93 7.93 0 003.79.96h.01a7.94 7.94 0 005.59-13.54zM12.05 18.5h-.01a6.6 6.6 0 01-3.36-.92l-.24-.14-2.5.66.67-2.43-.16-.25a6.59 6.59 0 0110.21-8.13 6.55 6.55 0 011.93 4.66 6.6 6.6 0 01-6.54 6.55z"/></svg>; }

Object.assign(window, { ContactPage });