/* Get Started form page */

const GETSTARTED_WEBHOOK = (window.AF_ENV && window.AF_ENV.GETSTARTED_WEBHOOK) ||
  "https://n8n.advancedflow.cloud/webhook/c9cc328c-3c4c-4c06-9048-8d61d204b110";
const GETSTARTED_TOKEN = (window.AF_ENV && window.AF_ENV.WEBHOOK_TOKEN) || "";
const GETSTARTED_SITEKEY = (window.AF_ENV && window.AF_ENV.HCAPTCHA_SITE_KEY) || "";

const COOLDOWN_KEY = "af-gs-cooldown";
const COOLDOWN_MS = 30000;

function GetStartedPage() {
  const { t, lang } = useT();
  const [data, setData] = useState({
    name: "", lastname: "", company: "", website: "",
    email: "", service: "", industry: "", challenge: "",
    company_url: "", // honeypot — must stay empty
    terms: false,
  });
  const mountedAt = useRef(Date.now());
  const captcha = useHCaptcha(GETSTARTED_SITEKEY);
  const [submitting, setSubmitting] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");

  const trimmed = {
    name: cleanText(data.name, 80),
    lastname: cleanText(data.lastname, 80),
    company: cleanText(data.company, 120),
    website: cleanText(data.website, 200),
    email: cleanText(data.email, 254),
    service: data.service,
    industry: data.industry,
    challenge: data.challenge,
  };

  const errMsg = (es, en) => lang === "es" ? es : en;

  const validate = () => {
    if (!trimmed.name || !trimmed.lastname || !trimmed.company || !trimmed.email) {
      return errMsg("Completa todos los campos requeridos.", "Please fill out all required fields.");
    }
    if (!validEmail(trimmed.email)) {
      return errMsg("El email no parece válido.", "That email doesn't look valid.");
    }
    if (trimmed.website && !validHttpsUrl(trimmed.website, { maxLen: 200 })) {
      return errMsg("La URL del sitio debe empezar con https://", "Website URL must start with https://");
    }
    if (!t.getStarted.services.includes(trimmed.service)) {
      return errMsg("Selecciona un servicio válido.", "Select a valid service.");
    }
    if (!t.getStarted.industries.includes(trimmed.industry)) {
      return errMsg("Selecciona una industria válida.", "Select a valid industry.");
    }
    if (!t.getStarted.challenges.includes(trimmed.challenge)) {
      return errMsg("Selecciona un reto válido.", "Select a valid challenge.");
    }
    if (!data.terms) {
      return errMsg("Acepta los términos para continuar.", "Accept the terms to continue.");
    }
    return "";
  };

  const valid = !validate();

  const submit = async (e) => {
    e.preventDefault();
    const v = validate();
    if (v) { setError(v); return; }

    if (!checkCooldown(COOLDOWN_KEY, COOLDOWN_MS)) {
      setError(errMsg("Espera un momento antes de enviar de nuevo.", "Please wait a moment before submitting again."));
      return;
    }

    const captchaToken = captcha.getToken();
    if (!captchaToken) {
      setError(errMsg("Completa el captcha primero.", "Please complete the captcha first."));
      return;
    }

    setSubmitting(true);
    setError("");
    try {
      const res = await fetch(GETSTARTED_WEBHOOK, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-AF-Webhook-Token": GETSTARTED_TOKEN,
        },
        body: JSON.stringify({
          source: "advancedflow-landing",
          form: "get-started",
          lang,
          submittedAt: new Date().toISOString(),
          formDurationMs: Date.now() - mountedAt.current,
          hCaptchaToken: captchaToken,
          company_url: data.company_url, // honeypot — n8n drops if non-empty
          ...trimmed,
        }),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      markCooldown(COOLDOWN_KEY);
      setSuccess(true);
    } catch (err) {
      captcha.reset();
      setError(errMsg(
        "No pudimos enviar tu solicitud. Intenta de nuevo en un momento.",
        "We couldn't submit your request. Please try again in a moment."
      ));
    } finally {
      setSubmitting(false);
    }
  };

  if (success) {
    return (
      <section className="getstarted-section">
        <div className="shell getstarted-success">
          <Reveal>
            <div className="success-mark">
              <svg viewBox="0 0 64 64" width="64" height="64">
                <circle cx="32" cy="32" r="30" fill="none" stroke="currentColor" strokeWidth="2" opacity="0.3" />
                <path d="M18 33 l10 10 l18 -22" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                  <animate attributeName="stroke-dasharray" from="0 60" to="60 0" dur="0.6s" fill="freeze" />
                </path>
              </svg>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <h2 className="gs-success-title">{t.getStarted.successT}</h2>
          </Reveal>
          <Reveal delay={250}>
            <p className="gs-success-sub">{t.getStarted.successS}</p>
          </Reveal>
        </div>
      </section>
    );
  }

  return (
    <section className="getstarted-section">
      <div className="shell getstarted-shell">
        <div className="getstarted-grid">
          <div className="getstarted-left">
            <Reveal>
              <div className="eyebrow">{t.getStarted.eyebrow}</div>
            </Reveal>
            <h1 className="gs-title">
              <Words text={t.getStarted.h1a} delay={100} />
              <em><Words text={t.getStarted.h1b} delay={350} /></em>
              <Words text={t.getStarted.h1c} delay={550} />
            </h1>
            <Reveal delay={300}>
              <p className="gs-sub">{t.getStarted.sub}</p>
            </Reveal>
            <Reveal delay={400}>
              <div className="gs-trust">
                <div className="gs-trust-row">
                  <span className="dot moss" />
                  <span className="mono">{"< 24h response time"}</span>
                </div>
                <div className="gs-trust-row">
                  <span className="dot moss" />
                  <span className="mono">No commitment, no spam</span>
                </div>
                <div className="gs-trust-row">
                  <span className="dot moss" />
                  <span className="mono">SOC-grade data handling</span>
                </div>
              </div>
            </Reveal>
          </div>

          <Reveal delay={120}>
            <form className="gs-form" onSubmit={submit} noValidate>
              {/* Honeypot — visually hidden, off the keyboard, ignored by screen readers */}
              <div className="hp-field" aria-hidden="true">
                <label htmlFor="gs_company_url">Company URL</label>
                <input
                  type="text"
                  id="gs_company_url"
                  name="company_url"
                  tabIndex={-1}
                  autoComplete="off"
                  value={data.company_url}
                  onChange={e => setData({ ...data, company_url: e.target.value })}
                />
              </div>

              <div className="field-row">
                <div className="field">
                  <label>{t.getStarted.f.name}</label>
                  <input type="text" required maxLength={80} autoComplete="given-name"
                    value={data.name} onChange={e => setData({ ...data, name: e.target.value })} />
                </div>
                <div className="field">
                  <label>{t.getStarted.f.lastname}</label>
                  <input type="text" required maxLength={80} autoComplete="family-name"
                    value={data.lastname} onChange={e => setData({ ...data, lastname: e.target.value })} />
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{t.getStarted.f.company}</label>
                  <input type="text" required maxLength={120} autoComplete="organization"
                    value={data.company} onChange={e => setData({ ...data, company: e.target.value })} />
                </div>
                <div className="field">
                  <label>{t.getStarted.f.website} <span className="muted">{t.getStarted.f.websiteOpt}</span></label>
                  <input type="url" maxLength={200} autoComplete="url" inputMode="url"
                    value={data.website} onChange={e => setData({ ...data, website: e.target.value })} placeholder="https://" />
                </div>
              </div>
              <div className="field">
                <label>{t.getStarted.f.email}</label>
                <input type="email" required maxLength={254} autoComplete="email" inputMode="email"
                  value={data.email} onChange={e => setData({ ...data, email: e.target.value })} />
              </div>
              <div className="field">
                <label>{t.getStarted.f.service}</label>
                <select required value={data.service} onChange={e => setData({ ...data, service: e.target.value })}>
                  <option value="">{t.getStarted.f.servicePh}</option>
                  {t.getStarted.services.map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{t.getStarted.f.industry}</label>
                <select required value={data.industry} onChange={e => setData({ ...data, industry: e.target.value })}>
                  <option value="">{t.getStarted.f.industryPh}</option>
                  {t.getStarted.industries.map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{t.getStarted.f.challenge}</label>
                <div className="chip-group">
                  {t.getStarted.challenges.map(c => (
                    <button
                      type="button"
                      key={c}
                      className={`chip ${data.challenge === c ? "active" : ""}`}
                      onClick={() => setData({ ...data, challenge: c })}
                    >{c}</button>
                  ))}
                </div>
              </div>
              <label className="check">
                <input type="checkbox" checked={data.terms} onChange={e => setData({ ...data, terms: e.target.checked })} />
                <span>{t.getStarted.f.terms}</span>
              </label>
              <div className="field field-captcha">
                <div ref={captcha.ref} className="h-captcha" />
              </div>
              {error && <div className="form-error mono" role="alert">{error}</div>}
              <button type="submit" className="btn btn-block btn-lg" disabled={!valid || submitting}>
                {submitting ? t.getStarted.f.submitting : t.getStarted.f.submit} <ArrowIcon />
              </button>
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GetStartedPage });