// extra-pages.jsx — FAQ et Glossaire
const { useState: useStateX } = React;

// ---------- FAQ ----------
function FAQItem({ q, a, idx }) {
  const [open, setOpen] = useStateX(false);
  return (
    <div style={{ borderTop: "1px solid var(--line)" }}>
      <button
        type="button"
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        style={{
          width: "100%", textAlign: "left", background: "none", border: "none",
          padding: "28px 0", cursor: "pointer", display: "flex", alignItems: "flex-start",
          gap: 24, color: "var(--ink)", fontFamily: "inherit",
        }}
      >
        <span className="kpi-label" style={{ minWidth: 32, paddingTop: 6, color: "var(--ink-soft)" }}>{String(idx + 1).padStart(2, "0")}</span>
        <span style={{ flex: 1, fontSize: "clamp(17px, 1.4vw, 21px)", fontWeight: 500, lineHeight: 1.4 }}>{q}</span>
        <span aria-hidden="true" style={{
          fontSize: 22, lineHeight: 1, paddingTop: 4, color: "var(--gold)",
          transform: open ? "rotate(45deg)" : "rotate(0deg)", transition: "transform 220ms ease",
        }}>+</span>
      </button>
      <div style={{
        overflow: "hidden",
        maxHeight: open ? 600 : 0,
        opacity: open ? 1 : 0,
        transition: "max-height 320ms ease, opacity 220ms ease, padding 220ms ease",
        paddingLeft: 56,
        paddingBottom: open ? 28 : 0,
      }}>
        <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--ink-soft)", maxWidth: 720 }}>{a}</p>
      </div>
    </div>
  );
}

function FAQPage({ lang, go }) {
  const t = window.I18N[lang];
  const p = t.pages.faq;
  return (
    <div className="page" data-screen-label="FAQ">
      <PageHeader eyebrow={t.nav.faq || (lang === "fr" ? "FAQ" : "FAQ")} title={p.hero} sub={p.sub}/>
      <section style={{ paddingTop: 24, paddingBottom: 80 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <InView style={{ position: "sticky", top: 120 }}>
              <div className="kpi-label" style={{ marginBottom: 16 }}>{lang === "fr" ? "Sommaire" : "Index"}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {p.groups.map((g, i) => (
                  <li key={i}>
                    <a href={`#faq-${i}`} style={{ fontSize: 15, color: "var(--ink-soft)", borderBottom: "1px solid transparent" }}
                       onClick={(e) => { e.preventDefault(); const el = document.getElementById(`faq-${i}`); if (el) window.scrollTo({ top: el.offsetTop - 100, behavior: "smooth" }); }}>
                      {g.title}
                    </a>
                  </li>
                ))}
              </ul>
            </InView>
            <div>
              {p.groups.map((g, gi) => (
                <InView key={gi} delay={gi * 60} as="div" style={{ marginBottom: 56 }}>
                  <h3 id={`faq-${gi}`} style={{
                    fontSize: "clamp(20px, 2vw, 28px)", marginBottom: 8, paddingBottom: 16,
                    color: "var(--ink)", fontFamily: "var(--serif)", fontStyle: "italic", letterSpacing: "-0.01em",
                  }}>{g.title}</h3>
                  <div>
                    {g.items.map((it, ii) => (
                      <FAQItem key={ii} q={it.q} a={it.a} idx={ii}/>
                    ))}
                  </div>
                </InView>
              ))}
            </div>
          </div>
        </div>
      </section>
      <section style={{ background: "var(--ink)", color: "var(--cream)", padding: "80px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }}>
          <div>
            <div className="kpi-label" style={{ color: "var(--gold)", marginBottom: 16 }}>{lang === "fr" ? "Contact" : "Contact"}</div>
            <h2 style={{ fontSize: "clamp(32px, 3.4vw, 52px)", marginBottom: 16, color: "var(--cream)" }}>{p.ctaTitle}</h2>
            <p style={{ color: "rgba(244,239,230,0.75)", fontSize: 17, maxWidth: 480 }}>{p.ctaBody}</p>
          </div>
          <div style={{ display: "flex", gap: 16, justifyContent: "flex-end" }}>
            <button className="btn btn-primary" onClick={() => go("contact")}>
              {lang === "fr" ? "Nous écrire" : "Write to us"} <span className="arr">→</span>
            </button>
            <a className="btn btn-ghost" href="https://calendly.com/antoine-vezina-invia/decouverte" target="_blank" rel="noopener noreferrer" style={{ color: "var(--cream)", borderColor: "var(--cream)" }}>
              {lang === "fr" ? "Réserver un appel" : "Book a call"}
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- Glossaire ----------
function GlossairePage({ lang, go }) {
  const t = window.I18N[lang];
  const p = t.pages.glossaire;
  return (
    <div className="page" data-screen-label="Glossaire">
      <PageHeader eyebrow={t.nav.glossaire || (lang === "fr" ? "Glossaire" : "Glossary")} title={p.hero} sub={p.sub}/>
      <section style={{ paddingTop: 24, paddingBottom: 80 }}>
        <div className="container">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(2, 1fr)",
            columnGap: 64,
            rowGap: 0,
          }}>
            {p.terms.map((term, i) => (
              <InView key={i} delay={(i % 4) * 40} style={{
                padding: "32px 0",
                borderTop: "1px solid var(--line)",
              }}>
                <div className="kpi-label" style={{ marginBottom: 12 }}>{String(i + 1).padStart(2, "0")}</div>
                <h3 style={{
                  fontSize: "clamp(18px, 1.5vw, 22px)", marginBottom: 12,
                  color: "var(--ink)", fontWeight: 600, letterSpacing: "-0.005em",
                }}>{term.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--ink-soft)" }}>{term.d}</p>
              </InView>
            ))}
          </div>
        </div>
      </section>
      <HomeContactCTA lang={lang} go={go}/>
    </div>
  );
}

Object.assign(window, { FAQPage, GlossairePage });