import type { Metadata } from 'next'
import Link from 'next/link'
import { Phone } from 'lucide-react'
import { PageHero } from '@/components/page-hero'
import { CtaBand } from '@/components/cta-band'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Button } from '@/components/ui/button'
import { faqs, site } from '@/lib/site'

export const metadata: Metadata = {
  title: 'FAQ',
  description:
    'Answers to frequently asked questions about our in-home care services, caregivers, scheduling, pricing, and getting started with 24-7 Care Givers.',
}

export default function FaqPage() {
  return (
    <>
      <PageHero
        breadcrumb="FAQ"
        title="Frequently Asked Questions"
        subtitle="Everything you need to know about our caregivers and how our in-home care works. Can’t find your answer? Just give us a call."
      />

      <section className="bg-background">
        <div className="mx-auto grid max-w-7xl gap-10 px-4 py-16 md:py-20 lg:grid-cols-[1fr_320px]">
          <div>
            <Accordion type="single" collapsible className="w-full">
              {faqs.map((faq, i) => (
                <AccordionItem key={i} value={`item-${i}`}>
                  <AccordionTrigger className="text-left text-base font-semibold">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="text-base leading-relaxed text-muted-foreground">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>

          <aside className="h-fit rounded-2xl border border-border bg-secondary p-8">
            <h2 className="text-xl font-bold text-balance">Still have questions?</h2>
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
              Our friendly care coordinators are happy to help you understand your options and find the right care for
              your family.
            </p>
            <div className="mt-6 flex flex-col gap-3">
              <Button asChild size="lg">
                <a href={site.phoneHref} className="flex items-center gap-2">
                  <Phone className="size-4" aria-hidden />
                  Call {site.phoneDisplay}
                </a>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link href="/contact">Send a Message</Link>
              </Button>
            </div>
          </aside>
        </div>
      </section>

      <CtaBand />
    </>
  )
}