import { useMemo, useState } from 'react'
import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import PageHero from '../components/PageHero'
import { TreatmentCard } from '../components/cards'
import { useContent, getTreatments, getSettings } from '../lib/api'

export default function Treatments() {
  const treatments = useContent(getTreatments)
  const settings = useContent(getSettings)
  const [category, setCategory] = useState('All')

  const categories = useMemo(
    () => ['All', ...new Set((treatments ?? []).map((t) => t.category))],
    [treatments],
  )
  const visible = (treatments ?? []).filter((t) => category === 'All' || t.category === category)

  return (
    <>
      <Seo
        title={`Treatments — ${settings?.company_name ?? 'Touch Therapies Antigua'}`}
        description="Signature Caribbean massage and spa treatments: Wadadli Massage, Hot Stone, Couples Massage, Mud Wrap and more — delivered by ITEC-certified therapists."
      />
      <PageHero
        kicker="The Treatment Menu"
        title="Signature Therapies, Island Soul"
        lead="Every treatment is delivered by certified therapists using premium natural products."
        image={treatments?.[0]?.image}
      />

      <section className="py-20">
        <div className="wrap">
          <Reveal className="mb-10 flex flex-wrap justify-center gap-3">
            {categories.map((c) => (
              <button
                key={c}
                type="button"
                onClick={() => setCategory(c)}
                className={`cursor-pointer rounded-full px-6 py-2.5 text-[0.88rem] font-semibold transition-all ${
                  category === c
                    ? 'bg-turquoise-500 text-white shadow-[0_10px_22px_-8px_rgb(8_145_178/0.55)]'
                    : 'bg-mist text-ink hover:bg-turquoise-100'
                }`}
              >
                {c}
              </button>
            ))}
          </Reveal>
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {visible.map((t, i) => (
              <Reveal key={t.id} delay={(i % 4) * 0.1}>
                <TreatmentCard t={t} />
              </Reveal>
            ))}
          </div>
          <Reveal className="mt-14 rounded-3xl bg-gradient-to-r from-ocean-700 to-turquoise-500 p-10 text-center text-white shadow-soft">
            <h2 className="mb-3 text-[1.7rem]">Not sure which treatment is right for you?</h2>
            <p className="mx-auto mb-6 max-w-lg text-white/85">
              WhatsApp us and our therapists will recommend the perfect session for how you're
              feeling.
            </p>
            <a
              href={settings?.social.whatsapp ?? '#'}
              className="btn bg-white text-ocean-700 hover:-translate-y-0.5"
            >
              Ask on WhatsApp
            </a>
          </Reveal>
        </div>
      </section>
    </>
  )
}
