/* KNOX — sections part 2: Trust/About, Pioneer (form), FAQ, Footer. */
const { useState } = React;
const Icon = window.Icon;
const { Kicker, SectionHead } = window;

/* ============================ TRUST / ABOUT ============================ */
function Trust({ t }) {
  return (
    <section className="trust" id="about">
      <div className="w">
        <div className="trust-top">
          <div className="trust-photo-wrap">
            <div className="trust-photo">
              <img className="trust-photo-img" src="assets/uwe.png" alt="Uwe-Michael Sinn" />
            </div>
            <div className="trust-badges-float">
              <div className="kbadge">
                <span className="kbadge-ic"><Icon name="trophy" size={17} /></span>
                <div><div className="kbadge-t">{t.trust.badge1}</div><div className="kbadge-s">{t.trust.badge1s}</div></div>
              </div>
              <div className="kbadge">
                <span className="kbadge-ic"><Icon name="sparkle" size={17} /></span>
                <div><div className="kbadge-t">{t.trust.badge2}</div><div className="kbadge-s">{t.trust.badge2s}</div></div>
              </div>
            </div>
            <div className="trust-cap">{t.trust.photoCaption}</div>
          </div>
          <div>
            <SectionHead kicker={t.trust.kicker} h={t.trust.h} />
            <p className="trust-p">{t.trust.p1}</p>
            <p className="trust-p">{t.trust.p2}</p>
            <p className="trust-p"><strong>{t.trust.p3}</strong></p>
            <a className="trust-link" href={t.trust.linkUrl} target="_blank" rel="noopener">
              {t.trust.link}<Icon name="arrow" size={15} />
            </a>
          </div>
        </div>

        <div className="quote">
          <span className="quote-mark" aria-hidden="true">“</span>
          <p className="quote-text">{t.trust.quote}</p>
          <div className="quote-by">
            <span className="quote-by-name">{t.trust.quoteBy}</span>
            <span className="quote-by-sep">·</span>
            <span className="quote-by-role">{t.trust.quoteRole}</span>
          </div>
        </div>

        <div className="dsgvo">
          <SectionHead kicker={t.trust.secKicker} h={t.trust.secH} center />
          <div className="dsgvo-grid">
            {t.trust.sec.map((s, i) => (
              <div className="dsgvo-card" key={i}>
                <span className="dsgvo-ic"><Icon name={s.icon} size={19} /></span>
                <h3 className="dsgvo-t">{s.t}</h3>
                <p className="dsgvo-b">{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ PIONEER + FORM ============================ */
/* Subscribe a Pioneer signup to Klaviyo via the public client-side endpoint.
   Honors the target list's opt-in settings (double opt-in sends a confirm mail).
   Throws on misconfiguration or a non-2xx response so the form can show an error. */
async function klaviyoSubscribe(v) {
  const cfg = window.KNOX_KLAVIYO || {};
  if (!cfg.publicKey || !cfg.listId) throw new Error("Klaviyo not configured");
  const res = await fetch(
    "https://a.klaviyo.com/client/subscriptions/?company_id=" + encodeURIComponent(cfg.publicKey),
    {
      method: "POST",
      headers: { "Content-Type": "application/json", revision: "2024-10-15" },
      body: JSON.stringify({
        data: {
          type: "subscription",
          attributes: {
            custom_source: "KNOX Landing Page",
            profile: {
              data: {
                type: "profile",
                attributes: {
                  email: v.email.trim(),
                  first_name: v.first.trim(),
                  last_name: v.last.trim(),
                  properties: { Company: v.company.trim(), "Email Platform": v.platform },
                },
              },
            },
          },
          relationships: { list: { data: { type: "list", id: cfg.listId } } },
        },
      }),
    }
  );
  if (!res.ok) throw new Error("Klaviyo error " + res.status);
}

function PioneerForm({ t, onDone }) {
  const [v, setV] = useState({ first: "", last: "", email: "", company: "", platform: t.pioneer.platforms[0], consent: false });
  const [err, setErr] = useState({});
  const [busy, setBusy] = useState(false);
  const [submitErr, setSubmitErr] = useState("");
  const set = (k) => (e) => setV({ ...v, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    const er = {};
    if (!v.first.trim()) er.first = t.pioneer.errRequired;
    if (!v.last.trim()) er.last = t.pioneer.errRequired;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.email)) er.email = t.pioneer.errEmail;
    if (!v.company.trim()) er.company = t.pioneer.errRequired;
    if (!v.consent) er.consent = t.pioneer.errConsent;
    setErr(er);
    if (Object.keys(er).length > 0) return;
    setSubmitErr("");
    setBusy(true);
    try {
      await klaviyoSubscribe(v);
      onDone();
    } catch (_) {
      setSubmitErr(t.pioneer.errSubmit);
      setBusy(false);
    }
  };

  /* Plain render function (NOT a nested component) — calling it inline keeps the
     <input> at a stable position so it never remounts and never loses focus. */
  const F = ({ k, type = "text" }) => (
    <div className={`field${err[k] ? " field--err" : ""}`}>
      <label htmlFor={`f-${k}`}>{t.pioneer["f_" + k]}</label>
      <input id={`f-${k}`} type={type} value={v[k]} onChange={set(k)} autoComplete="off" />
      {err[k] && <div className="field-msg">{err[k]}</div>}
    </div>
  );

  return (
    <form className="pio-form-card" onSubmit={submit} noValidate>
      <h3 className="pio-form-h">{t.pioneer.formTitle}</h3>
      <p className="pio-form-s">{t.pioneer.formSub}</p>
      <div className="field-row">{F({ k: "first" })}{F({ k: "last" })}</div>
      {F({ k: "email", type: "email" })}
      {F({ k: "company" })}
      <div className="field">
        <label htmlFor="f-platform">{t.pioneer.f_platform}</label>
        <select id="f-platform" value={v.platform} onChange={set("platform")}>
          {t.pioneer.platforms.map((p) => <option key={p} value={p}>{p}</option>)}
        </select>
      </div>
      <label className={`consent${err.consent ? " field--err" : ""}`}>
        <input type="checkbox" checked={v.consent} onChange={set("consent")} />
        <span>{t.pioneer.consent}</span>
      </label>
      {err.consent && <div className="field-msg" style={{ marginTop: "-12px", marginBottom: "12px" }}>{err.consent}</div>}
      <button type="submit" className="btn btn--primary btn--lg pio-submit" disabled={busy} aria-busy={busy}>
        {busy ? t.pioneer.submitting : <React.Fragment>{t.pioneer.submit}<span className="btn-arrow">→</span></React.Fragment>}
      </button>
      {submitErr && <div className="field-msg" role="alert" style={{ marginTop: "12px" }}>{submitErr}</div>}
      <div className="pio-micro">{t.pioneer.micro}</div>
    </form>
  );
}

function PioneerSuccess({ t }) {
  return (
    <div className="pio-form-card">
      <div className="pio-success">
        <div className="pio-success-ic"><Icon name="check" size={30} /></div>
        <h3 className="pio-success-h">{t.pioneer.successH}</h3>
        <p className="pio-success-b">{t.pioneer.successB}</p>
      </div>
    </div>
  );
}

function Pioneer({ t }) {
  const [done, setDone] = useState(false);
  const base = 142;
  return (
    <section className="pioneer" id="pioneer">
      <div className="w pio-inner">
        <div>
          <SectionHead kicker={t.pioneer.kicker} h={t.pioneer.h} />
          <p className="pio-lead">{t.pioneer.lead}</p>
          <p className="pio-strong">{t.pioneer.leadStrong}</p>
          <div className="pio-tiles">
            {t.pioneer.tiles.map((tl, i) => (
              <div className="pio-tile" key={i}>
                <span className="pio-tile-ic"><Icon name={tl.icon} size={20} /></span>
                <div>
                  <h3 className="pio-tile-t">{tl.t}</h3>
                  <p className="pio-tile-b">{tl.b}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div>
          {done ? <PioneerSuccess t={t} /> : <PioneerForm t={t} onDone={() => setDone(true)} />}
          <div className="counter">
            <span className="counter-avatars">
              <span className="counter-av" /><span className="counter-av" /><span className="counter-av" />
            </span>
            {t.pioneer.counterPre} <span className="counter-n">{base + (done ? 1 : 0)}</span> {t.pioneer.counterPost}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ FAQ ============================ */
function Faq({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="w">
        <SectionHead kicker={t.faq.kicker} h={t.faq.h} center />
        <div className="faq-list">
          {t.faq.items.map((it, i) => (
            <button type="button" key={i} className={`faq-item${open === i ? " open" : ""}`}
              onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="faq-tog"><svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 5.5 7 9.5l4-4" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
              </div>
              <div className="faq-a-wrap"><div className="faq-a">{it.a}</div></div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================ FOOTER ============================ */
/* Known legal pages get real URLs; the rest stay placeholders until they exist. */
const FOOTER_HREFS = { "Impressum": "/impressum.html", "Imprint": "/impressum.html" };

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="w footer-inner">
        <div className="footer-brand">
          <div className="footer-brand-row">
            <span className="brand-icon"><img src="assets/knox-icon.png" alt="KNOX" /></span>
            <img className="brand-word" src="assets/knox-wordmark.png" alt="KNOX Data Magic" />
          </div>
          <p className="footer-tag">{t.footer.tagline}</p>
          <div className="footer-contact">
            {t.footer.company}<br />
            {t.footer.address}<br />
            <a href={`mailto:${t.footer.email}`}>{t.footer.email}</a>
          </div>
        </div>
        {t.footer.cols.map((c, i) => (
          <div className="footer-col" key={i}>
            <div className="footer-col-h">{c.title}</div>
            <ul>{c.items.map((it, j) => <li key={j}><a href={FOOTER_HREFS[it] || "#"}>{it}</a></li>)}</ul>
          </div>
        ))}
      </div>
      <div className="w footer-base">
        <span>{t.footer.legal}</span>
        <span className="footer-status"><span className="footer-status-dot" />{t.footer.status}</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Trust, Pioneer, Faq, Footer });