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

export default function Blog() {
  const posts = useContent(getBlog)
  const settings = useContent(getSettings)

  return (
    <>
      <Seo
        title={`Blog — ${settings?.company_name ?? 'Touch Therapies Antigua'}`}
        description="Wellness wisdom, island style — massage benefits, retreat planning, and life in Antigua."
      />
      <PageHero
        kicker="From the Blog"
        title="Wellness Wisdom, Island Style"
        image={posts?.[0]?.image}
      />
      <section className="py-20">
        <div className="wrap grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {(posts ?? []).map((p, i) => (
            <Reveal key={p.id} delay={(i % 3) * 0.1}>
              <BlogCard p={p} />
            </Reveal>
          ))}
        </div>
      </section>
    </>
  )
}
