import { Link } from 'react-router-dom'
import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import PageHero from '../components/PageHero'
import SectionHeading from '../components/SectionHeading'
import { TeamCard } from '../components/cards'
import { CheckCircle } from '../components/icons'
import { useContent, getHomepage, getTeam, getSettings } from '../lib/api'

export default function About() {
  const home = useContent(getHomepage)
  const team = useContent(getTeam)
  const settings = useContent(getSettings)
  if (!home || !settings) return <div className="min-h-screen" />
  const { welcome, why } = home

  return (
    <>
      <Seo
        title={`About Us — ${settings.company_name}`}
        description="Fifteen years of ITEC-certified Caribbean wellness in St. John's, Antigua. Meet the sanctuary behind the island's most-loved massage therapies."
      />
      <PageHero
        kicker="Our Story"
        title="Where Island Calm Meets Professional Care"
        lead="Fifteen years of certified therapeutic mastery in the heart of Antigua."
        image={welcome.image_main}
      />

      <section className="py-20 lg:py-24">
        <div className="wrap grid items-center gap-14 lg:grid-cols-2">
          <Reveal>
            <img
              src={welcome.image_main}
              alt="Touch Therapies treatment room"
              className="aspect-[4/4.2] w-full rounded-3xl object-cover shadow-soft"
            />
          </Reveal>
          <Reveal delay={0.12}>
            <span className="eyebrow eyebrow-line">{welcome.eyebrow}</span>
            <h2 className="sec-title">{welcome.title}</h2>
            {welcome.body.map((p) => (
              <p key={p.slice(0, 24)} className="mb-4 text-muted">
                {p}
              </p>
            ))}
            <ul className="my-6 grid gap-3.5">
              {welcome.points.map((point) => (
                <li key={point} className="flex items-start gap-3 font-medium">
                  <CheckCircle className="mt-1 shrink-0 text-turquoise-500" />
                  {point}
                </li>
              ))}
            </ul>
            <Link to="/treatments" className="btn-primary">
              Explore Our Treatments
            </Link>
          </Reveal>
        </div>
      </section>

      <section className="bg-gradient-to-b from-mist to-cream py-20">
        <div className="wrap">
          <SectionHeading eyebrow={why.eyebrow} title={why.title} />
          <Reveal className="mt-12">
            <div className="grid grid-cols-2 gap-8 rounded-[28px] bg-gradient-to-r from-ocean-700 to-turquoise-500 px-8 py-11 text-center text-white shadow-soft lg:grid-cols-4">
              {why.stats.map((s) => (
                <div key={s.label}>
                  <strong className="block font-display text-[clamp(1.8rem,3.4vw,2.6rem)] text-turquoise-200">
                    {s.value}
                  </strong>
                  <span className="text-[0.78rem] font-semibold tracking-widest uppercase text-white/85">
                    {s.label}
                  </span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="py-20">
        <div className="wrap">
          <SectionHeading eyebrow="The Team" title="The Healing Hands of Antigua" />
          <div className="mt-12 grid gap-7 sm:grid-cols-2 lg:grid-cols-3">
            {(team ?? []).map((m, i) => (
              <Reveal key={m.id} delay={i * 0.1}>
                <TeamCard m={m} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  )
}
