/* CIRG website — utility + legal pages. Exported to window. */

/* ---------------- FAQ ---------------- */
function FaqPage({ t, go }) {
  const f = t.faq;
  const [open, setOpen] = React.useState(0);
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={f.intro.eyebrow} eyebrow={f.intro.eyebrow} title={f.intro.title} lead={f.intro.lead} />
      <section className="section">
        <div className="container">
          <div className="faq-list">
            {f.items.map((it, i) => (
              <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
                <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it[0]}</span><Icon name="chevron-down" size={20} className="chev" />
                </button>
                {open === i ? <div className="faq-a">{it[1]}</div> : null}
              </div>
            ))}
          </div>
          <div style={{ maxWidth: 820, margin: "32px auto 0", textAlign: "center" }}>
            <button className="btn btn-primary" onClick={() => go("contacts")}>{t.cta.writeUs} <Icon name="arrow-right" size={16} /></button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Search ---------------- */
function SearchPage({ t, go }) {
  const s = t.search;
  const [q, setQ] = React.useState("");
  const [filter, setFilter] = React.useState(s.filters[0]);
  // Build a small searchable index from real site content.
  const index = React.useMemo(() => {
    const out = [];
    t.nav.forEach((n) => out.push({ kind: s.filters[1], title: n.label, to: n.id, text: "" }));
    t.directions.items.forEach((d) => out.push({ kind: s.filters[2], title: d.title, to: "directions", text: d.text }));
    t.analytics.upcoming.forEach((u) => out.push({ kind: s.filters[3], title: u.title, to: "analytics", text: u.text }));
    t.news.items.forEach((n) => out.push({ kind: s.filters[4], title: n.title, to: "news", text: n.text }));
    return out;
  }, [t]);
  const ql = q.trim().toLowerCase();
  const results = ql ? index.filter((r) => (filter === s.filters[0] || r.kind === filter) && (r.title.toLowerCase().includes(ql) || r.text.toLowerCase().includes(ql))) : [];
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={s.intro.eyebrow} eyebrow={s.intro.eyebrow} title={s.intro.title} lead={s.intro.lead} />
      <section className="section">
        <div className="container">
          <form className="search-bar" onSubmit={(e) => e.preventDefault()} role="search">
            <input className="input" type="search" value={q} onChange={(e) => setQ(e.target.value)} placeholder={s.placeholder} aria-label={s.intro.title} />
            <button className="btn btn-primary" type="submit"><Icon name="search" size={16} /> {t.cta.search}</button>
          </form>
          <div className="search-filters" role="group" aria-label="Filters">
            {s.filters.map((fl) => <button key={fl} className={"filter-chip" + (fl === filter ? " on" : "")} aria-pressed={fl === filter} onClick={() => setFilter(fl)}>{fl}</button>)}
          </div>
          <div style={{ marginTop: 36 }}>
            {!ql ? (
              <EmptyState icon="search" text={s.hint} />
            ) : results.length ? (
              <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 760 }} aria-live="polite">
                {results.map((r, i) => (
                  <button className="card" key={i} onClick={() => go(r.to)} style={{ display: "flex", flexDirection: "column", gap: 6, alignItems: "flex-start", textAlign: "left", cursor: "pointer", border: "1px solid var(--color-border)", background: "#fff", fontFamily: "var(--font-sans)" }}>
                    <span className="badge badge-blue">{r.kind}</span>
                    <span style={{ fontSize: 17, fontWeight: 500, color: "var(--color-navy)" }}>{r.title}</span>
                    {r.text ? <span style={{ fontSize: 14, color: "var(--color-text-secondary)" }}>{r.text}</span> : null}
                  </button>
                ))}
              </div>
            ) : (
              <EmptyState icon="search-x" text={s.empty} />
            )}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Sitemap ---------------- */
function SitemapPage({ t, go }) {
  const s = t.sitemap;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={s.intro.eyebrow} eyebrow={s.intro.eyebrow} title={s.intro.title} lead={s.intro.lead} />
      <section className="section">
        <div className="container">
          <div className="sitemap-grid">
            {s.groups.map((g) => (
              <div className="sitemap-col" key={g.h}>
                <h3>{g.h}</h3>
                <ul>{g.links.map((l, i) => <li key={i}><button onClick={() => go(l[0])}>{l[1]}</button></li>)}</ul>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- 404 ---------------- */
function NotFoundPage({ t, go }) {
  const n = t.notFound;
  return (
    <main id="main">
      <section className="section" style={{ background: "var(--gradient-hero)", minHeight: "60vh", display: "flex", alignItems: "center" }}>
        <div className="container" style={{ textAlign: "center", maxWidth: 620, margin: "0 auto" }}>
          <div style={{ fontFamily: "var(--font-head)", fontWeight: 700, fontSize: "clamp(72px,16vw,140px)", lineHeight: 1, color: "var(--color-action-blue)", letterSpacing: "-0.04em" }}>{n.code}</div>
          <h1 style={{ marginTop: 8 }}>{n.title}</h1>
          <p className="lead" style={{ maxWidth: 480, margin: "0 auto 28px" }}>{n.text}</p>
          <div className="cta-row" style={{ justifyContent: "center" }}>
            <button className="btn btn-primary btn-lg" onClick={() => go("home")}>{t.cta.home}</button>
            <button className="btn btn-secondary btn-lg" onClick={() => go("search")}><Icon name="search" size={16} /> {t.cta.search}</button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Legal (Privacy / Terms / Cookie) ---------------- */
function LegalPage({ t, go, kind }) {
  const meta = t.legal[kind];
  const L = t.legal;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={meta.title} eyebrow={meta.eyebrow} title={meta.title} />
      <section className="section">
        <div className="container" style={{ maxWidth: 860 }}>
          <Notice icon="scale" tone="amber" text={L.reviewNotice} />
          <p style={{ margin: "14px 0 0", fontSize: 13, color: "var(--color-text-muted)", fontWeight: 500 }}>{L.effective}</p>
          {meta.intro ? <p className="lead" style={{ margin: "20px 0 0", fontSize: 17 }}>{meta.intro}</p> : null}

          <div className="legal-doc">
            {(meta.sections || []).map((s) => (
              <section className="legal-sec" key={s.h}>
                <h2>{s.h}</h2>
                {s.p ? <p>{s.p}</p> : null}
                {s.list ? <ul>{s.list.map((li) => <li key={li}>{li}</li>)}</ul> : null}
              </section>
            ))}
          </div>

          <p style={{ marginTop: 28, fontSize: 13.5, color: "var(--color-text-muted)" }}>{L.accessibility.updated}</p>
        </div>
      </section>
    </main>
  );
}

/* ---------------- Accessibility statement ---------------- */
function AccessibilityPage({ t, go }) {
  const a = t.legal.accessibility;
  return (
    <main id="main">
      <PageIntro t={t} go={go} crumb={a.title} eyebrow={a.eyebrow} title={a.title} lead={a.commit} />
      <section className="section">
        <div className="container" style={{ maxWidth: 820, display: "flex", flexDirection: "column", gap: 20 }}>
          <div className="card">
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 14 }}>
              {a.points.map((p) => (
                <li key={p} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 15.5, color: "var(--color-navy)" }}>
                  <Icon name="check-circle-2" size={18} color="var(--color-volunteer)" style={{ marginTop: 2, flex: "none" }} />{p}
                </li>
              ))}
            </ul>
          </div>
          <div className="grid-2" style={{ gap: 16 }}>
            <div className="card" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <span className="dir-ico" style={{ background: "var(--color-bg-soft-blue)", color: "var(--color-action-blue)", width: 44, height: 44 }}><Icon name="activity" size={20} /></span>
              <b style={{ color: "var(--color-navy)" }}>{a.statusH}</b>
              <span style={{ fontSize: 14.5, color: "var(--color-text-secondary)" }}>{a.status}</span>
            </div>
            <div className="card" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <span className="dir-ico" style={{ background: "var(--color-donate-soft)", color: "var(--color-donate)", width: 44, height: 44 }}><Icon name="mail" size={20} /></span>
              <b style={{ color: "var(--color-navy)" }}>{a.reportH}</b>
              <span style={{ fontSize: 14.5, color: "var(--color-text-secondary)" }}>{a.report}</span>
            </div>
          </div>
          <p style={{ fontSize: 13.5, color: "var(--color-text-muted)", margin: 0 }}>{a.updated}</p>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { FaqPage, SearchPage, SitemapPage, NotFoundPage, LegalPage, AccessibilityPage });