// contact.jsx — Contact page for Version Française Pour Elle
// Map, hours, address, call/WhatsApp/email/Fresha + simple enquiry form.

function ContactPage({ lang }) {
  const D = window.VFPE_DATA;
  const t = D.t[lang];
  const links = D.links;

  const [form, setForm] = React.useState({ name: "", email: "", message: "" });
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4000);
    setForm({ name: "", email: "", message: "" });
  };

  return (
    <main>
      {/* ── Hero band ─────────────────────────────────────────── */}
      <section className="ct-hero" data-screen-label="Contact / Hero">
        <div className="container ct-hero-grid">
          <Reveal>
            <Eyebrow>{lang === "fr" ? "Nous rencontrer" : "Visit us"}</Eyebrow>
            <h1 className="h1 display" style={{ marginTop: 24, marginBottom: 24 }}>
              {lang === "fr" ? <>Villa 873,<br/><em>Al Wasl Road</em>.</>
                             : <>Villa 873,<br/><em>Al Wasl Road</em>.</>}
            </h1>
            <p className="lead">
              {lang === "fr"
                ? "À deux pas de Safa Park, à l'arrière d'une grille discrète. Stationnement privé. Climatisation, café, et un accueil — toujours — en français."
                : "A short walk from Safa Park, behind a discreet gate. Private parking. Air-conditioning, coffee, and a welcome — always — in French."}
            </p>
          </Reveal>

          <Reveal delay={150}>
            <div className="ct-quick">
              <a href={links.fresha} target="_blank" rel="noopener" className="ct-quick-row ct-quick-primary">
                <div>
                  <div className="micro" style={{ color: "rgba(251,248,243,0.55)" }}>{lang === "fr" ? "Réservation" : "Booking"}</div>
                  <div style={{ fontSize: 18, marginTop: 4 }}>{lang === "fr" ? "Réserver sur Fresha" : "Book on Fresha"}</div>
                </div>
                <span className="arrow" style={{ color: "var(--champagne-gold)", fontSize: 22 }}>→</span>
              </a>
              <a href={links.whatsapp} target="_blank" rel="noopener" className="ct-quick-row">
                <div>
                  <div className="micro">WhatsApp</div>
                  <div style={{ fontSize: 17, marginTop: 4 }}>{t.whatsappN}</div>
                </div>
                <WAIcon />
              </a>
              <a href={links.tel} className="ct-quick-row">
                <div>
                  <div className="micro">{lang === "fr" ? "Téléphone" : "Telephone"}</div>
                  <div style={{ fontSize: 17, marginTop: 4 }}>{t.phone}</div>
                </div>
                <PhoneIcon />
              </a>
              <a href={links.email} className="ct-quick-row">
                <div>
                  <div className="micro">{lang === "fr" ? "Courriel" : "Email"}</div>
                  <div style={{ fontSize: 17, marginTop: 4 }}>{t.email}</div>
                </div>
                <MailIcon />
              </a>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── Map + Address + Hours ─────────────────────────────── */}
      <section className="ct-map-band" data-screen-label="Contact / Map">
        <div className="container ct-map-grid">
          <Reveal>
            <div className="ct-map">
              <iframe
                src="https://www.google.com/maps?q=Version%20Francaise%20Pour%20Elle%20Villa%20873%20Al%20Wasl%20Road%20Al%20Safa%202%20Dubai&z=16&output=embed"
                title={lang === "fr" ? "Plan vers Version Française Pour Elle" : "Map to Version Française Pour Elle"}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
              <div className="ct-map-pin">
                <div className="ct-map-pin-glow" />
                <VFMonogram size={40} color="var(--noir)" />
              </div>
              <a href={links.maps} target="_blank" rel="noopener" className="ct-map-link">
                {lang === "fr" ? "Itinéraire" : "Open in Maps"} <span className="arrow">→</span>
              </a>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <div className="ct-info">
              <div className="ct-info-block">
                <div className="micro">{lang === "fr" ? "Adresse" : "Address"}</div>
                <p className="display" style={{ fontSize: 26, lineHeight: 1.25, margin: "10px 0 0", maxWidth: 18 + "ch" }}>
                  Villa 873<br/>
                  Al Wasl Road<br/>
                  Al Safa 2, Dubai
                </p>
              </div>

              <div className="ct-info-block">
                <div className="micro">{lang === "fr" ? "Horaires" : "Hours"}</div>
                <table className="ct-hours">
                  <tbody>
                    {D.hours.map((h, i) => (
                      <tr key={i}>
                        <td>{L(h.label, lang)}</td>
                        <td className="tabular">{h.time}</td>
                      </tr>
                    ))}
                    <tr>
                      <td colSpan="2" style={{ paddingTop: 14, color: "var(--ink-50)", fontSize: 12, letterSpacing: "0.06em" }}>
                        {lang === "fr" ? "Sur rendez-vous uniquement." : "By appointment only."}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div className="ct-info-block">
                <div className="micro">{lang === "fr" ? "Stationnement" : "Parking"}</div>
                <p style={{ marginTop: 10, fontSize: 14, color: "var(--ink-70)", lineHeight: 1.6, maxWidth: 36 + "ch" }}>
                  {lang === "fr"
                    ? "Parking privé devant la villa. Rue résidentielle calme — entrée par la grille principale."
                    : "Private parking in front of the villa. Quiet residential street — entry through the main gate."}
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* ── Enquiry form ─────────────────────────────────────── */}
      <section className="ct-form-band" data-screen-label="Contact / Form">
        <div className="container ct-form-grid">
          <Reveal>
            <div>
              <Eyebrow>{lang === "fr" ? "Une question ?" : "A quiet question?"}</Eyebrow>
              <h2 className="h2 display" style={{ marginTop: 16, marginBottom: 24 }}>
                {lang === "fr"
                  ? <>Écrivez-nous,<br/><em>nous répondons en moins de 24 h</em>.</>
                  : <>Write to us,<br/><em>we reply within 24 hours</em>.</>}
              </h2>
              <p style={{ color: "var(--ink-70)", maxWidth: 44 + "ch" }}>
                {lang === "fr"
                  ? "Pour réserver : Fresha ou WhatsApp, c'est plus rapide. Pour le reste — devis sur mesure, soin de mariée, cadeaux, partenariats — ce formulaire arrive directement chez Laura."
                  : "To book a treatment, Fresha or WhatsApp is fastest. For everything else — bespoke quotes, bridal services, gifting, partnerships — this form lands directly with Laura."}
              </p>
            </div>
          </Reveal>

          <Reveal delay={120}>
            <form onSubmit={submit} className="ct-form">
              <div className="ct-field">
                <label htmlFor="ct-name" className="micro">{lang === "fr" ? "Nom" : "Name"}</label>
                <input id="ct-name" type="text" required
                       value={form.name}
                       onChange={(e) => setForm({ ...form, name: e.target.value })} />
              </div>
              <div className="ct-field">
                <label htmlFor="ct-email" className="micro">{lang === "fr" ? "Courriel" : "Email"}</label>
                <input id="ct-email" type="email" required
                       value={form.email}
                       onChange={(e) => setForm({ ...form, email: e.target.value })} />
              </div>
              <div className="ct-field">
                <label htmlFor="ct-msg" className="micro">Message</label>
                <textarea id="ct-msg" rows="5" required
                          value={form.message}
                          onChange={(e) => setForm({ ...form, message: e.target.value })} />
              </div>
              <div className="ct-form-foot">
                <button type="submit" className="btn btn-primary" disabled={sent}>
                  {sent
                    ? (lang === "fr" ? "Reçu, merci ·" : "Received, thank you ·")
                    : (lang === "fr" ? "Envoyer" : "Send")}
                  <span className="arrow">{sent ? "✓" : "→"}</span>
                </button>
                <span style={{ fontSize: 12, color: "var(--ink-50)", letterSpacing: "0.06em" }}>
                  {lang === "fr"
                    ? "Vos coordonnées ne sont ni partagées ni revendues."
                    : "Your details are never shared or sold."}
                </span>
              </div>
            </form>
          </Reveal>
        </div>
      </section>

      <CloserBand lang={lang} />

      <style>{`
        .ct-hero {
          padding: clamp(72px, 10vw, 144px) 0 clamp(48px, 7vw, 96px);
          border-bottom: 1px solid var(--gold-hairline);
        }
        .ct-hero-grid {
          display: grid;
          grid-template-columns: 1.2fr 1fr;
          gap: clamp(28px, 5vw, 80px);
          align-items: center;
        }
        .ct-quick {
          display: flex;
          flex-direction: column;
          border: 1px solid var(--gold-hairline);
          background: var(--cream);
        }
        .ct-quick-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 22px 24px;
          border-bottom: 1px solid var(--gold-faint);
          color: var(--noir);
          gap: 20px;
          transition: background 180ms ease, padding 180ms ease;
        }
        .ct-quick-row:hover { background: var(--blush-nude); padding-left: 30px; }
        .ct-quick-row:last-child { border-bottom: 0; }
        .ct-quick-primary {
          background: var(--noir);
          color: var(--cream);
          border-bottom-color: var(--noir);
        }
        .ct-quick-primary:hover { background: var(--noir-soft); }
        .ct-quick-primary .micro { color: rgba(251,248,243,0.55); }

        .ct-map-band { padding: clamp(72px, 10vw, 128px) 0; }
        .ct-map-grid {
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: clamp(28px, 5vw, 64px);
        }
        .ct-map {
          position: relative;
          aspect-ratio: 4 / 5;
          border: 1px solid var(--gold-hairline);
          overflow: hidden;
          background: #e7dfd2;
        }
        .ct-map iframe {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          border: 0;
          filter: saturate(0.55) sepia(0.18) brightness(1.02);
        }
        .ct-map-pin {
          position: absolute;
          top: 50%; left: 50%;
          transform: translate(-50%, -50%);
          width: 72px; height: 72px;
          background: var(--cream);
          border: 1px solid var(--champagne-gold);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;
          box-shadow: 0 12px 32px rgba(0,0,0,0.18);
        }
        .ct-map-pin-glow {
          position: absolute;
          inset: -8px;
          border-radius: 50%;
          background: rgba(194,162,74,0.22);
          z-index: -1;
          animation: glow 2.4s ease-in-out infinite;
        }
        @keyframes glow { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.25); opacity: 0; } }
        .ct-map-link {
          position: absolute;
          bottom: 16px; left: 16px;
          background: var(--noir);
          color: var(--cream);
          padding: 12px 18px;
          font-size: 11px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          font-weight: 500;
          z-index: 2;
        }
        .ct-map-link:hover { background: var(--champagne-gold); color: var(--noir); }

        .ct-info { display: flex; flex-direction: column; gap: 40px; padding-top: 12px; }
        .ct-info-block { padding-bottom: 32px; border-bottom: 1px solid var(--gold-faint); }
        .ct-info-block:last-child { border-bottom: 0; padding-bottom: 0; }
        .ct-hours { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
        .ct-hours td { padding: 8px 0; vertical-align: top; }
        .ct-hours td:last-child { text-align: right; color: var(--noir); }
        .ct-hours td:first-child { color: var(--ink-70); }

        .ct-form-band {
          background: var(--cream);
          border-top: 1px solid var(--gold-hairline);
          border-bottom: 1px solid var(--gold-hairline);
          padding: clamp(72px, 10vw, 128px) 0;
        }
        .ct-form-grid {
          display: grid;
          grid-template-columns: 0.9fr 1.1fr;
          gap: clamp(28px, 5vw, 80px);
          align-items: start;
        }
        .ct-form { display: flex; flex-direction: column; gap: 20px; }
        .ct-field { display: flex; flex-direction: column; gap: 8px; }
        .ct-field input, .ct-field textarea {
          appearance: none;
          background: transparent;
          border: 0;
          border-bottom: 1px solid var(--ink-15);
          padding: 12px 0;
          font: 16px var(--body);
          color: var(--noir);
          outline: none;
          transition: border-color 200ms ease;
          width: 100%;
        }
        .ct-field input:focus, .ct-field textarea:focus { border-bottom-color: var(--champagne-gold); }
        .ct-field textarea { resize: vertical; font-family: var(--body); }
        .ct-form-foot {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;
          gap: 16px;
          flex-wrap: wrap;
        }

        @media (max-width: 880px) {
          .ct-hero-grid, .ct-map-grid, .ct-form-grid { grid-template-columns: 1fr; }
          .ct-map { aspect-ratio: 4/3; }
        }
      `}</style>
    </main>
  );
}

function MailIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="2" y="4" width="20" height="16" rx="0"/>
      <path d="m22 7-10 6L2 7"/>
    </svg>
  );
}

Object.assign(window, { ContactPage, MailIcon });