import { useEffect, useState } from 'react'
import Seo from '../components/Seo'
import PageHero from '../components/PageHero'
import Reveal from '../components/Reveal'
import { getLegalPage, useContent, getSettings } from '../lib/api'
import type { LegalPage } from '../lib/types'

export default function Legal({ slug }: { slug: 'privacy' | 'terms' }) {
  const settings = useContent(getSettings)
  const [page, setPage] = useState<LegalPage | null>(null)

  useEffect(() => {
    let alive = true
    getLegalPage(slug).then((p) => {
      if (alive) setPage(p)
    })
    return () => {
      alive = false
    }
  }, [slug])

  if (!page) return <div className="min-h-screen" />

  return (
    <>
      <Seo title={`${page.title} — ${settings?.company_name ?? 'Touch Therapies Antigua'}`} />
      <PageHero kicker="Legal" title={page.title} />
      <section className="py-16">
        <div className="wrap max-w-3xl">
          <Reveal>
            <div
              className="[&_h2]:sec-title [&_h2]:!text-[1.4rem] [&_h2]:mt-8 [&_p]:mb-4 [&_p]:text-muted"
              dangerouslySetInnerHTML={{ __html: page.body }}
            />
          </Reveal>
        </div>
      </section>
    </>
  )
}
