import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import PageHero from '../components/PageHero'
import { useContent, getTeam, getSettings } from '../lib/api'
import { Instagram, Facebook } from '../components/icons'

export default function Team() {
  const team = useContent(getTeam)
  const settings = useContent(getSettings)

  return (
    <>
      <Seo
        title={`Our Team — ${settings?.company_name ?? 'Touch Therapies Antigua'}`}
        description="Meet the ITEC-certified therapists behind Antigua's most-loved wellness sanctuary."
      />
      <PageHero
        kicker="Meet Our Team"
        title="The Healing Hands of Antigua"
        lead="Every therapist is ITEC certified with years of five-star spa experience."
      />
      <section className="py-20">
        <div className="wrap grid gap-10">
          {(team ?? []).map((m, i) => (
            <Reveal key={m.id}>
              <div
                className={`grid items-center gap-10 rounded-[28px] bg-white p-6 shadow-card md:grid-cols-[300px_1fr] md:p-10 ${
                  i % 2 ? 'md:grid-cols-[1fr_300px]' : ''
                }`}
              >
                <img
                  src={m.photo}
                  alt={m.name}
                  loading="lazy"
                  className={`aspect-[4/4.5] w-full rounded-3xl object-cover shadow-soft ${i % 2 ? 'md:order-2' : ''}`}
                />
                <div>
                  <h2 className="text-[1.6rem] text-ocean-700">{m.name}</h2>
                  <p className="mt-1 mb-4 text-[0.85rem] font-semibold tracking-widest uppercase text-turquoise-500">
                    {m.position}
                  </p>
                  <p className="mb-5 text-muted">{m.bio}</p>
                  <div className="flex gap-3">
                    {m.socials.instagram && (
                      <a
                        href={m.socials.instagram}
                        aria-label={`${m.name} on Instagram`}
                        className="grid h-10 w-10 place-items-center rounded-full bg-mist text-ocean-700 transition-all hover:-translate-y-0.5 hover:bg-turquoise-500 hover:text-white"
                      >
                        <Instagram />
                      </a>
                    )}
                    {m.socials.facebook && (
                      <a
                        href={m.socials.facebook}
                        aria-label={`${m.name} on Facebook`}
                        className="grid h-10 w-10 place-items-center rounded-full bg-mist text-ocean-700 transition-all hover:-translate-y-0.5 hover:bg-turquoise-500 hover:text-white"
                      >
                        <Facebook />
                      </a>
                    )}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </>
  )
}
