import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import PageHero from '../components/PageHero'
import { PackageCard } from '../components/cards'
import { useContent, getPackages, getSettings } from '../lib/api'

export default function Packages() {
  const packages = useContent(getPackages)
  const settings = useContent(getSettings)

  return (
    <>
      <Seo
        title={`Wellness Packages — ${settings?.company_name ?? 'Touch Therapies Antigua'}`}
        description="Multi-night Caribbean wellness escapes in Antigua: accommodation, airport transfers, daily breakfast, massage and facial treatments — fully arranged."
      />
      <PageHero
        kicker="Wellness Packages"
        title="More Than a Getaway — a Full Reset"
        lead="Multi-night escapes with everything arranged from the moment you land."
        image={packages?.[0]?.image}
      />
      <section className="py-20">
        <div className="wrap grid gap-10">
          {(packages ?? []).map((p) => (
            <Reveal key={p.id}>
              <PackageCard p={p} />
            </Reveal>
          ))}
          <Reveal className="text-center text-muted">
            <p>
              Planning a group retreat, wedding party, or corporate wellness day?{' '}
              <a href="/contact" className="font-semibold text-turquoise-500 hover:underline">
                Contact us
              </a>{' '}
              for custom packages.
            </p>
          </Reveal>
        </div>
      </section>
    </>
  )
}
