// Contatti — form (nome, telefono/whatsapp, tipo servizio, messaggio) + info card.

const SERVIZI = [
"Smalto semipermanente mani",
"Semipermanente rinforzato",
"Copertura unghie in gel",
"Refill gel correttivo",
"Ricostruzione unghie",
"Nail art",
"French / French a muretto",
"Pedicure",
"Pedicure + semipermanente",
"Altro / non lo so ancora"];


function ContactForm() {
  const [form, setForm] = React.useState({
    nome: "", tel: "", servizio: "", messaggio: "", privacy: false
  });
  const [touched, setTouched] = React.useState({});
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error

  const set = (k) => (e) => {
    const v = e.target.type === "checkbox" ? e.target.checked : e.target.value;
    setForm((f) => ({ ...f, [k]: v }));
  };
  const blur = (k) => () => setTouched((t) => ({ ...t, [k]: true }));

  const errors = {
    nome: !form.nome.trim() ? "Come ti chiami?" : "",
    tel: !form.tel.trim() ? "Numero di telefono o WhatsApp" : "",
    servizio: !form.servizio ? "Scegli un servizio" : "",
    privacy: !form.privacy ? "Devi accettare la Privacy Policy per inviare" : ""
  };
  const valid = !errors.nome && !errors.tel && !errors.servizio && !errors.privacy;

  const submit = async (e) => {
    e.preventDefault();
    setTouched({ nome: true, tel: true, servizio: true, privacy: true });
    if (!valid || status === "sending") return;
    setStatus("sending");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: "3e728708-3e38-4a71-9408-2da460b968dd",
          subject: `Nuova richiesta da ${form.nome} — ${form.servizio}`,
          from_name: "Ewa Nails — sito web",
          nome: form.nome,
          telefono: form.tel,
          servizio: form.servizio,
          messaggio: form.messaggio || "(nessun messaggio aggiuntivo)",
          privacy_accettata: "Sì — informativa privacy accettata al momento dell'invio"
        })
      });
      const data = await res.json();
      if (data.success) {
        setStatus("sent");
        setForm({ nome: "", tel: "", servizio: "", messaggio: "", privacy: false });
        setTouched({});
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  };

  return (
    <form className="contact-form glass liquid reveal" onSubmit={submit} id="prenota">
      <div className="cf-head">
        <span className="eyebrow">prenota</span>
        <h2>Fissiamo l'<em className="script">appuntamento</em>.</h2>
        <p className="muted">Ti rispondo in giornata. Se preferisci, scrivimi direttamente su WhatsApp.</p>
      </div>

      <div className={"cf-field" + (touched.nome && errors.nome ? " err" : "")}>
        <label>Nome</label>
        <input type="text" value={form.nome} onChange={set("nome")} onBlur={blur("nome")}
        placeholder="Es. Giulia Rossi" autoComplete="name" />
        {touched.nome && errors.nome && <small>{errors.nome}</small>}
      </div>

      <div className={"cf-field" + (touched.tel && errors.tel ? " err" : "")}>
        <label>Telefono / WhatsApp</label>
        <input type="tel" value={form.tel} onChange={set("tel")} onBlur={blur("tel")}
        placeholder="+39 ..." autoComplete="tel" />
        {touched.tel && errors.tel && <small>{errors.tel}</small>}
      </div>

      <div className={"cf-field" + (touched.servizio && errors.servizio ? " err" : "")}>
        <label>Tipo di servizio</label>
        <div className="cf-select">
          <select value={form.servizio} onChange={set("servizio")} onBlur={blur("servizio")}>
            <option value="">Scegli un servizio…</option>
            {SERVIZI.map((s) => <option key={s} value={s}>{s}</option>)}
          </select>
          <span className="cf-chev">▾</span>
        </div>
        {touched.servizio && errors.servizio && <small>{errors.servizio}</small>}
      </div>

      <div className="cf-field">
        <label>Messaggio <span className="muted" style={{ fontSize: ".8rem" }}>(facoltativo)</span></label>
        <textarea rows="4" value={form.messaggio} onChange={set("messaggio")}
        placeholder="Hai un'idea, una foto di riferimento, una data preferita? Scrivimi qui."></textarea>
      </div>

      <label className={"cf-privacy" + (touched.privacy && errors.privacy ? " err" : "")}>
        <input type="checkbox" checked={form.privacy} onChange={set("privacy")} onBlur={blur("privacy")} />
        <span className="cf-check" aria-hidden></span>
        <span className="cf-privacy-text">
          Ho letto e accetto la <a href="privacy-policy.html" target="_blank" rel="noreferrer">Privacy Policy</a>
          {" "}e acconsento al trattamento dei miei dati per essere ricontattata. *
        </span>
      </label>
      {touched.privacy && errors.privacy &&
      <small className="cf-privacy-err">{errors.privacy}</small>
      }

      <button className="btn btn-primary cf-submit" type="submit" disabled={status === "sending"}>
        {status === "sending" && "Invio in corso…"}
        {status === "sent" && "✓ Richiesta inviata — ti rispondo presto"}
        {status === "error" && "Errore — riprova o scrivi su WhatsApp"}
        {status === "idle" && "Invia richiesta"}
      </button>
      <small className="cf-foot muted">
        Ti risponderò via telefono o WhatsApp entro la giornata.
      </small>
    </form>);

}

function InfoCard() {
  return (
    <aside className="contact-info reveal">
      <div className="ci-block glass">
        <span className="eyebrow">CERCAMI</span>
        <h3>Ewa Nails<br /><em className="script">Beauty Lab</em></h3>
        <ul className="ci-list">
          <li>
            <span className="ci-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
              </svg>
            </span>
            <div><b>WhatsApp</b><a href="https://wa.me/393465748855">+39 346 574 8855</a></div>
          </li>
          <li>
            <span className="ci-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <rect x="3" y="3" width="18" height="18" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor" />
              </svg>
            </span>
            <div><b>Instagram</b><a href="https://instagram.com/ewa_nailslab" target="_blank" rel="noreferrer">@ewa_nailslab</a></div>
          </li>
          <li>
            <span className="ci-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
                <rect x="2" y="4" width="20" height="16" rx="2" />
                <path d="m22 7-10 6L2 7" />
              </svg>
            </span>
            <div><b>Email</b><a href="mailto:lab@ewanails.com">lab@ewanails.com</a></div>
          </li>
        </ul>
      </div>

      <div className="ci-block glass">
        <h4 style={{ fontFamily: "var(--font-body)", textTransform: "uppercase", letterSpacing: ".14em", fontSize: ".78rem", fontWeight: 600, color: "var(--muted)", margin: "0 0 12px" }}>Orari</h4>
        <ul className="ci-hours">
          <li><span>Lun – Ven</span><b>9:00 – 19:00</b></li>
          <li><span>Sabato</span><b>9:00 – 17:00</b></li>
          <li><span>Domenica</span><b>chiuso</b></li>
        </ul>
      </div>

      <a href="https://wa.me/393465748855" target="_blank" rel="noreferrer" className="btn btn-glass" style={{ width: "100%" }}>
        Scrivi su WhatsApp
      </a>
    </aside>);

}

function ContattiApp() {
  useReveal();
  return (
    <React.Fragment>
      <Blobs />
      <Nav active="Contatti" />
      <header className="page-head">
        <div className="shell">
          <div className="reveal" style={{ textAlign: "center" }}>
            <div className="eyebrow">contatti</div>
            <h1 className="page-title">Scrivimi <em className="script">due righe</em>.</h1>
            <p className="muted page-sub">Per prenotare, chiedere un consiglio o solo per dirmi ciao.</p>
          </div>
        </div>
      </header>

      <section className="section-sm">
        <div className="shell">
          <div className="contact-grid">
            <ContactForm />
            <InfoCard />
          </div>
        </div>
      </section>

      <Footer />
      <EwaTweaks />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<ContattiApp />);