/* ===== contact, callback modal, footer ===== */

function Field({ label, children }) {
  return (
    <label style={{ display: "grid", gap: 7 }}>
      <span style={{ fontWeight: 600, fontSize: ".92rem" }}>{label}</span>
      {children}
    </label>
  );
}
const inputStyle = {
  font: "inherit", fontSize: "1rem", padding: "13px 15px", borderRadius: "var(--radius-sm)",
  border: "1.5px solid var(--line)", background: "var(--card)", color: "var(--ink)", width: "100%",
};

function CallbackForm({ compact, onDone }) {
  const [done, setDone] = useState(false);
  const submit = (e) => { e.preventDefault(); setDone(true); onDone && onDone(); };
  if (done) {
    return (
      <div style={{ display: "grid", gap: 12, placeItems: "center", textAlign: "center", padding: "28px 10px" }}>
        <span style={{ width: 58, height: 58, borderRadius: "50%", background: "var(--brand)", display: "grid", placeItems: "center" }}>
          <Icon name="check" size={30} color="#fff" stroke={2.6} />
        </span>
        <h3 style={{ fontSize: "1.4rem" }}>C'est noté, on te rappelle&nbsp;!</h3>
        <p style={{ color: "var(--muted)" }}>On te recontacte sur le créneau choisi (entre 17h et 22h). À tout de suite.</p>
      </div>
    );
  }
  return (
    <form onSubmit={submit} style={{ display: "grid", gap: 16 }}>
      <div style={{ display: "grid", gridTemplateColumns: compact ? "1fr" : "1fr 1fr", gap: 14 }}>
        <Field label="Ton prénom"><input style={inputStyle} required placeholder="Jean" /></Field>
        <Field label="Ton téléphone"><input style={inputStyle} required type="tel" placeholder="06 ..." /></Field>
      </div>
      <Field label="Ton souci, en deux mots">
        <select style={inputStyle} defaultValue="">
          <option value="" disabled>Choisis…</option>
          <option>Dépannage à domicile</option>
          <option>Virus / ordi qui rame</option>
          <option>Récupération de données</option>
          <option>Box / imprimante / périphérique</option>
          <option>Formation / initiation</option>
          <option>Projet PC sur-mesure / gamer</option>
          <option>Autre</option>
        </select>
      </Field>
      <Field label="Quand te rappeler ?">
        <input style={inputStyle} placeholder="Ex : ce soir vers 18h" />
      </Field>
      <button className="btn btn-primary btn-lg" type="submit" style={{ justifyContent: "center" }}>
        <Icon name="phone" size={18} color="#fff" /> Être rappelé gratuitement
      </button>
      <p className="mono" style={{ fontSize: ".76rem", color: "var(--muted)", textAlign: "center" }}>
        Sans engagement · réponse le jour même
      </p>
    </form>
  );
}

function CallbackModal({ open, onClose }) {
  useEffect(() => {
    const k = (e) => e.key === "Escape" && onClose();
    if (open) window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(12,16,40,.55)", backdropFilter: "blur(4px)", display: "grid", placeItems: "center", padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} className="card" style={{ width: "min(520px,100%)", padding: "34px 32px", position: "relative", boxShadow: "0 40px 90px -30px rgba(10,16,50,.5)" }}>
        <button onClick={onClose} aria-label="Fermer" style={{ position: "absolute", top: 16, right: 16, width: 38, height: 38, borderRadius: 10, border: "1px solid var(--line)", background: "var(--card)", cursor: "pointer", fontSize: "1.1rem", color: "var(--muted)" }}>✕</button>
        <span className="eyebrow">Rappel gratuit</span>
        <h2 style={{ fontSize: "1.7rem", margin: ".5rem 0 .4rem" }}>On te rappelle</h2>
        <p style={{ color: "var(--muted)", marginBottom: 22 }}>Laisse tes coordonnées, on s'occupe du reste.</p>
        <CallbackForm compact />
      </div>
    </div>
  );
}

function Contact() {
  const infos = [
    ["phone", "Téléphone", "06 58 66 54 93", "tel:+33658665493"],
    ["mail", "Email", "aupcbienportant@gmail.com", "mailto:aupcbienportant@gmail.com"],
    ["clock", "Horaires", "Tous les jours · 17h → 22h", null],
    ["pin", "Zone", "Caen & alentours · déplacement compris", null],
  ];
  return (
    <section className="section" id="contact" style={{ background: "var(--bg-2)" }}>
      <div className="wrap contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(32px,5vw,64px)", alignItems: "start" }}>
        <Reveal style={{ display: "grid", gap: 24 }}>
          <div>
            <span className="eyebrow">Contact</span>
            <h2 style={{ fontSize: "clamp(2rem,4vw,2.9rem)", margin: ".5rem 0 .7rem" }}>Un souci ? Parlons-en.</h2>
            <p style={{ color: "var(--muted)", fontSize: "1.1rem" }}>
              Appelle directement, ou laisse-nous tes coordonnées : on te rappelle le soir même
              entre 17h et 22h. Devis et conseils gratuits.
            </p>
          </div>
          <div style={{ display: "grid", gap: 14 }}>
            {infos.map(([ic, k, v, href]) => {
              const inner = (
                <div className="card" style={{ display: "flex", alignItems: "center", gap: 16, padding: "18px 20px" }}>
                  <div style={{ width: 46, height: 46, borderRadius: 12, background: "var(--brand-tint)", display: "grid", placeItems: "center", flex: "0 0 auto" }}>
                    <Icon name={ic} size={22} color="var(--brand)" />
                  </div>
                  <div>
                    <div className="mono" style={{ fontSize: ".72rem", textTransform: "uppercase", letterSpacing: ".12em", color: "var(--muted)" }}>{k}</div>
                    <div style={{ fontWeight: 700, fontFamily: "Space Grotesk", fontSize: "1.08rem" }}>{v}</div>
                  </div>
                </div>
              );
              return href ? <a key={k} href={href}>{inner}</a> : <div key={k}>{inner}</div>;
            })}
          </div>
        </Reveal>
        <Reveal delay={120} className="card" style={{ padding: "clamp(26px,3vw,38px)" }}>
          <h3 style={{ fontSize: "1.4rem", marginBottom: 6 }}>Être rappelé gratuitement</h3>
          <p style={{ color: "var(--muted)", marginBottom: 20, fontSize: ".98rem" }}>Réponse le jour même, sans engagement.</p>
          <CallbackForm />
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "#cfd2dc", padding: "56px 0 40px" }}>
      <div className="wrap" style={{ display: "grid", gap: 32 }}>
        <div className="foot-top" style={{ display: "flex", justifyContent: "space-between", gap: 28, flexWrap: "wrap", alignItems: "center" }}>
          <a href="#top" className="brand" style={{ color: "#fff" }}>
            <img src="assets/logo.webp" alt="" style={{ width: 44, height: 44, borderRadius: 10 }} />
            <span className="bn">Au PC Bien Portant<small style={{ color: "#8b90a3" }}>Caen &amp; alentours</small></span>
          </a>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a className="btn btn-primary" href="tel:+33658665493"><Icon name="phone" size={17} color="#fff" /> 06 58 66 54 93</a>
            <a className="btn" href="mailto:aupcbienportant@gmail.com" style={{ border: "1.5px solid #33384a", color: "#fff" }}>Écrire un mail</a>
          </div>
        </div>
        <div style={{ height: 1, background: "#262a37" }}></div>
        <div className="foot-bot" style={{ display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap", fontSize: ".88rem", color: "#8b90a3" }}>
          <span>© {new Date().getFullYear()} Au PC Bien Portant — dépannage, formation &amp; PC sur-mesure.</span>
          <span className="mono">Tous les jours · 17h → 22h</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CallbackModal, Contact, Footer });