/* global React */
const { useState: useCntState, useEffect: useCntEffect, useRef: useCntRef } = React;

window.ContattiHero = function ContattiHero({ lang }) {
  const t = lang === "it" ? {
    eyebrow: "Contatti",
    h1a: "Tecnolife si trova",
    h1b: "nel cuore dell'EUR.",
    lead: "Operiamo da Roma, in uno dei quartieri più dinamici della capitale, al servizio di clienti italiani e internazionali.",
    alt: "Vista aerea del quartiere EUR a Roma con il Palazzo della Civiltà Italiana, la Nuvola di Fuksas e la cupola di San Pietro sullo sfondo",
  } : {
    eyebrow: "Contact",
    h1a: "Tecnolife sits",
    h1b: "in the heart of EUR, Rome.",
    lead: "We operate from Rome, in one of the capital's most dynamic districts, at the service of Italian and international clients.",
    alt: "Aerial view of Rome's EUR district with the Palazzo della Civiltà Italiana, Fuksas' Nuvola and St. Peter's dome in the background",
  };
  return (
    <div style={{
      position: "relative", overflow: "hidden", color: "#fff",
      paddingTop: 160, paddingBottom: 80,
      isolation: "isolate",
      minHeight: "clamp(420px, 60vh, 600px)",
      display: "flex", alignItems: "center",
    }}>
      {/* Quando sarà disponibile assets/eur_roma.webp, sostituire <img> con <picture>:
          <picture>
            <source srcSet="assets/eur_roma.webp" type="image/webp" />
            <img src="assets/eur_roma-8776d9ad.jpeg" ...stessi attributi... />
          </picture>
      */}
      <img
        src="assets/eur_roma-8776d9ad.jpeg"
        alt={t.alt}
        loading="eager"
        fetchpriority="high"
        style={{ position: "absolute", inset: 0, zIndex: -2, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 60%" }}
      />
      <div style={{ position: "absolute", inset: 0, zIndex: -1, background: "linear-gradient(180deg, rgba(5,14,43,0.35) 0%, rgba(5,14,43,0.55) 55%, rgba(5,14,43,0.82) 100%)" }} />
      <window.Container style={{ position: "relative", zIndex: 2, maxWidth: 880 }}>
        <window.Eyebrow light>{t.eyebrow}</window.Eyebrow>
        <h1 style={{ fontSize: "clamp(40px, 6vw, 76px)", fontWeight: 800, lineHeight: 1.04, letterSpacing: "-0.03em", margin: 0, textShadow: "0 2px 24px rgba(5,14,43,0.35)" }}>
          <span style={{ display: "block", color: "#fff" }}>{t.h1a}</span>
          <span style={{ display: "block", background: "linear-gradient(135deg,#7EE3FF 0%,#28D1FE 40%,#1E8BFF 100%)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}>{t.h1b}</span>
        </h1>
        <p style={{ fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.55, color: "rgba(255,255,255,0.88)", maxWidth: 640, marginTop: 28, textShadow: "0 1px 12px rgba(5,14,43,0.4)" }}>{t.lead}</p>
      </window.Container>
    </div>
  );
};

/* -----------------------------------------------------------------------------
   ContattiBody — form di contatto integrato con FCE backend
   -----------------------------------------------------------------------------
   - Stato controllato con aggiornamenti immutabili (spread).
   - Validazione client-side (required + email regex RFC-light).
   - Honeypot anti-bot: campo `_hp` invisibile, deve restare vuoto.
   - Cloudflare Turnstile (HARD): token obbligatorio, widget caricato a runtime.
   - Submit asincrono con try/catch verso /api/forms/submit.
   - Stati UI: idle / submitting / success / error con messaggi IT/EN.
   - Mappature dei nomi-campo allineate alla form_configs.fields[].name su Supabase.
   ----------------------------------------------------------------------------- */
const FCE_INITIAL_FORM = Object.freeze({
  nome: "", cognome: "", email: "", telefono: "", azienda: "", messaggio: "", privacy: false,
});
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
const TURNSTILE_SCRIPT_ID = "fce-cf-turnstile-script";
const TURNSTILE_SCRIPT_SRC = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";

/* Carica lo script Turnstile una sola volta. Risolve quando window.turnstile e' disponibile. */
function ensureTurnstileScript() {
  return new Promise((resolve, reject) => {
    if (typeof window === "undefined") return reject(new Error("no-window"));
    if (window.turnstile && typeof window.turnstile.render === "function") return resolve();

    var existing = document.getElementById(TURNSTILE_SCRIPT_ID);
    if (existing) {
      var start1 = Date.now();
      var it1 = setInterval(function () {
        if (window.turnstile && typeof window.turnstile.render === "function") {
          clearInterval(it1); resolve();
        } else if (Date.now() - start1 > 10000) {
          clearInterval(it1); reject(new Error("turnstile-timeout"));
        }
      }, 100);
      return;
    }

    var s = document.createElement("script");
    s.id = TURNSTILE_SCRIPT_ID;
    s.src = TURNSTILE_SCRIPT_SRC;
    s.async = true; s.defer = true;
    s.onload = function () { resolve(); };
    s.onerror = function () { reject(new Error("turnstile-script-load-failed")); };
    document.head.appendChild(s);
  });
}

window.ContattiBody = function ContattiBody({ lang }) {
  const [values, setValues] = useCntState(FCE_INITIAL_FORM);
  const [honeypot, setHoneypot] = useCntState("");
  const [status, setStatus] = useCntState("idle");
  const [errorMsg, setErrorMsg] = useCntState("");
  const [fieldErrors, setFieldErrors] = useCntState({});
  const turnstileTokenRef = useCntRef(null);
  const turnstileWidgetIdRef = useCntRef(null);
  const turnstileContainerRef = useCntRef(null);

  const t = lang === "it" ? {
    f1: "Nome", f2: "Cognome", f3: "Email", f4: "Azienda", f5: "Telefono", f6: "Messaggio / Richiesta",
    consent: "Acconsento al trattamento dei dati personali ai sensi del GDPR.",
    privacyLink: "Leggi l'informativa privacy", cta: "Invia richiesta", sending: "Invio in corso…",
    success: "Ricevuto. Vi risponderemo al più presto.",
    sidebar: "Sede", addrLbl: "Sede principale", addr: "Via del Serafico 200, 00142 Roma (RM)", addr2: "Italia",
    mailLbl: "Email", mail: "info@tecnolife.com", vatLbl: "P.IVA", vat: "11747341003",
    company: "Tecnolife IT Consulting S.r.l.",
    companyDesc: "Digital Accelerator & Business Partner. Società specializzata nella consulenza strategica a supporto della trasformazione digitale.",
    err: {
      required: "Campo obbligatorio.", email: "Indirizzo email non valido.",
      privacy: "È necessario accettare l'informativa.", generic: "Si è verificato un errore. Riprova tra qualche istante.",
      ratelimit: "Hai inviato troppe richieste. Riprova tra un minuto.",
      validation: "Alcuni campi non sono stati compilati correttamente.",
      network: "Connessione non riuscita. Verifica la tua rete e riprova.",
      config: "Form non ancora configurato. Contatta l'amministratore.",
      turnstileMissing: "Completa la verifica anti-bot e riprova.",
      turnstileFailed: "Verifica anti-bot fallita. Ricarica la pagina e riprova.",
    },
  } : {
    f1: "First name", f2: "Last name", f3: "Email", f4: "Company", f5: "Phone", f6: "Message / Request",
    consent: "I consent to the processing of personal data under GDPR.",
    privacyLink: "Read the privacy notice", cta: "Send request", sending: "Sending…",
    success: "Got it. We'll be in touch soon.",
    sidebar: "Office", addrLbl: "Headquarters", addr: "Via del Serafico 200, 00142 Rome (RM)", addr2: "Italy",
    mailLbl: "Email", mail: "info@tecnolife.com", vatLbl: "VAT", vat: "11747341003",
    company: "Tecnolife IT Consulting S.r.l.",
    companyDesc: "Digital Accelerator & Business Partner. Strategic consulting partner supporting digital transformation.",
    err: {
      required: "Required field.", email: "Invalid email address.",
      privacy: "You must accept the privacy notice.", generic: "Something went wrong. Please try again shortly.",
      ratelimit: "Too many requests. Please retry in a minute.",
      validation: "Some fields were not filled in correctly.",
      network: "Network error. Check your connection and retry.",
      config: "Form not yet configured. Please contact the administrator.",
      turnstileMissing: "Complete the anti-bot verification and retry.",
      turnstileFailed: "Anti-bot verification failed. Reload the page and retry.",
    },
  };

  /* Render del widget Turnstile una sola volta, dopo che il DOM e lo script sono pronti. */
  useCntEffect(function () {
    var cfg = (typeof window !== "undefined" && window.FCE_CONFIG) || null;
    var siteKey = cfg && cfg.turnstileSiteKey;
    if (!siteKey || !turnstileContainerRef.current) return;

    var cancelled = false;
    ensureTurnstileScript()
      .then(function () {
        if (cancelled || !turnstileContainerRef.current) return;
        if (turnstileWidgetIdRef.current) return;
        try {
          turnstileWidgetIdRef.current = window.turnstile.render(turnstileContainerRef.current, {
            sitekey: siteKey,
            theme: "light",
            size: "normal",
            callback: function (tok) { turnstileTokenRef.current = tok; },
            "error-callback": function () { turnstileTokenRef.current = null; },
            "expired-callback": function () { turnstileTokenRef.current = null; },
          });
        } catch (err) {
          /* render error: il submit fallira' lato client con messaggio user-friendly. */
        }
      })
      .catch(function () {
        /* script load timeout: il submit fallira' lato client con messaggio user-friendly. */
      });

    return function () { cancelled = true; };
  }, []);

  function setField(name, val) {
    setValues({ ...values, [name]: val });
    if (fieldErrors[name]) {
      const next = { ...fieldErrors };
      delete next[name];
      setFieldErrors(next);
    }
  }

  function validate() {
    const errs = {};
    if (!values.nome.trim()) errs.nome = t.err.required;
    if (!values.cognome.trim()) errs.cognome = t.err.required;
    if (!values.email.trim()) errs.email = t.err.required;
    else if (!EMAIL_RE.test(values.email.trim())) errs.email = t.err.email;
    if (!values.messaggio.trim()) errs.messaggio = t.err.required;
    if (!values.privacy) errs.privacy = t.err.privacy;
    return errs;
  }

  function resetTurnstile() {
    if (window.turnstile && turnstileWidgetIdRef.current) {
      try { window.turnstile.reset(turnstileWidgetIdRef.current); } catch (e) { /* ignore */ }
      turnstileTokenRef.current = null;
    }
  }

  async function handleSubmit(e) {
    e.preventDefault();
    if (status === "submitting") return;

    const errs = validate();
    if (Object.keys(errs).length > 0) {
      setFieldErrors(errs); setStatus("error"); setErrorMsg(t.err.validation);
      return;
    }

    const cfg = (typeof window !== "undefined" && window.FCE_CONFIG) || null;
    if (!cfg || !cfg.formId || cfg.formId === "TODO_SUPABASE_FORM_UUID") {
      setStatus("error"); setErrorMsg(t.err.config);
      return;
    }

    /* HARD migration: se la site key Turnstile e' configurata, il token deve essere presente. */
    if (cfg.turnstileSiteKey && !turnstileTokenRef.current) {
      setStatus("error"); setErrorMsg(t.err.turnstileMissing);
      return;
    }

    setStatus("submitting"); setErrorMsg(""); setFieldErrors({});

    const payload = {
      siteId: cfg.siteId,
      formId: cfg.formId,
      data: {
        nome: values.nome.trim(),
        cognome: values.cognome.trim(),
        email: values.email.trim(),
        telefono: values.telefono.trim(),
        azienda: values.azienda.trim(),
        messaggio: values.messaggio.trim(),
        privacy: values.privacy,
      },
      _honeypot: honeypot,
      turnstileToken: turnstileTokenRef.current || "",
    };

    try {
      const res = await fetch(cfg.apiBase + "/api/forms/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (res.ok) {
        const body = await res.json().catch(() => ({}));
        if (body && body.success !== false) {
          setStatus("success"); setValues(FCE_INITIAL_FORM); setHoneypot(""); resetTurnstile();
          return;
        }
        setStatus("error"); setErrorMsg((body && body.error) || t.err.generic); resetTurnstile();
        return;
      }
      if (res.status === 429) { setStatus("error"); setErrorMsg(t.err.ratelimit); resetTurnstile(); return; }
      if (res.status === 403) { setStatus("error"); setErrorMsg(t.err.turnstileFailed); resetTurnstile(); return; }
      if (res.status === 400) {
        const body = await res.json().catch(() => ({}));
        setStatus("error"); setErrorMsg((body && body.error) || t.err.validation); resetTurnstile();
        return;
      }
      setStatus("error"); setErrorMsg(t.err.generic); resetTurnstile();
    } catch (err) {
      setStatus("error"); setErrorMsg(t.err.network); resetTurnstile();
    }
  }

  const isSubmitting = status === "submitting";
  const isSuccess = status === "success";

  return (
    <window.Section style={{ background: "var(--bg)", paddingTop: 60 }}>
      <window.Container>
        <div className="cnt-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "start" }}>
          <form onSubmit={handleSubmit} noValidate style={{ background: "#fff", border: "1px solid var(--border)", borderRadius: 24, padding: "clamp(28px, 4vw, 44px)", boxShadow: "var(--shadow-md)" }}>
            {isSuccess ? (
              <div style={{ padding: "60px 14px", textAlign: "center" }}>
                <div style={{ width: 72, height: 72, borderRadius: 20, margin: "0 auto 24px", background: "linear-gradient(135deg,#0B57E0,#28D1FE)", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", boxShadow: "0 12px 30px rgba(40,209,254,.4)" }}>
                  <window.Icon name="check-simple" size={36} strokeWidth={2.5} />
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, color: "var(--fg-1)", marginBottom: 8, letterSpacing: "-0.01em" }}>{t.success}</div>
                <div style={{ fontSize: 14, color: "var(--fg-2)" }}>info@tecnolife.com</div>
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <div aria-hidden="true" style={{ position: "absolute", left: "-9999px", height: 0, width: 0, overflow: "hidden" }}>
                  <label>
                    Do not fill this field
                    <input type="text" name="_hp" tabIndex={-1} autoComplete="off" value={honeypot} onChange={(e) => setHoneypot(e.target.value)} />
                  </label>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="cnt-fields">
                  <Field label={t.f1} name="nome" value={values.nome} onChange={setField} error={fieldErrors.nome} disabled={isSubmitting} required autoComplete="given-name" />
                  <Field label={t.f2} name="cognome" value={values.cognome} onChange={setField} error={fieldErrors.cognome} disabled={isSubmitting} required autoComplete="family-name" />
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }} className="cnt-fields">
                  <Field label={t.f3} name="email" type="email" value={values.email} onChange={setField} error={fieldErrors.email} disabled={isSubmitting} required autoComplete="email" />
                  <Field label={t.f5} name="telefono" type="tel" value={values.telefono} onChange={setField} disabled={isSubmitting} autoComplete="tel" />
                </div>
                <Field label={t.f4} name="azienda" value={values.azienda} onChange={setField} disabled={isSubmitting} autoComplete="organization" />
                <Field label={t.f6} name="messaggio" multiline value={values.messaggio} onChange={setField} error={fieldErrors.messaggio} disabled={isSubmitting} required />
                <label style={{ display: "flex", gap: 10, alignItems: "flex-start", marginTop: 4 }}>
                  <input type="checkbox" name="privacy" checked={values.privacy} onChange={(e) => setField("privacy", e.target.checked)} disabled={isSubmitting} style={{ marginTop: 3 }} aria-invalid={!!fieldErrors.privacy} />
                  <span style={{ fontSize: 12, color: fieldErrors.privacy ? "var(--tl-danger)" : "var(--fg-2)", lineHeight: 1.5 }}>
                    {t.consent}{" "}<a href="privacy.html" style={{ color: "var(--tl-blue-primary)", textDecoration: "underline" }}>{t.privacyLink}</a>
                  </span>
                </label>
                {/* Cloudflare Turnstile widget — anti-bot HARD. */}
                <div ref={turnstileContainerRef} aria-label="Verifica anti-bot" style={{ display: "flex", justifyContent: "flex-start", marginTop: 6 }} />
                {status === "error" && errorMsg && (
                  <div role="alert" style={{ fontSize: 13, color: "#7A1F22", background: "rgba(229,72,77,.08)", border: "1px solid rgba(229,72,77,.25)", borderRadius: 10, padding: "10px 14px", marginTop: 4 }}>{errorMsg}</div>
                )}
                <div style={{ marginTop: 6 }}>
                  <window.Button size="lg" icon={!isSubmitting ? <window.Icon name="arrow" size={16} /> : null} type="submit">
                    {isSubmitting ? t.sending : t.cta}
                  </window.Button>
                </div>
              </div>
            )}
          </form>
          <aside style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ background: "linear-gradient(135deg,#050E2B 0%,#0228A3 60%,#0B57E0 100%)", borderRadius: 20, padding: 28, color: "#fff", position: "relative", overflow: "hidden" }}>
              <svg style={{ position: "absolute", inset: 0, opacity: 0.16 }} viewBox="0 0 300 400" preserveAspectRatio="none">
                <defs><pattern id="cntg" width="36" height="36" patternUnits="userSpaceOnUse"><path d="M36 0H0V36" fill="none" stroke="#7EE3FF" strokeWidth="0.4" /></pattern></defs>
                <rect width="100%" height="100%" fill="url(#cntg)" />
              </svg>
              <div style={{ position: "absolute", top: 22, right: 22 }}><window.Chip size={20} /></div>
              <div style={{ position: "relative" }}>
                <window.Eyebrow light>{t.sidebar}</window.Eyebrow>
                <div style={{ fontSize: 18, fontWeight: 700, color: "#fff", letterSpacing: "-0.01em", marginTop: 8 }}>{t.company}</div>
                <p style={{ fontSize: 13, color: "rgba(255,255,255,.7)", lineHeight: 1.55, marginTop: 8 }}>{t.companyDesc}</p>
                <InfoRow icon="pin" label={t.addrLbl} v={<><div>{t.addr}</div><div style={{ opacity: 0.7, marginTop: 4 }}>{t.addr2}</div></>} />
                <InfoRow icon="mail" label={t.mailLbl} v={<a href={`mailto:${t.mail}`} style={{ color: "#fff" }}>{t.mail}</a>} />
                <InfoRow icon="shield-check" label={t.vatLbl} v={t.vat} last />
              </div>
            </div>
          </aside>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .cnt-grid { grid-template-columns: 1fr !important; }
            .cnt-fields { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </window.Container>
    </window.Section>
  );
};

function InfoRow({ icon, label, v }) {
  return (
    <div style={{ display: "flex", gap: 14, padding: "14px 0", borderTop: "1px solid rgba(255,255,255,.08)", marginTop: 14 }}>
      <span style={{ width: 32, height: 32, borderRadius: 8, background: "rgba(255,255,255,.06)", color: "var(--tl-cyan)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
        <window.Icon name={icon} size={16} />
      </span>
      <div style={{ fontSize: 14 }}>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,.55)", letterSpacing: ".08em", textTransform: "uppercase", marginBottom: 4, fontWeight: 600 }}>{label}</div>
        <div style={{ color: "rgba(255,255,255,.92)", lineHeight: 1.45 }}>{v}</div>
      </div>
    </div>
  );
}

function Field({ label, name, type = "text", multiline = false, value, onChange, error, disabled = false, required = false, autoComplete }) {
  const [focus, setFocus] = useCntState(false);
  const borderColor = error ? "var(--tl-danger)" : (focus ? "var(--tl-blue-primary)" : "var(--border)");
  const common = {
    fontFamily: "var(--font-sans)", fontSize: 14, padding: "12px 14px", borderRadius: 10,
    border: `1px solid ${borderColor}`, background: "var(--bg)", color: "var(--fg-1)",
    outline: "none", width: "100%", boxSizing: "border-box", transition: "all 140ms",
    boxShadow: focus && !error ? "0 0 0 4px rgba(11,87,224,.12)" : "none",
    opacity: disabled ? 0.6 : 1,
  };
  const handleChange = (e) => onChange(name, e.target.value);
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: 12, fontWeight: 600, color: "var(--fg-2)", letterSpacing: "0.04em" }}>{label}{required ? " *" : ""}</span>
      {multiline
        ? <textarea name={name} rows={4} value={value} onChange={handleChange} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} disabled={disabled} required={required} aria-invalid={!!error} style={common} />
        : <input type={type} name={name} value={value} onChange={handleChange} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} disabled={disabled} required={required} autoComplete={autoComplete} aria-invalid={!!error} style={common} />}
      {error && (<span role="alert" style={{ fontSize: 11, color: "var(--tl-danger)", marginTop: 2 }}>{error}</span>)}
    </label>
  );
}

window.ContattiFAQ = function ContattiFAQ() { return null; };