/* global React, Eyebrow */
const { useState } = React;

function PageContact() {
  const [form, setForm] = useState({ name: "", email: "", subject: "general", message: "" });

  const subjectLabels = {
    general: "Question générale",
    press: "Demande presse",
    partner: "Partenariat",
    artist: "Artiste / Booking",
    vendor: "Stand / Food",
    ticket: "Question billetterie",
  };

  const onSubmit = (e) => {
    e.preventDefault();
    const subjectLine = `[Summer Sky] ${subjectLabels[form.subject] || form.subject}`;
    const body = `Nom : ${form.name}\nEmail : ${form.email}\n\n${form.message}`;
    const mailto = `mailto:summersky.off@gmail.com?subject=${encodeURIComponent(subjectLine)}&body=${encodeURIComponent(body)}`;
    window.location.href = mailto;
  };

  return (
    <div className="page-fade">
      <header className="page-header">
        <div className="shell">
          <Eyebrow>On vous répond sous 48h</Eyebrow>
          <h1 className="page-title gradient-pink">Contact.</h1>
          <p className="page-subtitle">
            Une question, un partenariat, un démo set ou une demande de stand ? Écrivez-nous, on lit tout.
          </p>
        </div>
      </header>

      <section className="section" style={{ paddingTop: 30 }}>
        <div className="shell">
          <div className="two-col">
            <div className="contact-side">
              <Eyebrow>Direct</Eyebrow>
              <h2 className="h-display" style={{ fontSize: "clamp(32px, 4vw, 52px)", marginTop: 12 }}>
                Plusieurs portes<br/>d'<em>entrée.</em>
              </h2>

              <div style={{ marginTop: 32, display: "flex", flexDirection: "column" }}>
                <ContactRow k="Général" v="summersky.off@gmail.com" />
              </div>

              <div style={{ marginTop: 32 }}>
                <Eyebrow>Réseaux</Eyebrow>
                <div className="social-row" style={{ marginTop: 16 }}>
                  <span className="social-chip">Instagram <strong>@summersky.off</strong></span>
                  <span className="social-chip">TikTok <strong>@summersky.off</strong></span>
                </div>
              </div>

              <div style={{ marginTop: 32 }} className="block b-sky">
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700 }}>Adresse</div>
                <div style={{ marginTop: 10, fontSize: 16, lineHeight: 1.6, fontWeight: 600 }}>
                  Le Plongeoir — Pôle Européen<br/>
                  72 530 Yvré-l'Évêque<br/>
                  Sarthe · France
                </div>
              </div>
            </div>

            <form className="block b-cream" style={{ display: "flex", flexDirection: "column", gap: 18 }} onSubmit={onSubmit}>
              <div className="field">
                <label>Nom</label>
                <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Votre nom" />
              </div>
              <div className="field">
                <label>Email</label>
                <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="vous@exemple.com" />
              </div>
              <div className="field">
                <label>Objet</label>
                <select value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })}>
                  <option value="general">Question générale</option>
                  <option value="press">Demande presse</option>
                  <option value="partner">Partenariat</option>
                  <option value="artist">Artiste / Booking</option>
                  <option value="vendor">Stand / Food</option>
                  <option value="ticket">Question billetterie</option>
                </select>
              </div>
              <div className="field">
                <label>Message</label>
                <textarea required value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="Dites-nous tout…" />
              </div>
              <button type="submit" className="btn btn-pink" style={{ alignSelf: "flex-start" }}>
                Envoyer mon message <span aria-hidden="true">→</span>
              </button>
              <div style={{ fontSize: 12, fontFamily: "var(--font-mono)", letterSpacing: "0.06em", color: "var(--ink-2)" }}>
                En soumettant, vous acceptez notre politique de confidentialité.
              </div>
            </form>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactRow({ k, v }) {
  return (
    <div className="kv-row email">
      <span className="k">{k}</span>
      <span className="v">{v}</span>
    </div>
  );
}

Object.assign(window, { PageContact });