"use client";

import { motion } from "framer-motion";
import { ArrowUpRight, BookOpenText, Globe2, HandHelping, Landmark, Mic2, Soup, Users } from "lucide-react";
import PageHeader from "@/components/ui/PageHeader";
import { getStoredLanguage } from "@/lib/language";
import { getTranslation } from "@/src/hooks/useTranslation";

const reveal = {
  initial: { opacity: 0, y: 24 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.18 },
  transition: { duration: 0.55 },
};

function SectionTitle({ eyebrow, title, description, align = "left" }: { eyebrow?: string; title: string; description?: string; align?: "left" | "center" }) {
  return (
    <div className={align === "center" ? "mx-auto max-w-3xl text-center" : "max-w-3xl"}>
      {eyebrow ? <p className="mb-3 text-sm font-semibold uppercase tracking-[0.28em] text-[#FAA631]">{eyebrow}</p> : null}
      <h2 className="text-3xl font-bold leading-tight text-gray-900 sm:text-4xl">{title}</h2>
      {description ? <p className="mt-4 text-base leading-8 text-gray-600 sm:text-lg">{description}</p> : null}
    </div>
  );
}

function ImageFrame({ src, alt, className = "" }: { src: string; alt: string; className?: string }) {
  return (
    <div className={`overflow-hidden rounded-[2rem] border border-[#f2d7b8] bg-white p-3 shadow-[0_22px_60px_rgba(123,64,17,0.12)] ${className}`}>
      <img src={src} alt={alt} className="h-full w-full rounded-[1.4rem] object-cover" />
    </div>
  );
}

export default function SrilaPrabhupadaPage() {
  const lang = getStoredLanguage();
  const t = getTranslation(lang).srilaPrabhupadaPage;

  const stats = [
    { icon: Landmark, value: "108+", label: t.statsTemples },
    { icon: Users, value: "10,000+", label: t.statsDisciples },
    { icon: Globe2, value: "14+", label: t.statsVisits },
    { icon: BookOpenText, value: "70+", label: t.statsBooks },
    { icon: Mic2, value: "3500+", label: t.statsLectures },
    { icon: Soup, value: "1M+", label: t.statsMeals },
  ];

  const legacyCards = [
    { title: t.legacyCard1Title, text: t.legacyCard1Text },
    { title: t.legacyCard2Title, text: t.legacyCard2Text },
    { title: t.legacyCard3Title, text: t.legacyCard3Text },
  ];

  return (
    <main className="bg-gradient-to-b from-[#FFF8F0] via-white to-[#FFF4E4] pb-16">
      <PageHeader title={t.headerTitle} breadcrumb={t.headerBreadcrumb} description={t.headerDescription} />

      <div className="mx-auto mt-8 flex max-w-7xl flex-col gap-8 px-4 sm:px-6 lg:px-8">
        {/* HERO — light orange gradient */}
        <motion.section {...reveal} className="overflow-hidden rounded-[2.25rem] bg-gradient-to-br from-[#FAA631] via-[#f9b04a] to-[#FFD56A] text-white shadow-[0_30px_90px_rgba(250,166,49,0.25)]">
          <div className="grid items-center gap-8 px-6 py-8 sm:px-10 sm:py-12 lg:grid-cols-[1.08fr_0.92fr]">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.3em] text-white/80">{t.heroEyebrow}</p>
              <h1 className="mt-4 text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl">{t.heroTitle}</h1>
              <p className="mt-6 max-w-2xl text-base leading-8 text-white/90 sm:text-lg">{t.heroDescription}</p>
            </div>
            <ImageFrame src="https://guptvrindavandham.org/prabhupada/prabhupada.png" alt="Srila Prabhupada portrait" className="mx-auto max-w-xl bg-white/95" />
          </div>
        </motion.section>

        {/* ABOUT */}
        <motion.section {...reveal} className="rounded-[2rem] border border-[#FAA631]/15 bg-white px-6 py-8 shadow-sm sm:px-8 sm:py-10">
          <div className="grid gap-8 lg:grid-cols-[0.92fr_1.08fr] lg:items-center">
            <ImageFrame src="https://guptvrindavandham.org/prabhupada/prabhupada.png" alt="About Srila Prabhupada" className="max-w-md justify-self-center" />
            <div>
              <SectionTitle eyebrow={t.aboutEyebrow} title={t.aboutTitle} />
              <div className="mt-5 space-y-4 text-base leading-8 text-gray-600 sm:text-lg">
                <p>{t.aboutParagraph1}</p>
                <p>{t.aboutParagraph2}</p>
                <p>{t.aboutParagraph3}</p>
              </div>
            </div>
          </div>
        </motion.section>

        {/* STATS */}
        <motion.section {...reveal} className="rounded-[2rem] border border-[#FAA631]/15 bg-[#FFF8F0] px-6 py-8 shadow-sm sm:px-8 sm:py-10">
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
            {stats.map((item) => {
              const Icon = item.icon;
              return (
                <div key={item.label} className="rounded-[1.5rem] border border-[#FAA631]/20 bg-white px-5 py-6 text-center shadow-sm">
                  <div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-[#FFF4E4] text-[#FAA631]"><Icon className="h-7 w-7" /></div>
                  <p className="mt-4 text-3xl font-bold text-gray-900">{item.value}</p>
                  <p className="mt-2 text-sm font-semibold uppercase tracking-[0.14em] text-gray-500">{item.label}</p>
                </div>
              );
            })}
          </div>
        </motion.section>

        {/* TEACHINGS */}
        <motion.section {...reveal} className="rounded-[2rem] border border-[#FAA631]/15 bg-white px-6 py-8 shadow-sm sm:px-8 sm:py-10">
          <div className="grid gap-8 lg:grid-cols-[0.94fr_1.06fr] lg:items-center">
            <ImageFrame src="https://guptvrindavandham.org/prabhupada/image1.png" alt="Srila Prabhupada teachings" className="max-w-xl justify-self-center" />
            <div>
              <SectionTitle title={t.teachingsTitle} />
              <div className="mt-5 space-y-4 text-base leading-8 text-gray-600 sm:text-lg">
                <p>{t.teachingsParagraph1}</p>
                <p>{t.teachingsParagraph2}</p>
                <div className="rounded-[1.5rem] border-l-4 border-[#FAA631] bg-[#FFF4E4] px-5 py-4 text-gray-700">
                  <p className="text-lg font-semibold italic">{t.teachingsQuote}</p>
                  <p className="mt-2 text-sm font-medium uppercase tracking-[0.12em] text-[#FAA631]">{t.teachingsQuoteSource}</p>
                </div>
              </div>
            </div>
          </div>
        </motion.section>

        {/* MISSION */}
        <motion.section {...reveal} className="rounded-[2rem] border border-[#FAA631]/15 bg-[#FFF8F0] px-6 py-8 shadow-sm sm:px-8 sm:py-10">
          <div className="grid gap-8 lg:grid-cols-[1.06fr_0.94fr] lg:items-center">
            <div>
              <SectionTitle title={t.missionTitle} />
              <div className="mt-5 space-y-4 text-base leading-8 text-gray-600 sm:text-lg">
                <p>{t.missionParagraph1}</p>
                <p>{t.missionParagraph2}</p>
                <p>{t.missionParagraph3}</p>
              </div>
            </div>
            <ImageFrame src="https://guptvrindavandham.org/prabhupada/image2.png" alt="Srila Prabhupada global mission" className="max-w-xl justify-self-center" />
          </div>
        </motion.section>

        {/* LEGACY — light orange gradient instead of dark brown */}
        <motion.section {...reveal} className="relative overflow-hidden rounded-[2.2rem] bg-gradient-to-br from-[#FAA631] via-[#f9b04a] to-[#FFD56A] px-6 py-10 text-white shadow-[0_24px_80px_rgba(250,166,49,0.25)] sm:px-8">
          <div className="relative">
            <SectionTitle align="center" eyebrow={t.legacyEyebrow} title={t.legacyTitle} description={t.legacyDescription} />
            <div className="mt-10 grid gap-6 lg:grid-cols-3">
              {legacyCards.map((card, index) => (
                <div key={card.title} className={`rounded-[1.8rem] border border-white/30 bg-white/20 p-7 backdrop-blur-sm transition-transform duration-300 hover:-translate-y-1 ${index === 1 ? "lg:-translate-y-4" : index === 2 ? "lg:-translate-y-8" : ""}`}>
                  <div className="flex h-full flex-col">
                    <div className="flex items-center justify-between">
                      <h3 className="text-2xl font-bold text-white">{card.title}</h3>
                      <HandHelping className="h-6 w-6 text-white/80" />
                    </div>
                    <p className="mt-5 flex-1 text-base leading-8 text-white/90">{card.text}</p>
                    <div className="mt-6 inline-flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.18em] text-white/80">
                      {t.readMore}
                      <ArrowUpRight className="h-4 w-4" />
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </motion.section>
      </div>
    </main>
  );
}