/* global React */
/* EgoYüzme · Page · FAQ (S.S.S) */

const FaqPage = () => {
  const [query, setQuery] = React.useState("");
  const filtered = FAQ_DATA.filter(f =>
    f.q.toLowerCase().includes(query.toLowerCase()) ||
    f.a.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <main className="page-enter">
      <PageHero
        crumbs={[{ label: "Ana Sayfa", href: "#/" }, { label: "S.S.S" }]}
        eyebrow="S.S.S"
        title="Sıkça sorulan sorular."
        lead="Detaylı bilgi için iletişim sayfasından bize ulaşabilirsiniz."
        image={window.__resources.photoTech}
      />

      <section className="section">
        <div className="container narrow">
          <div className="card mt-2" style={{ padding: 8, display: "flex", gap: 8, alignItems: "center" }}>
            <span style={{ paddingLeft: 12, color: "var(--fg-subtle)" }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
              </svg>
            </span>
            <input
              className="input"
              style={{ border: "none", boxShadow: "none", flex: 1 }}
              value={query}
              onChange={e => setQuery(e.target.value)}
              placeholder="Sorularda ara… (ör: yaş, fiyat, ders saati)"
              aria-label="Soru ara"
            />
            {query ? (
              <button
                type="button"
                onClick={() => setQuery("")}
                style={{ background: "transparent", border: "none", padding: 8, color: "var(--fg-subtle)" }}
                aria-label="Temizle"
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              </button>
            ) : null}
          </div>

          <div className="mt-6">
            {filtered.length === 0 ? (
              <div className="card text-center" style={{ padding: 40 }}>
                <p style={{ color: "var(--fg-muted)" }}>
                  "{query}" için bir sonuç bulamadık. <a href="#/iletisim">İletişim sayfasından</a> bize ulaşın.
                </p>
              </div>
            ) : (
              <FAQ items={filtered} initialOpen={-1} />
            )}
          </div>
        </div>
      </section>

      <CtaBand
        title="Detaylı bilgi için bize ulaşın."
        lead="Kayıt işlemleri web sitesinden veya telefonla yapılabilmektedir."
        primaryLabel="İletişime geçin"
      />
    </main>
  );
};

Object.assign(window, { FaqPage });