// PHAROS — FAQ + Contact form (with real submission + privacy consent)
const { useState: useContactState } = React;

// ============================================================
// Form endpoint configuration
// ------------------------------------------------------------
// Replace FORM_ENDPOINT with your real handler before launch.
//
// Drop-in providers (POST JSON, return 200/2xx on success):
//   • Formspree:   https://formspree.io/f/YOUR_FORM_ID
//   • Web3Forms:   https://api.web3forms.com/submit  (set access_key in body)
//   • Resend:      a serverless function that proxies to Resend API
//   • Custom:      your own /api/contact endpoint
//
// While FORM_ENDPOINT is null, the form runs in DEMO mode:
// it validates + simulates a 600ms request and shows the ACK screen,
// without actually transmitting data. This lets you test the UX in
// staging without spamming a real inbox.
// ============================================================
const FORM_ENDPOINT = null; // e.g. "https://formspree.io/f/xxxxxxxx"
const FORM_PROVIDER = "formspree"; // "formspree" | "web3forms" | "custom"
const WEB3FORMS_KEY = ""; // only used when FORM_PROVIDER === "web3forms"

async function submitContact(payload) {
  if (!FORM_ENDPOINT) {
    // Demo mode — simulate latency, never fail.
    await new Promise(r => setTimeout(r, 600));
    return { ok: true, demo: true };
  }
  const body = FORM_PROVIDER === "web3forms"
    ? { access_key: WEB3FORMS_KEY, ...payload }
    : payload;
  const res = await fetch(FORM_ENDPOINT, {
    method: "POST",
    headers: { "Content-Type": "application/json", "Accept": "application/json" },
    body: JSON.stringify(body),
  });
  if (!res.ok) throw new Error(`Submit failed: ${res.status}`);
  return { ok: true };
}

// ---------- FAQ ----------
function FAQ() {
  const { t } = React.useContext(window.LangCtx);
  const [open, setOpen] = useContactState(0);
  return (
    <section className="sec sec--paper" id="faq">
      <div className="container">
        <SectionHead index={8} eyebrow={t.faq.eyebrow} h2={t.faq.h2} />
        <ul className="faq-list">
          {t.faq.items.map(([q, a], i) => {
            const isOpen = open === i;
            const panelId = `faq-panel-${i}`;
            const btnId = `faq-btn-${i}`;
            return (
              <li key={i} className={`faq-item ${isOpen ? "is-open" : ""}`}>
                <button
                  id={btnId}
                  className="faq-q"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                >
                  <span className="faq-q-no">Q.{String(i + 1).padStart(2, "0")}</span>
                  <span className="faq-q-text">{q}</span>
                  <span className="faq-q-icon" aria-hidden="true">{isOpen ? "−" : "+"}</span>
                </button>
                <div
                  id={panelId}
                  role="region"
                  aria-labelledby={btnId}
                  className="faq-a-wrap"
                  style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
                >
                  <div className="faq-a-inner">
                    <p className="faq-a">{a}</p>
                  </div>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </section>
  );
}
window.FAQ = FAQ;

// ---------- Contact ----------
function Contact() {
  const { t, lang } = React.useContext(window.LangCtx);
  const [form, setForm] = useContactState({
    name: "", company: "", email: "", brief: "", agreed: false, hp: "" // hp = honeypot
  });
  const [status, setStatus] = useContactState("idle"); // idle | submitting | sent | error
  const [errors, setErrors] = useContactState({});
  const [errorMsg, setErrorMsg] = useContactState("");

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const onSubmit = async (e) => {
    e.preventDefault();
    if (status === "submitting") return;

    const errs = {};
    if (!form.name.trim()) errs.name = true;
    if (!form.company.trim()) errs.company = true;
    if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = true;
    if (!form.brief.trim() || form.brief.trim().length < 10) errs.brief = true;
    if (!form.agreed) errs.agreed = true;
    setErrors(errs);

    if (Object.keys(errs).length > 0) {
      setErrorMsg(errs.agreed && Object.keys(errs).length === 1
        ? t.contact.privacy_required
        : t.contact.err_validation);
      setStatus("error");
      return;
    }

    // Honeypot — bots fill hidden fields, humans don't.
    if (form.hp) { setStatus("sent"); return; }

    setStatus("submitting");
    setErrorMsg("");
    try {
      await submitContact({
        name: form.name.trim(),
        company: form.company.trim(),
        email: form.email.trim(),
        brief: form.brief.trim(),
        consent: true,
        consent_text: t.contact.privacy_label + " " + t.contact.privacy_link,
        lang,
        page_url: typeof window !== "undefined" ? window.location.href : "",
        ts: new Date().toISOString(),
      });
      setStatus("sent");
    } catch (err) {
      console.error("[contact] submit failed", err);
      setErrorMsg(t.contact.err_generic);
      setStatus("error");
    }
  };

  const submitting = status === "submitting";
  const sent = status === "sent";

  return (
    <section className="sec sec--ink sec--contact" id="contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-copy">
            <div className="sec-head-meta">
              <span className="mono">{t.section_no[8]}</span>
              <span className="mono mono--dim">{t.contact.eyebrow}</span>
            </div>
            <Reveal as="h2" className="contact-h1 display">{t.contact.h1}</Reveal>
            <Reveal delay={120} as="div" className="contact-h2">{t.contact.h2}</Reveal>
            <Reveal delay={200} as="p" className="contact-lede">{t.contact.lede}</Reveal>
            <div className="contact-direct">
              {t.contact.direct} · <a href="mailto:hello@pharos-advisory.org">hello@pharos-advisory.org</a>
            </div>
          </div>
          <div className="contact-form-wrap">
            {!sent ? (
              <form onSubmit={onSubmit} noValidate className="contact-form" aria-busy={submitting}>
                <Field label={t.contact.f_name}    value={form.name}    onChange={v => update("name", v)}    error={errors.name}    autoComplete="name" />
                <Field label={t.contact.f_company} value={form.company} onChange={v => update("company", v)} error={errors.company} autoComplete="organization" />
                <Field label={t.contact.f_email}   value={form.email}   onChange={v => update("email", v)}   error={errors.email}   autoComplete="email" type="email" />
                <Field label={t.contact.f_brief}   value={form.brief}   onChange={v => update("brief", v)}   error={errors.brief}   multiline />

                {/* Honeypot — hidden from humans, picked up by bots */}
                <div aria-hidden="true" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, overflow: "hidden" }}>
                  <label>Website
                    <input type="text" tabIndex={-1} autoComplete="off"
                      value={form.hp} onChange={e => update("hp", e.target.value)} />
                  </label>
                </div>

                <label className={`consent ${errors.agreed ? "is-error" : ""}`}>
                  <input
                    type="checkbox"
                    className="consent-input"
                    checked={form.agreed}
                    onChange={e => update("agreed", e.target.checked)}
                    aria-invalid={!!errors.agreed}
                    aria-describedby={errors.agreed ? "consent-error" : undefined}
                  />
                  <span className="consent-box" aria-hidden="true" />
                  <span className="consent-text">
                    {t.contact.privacy_label} <a href="privacy.html" className="consent-link">{t.contact.privacy_link}</a>.
                  </span>
                </label>

                {status === "error" && errorMsg && (
                  <div id="consent-error" className="contact-err mono" role="alert">
                    {errorMsg}
                  </div>
                )}

                <button type="submit" className="contact-submit" disabled={submitting}>
                  <span>{submitting ? t.contact.submitting : t.contact.submit}</span>
                  <span className="arrow" aria-hidden="true">{submitting ? "·" : "→"}</span>
                </button>
              </form>
            ) : (
              <div className="contact-sent" role="status" aria-live="polite">
                <div className="contact-sent-mark">✓ ACK</div>
                <h3 className="contact-sent-h">{t.contact.sent_h}</h3>
                <p className="contact-sent-p">{t.contact.sent_p}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Contact = Contact;

function Field({ label, value, onChange, error, multiline, type = "text", autoComplete }) {
  const [focus, setFocus] = useContactState(false);
  const filled = value && value.length > 0;
  const Tag = multiline ? "textarea" : "input";
  return (
    <label className={`field ${focus ? "is-focus" : ""} ${filled ? "is-filled" : ""} ${error ? "is-error" : ""}`}>
      <span className="field-label">{label}</span>
      <Tag
        className="field-input"
        type={type}
        value={value}
        onChange={e => onChange(e.target.value)}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        rows={multiline ? 3 : undefined}
        aria-invalid={!!error}
        autoComplete={autoComplete}
      />
    </label>
  );
}
window.Field = Field;