import { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import PageHero from '../components/PageHero'
import { useContent, getFaqs, getSettings } from '../lib/api'

export default function Faqs() {
  const faqs = useContent(getFaqs)
  const settings = useContent(getSettings)
  const [open, setOpen] = useState<number | null>(0)

  return (
    <>
      <Seo
        title={`FAQs — ${settings?.company_name ?? 'Touch Therapies Antigua'}`}
        description="Booking, cancellations, mobile spa services and everything else you need to know before your visit."
      />
      <PageHero
        kicker="FAQs"
        title="Good to Know Before You Glow"
        lead="Everything about booking, visiting, and making the most of your treatment."
      />
      <section className="py-20">
        <div className="wrap max-w-3xl">
          <div className="grid gap-4">
            {(faqs ?? []).map((f, i) => {
              const isOpen = open === i
              return (
                <Reveal key={f.id} delay={i * 0.06}>
                  <div className="overflow-hidden rounded-2xl bg-white shadow-card">
                    <button
                      type="button"
                      onClick={() => setOpen(isOpen ? null : i)}
                      aria-expanded={isOpen}
                      className="flex w-full cursor-pointer items-center justify-between gap-4 px-7 py-5 text-left"
                    >
                      <span className="font-display text-[1.08rem] font-semibold text-ocean-700">
                        {f.question}
                      </span>
                      <span
                        className={`grid h-8 w-8 shrink-0 place-items-center rounded-full bg-mist text-turquoise-500 transition-transform duration-300 ${
                          isOpen ? 'rotate-45' : ''
                        }`}
                        aria-hidden
                      >
                        +
                      </span>
                    </button>
                    <AnimatePresence initial={false}>
                      {isOpen && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: 'auto', opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          transition={{ duration: 0.3 }}
                        >
                          <p className="px-7 pb-6 text-muted">{f.answer}</p>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                </Reveal>
              )
            })}
          </div>
          <Reveal className="mt-12 text-center">
            <p className="text-muted">
              Still have a question?{' '}
              <a
                href={settings?.social.whatsapp ?? '#'}
                className="font-semibold text-turquoise-500 hover:underline"
              >
                WhatsApp us
              </a>{' '}
              — we reply fast.
            </p>
          </Reveal>
        </div>
      </section>
    </>
  )
}
