/* Contact screen — Camille Bardiau */
(function () {
  const NS = window.CamilleBardiauDesignSystem_92b58f;
  const { Button, Eyebrow, SectionHeading, Card, Input, FIELD_CSS } = NS;
  const Icon = (n, p) => window.CBKit.Icon(n, p);
  const D = window.CB_DATA;

  /* Inject shared field CSS for native elements */
  (function() {
    if (typeof document === "undefined") return;
    if (document.getElementById("cb-field-styles")) return;
    var el = document.createElement("style");
    el.id = "cb-field-styles";
    el.textContent = FIELD_CSS || "";
    document.head.appendChild(el);
  })();

  function Contact() {
    const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

    const submit = (e) => {
      e.preventDefault();
      setStatus('sending');
      const form = e.target;
      const data = {
        prenom:  form['c-prenom'].value,
        nom:     form['c-nom'].value,
        tel:     form['c-tel'].value,
        email:   form['c-email'].value,
        motif:   form['c-motif'] ? form['c-motif'].value : '',
        message: form['c-msg'].value,
        _subject: 'Nouveau message depuis le site — Camille Bardiau',
        _captcha: 'false',
        _template: 'table',
      };
      fetch('https://formsubmit.co/ajax/contact.camillebardiau@gmail.com', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
        body: JSON.stringify(data),
      })
        .then(function(res) { return res.json(); })
        .then(function(json) { setStatus(json.success === 'true' || json.success === true ? 'sent' : 'error'); })
        .catch(function() { setStatus('error'); });
    };

    const sent  = status === 'sent';
    const error = status === 'error';
    const busy  = status === 'sending';

    return (
      <div>
        <section style={{ background: "var(--paper-tint)", borderBottom: "1px solid var(--hairline)" }}>
          <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "clamp(48px,6vw,84px) var(--gutter)", textAlign: "center" }}>
            <SectionHeading align="center" eyebrow="Contact"
              title={<>Faisons <em>connaissance</em></>}
              intro="Une question, une envie de prendre rendez-vous ? Écrivez-moi — chaque message est lu avec attention et reçoit une réponse personnalisée." />
          </div>
        </section>

        <section>
          <div style={{ maxWidth: "var(--maxw)", margin: "0 auto", padding: "var(--section-y) var(--gutter)", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(28px,5vw,52px)", alignItems: "start" }} className="cb-split">
            {/* Form */}
            <Card surface="paper" pad="lg" elevation="md">
              {sent ? (
                <div style={{ textAlign: "center", padding: "28px 8px" }}>
                  <span style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--clay-wash)", color: "var(--clay-deep)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
                    {Icon("check", { style: { width: 28, height: 28 } })}
                  </span>
                  <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h3)", color: "var(--ink)", margin: "0 0 10px", fontWeight: 500 }}>Message envoyé !</h3>
                  <p style={{ fontFamily: "var(--font-sans)", color: "var(--ink-soft)", lineHeight: 1.7, maxWidth: 340, margin: "0 auto 22px" }}>
                    Merci de votre confiance. Camille vous répond très vite.
                  </p>
                  <Button variant="outline" onClick={() => setStatus('idle')}>Envoyer un autre message</Button>
                </div>
              ) : error ? (
                <div style={{ textAlign: "center", padding: "20px 8px" }}>
                  <p style={{ fontFamily: "var(--font-sans)", color: "var(--danger)", marginBottom: 16 }}>
                    Une erreur est survenue. Veuillez réessayer ou :
                  </p>
                  <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
                    <Button variant="primary" onClick={() => setStatus('idle')}>Réessayer</Button>
                    <Button variant="outline" as="a" href={`mailto:${D.brand.email}`}>Envoyer par email</Button>
                  </div>
                </div>
              ) : (
                <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 22 }}>
                  <div>
                    <h3 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h3)", color: "var(--ink)", margin: "0 0 4px", fontWeight: 500, letterSpacing: "-0.01em" }}>Écrivez-moi</h3>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "var(--ink-muted)", margin: 0 }}>Je vous réponds personnellement sous 48 h.</p>
                  </div>

                  {/* Name row */}
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="cb-grid-2">
                    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                      <label htmlFor="c-prenom" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600, color: "var(--ink)", letterSpacing: ".01em" }}>Prénom *</label>
                      <input id="c-prenom" name="c-prenom" required type="text" placeholder="Camille"
                        style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", color: "var(--ink)", background: "var(--paper-tint)", border: "1.5px solid var(--hairline)", borderRadius: 10, padding: "12px 16px", outline: "none", transition: "border-color .2s", width: "100%" }} />
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                      <label htmlFor="c-nom" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600, color: "var(--ink)", letterSpacing: ".01em" }}>Nom *</label>
                      <input id="c-nom" name="c-nom" required type="text" placeholder="Bardiau"
                        style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", color: "var(--ink)", background: "var(--paper-tint)", border: "1.5px solid var(--hairline)", borderRadius: 10, padding: "12px 16px", outline: "none", transition: "border-color .2s", width: "100%" }} />
                    </div>
                  </div>

                  {/* Contact row */}
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="cb-grid-2">
                    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                      <label htmlFor="c-tel" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600, color: "var(--ink)", letterSpacing: ".01em" }}>Téléphone *</label>
                      <input id="c-tel" name="c-tel" required type="tel" placeholder="06 15 93 10 46"
                        style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", color: "var(--ink)", background: "var(--paper-tint)", border: "1.5px solid var(--hairline)", borderRadius: 10, padding: "12px 16px", outline: "none", transition: "border-color .2s", width: "100%" }} />
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                      <label htmlFor="c-email" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600, color: "var(--ink)", letterSpacing: ".01em" }}>Email *</label>
                      <input id="c-email" name="c-email" required type="email" placeholder="vous@email.com"
                        style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", color: "var(--ink)", background: "var(--paper-tint)", border: "1.5px solid var(--hairline)", borderRadius: 10, padding: "12px 16px", outline: "none", transition: "border-color .2s", width: "100%" }} />
                    </div>
                  </div>

                  {/* Motif */}
                  <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                    <label htmlFor="c-motif" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600, color: "var(--ink)", letterSpacing: ".01em" }}>Motif</label>
                    <div style={{ position: "relative" }}>
                      <select id="c-motif" name="c-motif"
                        style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", color: "var(--ink)", background: "var(--paper-tint)", border: "1.5px solid var(--hairline)", borderRadius: 10, padding: "12px 40px 12px 16px", outline: "none", width: "100%", appearance: "none", cursor: "pointer" }}>
                        <option value="">Choisir un motif…</option>
                        <option>Kinésiologie</option>
                        <option>Soin LaHoChi</option>
                        <option>Massage</option>
                        <option>Autres</option>
                      </select>
                      <svg style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", color: "var(--clay)", width: 16, height: 16 }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                    </div>
                  </div>

                  {/* Message */}
                  <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                    <label htmlFor="c-msg" style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", fontWeight: 600, color: "var(--ink)", letterSpacing: ".01em" }}>Message *</label>
                    <textarea id="c-msg" name="c-msg" required rows={5}
                      placeholder="Décrivez votre demande en quelques mots…"
                      style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-body)", color: "var(--ink)", background: "var(--paper-tint)", border: "1.5px solid var(--hairline)", borderRadius: 10, padding: "14px 16px", outline: "none", resize: "vertical", minHeight: 120, transition: "border-color .2s", lineHeight: 1.6 }} />
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)" }}>Tout contexte que vous souhaitez partager est le bienvenu.</span>
                  </div>

                  {/* Submit */}
                  <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 4, flexWrap: "wrap" }}>
                    <button type="submit" disabled={busy} style={{
                      fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: "var(--text-body)",
                      background: busy ? "#7A8FA8" : "#2E4063", color: "#fff",
                      border: "none", borderRadius: "var(--radius-pill)",
                      padding: "15px 34px", cursor: busy ? "not-allowed" : "pointer",
                      transition: "background .25s, transform .15s",
                      boxShadow: busy ? "none" : "0 4px 16px rgba(46,64,99,.28)",
                      display: "flex", alignItems: "center", gap: 8,
                      whiteSpace: "nowrap",
                    }}>
                      {busy ? "Envoi en cours…" : "Envoyer mon message"}
                    </button>
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)" }}>Confidentialité assurée</span>
                  </div>
                </form>
              )}
            </Card>

            {/* Info side */}
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              {/* Booking CTA */}
              <Card surface="clay" pad="md" elevation="sm">
                <div style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <span style={{ width: 44, height: 44, borderRadius: "50%", background: "rgba(255,255,255,.18)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                    {Icon("calendar", { style: { width: 20, height: 20, color: "var(--on-dark)" } })}
                  </span>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-h4)", color: "var(--on-dark)", lineHeight: 1.2 }}>Réserver en ligne</div>
                    <p style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-sm)", color: "rgba(246,239,227,.85)", margin: "5px 0 12px", lineHeight: 1.55 }}>
                      Kinésiologie · 60 €
                    </p>
                    <Button variant="gold" size="sm" as="a" href={D.brand.booking} target="_blank" rel="noopener">Choisir un créneau</Button>
                  </div>
                </div>
              </Card>

              {/* Coordinates */}
              <Card surface="cream" pad="md" elevation="sm">
                <Eyebrow line={false}>Coordonnées</Eyebrow>
                <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 16 }}>
                  {[
                    { icon: "phone", label: D.brand.phone, sub: "Téléphone & SMS", href: `tel:${D.brand.phoneRaw}` },
                    { icon: "mail", label: D.brand.email, sub: "Email", href: `mailto:${D.brand.email}` },
                    { icon: "map-pin", label: "11 bis rue de Genève", sub: "30000 Nîmes", href: "https://maps.google.com/?q=11+bis+rue+de+Gen%C3%A8ve+N%C3%AEmes+30000" },
                    { icon: "clock", label: D.brand.hours, sub: null, href: null },
                    { icon: "instagram", label: D.brand.instagramHandle, sub: "Instagram", href: D.brand.instagram },
                    { icon: "facebook", label: "Camille Bardiau Bien-être", sub: "Facebook", href: D.brand.facebook },
                  ].map(x => (
                    <div key={x.icon} style={{ display: "flex", gap: 12, alignItems: "center" }}>
                      <span style={{ width: 40, height: 40, flex: "none", borderRadius: "50%", background: "var(--paper)", color: "var(--clay)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                        {Icon(x.icon, { style: { width: 17, height: 17 } })}
                      </span>
                      <div>
                        {x.href ? (
                          <a href={x.href} target={x.href.startsWith("http") ? "_blank" : undefined} rel="noopener"
                            style={{ fontFamily: "var(--font-sans)", fontWeight: 600, color: "var(--clay-deep)", fontSize: "var(--text-sm)", display: "block", textDecoration: "none" }}>
                            {x.label}
                          </a>
                        ) : (
                          <div style={{ fontFamily: "var(--font-sans)", fontWeight: 600, color: "var(--ink)", fontSize: "var(--text-sm)" }}>{x.label}</div>
                        )}
                        {x.sub && <div style={{ fontFamily: "var(--font-sans)", fontSize: "var(--text-xs)", color: "var(--ink-muted)" }}>{x.sub}</div>}
                      </div>
                    </div>
                  ))}
                </div>
              </Card>

              {/* Cabinet photo */}
              <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "4/3" }}>
                <img src={D.photos.cabinet.src} alt={D.photos.cabinet.alt} width={D.photos.cabinet.width} height={D.photos.cabinet.height}
                  style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }

  window.CBScreens = window.CBScreens || {};
  window.CBScreens.Contact = Contact;
})();