import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";
import { ChevronDown } from "lucide-react";
import { SITE_URL, faqs } from "@/lib/site";
import { CtaBand, PageHero } from "@/components/ui-bits";

export const Route = createFileRoute("/faqs")({
  head: () => ({
    meta: [
      { title: "FAQs | Fantasol Engineering" },
      { name: "description", content: "Common questions about electrical, solar, ICT and ELV projects with Fantasol Engineering in Kenya." },
      { property: "og:title", content: "FAQs | Fantasol Engineering" },
      { property: "og:description", content: "Straight answers for clients planning electrical, solar, ICT or ELV work." },
      { property: "og:url", content: `${SITE_URL}/faqs` },
    ],
    links: [{ rel: "canonical", href: `${SITE_URL}/faqs` }],
  }),
  component: Faqs,
});

function Faqs() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <div>
      <PageHero eyebrow="FAQs" title="Common questions before starting a project" desc="Straight answers for clients planning electrical, solar, ICT or ELV work with Fantasol Engineering." />

      <section className="mx-auto max-w-3xl px-4 py-24">
        <div className="space-y-3">
          {faqs.map(([q, a], i) => (
            <div key={q} className="rounded-xl border border-border bg-background">
              <button onClick={() => setOpen(open === i ? null : i)} className="flex w-full items-center justify-between gap-4 p-5 text-left font-bold text-primary">
                {q}
                <ChevronDown className={`h-5 w-5 shrink-0 text-accent transition ${open === i ? "rotate-180" : ""}`} />
              </button>
              {open === i && <p className="px-5 pb-5 text-sm leading-relaxed text-muted-foreground">{a}</p>}
            </div>
          ))}
        </div>
      </section>

      <CtaBand />
    </div>
  );
}