/* ============================================== */
/* Page Contact — WhatsApp + Email + Formulaire   */
/* ============================================== */

function Contact() {
  return (
    <Page>
      <ContactHero />
      <ContactChannels />
      <ContactForm />
      <ContactMap />
    </Page>
  );
}

function ContactHero() {
  return (
    <section data-screen-label="Contact Hero" style={{
      background: "var(--marin)", color: "#fff",
      position: "relative", overflow: "hidden",
      borderBottom: "1px solid #14294A",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 60% 60% at 85% 50%, rgba(232,98,18,0.22), transparent 65%)",
        pointerEvents: "none",
      }}/>
      <div className="wrap" style={{ position: "relative", padding: "84px 32px 72px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
          <span className="tag">Contact · Hotline chantier</span>
          <span className="hr-orange"/>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 56, alignItems: "end" }} className="ibd-section-head">
          <h1 className="h1" style={{ fontSize: "clamp(56px, 7vw, 132px)", color: "#fff" }}>
            Parlons<br/>
            <span style={{ color: "var(--orange)" }}>chantier.</span>
          </h1>
          <p style={{ fontSize: 17, color: "#fff", lineHeight: 1.55, maxWidth: 420, fontWeight: 500 }}>
            Trois manières simples : WhatsApp pour une réponse immédiate,
            téléphone pour discuter, formulaire pour un devis détaillé.
          </p>
        </div>
      </div>
      <div style={{
        position: "absolute", bottom: 0, left: 0, right: 0, height: 8,
        background: "repeating-linear-gradient(90deg, var(--marin-line) 0 1px, transparent 1px 40px)",
      }}/>
    </section>
  );
}

/* ---------- Channels ---------- */
function ContactChannels() {
  return (
    <section data-screen-label="Canaux" style={{
      background: "var(--marin-deep)", color: "#fff",
      padding: "0", borderBottom: "1px solid #14294A",
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "1.6fr 1fr 1fr",
        gap: 0,
      }} className="ibd-channels-grid">

        {/* WhatsApp */}
        <a href="https://wa.me/221789230600" style={{
          padding: "56px 40px",
          background: "linear-gradient(135deg, #128C7E 0%, #075E54 100%)",
          color: "#fff", display: "block",
          position: "relative", overflow: "hidden",
          transition: "transform .25s",
        }}
        onMouseEnter={e => e.currentTarget.style.transform = "translateY(-2px)"}
        onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}
        >
          <span className="label" style={{ color: "rgba(255,255,255,.7)" }}>Canal recommandé</span>
          <div style={{ display: "flex", alignItems: "center", gap: 20, marginTop: 24 }}>
            <div style={{
              width: 84, height: 84, borderRadius: 999,
              background: "#25D366", color: "#fff",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--ff-title)", fontWeight: 900, fontSize: 44, flex: "0 0 auto",
            }}>W</div>
            <div>
              <div className="h1" style={{ fontSize: "clamp(40px, 5vw, 64px)", color: "#fff" }}>WhatsApp</div>
              <div className="mono" style={{ fontSize: 12, marginTop: 8, letterSpacing: 2, color: "rgba(255,255,255,.85)" }}>
                RÉPONSE EN ~15 MIN · LUN–SAM 08H–19H
              </div>
            </div>
          </div>
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,.2)", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <span style={{ fontFamily: "var(--ff-title)", fontWeight: 700, fontSize: 28, letterSpacing: -.5 }}>
              +221 78 923 06 00
            </span>
            <span className="btn btn--white btn--sm">
              Ouvrir WhatsApp <span className="arr">→</span>
            </span>
          </div>
          <div style={{ position: "absolute", right: -40, top: -40, width: 220, height: 220, border: "1px solid rgba(255,255,255,.08)", borderRadius: 999, pointerEvents: "none" }}/>
          <div style={{ position: "absolute", right: 20, top: 20, width: 140, height: 140, border: "1px solid rgba(255,255,255,.06)", borderRadius: 999, pointerEvents: "none" }}/>
        </a>

        {/* Téléphone */}
        <a href="tel:+221789230600" style={{
          padding: "40px 32px", background: "var(--marin)", color: "#fff",
          borderRight: "1px solid #14294A", borderLeft: "1px solid #14294A",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          transition: "background .2s", textDecoration: "none",
          position: "relative", overflow: "hidden",
        }}
        onMouseEnter={e => e.currentTarget.style.background = "var(--marin-soft)"}
        onMouseLeave={e => e.currentTarget.style.background = "var(--marin)"}
        >
          <div>
            <span className="label" style={{ color: "var(--orange)" }}>Téléphone direct</span>
            <div className="h1" style={{ fontSize: "clamp(32px, 3.5vw, 52px)", color: "#fff", marginTop: 14, lineHeight: 1 }}>Appelez<br/>maintenant.</div>
            <p style={{ fontSize: 13, color: "var(--acier)", marginTop: 14, lineHeight: 1.6 }}>
              Réponse immédiate de notre équipe terrain. Idéal pour les urgences chantier.
            </p>
          </div>
          <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid #14294A" }}>
            <div style={{ fontFamily: "var(--ff-title)", fontWeight: 900, fontSize: 26, color: "var(--orange)", letterSpacing: -.5 }}>+221 78 923 06 00</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--acier)", marginTop: 6, letterSpacing: 1.5 }}>LUN–SAM · 08H–19H</div>
            <div style={{ marginTop: 16, display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12, fontWeight: 700, color: "#fff", textTransform: "uppercase", letterSpacing: 1 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#22c55e", display: "inline-block" }}/>
              Ligne disponible
            </div>
          </div>
          <div style={{ position: "absolute", right: -30, bottom: -30, width: 140, height: 140, border: "1px solid rgba(255,255,255,.04)", borderRadius: 999, pointerEvents: "none" }}/>
        </a>

        {/* Email */}
        <a href="mailto:contact@ibdservices.pro" style={{
          padding: "40px 32px", background: "var(--marin)", color: "#fff",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          transition: "background .2s", textDecoration: "none",
          position: "relative", overflow: "hidden",
        }}
        onMouseEnter={e => e.currentTarget.style.background = "var(--marin-soft)"}
        onMouseLeave={e => e.currentTarget.style.background = "var(--marin)"}
        >
          <div>
            <span className="label" style={{ color: "var(--orange)" }}>Email · Devis détaillé</span>
            <div className="h1" style={{ fontSize: "clamp(32px, 3.5vw, 52px)", color: "#fff", marginTop: 14, lineHeight: 1 }}>Écrivez-<br/>nous.</div>
            <p style={{ fontSize: 13, color: "var(--acier)", marginTop: 14, lineHeight: 1.6 }}>
              Pour les demandes complexes, devis multi-chantiers ou questions contractuelles.
            </p>
          </div>
          <div style={{ marginTop: 28, paddingTop: 20, borderTop: "1px solid #14294A" }}>
            <div style={{ fontFamily: "var(--ff-title)", fontWeight: 700, fontSize: 16, color: "var(--orange)", wordBreak: "break-all" }}>contact@ibdservices.pro</div>
            <div className="mono" style={{ fontSize: 11, color: "var(--acier)", marginTop: 6, letterSpacing: 1.5 }}>RÉPONSE SOUS 24H</div>
            <div style={{ marginTop: 16, display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12, fontWeight: 700, color: "#fff", textTransform: "uppercase", letterSpacing: 1 }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--orange)", display: "inline-block" }}/>
              Facture NINEA disponible
            </div>
          </div>
          <div style={{ position: "absolute", right: -30, bottom: -30, width: 140, height: 140, border: "1px solid rgba(255,255,255,.04)", borderRadius: 999, pointerEvents: "none" }}/>
        </a>

      </div>
    </section>
  );
}

/* ---------- Formulaire ---------- */
function ContactForm() {
  const [form, setForm] = React.useState({
    sujet: "devis", nom: "", email: "", telephone: "", message: "",
  });
  const [sent, setSent] = React.useState(false);

  const set = (k) => (v) => setForm(f => ({ ...f, [k]: v }));
  const ready = form.nom && (form.email || form.telephone) && form.message.length > 10;

  return (
    <section data-screen-label="Formulaire" style={{ background: "var(--fond)", padding: "104px 0" }}>
      <div className="wrap">
        <div className="ibd-contact-grid" style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "start",
        }}>
          <div>
            <span className="tag tag--marin">Formulaire</span>
            <h2 className="h1" style={{ fontSize: "clamp(40px, 5vw, 72px)", color: "var(--marin)", marginTop: 14 }}>
              Une question,<br/>
              <span style={{ color: "var(--orange)" }}>un devis ?</span>
            </h2>
            <p style={{ marginTop: 18, fontSize: 16, color: "var(--noir)", maxWidth: 540, lineHeight: 1.55 }}>
              Réponse sous 1h ouvrée. Aucun champ inutile.
            </p>

            {sent ? (
              <div style={{ marginTop: 36, padding: 36, background: "#fff", border: "1px solid var(--acier-soft)", borderTop: "4px solid var(--orange)" }}>
                <div style={{ width: 56, height: 56, background: "var(--orange)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--ff-title)", fontWeight: 900, fontSize: 28 }}>✓</div>
                <h3 className="h2" style={{ fontSize: 34, color: "var(--marin)", marginTop: 18 }}>Message envoyé.</h3>
                <p style={{ marginTop: 12, fontSize: 15, color: "var(--noir)" }}>
                  Merci {form.nom.split(" ")[0]} — notre équipe revient vers vous sous 1h ouvrée.
                </p>
                <button onClick={() => { setSent(false); setForm({ sujet: "devis", nom:"", email:"", telephone:"", message:"" }); }}
                  className="btn btn--ghost-marin" style={{ marginTop: 22 }}>
                  Nouveau message
                </button>
              </div>
            ) : (
              <div style={{ marginTop: 36, background: "#fff", border: "1px solid var(--acier-soft)", padding: 32 }}>
                <FieldLabel n="01">Sujet</FieldLabel>
                <RadioGroup value={form.sujet} onChange={set("sujet")}
                  options={[
                    { v: "devis",    t: "Devis",    h: "Réservation ou estimation" },
                    { v: "question", t: "Question", h: "Avant de réserver" },
                    { v: "support",  t: "Support",  h: "Chantier en cours" },
                  ]}/>

                <FieldLabel n="02" mt>Nom complet *</FieldLabel>
                <input className="ibd-input" value={form.nom} onChange={e => set("nom")(e.target.value)} placeholder="Ex. Mamadou Diop"/>

                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginTop: 24 }}>
                  <div>
                    <FieldLabel n="03">Téléphone</FieldLabel>
                    <input className="ibd-input" value={form.telephone} onChange={e => set("telephone")(e.target.value)} placeholder="+221 77 000 00 00"/>
                  </div>
                  <div>
                    <FieldLabel n="04">Email</FieldLabel>
                    <input type="email" className="ibd-input" value={form.email} onChange={e => set("email")(e.target.value)} placeholder="vous@exemple.com"/>
                  </div>
                </div>
                <div className="mono" style={{ fontSize: 11, color: "#7E8B96", marginTop: 8, letterSpacing: 1.5 }}>
                  AU MOINS UN DES DEUX EST REQUIS
                </div>

                <FieldLabel n="05" mt>Votre message *</FieldLabel>
                <textarea rows="6" className="ibd-input"
                  value={form.message}
                  onChange={e => set("message")(e.target.value)}
                  placeholder="Combien d'étais ? Pour quelle durée ? Sur quel chantier ?"
                  style={{ resize: "vertical", minHeight: 140 }}/>
                <div className="mono" style={{ fontSize: 11, color: form.message.length > 10 ? "var(--orange)" : "#7E8B96", marginTop: 8, letterSpacing: 1.5 }}>
                  {form.message.length} CARACTÈRES · MIN. 10
                </div>

                <button onClick={() => ready && setSent(true)}
                  disabled={!ready}
                  className="btn btn--orange"
                  style={{ marginTop: 28, opacity: ready ? 1 : .4 }}>
                  Envoyer le message <span className="arr">→</span>
                </button>
              </div>
            )}
          </div>

          {/* Sidebar */}
          <aside style={{ position: "sticky", top: 100, display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ background: "var(--marin)", color: "#fff", padding: 28 }}>
              <span className="label" style={{ color: "var(--acier)" }}>Réponse moyenne</span>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginTop: 12 }}>
                <span className="h1" style={{ fontSize: 56, color: "#fff" }}>15</span>
                <span className="h3" style={{ fontSize: 20, color: "var(--orange)" }}>min</span>
              </div>
              <p className="body-dark" style={{ fontSize: 13, marginTop: 12 }}>
                Sur WhatsApp en heures ouvrées. Les emails reviennent sous 24h.
              </p>
            </div>
            <div style={{ background: "#fff", border: "1px solid var(--acier-soft)", padding: 28 }}>
              <span className="label" style={{ color: "var(--orange)" }}>Localisation dépôt</span>
              <h4 className="h3" style={{ fontSize: 22, marginTop: 10, color: "var(--marin)" }}>IBD Services — Mbour</h4>
              <p style={{ marginTop: 10, fontSize: 14, color: "var(--noir)", lineHeight: 1.6 }}>
                Route de Saly<br/>Mbour, Sénégal
              </p>
              <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--acier-soft)" }}>
                <span className="label" style={{ color: "var(--marin)" }}>Horaires</span>
                <div style={{ marginTop: 6, fontSize: 14, color: "var(--noir)" }}>
                  Lun–Sam · 08h – 19h<br/>Dimanche · sur rendez-vous
                </div>
              </div>
            </div>
            <div style={{ background: "var(--fond-warm)", padding: 28, borderLeft: "3px solid var(--orange)" }}>
              <span className="label" style={{ color: "var(--orange)" }}>Urgence chantier</span>
              <p style={{ marginTop: 10, fontSize: 14, color: "var(--marin)", lineHeight: 1.55 }}>
                Pour une rupture d'étai ou un défaut sur matériel livré,
                appelez directement le numéro hotline — réponse 24h/7.
              </p>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ---------- Carte OpenStreetMap ---------- */
function ContactMap() {
  return (
    <section style={{ background: "var(--marin-deep)", color: "#fff", padding: "96px 0", borderTop: "1px solid #14294A" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 40 }}>
          <div>
            <span className="tag">Sur le terrain</span>
            <h2 className="h1" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", marginTop: 14, color: "#fff" }}>Zone d'intervention.</h2>
          </div>
          <span className="mono" style={{ fontSize: 11, color: "var(--acier)", letterSpacing: 2 }}>PETITE CÔTE · SÉNÉGAL</span>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 1, background: "#14294A", marginBottom: 32 }}>
          {[
            { ville: "Mbour", desc: "Dépôt IBD · Base opérationnelle", main: true },
            { ville: "Saly", desc: "Station balnéaire · Chantiers hôteliers", main: false },
            { ville: "Nguékhokh", desc: "Zone résidentielle en expansion", main: false },
            { ville: "Somone", desc: "Lagune · Projets touristiques", main: false },
          ].map(z => (
            <div key={z.ville} style={{
              background: z.main ? "var(--orange)" : "var(--marin)",
              padding: "32px 24px",
            }}>
              <div style={{ fontFamily: "var(--ff-title)", fontWeight: 900, fontSize: 28, color: "#fff", textTransform: "uppercase" }}>{z.ville}</div>
              <div style={{ fontSize: 13, color: z.main ? "rgba(255,255,255,.8)" : "var(--acier)", marginTop: 8, lineHeight: 1.5 }}>{z.desc}</div>
              <div style={{ marginTop: 16, fontFamily: "var(--ff-mono)", fontSize: 11, color: z.main ? "#fff" : "var(--orange)", letterSpacing: 2 }}>LIVRAISON J+1</div>
            </div>
          ))}
        </div>

        <a href="https://maps.google.com/?q=Mbour,Senegal" target="_blank" rel="noopener noreferrer"
          className="btn btn--ghost-white">
          Voir sur Google Maps <span className="arr">→</span>
        </a>
      </div>
    </section>
  );
}

/* ---------- Primitives ---------- */
function RadioGroup({ value, onChange, options }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(options.length, 3)}, 1fr)`, gap: 10 }}>
      {options.map(o => {
        const active = value === o.v;
        return (
          <button key={o.v} onClick={() => onChange(o.v)}
            style={{
              padding: "14px 16px", textAlign: "left",
              border: active ? "2px solid var(--orange)" : "1px solid var(--acier)",
              background: active ? "var(--fond-warm)" : "#fff",
              transition: "all .15s",
            }}>
            <div style={{ fontFamily: "var(--ff-title)", fontWeight: 700, fontSize: 17, textTransform: "uppercase", color: active ? "var(--orange)" : "var(--marin)" }}>{o.t}</div>
            {o.h && <div style={{ fontFamily: "var(--ff-mono)", fontSize: 11, color: "#7E8B96", marginTop: 4, letterSpacing: 1 }}>{o.h}</div>}
          </button>
        );
      })}
    </div>
  );
}

function FieldLabel({ n, mt, children }) {
  return (
    <div style={{ marginTop: mt ? 28 : 0, marginBottom: 10, display: "flex", alignItems: "center", gap: 10 }}>
      <span style={{ fontFamily: "var(--ff-mono)", fontSize: 10, color: "var(--orange)", letterSpacing: 2 }}>{n}</span>
      <span style={{ fontFamily: "var(--ff-body)", fontWeight: 600, textTransform: "uppercase", letterSpacing: 2, fontSize: 11, color: "var(--marin)" }}>{children}</span>
    </div>
  );
}

window.Contact = Contact;