"use client";

import { motion } from "framer-motion";
import { Award, BookOpen, Globe2, Landmark, Mic2, Newspaper, Users } from "lucide-react";
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 Frame({ children }: { children: React.ReactNode }) {
  return <section className="relative overflow-hidden rounded-[2rem] border border-[#FAA631]/15 bg-white px-5 py-8 shadow-sm sm:px-8 sm:py-10"><div className="relative">{children}</div></section>;
}

function Title({ title, subtitle }: { title: string; subtitle?: string }) {
  return <div className="mx-auto mb-8 max-w-4xl text-center">{subtitle ? <p className="mb-3 text-sm font-semibold uppercase tracking-[0.28em] text-[#FAA631]">{subtitle}</p> : null}<h2 className="text-4xl font-bold leading-tight text-gray-900 sm:text-5xl">{title}</h2></div>;
}

function ImageCard({ src, alt, className = "", object = "object-center" }: { src: string; alt: string; className?: string; object?: string }) {
  return <div className={`overflow-hidden rounded-[1.5rem] border border-[#f0d2b3] bg-white p-3 shadow-sm ${className}`}><img src={src} alt={alt} className={`h-full w-full rounded-[1rem] object-cover ${object}`} /></div>;
}

export default function ProfilePage() {
  const lang = getStoredLanguage();
  const t = getTranslation(lang).vrindavanChandraDasPage;

  const stats = [
    { icon: Users, value: "2L+", label: t.statStudents },
    { icon: Globe2, value: "100M+", label: t.statViews },
    { icon: Mic2, value: "7.5K+", label: t.statVideos },
    { icon: Award, value: "12L+", label: t.statFollowers },
  ];

  const institutions = ["SAARC", "Intel", "TEDx", "Reliance", "Mother Dairy", "RBS", "Maruti Suzuki", "NTPC"];
  const teachingPoints = [t.teachingPoint1, t.teachingPoint2, t.teachingPoint3];
  const whyPoints = [t.whyPoint1, t.whyPoint2, t.whyPoint3, t.whyPoint4, t.whyPoint5];

  return (
    <main className="bg-gradient-to-b from-[#FFF8F0] via-white to-[#FFF4E4] px-3 py-5 text-gray-700 sm:px-5 md:px-8 md:py-8">
      <div className="mx-auto flex max-w-7xl flex-col gap-6">
        <motion.section {...reveal} className="overflow-hidden rounded-[2.25rem] bg-gradient-to-br from-[#FFF8F0] via-white to-[#FFF4E4] px-6 py-8 shadow-[0_28px_90px_rgba(250,166,49,0.10)] border border-[#FAA631]/15 sm:px-10 sm:py-12">
          <div className="grid items-center gap-8 lg:grid-cols-[0.95fr_1.05fr]">
            <div>
              <p className="text-center text-xl font-medium italic text-[#FAA631] lg:text-left">{t.heroGreeting}</p>
              <h1 className="mt-4 text-center text-5xl font-bold leading-[0.95] text-gray-900 sm:text-6xl lg:text-left lg:text-7xl">{t.heroTitleLine1}<span className="block text-[#FAA631]">{t.heroTitleLine2}</span></h1>
              <p className="mt-4 text-center text-2xl font-semibold text-gray-800 lg:text-left">{t.heroSubtitle}</p>
              <p className="mt-6 max-w-xl text-center text-lg leading-9 text-gray-600 lg:text-left">{t.heroDescription}</p>
            </div>
            <ImageCard src="/profiles/vrindavan-chandra-das-pages/page-01.png" alt="Hero portrait" className="min-h-[34rem] p-0" object="object-cover object-[50%_72%]" />
          </div>
        </motion.section>

        <motion.div {...reveal}><Frame><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-02.png" alt="Visionary portrait" className="mx-auto mb-8 aspect-[4/3] max-w-md p-0" object="object-cover object-top" /><Title title={t.visionTitle} /><div className="grid gap-8 text-lg leading-9 text-gray-600 md:grid-cols-2"><p className="border-b border-[#FAA631]/20 pb-6 md:border-b-0 md:border-r md:pb-0 md:pr-8">{t.visionParagraph1}</p><p>{t.visionParagraph2}</p></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><div className="grid gap-8 lg:grid-cols-[0.92fr_1.08fr]"><div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1"><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-03.png" alt="Spiritual journey image 1" className="aspect-[4/4.2] p-0" object="object-cover object-[20%_20%]" /><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-03.png" alt="Spiritual journey image 2" className="aspect-[4/4.2] p-0" object="object-cover object-[82%_22%]" /></div><div><Title title={t.journeyTitle} /><ul className="space-y-5 text-lg leading-9 text-gray-600"><li>{t.journeyPoint1}</li><li>{t.journeyPoint2}</li><li>{t.journeyPoint3}</li><li>{t.journeyPoint4}</li></ul></div></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><Title title={t.impactTitle} /><p className="mb-8 text-center text-lg text-gray-600">{t.impactSubtitle}</p><div className="grid gap-4 md:grid-cols-4">{stats.map((item) => { const Icon = item.icon; return <div key={item.label} className="rounded-[1.6rem] border border-[#FAA631]/20 bg-[#FFF8F0] p-6 text-center shadow-sm"><div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#FFF4E4] text-[#FAA631]"><Icon className="h-6 w-6" /></div><p className="text-4xl font-bold text-gray-900">{item.value}</p><p className="mt-2 text-sm font-semibold uppercase tracking-[0.18em] text-gray-500">{item.label}</p></div>; })}</div><div className="mt-8 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">{institutions.map((name) => <div key={name} className="rounded-full border border-[#FAA631]/20 bg-white px-4 py-3 text-center text-sm font-semibold text-gray-700 shadow-sm">{name}</div>)}</div></Frame></motion.div>

        <motion.div {...reveal}><Frame><Title title={t.awardsTitle} /><div className="grid gap-6 lg:grid-cols-3"><div className="space-y-4"><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-05.png" alt="Award 1" className="aspect-[5/4] p-0" object="object-cover object-[66%_18%]" /><p className="text-lg leading-8 text-gray-600">{t.award1}</p></div><div className="space-y-4"><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-05.png" alt="Award 2" className="aspect-[5/4] p-0" object="object-cover object-[34%_47%]" /><p className="text-lg leading-8 text-gray-600">{t.award2}</p></div><div className="space-y-4"><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-06.png" alt="Meeting" className="aspect-[5/4] p-0" object="object-cover object-[56%_38%]" /><p className="text-lg leading-8 text-gray-600">{t.award3}</p></div></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><div className="grid gap-8 lg:grid-cols-[0.88fr_1.12fr]"><div><Title title={t.teachingTitle} /><p className="text-lg leading-9 text-gray-600">{t.teachingIntro}</p><ul className="mt-6 space-y-4 text-lg leading-9 text-gray-600">{teachingPoints.map((point) => <li key={point}>{point}</li>)}</ul><p className="mt-6 text-lg leading-9 text-gray-600">{t.teachingOutro}</p></div><div className="grid gap-4 sm:grid-cols-2"><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-07.png" alt="Teaching crowd" className="aspect-[4/3] sm:col-span-2 p-0" object="object-cover object-[72%_18%]" /><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-07.png" alt="Teaching session 1" className="aspect-[4/3] p-0" object="object-cover object-[18%_42%]" /><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-07.png" alt="Teaching session 2" className="aspect-[4/3] p-0" object="object-cover object-[82%_42%]" /></div></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><div className="grid gap-8 lg:grid-cols-[1fr_1fr]"><div className="grid gap-4 sm:grid-cols-2"><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-08.png" alt="Leadership image 1" className="aspect-[4/4.8] p-0" object="object-cover object-[22%_22%]" /><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-08.png" alt="Leadership image 2" className="aspect-[4/4.8] p-0" object="object-cover object-[77%_22%]" /></div><div className="flex flex-col justify-center"><Title title={t.leadershipTitle} /><ul className="space-y-5 text-lg leading-9 text-gray-600"><li>{t.leadershipPoint1}</li><li>{t.leadershipPoint2}</li></ul></div></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><Title title={t.innovationTitle} /><div className="grid gap-4 lg:grid-cols-3"><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-09.png" alt="Published work 1" className="aspect-[4/5] p-0" object="object-cover object-[16%_22%]" /><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-10.png" alt="Course" className="aspect-[4/5] p-0" object="object-cover object-center" /><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-11.png" alt="Olympiad" className="aspect-[4/5] p-0" object="object-cover object-center" /></div><ul className="mt-8 space-y-4 text-lg leading-9 text-gray-600"><li>{t.innovationPoint1}</li><li>{t.innovationPoint2}</li><li>{t.innovationPoint3}</li></ul></Frame></motion.div>

        <motion.div {...reveal}><Frame><div className="grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:items-center"><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-12.png" alt="Why leadership matters" className="aspect-[4/4.8] p-0" object="object-cover object-top" /><div><Title title={t.whyTitle} /><ul className="space-y-4 text-lg leading-9 text-gray-600">{whyPoints.map((point) => <li key={point}>{point}</li>)}</ul></div></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><div className="grid gap-8 lg:grid-cols-[1.1fr_0.9fr] lg:items-center"><div><Title title={t.mediaTitle} /><p className="text-lg leading-9 text-gray-600">{t.mediaDescription}</p></div><ImageCard src="/profiles/vrindavan-chandra-das-pages/page-13.png" alt="National media coverage" className="aspect-[4/5] p-0" object="object-cover object-top" /></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><Title title={t.appealTitle} /><div className="mx-auto grid max-w-5xl gap-8 text-lg leading-9 text-gray-600 md:grid-cols-2"><p>{t.appeal1}</p><p>{t.appeal2}</p><p>{t.appeal3}</p><p>{t.appeal4}</p></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><Title title={t.conclusionTitle} /><div className="mx-auto max-w-4xl space-y-6 text-lg leading-9 text-gray-600"><p>{t.conclusion1}</p><p>{t.conclusion2}</p><p>{t.conclusion3}</p></div></Frame></motion.div>

        <motion.div {...reveal}><Frame><div className="grid gap-4 sm:grid-cols-3 lg:grid-cols-4">{[{ icon: BookOpen, title: t.tile1 }, { icon: Landmark, title: t.tile2 }, { icon: Users, title: t.tile3 }, { icon: Newspaper, title: t.tile4 }].map((item) => { const Icon = item.icon; return <div key={item.title} className="rounded-[1.5rem] border border-[#FAA631]/20 bg-[#FFF8F0] p-6 text-center shadow-sm"><div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#FFF4E4] text-[#FAA631]"><Icon className="h-6 w-6" /></div><p className="text-lg font-semibold text-gray-900">{item.title}</p></div>; })}</div><div className="mx-auto mt-10 max-w-4xl text-center"><p className="text-3xl font-medium italic leading-[1.6] text-gray-800 sm:text-4xl">{t.quote}</p><div className="mt-10 rounded-[1.8rem] border border-[#FAA631]/20 bg-white px-6 py-8 shadow-sm"><Title title={t.contactTitle} subtitle={t.contactSubtitle} /><div className="space-y-4 text-lg leading-9 text-gray-600"><p>{t.contactAddress}</p><p>{t.contactMobile}</p><p>{t.contactEmail}</p><p>{t.contactFollow}</p></div></div></div></Frame></motion.div>
      </div>
    </main>
  );
}