import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import Seo from '../components/Seo'
import Reveal from '../components/Reveal'
import SectionHeading from '../components/SectionHeading'
import { TreatmentCard, TestimonialCard, TeamCard, BlogCard, PackageCard, GalleryGrid } from '../components/cards'
import { CheckCircle, MapPin, Phone, Mail, WhatsApp, featureIcons } from '../components/icons'
import {
  useContent,
  getSettings,
  getHomepage,
  getTreatments,
  getPackages,
  getGallery,
  getTestimonials,
  getTeam,
  getBlog,
} from '../lib/api'

export default function Home() {
  const settings = useContent(getSettings)
  const home = useContent(getHomepage)
  const treatments = useContent(getTreatments)
  const packages = useContent(getPackages)
  const gallery = useContent(getGallery)
  const testimonials = useContent(getTestimonials)
  const team = useContent(getTeam)
  const blog = useContent(getBlog)

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

  const { hero, welcome, signature, why } = home
  const phoneHref = `tel:${settings.phone.replace(/[^+\d]/g, '')}`
  const waHref = settings.social.whatsapp ?? '#'

  return (
    <>
      <Seo title={settings.meta_title} description={settings.meta_description} image={hero.image} />

      {/* 1. Hero */}
      <header className="relative flex min-h-svh items-center justify-center overflow-hidden text-center">
        <motion.div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: `url(${hero.image})` }}
          initial={{ scale: 1.12 }}
          animate={{ scale: 1 }}
          transition={{ duration: 12, ease: 'easeOut' }}
          aria-hidden
        />
        <div className="absolute inset-0 bg-gradient-to-b from-ocean-900/45 via-ocean-900/35 to-cream/10" aria-hidden />
        <motion.div
          className="relative z-10 w-[min(860px,92%)] text-white"
          initial={{ opacity: 0, y: 34 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, delay: 0.25 }}
        >
          <p className="mb-5 text-[0.82rem] font-semibold tracking-[0.34em] uppercase text-turquoise-200">
            {hero.kicker}
          </p>
          <h1 className="mb-5 text-[clamp(2.5rem,6.4vw,4.6rem)] font-semibold [text-shadow:0_4px_30px_rgb(0_0_0/0.25)]">
            {hero.title} <em className="text-turquoise-200">{hero.title_em}</em>
          </h1>
          <p className="mx-auto mb-9 max-w-[620px] text-[clamp(1rem,2vw,1.2rem)] text-white/90">
            {hero.subtitle}
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link to={hero.cta_primary.href} className="btn-primary">
              {hero.cta_primary.label}
            </Link>
            <Link to={hero.cta_secondary.href} className="btn-ghost">
              {hero.cta_secondary.label}
            </Link>
          </div>
        </motion.div>
        <div className="absolute bottom-8 left-1/2 z-10 -translate-x-1/2 text-[0.72rem] tracking-[0.28em] uppercase text-white/85">
          Scroll
        </div>
        <svg
          className="absolute -bottom-px left-0 z-10 h-[70px] w-full"
          viewBox="0 0 1440 70"
          preserveAspectRatio="none"
          aria-hidden
        >
          <path
            d="M0,40 C240,80 480,0 720,25 C960,50 1200,70 1440,30 L1440,70 L0,70 Z"
            fill="#fbfaf7"
          />
        </svg>
      </header>

      {/* 2. Welcome */}
      <section className="py-20 lg:py-24">
        <div className="wrap grid items-center gap-14 lg:grid-cols-[1.05fr_1fr]">
          <Reveal className="relative">
            <img
              src={welcome.image_main}
              alt="Serene spa treatment room"
              className="aspect-[4/4.6] w-[88%] rounded-3xl object-cover shadow-soft"
            />
            <motion.img
              src={welcome.image_float}
              alt="Antiguan beach at golden hour"
              className="absolute right-0 -bottom-9 w-[52%] rounded-3xl border-8 border-cream object-cover shadow-soft"
              animate={{ y: [0, -12, 0] }}
              transition={{ duration: 6, repeat: Infinity, ease: 'easeInOut' }}
            />
            <motion.div
              className="glass-card absolute top-8 -left-3 px-5 py-4 text-center shadow-soft"
              animate={{ y: [0, -10, 0] }}
              transition={{ duration: 7, repeat: Infinity, ease: 'easeInOut', delay: 0.8 }}
            >
              <strong className="block font-display text-3xl text-turquoise-500">
                {welcome.years_badge}
              </strong>
              <span className="text-[0.72rem] font-semibold tracking-widest uppercase text-muted">
                Years of care
              </span>
            </motion.div>
          </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="/about" className="btn-primary">
              Discover Our Story
            </Link>
          </Reveal>
        </div>
      </section>

      {/* 3. Featured treatments */}
      <section className="bg-gradient-to-b from-cream via-mist to-cream py-20 lg:py-24">
        <div className="wrap">
          <SectionHeading
            eyebrow="Featured Treatments"
            title="Signature Therapies, Island Soul"
            lead="Every treatment is delivered by certified therapists using premium natural products — designed to melt tension the moment you lie down."
          />
          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {(treatments ?? [])
              .filter((t) => t.featured)
              .slice(0, 4)
              .map((t, i) => (
                <Reveal key={t.id} delay={i * 0.12}>
                  <TreatmentCard t={t} />
                </Reveal>
              ))}
          </div>
          <Reveal className="mt-10 text-center">
            <Link to="/treatments" className="btn-outline">
              View All Treatments
            </Link>
          </Reveal>
        </div>
      </section>

      {/* 4. Signature experience */}
      <section className="relative overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: `url(${signature.image})` }}
          aria-hidden
        />
        <div className="absolute inset-0 bg-gradient-to-r from-ocean-700/90 via-ocean-700/60 to-ocean-700/35" aria-hidden />
        <div className="wrap relative z-10 py-24 text-white lg:py-28">
          <Reveal>
            <span className="eyebrow eyebrow-line !text-turquoise-200 before:!bg-turquoise-200">
              {signature.eyebrow}
            </span>
            <h2 className="mb-4 max-w-[560px] text-[clamp(2rem,4.4vw,3rem)]">{signature.title}</h2>
            {signature.body.map((p) => (
              <p key={p.slice(0, 24)} className="mb-4 max-w-[540px] text-white/90">
                {p}
              </p>
            ))}
            <div className="my-9 flex flex-wrap gap-9">
              {signature.facts.map((f) => (
                <div key={f.label}>
                  <strong className="block font-display text-[1.7rem] text-turquoise-200">
                    {f.value}
                  </strong>
                  <span className="text-[0.78rem] font-semibold tracking-widest uppercase text-white/75">
                    {f.label}
                  </span>
                </div>
              ))}
            </div>
            <Link to="/contact" className="btn-primary">
              {signature.cta_label}
            </Link>
          </Reveal>
        </div>
      </section>

      {/* 5. Why choose us */}
      <section className="py-20 lg:py-24">
        <div className="wrap">
          <SectionHeading eyebrow={why.eyebrow} title={why.title} />
          <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {why.features.map((f, i) => {
              const Icon = featureIcons[f.icon]
              return (
                <Reveal key={f.title} delay={i * 0.12}>
                  <div className="glass-card h-full border-ocean-500/10 p-7 transition-all duration-300 hover:-translate-y-2 hover:shadow-soft">
                    <div className="mb-5 grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-turquoise-500 to-turquoise-400 text-white shadow-[0_10px_22px_-8px_rgb(8_145_178/0.5)]">
                      <Icon width={26} height={26} />
                    </div>
                    <h3 className="mb-2 text-[1.12rem] text-ocean-700">{f.title}</h3>
                    <p className="text-[0.88rem] text-muted">{f.body}</p>
                  </div>
                </Reveal>
              )
            })}
          </div>
          <Reveal className="mt-14">
            <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>

      {/* 6. Packages */}
      <section className="bg-gradient-to-b from-mist to-cream py-20 lg:py-24">
        <div className="wrap">
          <SectionHeading
            eyebrow="Wellness Packages"
            title="The 5-Night Wellness Escape"
            lead="More than a getaway — a full reset. Five nights of island living, nourishment, and daily restoration."
          />
          <div className="mt-12 grid gap-8">
            {(packages ?? []).map((p) => (
              <Reveal key={p.id}>
                <PackageCard p={p} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* 7. Gallery */}
      <section className="py-20 lg:py-24">
        <div className="wrap">
          <SectionHeading eyebrow="Gallery" title="Moments of Pure Calm" />
          <Reveal className="mt-12">
            <GalleryGrid images={(gallery ?? []).slice(0, 6)} />
          </Reveal>
          <Reveal className="mt-10 text-center">
            <Link to="/gallery" className="btn-outline">
              View Full Gallery
            </Link>
          </Reveal>
        </div>
      </section>

      {/* 8. Testimonials */}
      <section className="bg-gradient-to-b from-cream to-mist py-20 lg:py-24">
        <div className="wrap">
          <SectionHeading
            eyebrow="Guest Stories"
            title="Loved by 10,000+ Guests"
            lead="Rated 5.0 on TripAdvisor and Google."
          />
          <div className="mt-12 grid gap-6 lg:grid-cols-3">
            {(testimonials ?? []).slice(0, 3).map((t, i) => (
              <Reveal key={t.id} delay={i * 0.12}>
                <TestimonialCard t={t} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

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

      {/* 10. Blog preview */}
      <section className="bg-gradient-to-b from-mist to-cream py-20 lg:py-24">
        <div className="wrap">
          <SectionHeading eyebrow="From the Blog" title="Wellness Wisdom, Island Style" />
          <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {(blog ?? []).slice(0, 3).map((p, i) => (
              <Reveal key={p.id} delay={i * 0.12}>
                <BlogCard p={p} />
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* 11. Instagram */}
      <section className="py-20 lg:py-24">
        <div className="wrap">
          <SectionHeading eyebrow={settings.instagram_handle} title="Follow the Calm" />
          <Reveal className="mt-11">
            <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
              {(gallery ?? []).slice(0, 6).map((img) => (
                <a
                  key={img.id}
                  href={settings.social.instagram ?? '#'}
                  className="group relative aspect-square overflow-hidden rounded-xl"
                  aria-label="View on Instagram"
                >
                  <img
                    src={img.src}
                    alt={img.alt}
                    loading="lazy"
                    className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <span className="absolute inset-0 grid place-items-center bg-turquoise-500/55 text-2xl text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                    ♥
                  </span>
                </a>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* 12. Contact info */}
      <section className="bg-gradient-to-b from-mist to-cream pt-20 lg:pt-24">
        <div className="wrap grid items-start gap-14 pb-16 lg:grid-cols-2">
          <Reveal>
            <span className="eyebrow eyebrow-line">Get In Touch</span>
            <h2 className="sec-title">Begin Your Journey to Calm</h2>
            <p className="sec-lead">Call, WhatsApp, or email — we'll take care of the rest.</p>
            <div className="mt-9 grid gap-4">
              {[
                { Icon: MapPin, title: 'Visit Us', line: settings.address },
                { Icon: Phone, title: 'Call Us', line: settings.phone, href: phoneHref },
                { Icon: WhatsApp, title: 'WhatsApp', line: settings.whatsapp, href: waHref },
                { Icon: Mail, title: 'Email', line: settings.email, href: `mailto:${settings.email}` },
              ].map(({ Icon, title, line, href }) => (
                <div key={title} className="glass-card flex items-start gap-4 px-6 py-5 shadow-card">
                  <div className="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-turquoise-500 to-turquoise-400 text-white">
                    <Icon />
                  </div>
                  <div>
                    <strong className="block text-[0.92rem]">{title}</strong>
                    {href ? (
                      <a href={href} className="text-[0.9rem] text-muted transition-colors hover:text-turquoise-500">
                        {line}
                      </a>
                    ) : (
                      <span className="text-[0.9rem] text-muted">{line}</span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={0.12}>
            <div className="rounded-3xl bg-gradient-to-br from-ocean-700 to-turquoise-500 p-9 text-white shadow-soft">
              <h3 className="mb-5 text-[1.4rem]">Business Hours</h3>
              <table className="w-full text-[0.92rem]">
                <tbody>
                  {settings.hours.map((h) => (
                    <tr key={h.day} className="border-b border-white/[0.18] last:border-0">
                      <td className="py-2.5">{h.day}</td>
                      <td className={`py-2.5 text-right font-semibold ${h.closed ? 'text-[#ffc4bc]' : 'text-turquoise-200'}`}>
                        {h.time}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Reveal>
        </div>

        {/* 13. Map */}
        <Reveal>
          <iframe
            title={`${settings.company_name} location map`}
            src={`https://www.google.com/maps?q=${encodeURIComponent(settings.map_query)}&output=embed`}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            className="h-[420px] w-full rounded-t-3xl border-0 shadow-soft saturate-[0.9]"
          />
        </Reveal>
      </section>
      {/* 14. Footer is rendered globally in App */}
    </>
  )
}
