import type { Metadata } from "next";
import { PageHero } from "@/components/site/page-hero";
import { Reveal } from "@/components/site/motion";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import { getFaqs, getSettings } from "@/lib/queries";
import { Phone, MessageCircle } from "lucide-react";

export const metadata: Metadata = {
  title: "FAQ",
  description: "Answers to common questions about AHE Services — areas served, brands serviced, AMC contracts, emergency support and more.",
  alternates: { canonical: "/faq" },
};

export const revalidate = 60;

export default async function FaqPage() {
  const [faqs, settings] = await Promise.all([getFaqs(), getSettings()]);
  const categories = [...new Set(faqs.map((f) => f.category).filter(Boolean))] as string[];

  return (
    <>
      <PageHero
        eyebrow="Help Center"
        title={<>Frequently Asked <span className="bg-gradient-to-r from-[var(--brand-cyan)] to-[var(--brand-royal-light)] bg-clip-text text-transparent">Questions</span></>}
        subtitle="Quick answers to the questions our clients ask most. Can't find what you're looking for? Our team is one call away."
        breadcrumbs={[{ label: "FAQ" }]}
      />

      <section className="py-16 lg:py-24">
        <div className="container-mx max-w-4xl">
          {categories.length > 0 && (
            <Reveal>
              <div className="flex flex-wrap gap-2 mb-8">
                {categories.map((c) => (
                  <span key={c} className="px-4 py-2 rounded-full bg-muted text-muted-foreground text-sm font-medium">{c}</span>
                ))}
              </div>
            </Reveal>
          )}
          <Reveal>
            <Card className="rounded-2xl p-2 sm:p-4">
              <Accordion type="single" collapsible className="w-full">
                {faqs.map((f, i) => (
                  <AccordionItem key={f.id} value={`item-${i}`} className="px-3 sm:px-4">
                    <AccordionTrigger className="text-left text-base font-semibold hover:no-underline">
                      {f.question}
                    </AccordionTrigger>
                    <AccordionContent className="text-muted-foreground leading-relaxed">
                      {f.answer}
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </Card>
          </Reveal>

          {faqs.length === 0 && (
            <div className="text-center py-20">
              <p className="text-muted-foreground">No FAQs published yet.</p>
            </div>
          )}

          <Reveal>
            <Card className="mt-10 p-8 rounded-3xl brand-gradient text-white text-center">
              <h2 className="text-2xl font-extrabold">Still Have Questions?</h2>
              <p className="mt-2 text-white/85">Our team is ready to help — reach out anytime.</p>
              <div className="mt-6 flex flex-wrap justify-center gap-3">
                <Button asChild className="bg-white text-[var(--brand-royal)] hover:bg-white/90">
                  <a href={`tel:${settings?.phone ?? "0301-2435144"}`}><Phone className="size-4 mr-2" /> Call Us</a>
                </Button>
                <Button asChild variant="outline" className="border-white/40 text-white hover:bg-white/10 bg-transparent">
                  <Link href="/contact"><MessageCircle className="size-4 mr-2" /> Send a Message</Link>
                </Button>
              </div>
            </Card>
          </Reveal>
        </div>
      </section>
    </>
  );
}