Faq Search

"use client";

import { useId, useMemo, useState } from "react";
import { Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqSearchProps {
  title?: string;
  items?: { q: string; a: string; topic: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  {
    q: "What are scopes 1, 2 and 3?",
    a: "Scope 1 is what you burn directly, scope 2 the energy you buy, scope 3 everything in your value chain — usually 80%+ of the total.",
    topic: "Basics",
  },
  { q: "How often is my footprint updated?", a: "Every night from connected tools; monthly for uploaded bills.", topic: "Product" },
  { q: "Can I export my data?", a: "Always — CSV, XLSX or via API, at any time.", topic: "Product" },
  { q: "Is Grove audited?", a: "Our methodology is reviewed annually by an independent third party (Carbone 4).", topic: "Trust" },
  { q: "How do you price?", a: "Per employee per month, free under 20 people.", topic: "Billing" },
  { q: "Can we pay yearly?", a: "Yes, with a 15% discount.", topic: "Billing" },
];

/** Searchable FAQ: rounded search field plus topic pills filter a list of questions (native details), with a friendly empty state and live result count. */
export function FaqSearch({ title = "How can we help?", items = DEFAULT_ITEMS, className }: FaqSearchProps) {
  const id = useId();
  const [q, setQ] = useState("");
  const [topic, setTopic] = useState("All");
  const topics = ["All", ...new Set(items.map((i) => i.topic))];
  const list = useMemo(
    () => items.filter((i) => (topic === "All" || i.topic === topic) && (i.q + i.a).toLowerCase().includes(q.trim().toLowerCase())),
    [items, q, topic],
  );
  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section bg-da-surface-2 text-da-fg", className)}>
      <div className="da-container max-w-3xl">
        <h2 id={`${id}-t`} className="text-center font-da-display text-[clamp(2.25rem,5vw,3.5rem)] tracking-da-display">
          {title}
        </h2>
        <label className="mx-auto mt-10 flex h-14 items-center gap-3 rounded-da-pill bg-da-surface px-6 shadow-da-md focus-within:ring-3 focus-within:ring-da-ring">
          <Search aria-hidden className="size-5 text-da-muted-fg" />
          <span className="sr-only">Search questions</span>
          <input
            type="search"
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search e.g. “scope 3”"
            className="min-w-0 flex-1 bg-transparent text-lg outline-none placeholder:text-da-muted-fg"
          />
        </label>
        <div role="group" aria-label="Topics" className="mt-5 flex flex-wrap justify-center gap-2">
          {topics.map((t) => (
            <button
              key={t}
              type="button"
              aria-pressed={t === topic}
              onClick={() => setTopic(t)}
              className={cn(
                "da-focus da-transition rounded-da-pill px-4 py-1.5 text-sm",
                t === topic ? "bg-da-primary text-da-primary-fg" : "bg-da-surface hover:bg-da-muted",
              )}
            >
              {t}
            </button>
          ))}
        </div>
        <p role="status" className="mt-8 text-sm text-da-muted-fg">
          {list.length} {list.length === 1 ? "answer" : "answers"}
        </p>
        {list.length ? (
          <div className="mt-3 grid gap-2">
            {list.map((it) => (
              <details key={it.q} className="group rounded-da-md bg-da-surface text-da-surface-fg">
                <summary className="da-focus flex cursor-pointer list-none items-center justify-between gap-4 rounded-da-md px-6 py-4 font-medium [&::-webkit-details-marker]:hidden">
                  {it.q}
                  <span className="shrink-0 rounded-da-pill bg-da-surface-2 px-2.5 py-0.5 text-xs text-da-muted-fg">{it.topic}</span>
                </summary>
                <p className="px-6 pb-5 text-da-muted-fg">{it.a}</p>
              </details>
            ))}
          </div>
        ) : (
          <p className="mt-3 rounded-da-lg bg-da-surface p-8 text-center text-da-muted-fg">
            Nothing yet for “{q}”.{" "}
            <a href="mailto:hello@grove.eco" className="da-focus rounded-da-sm font-medium text-da-primary underline underline-offset-4">
              Ask a human
            </a>
          </p>
        )}
      </div>
    </section>
  );
}

export default FaqSearch;