"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import {
  ChevronDown,
  Church,
  HeartHandshake,
  CalendarDays,
  Play,
  Newspaper,
  Users,
  MapPin,
  ArrowRight,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Dictionary } from "@/i18n";

const ease = [0.22, 1, 0.36, 1] as const;

const container = {
  hidden: {},
  show: { transition: { staggerChildren: 0.12, delayChildren: 0.1 } },
};
const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0, transition: { duration: 0.7, ease } },
};

export function Hero({
  locale,
  dict,
  latestSermonSlug,
}: {
  locale: string;
  dict: Dictionary;
  latestSermonSlug?: string;
}) {
  const base = `/${locale}`;
  const watchHref = latestSermonSlug
    ? `${base}/sermons/${latestSermonSlug}/`
    : `${base}/sermons/`;
  const tagline: string[] = Array.isArray(dict.hero.tagline) ? dict.hero.tagline : [];

  const quickLinks = [
    { key: "about", href: `${base}/about/`, Icon: Church },
    { key: "ministries", href: `${base}/ministries/`, Icon: HeartHandshake },
    { key: "events", href: `${base}/events/`, Icon: CalendarDays },
    { key: "sermons", href: watchHref, Icon: Play },
    { key: "blog", href: `${base}/blog/`, Icon: Newspaper },
    { key: "leadership", href: `${base}/leadership/`, Icon: Users },
    { key: "contact", href: `${base}/contact/`, Icon: MapPin },
  ] as const;

  return (
    <section className="relative -mt-20 flex min-h-screen flex-col overflow-hidden text-white">
      {/* Background: looping animated-logo video under a maroon gradient. */}
      <div aria-hidden className="absolute inset-0 -z-10 bg-brand-deep">
        <video
          className="absolute inset-0 h-full w-full origin-center animate-kenburns object-cover"
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
        >
          <source src="/fgm-animated-logo.mp4" type="video/mp4" />
        </video>
        <div className="absolute inset-0 bg-gradient-to-br from-brand-deep/92 via-brand-deep/78 to-brand/72" />
        <div className="radiance animate-gradient absolute inset-0 opacity-40" />
        <div className="absolute inset-0 bg-grid opacity-[0.25] mix-blend-overlay" />
      </div>

      {/* Hero content */}
      <motion.div
        variants={container}
        initial="hidden"
        animate="show"
        className="mx-auto flex w-full max-w-4xl flex-1 flex-col items-center justify-center px-5 pt-32 pb-10 text-center sm:px-8"
      >
        <motion.p
          variants={item}
          className="text-xs font-semibold uppercase tracking-[0.22em] text-white/80 sm:text-sm"
        >
          {dict.hero.kicker} {dict.brand.name}
        </motion.p>

        <motion.h1
          variants={item}
          className="mt-5 text-balance text-5xl font-bold leading-[1.04] tracking-tight sm:text-7xl"
        >
          {dict.hero.title}
        </motion.h1>

        {tagline.length > 0 && (
          <motion.p
            variants={item}
            className="mt-6 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm font-semibold uppercase tracking-[0.16em] text-white/90"
          >
            {tagline.map((phrase, i) => (
              <span key={phrase} className="flex items-center gap-x-4">
                {i > 0 && <span aria-hidden className="h-3.5 w-px bg-white/40" />}
                {phrase}
              </span>
            ))}
          </motion.p>
        )}

        <motion.p
          variants={item}
          className="mt-6 max-w-2xl text-pretty text-base leading-relaxed text-white/85 sm:text-lg"
        >
          {dict.hero.lead}
        </motion.p>

        <motion.div
          variants={item}
          className="mt-9 flex flex-col items-center gap-3 sm:flex-row sm:justify-center"
        >
          <Button asChild variant="light" size="lg">
            <Link href={`${base}/contact/`}>{dict.hero.primary}</Link>
          </Button>
          <Button asChild variant="outlineLight" size="lg">
            <Link href={watchHref}>
              <Play className="size-4 fill-current" />
              {dict.hero.secondary}
            </Link>
          </Button>
        </motion.div>
      </motion.div>

      {/* Quick links to every part of the church — the hero "carries" them all. */}
      <motion.div
        initial={{ opacity: 0, y: 24 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.7, delay: 0.9, ease }}
        className="relative z-10 mx-auto w-full max-w-6xl px-5 pb-16 sm:px-8"
      >
        <p className="mb-4 text-center text-[11px] font-semibold uppercase tracking-[0.22em] text-white/55">
          {dict.hero.explore}
        </p>
        <div className="flex flex-wrap justify-center gap-3">
          {quickLinks.map(({ key, href, Icon }) => {
            const q = dict.quick[key as keyof typeof dict.quick];
            return (
              <Link
                key={key}
                href={href}
                className="group flex w-[calc(50%-0.375rem)] items-start gap-3 rounded-xl border border-white/15 bg-white/8 p-4 text-left backdrop-blur-md transition hover:border-white/40 hover:bg-white/15 sm:w-56"
              >
                <span className="grid size-9 shrink-0 place-items-center rounded-lg bg-white/15 text-white transition group-hover:bg-white group-hover:text-brand">
                  <Icon className="size-[18px]" />
                </span>
                <span className="min-w-0">
                  <span className="flex items-center gap-1 text-sm font-semibold text-white">
                    {q.label}
                    <ArrowRight className="size-3.5 -translate-x-1 opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100" />
                  </span>
                  <span className="mt-0.5 block text-xs leading-snug text-white/65">
                    {q.desc}
                  </span>
                </span>
              </Link>
            );
          })}
        </div>
      </motion.div>

      <motion.div
        aria-hidden
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1.4, duration: 0.8 }}
        className="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center"
      >
        <ChevronDown className="size-5 animate-bob text-white/70" />
      </motion.div>
    </section>
  );
}