// FAQ — Parents §10 / Educators §9 / Organisations §8.
// Intro paragraph, category chips, then an accordion. With `tabbed`, only the
// active category's accordion shows (keeps long FAQs compact). Answers may be a
// string, or an array of paragraphs / { list: [...] } blocks.

function FaqAnswer({ a }) {
  const blocks = Array.isArray(a) ? a : [a];
  return (
    <div style={{ paddingBottom: 20, maxWidth: "72ch" }}>
      {blocks.map((b, i) => {
        if (b && typeof b === "object" && b.list) {
          return (
            <ul key={i} style={{ margin: "0 0 12px", paddingLeft: 20, fontSize: "var(--kl-text-medium)", lineHeight: 1.6, color: "var(--kl-fg-2)" }}>
              {b.list.map((li, j) => <li key={j} style={{ marginBottom: 4 }}>{li}</li>)}
            </ul>
          );
        }
        if (b && typeof b === "object" && b.subhead) {
          return <p key={i} style={{ margin: "4px 0 8px", fontWeight: 600, fontSize: "var(--kl-text-regular)", color: "var(--kl-fg-1)" }}>{b.subhead}</p>;
        }
        return <p key={i} style={{ margin: "0 0 12px", fontSize: "var(--kl-text-medium)", lineHeight: 1.6, color: "var(--kl-fg-2)" }}>{b}</p>;
      })}
    </div>
  );
}

function FAQ({ scheme = "scheme-1", eyebrow = "FAQ", title = "Frequently asked questions", lede, categories, tabbed = false }) {
  const [openIdx, setOpenIdx] = useState({});  // map of "catIndex-itemIndex" → bool
  const [active, setActive] = useState(categories[0]?.label);

  const toggle = (k) => setOpenIdx((s) => ({ ...s, [k]: !s[k] }));
  const slug = (l) => `faq-${l.replace(/\s+/g, "-").toLowerCase()}`;

  const selectTab = (label) => { setActive(label); if (tabbed) setOpenIdx({}); };

  const renderCategory = (c, ci) => (
    <div key={c.label} id={slug(c.label)}>
      {!tabbed && <h3 style={{ fontSize: "var(--kl-text-h4)", marginBottom: 24 }}>{c.label}</h3>}
      <div style={{ borderTop: "1px solid var(--kl-border)" }}>
        {c.items.map((q, qi) => {
          const k = `${ci}-${qi}`;
          const open = !!openIdx[k];
          return (
            <div key={q.q} style={{ borderBottom: "1px solid var(--kl-border)" }}>
              <button
                onClick={() => toggle(k)}
                style={{
                  width: "100%", padding: "20px 0",
                  display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
                  background: "transparent", border: 0, cursor: "pointer", textAlign: "left",
                  fontFamily: "var(--kl-font-display)", fontWeight: 500,
                  fontSize: "var(--kl-text-h6)", color: "var(--kl-fg-1)",
                  letterSpacing: "-0.01em",
                }}
                aria-expanded={open}>
                <span>{q.q}</span>
                <span style={{
                  flexShrink: 0, width: 24, height: 24,
                  transform: open ? "rotate(180deg)" : "rotate(0)",
                  transition: "transform 200ms var(--kl-ease)",
                }}><ChevronDown size={24} /></span>
              </button>
              <div style={{ maxHeight: open ? 4000 : 0, overflow: "hidden", transition: "max-height 400ms var(--kl-ease)" }}>
                <FaqAnswer a={q.a} />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );

  const activeCat = categories.find((c) => c.label === active) || categories[0];
  const activeIndex = categories.indexOf(activeCat);

  return (
    <Section scheme={scheme}>
      <div style={{ maxWidth: 720, margin: "0 auto 40px", textAlign: "center" }}>
        {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
        <h2 style={{ fontSize: "var(--kl-text-h2)", marginBottom: 24 }}>{title}</h2>
        {lede && <p style={{ fontSize: "var(--kl-text-medium)", lineHeight: 1.5 }}>{lede}</p>}
      </div>

      {/* Category chips */}
      <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 12, marginBottom: 48, maxWidth: 760, marginInline: "auto" }}>
        {categories.map((c) => (
          <a key={c.label}
             href={tabbed ? undefined : `#${slug(c.label)}`}
             onClick={(e) => { if (tabbed) e.preventDefault(); selectTab(c.label); }}
             className="kl-btn"
             style={{
               padding: "8px 16px",
               fontSize: "var(--kl-text-small)",
               fontWeight: 600,
               background: active === c.label ? "var(--kl-plum)" : "var(--kl-white)",
               color: active === c.label ? "var(--kl-white)" : "var(--kl-fg-1)",
               border: "1px solid var(--kl-border)",
               boxShadow: "none",
               textDecoration: "none",
               cursor: "pointer",
             }}>
            {c.label}
          </a>
        ))}
      </div>

      {/* Accordion */}
      <div style={{ maxWidth: 880, margin: "0 auto", display: "flex", flexDirection: "column", gap: 48 }}>
        {tabbed ? renderCategory(activeCat, activeIndex) : categories.map((c, ci) => renderCategory(c, ci))}
      </div>
    </Section>
  );
}

window.FAQ = FAQ;