"use client";

import React, { useState, useEffect, useRef } from 'react';
import {
    GraduationCap,
    BookOpen,
    Users,
    Globe,
    ArrowRight,
    CheckCircle2,
    Briefcase,
    Layers,
    Menu,
    X,
    Play,
    Award,
    Search,
    Quote,
    Linkedin,
    MapPin,
    Calendar
} from "lucide-react";

// --- Animation Components ---

const Reveal = ({ children, delay = 0, className = "" }: { children: React.ReactNode, delay?: number, className?: string }) => {
    const [isVisible, setIsVisible] = useState(false);
    const ref = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (entry.isIntersecting) {
                    setIsVisible(true);
                    observer.unobserve(entry.target);
                }
            },
            { threshold: 0.1 }
        );
        if (ref.current) observer.observe(ref.current);
        return () => observer.disconnect();
    }, []);

    return (
        <div
            ref={ref}
            className={`transition-all duration-1000 cubic-bezier(0.17, 0.55, 0.55, 1) ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-12"
                } ${className}`}
            style={{ transitionDelay: `${delay}ms` }}
        >
            {children}
        </div>
    );
};

// --- Reusable UI Components ---

const SectionTitle = ({
    label,
    title,
    description,
    light = false,
}: {
    label: string;
    title: string;
    description?: string;
    light?: boolean;
}) => (
    <div className="max-w-3xl mx-auto text-center mb-16">
        <Reveal>
            <p className={`text-sm uppercase tracking-widest font-bold mb-3 ${light ? "text-indigo-400" : "text-indigo-600"}`}>
                {label}
            </p>
            <h2 className={`text-3xl md:text-5xl font-bold mt-3 ${light ? "text-white" : "text-slate-900"}`}>
                {title}
            </h2>
            {description && (
                <p className={`mt-6 text-lg leading-relaxed ${light ? "text-slate-300" : "text-slate-600"}`}>
                    {description}
                </p>
            )}
        </Reveal>
    </div>
);

const NavButton = ({ children, primary = false, className = "" }: { children: React.ReactNode, primary?: boolean, className?: string }) => (
    <button className={`px-6 py-2.5 rounded-lg font-medium text-sm transition-all duration-300 ${primary
        ? "bg-white text-slate-900 hover:bg-slate-100 shadow-lg shadow-white/10"
        : "text-white/80 hover:text-white hover:bg-white/10"
        } ${className}`}>
        {children}
    </button>
);

// --- Main Page Component ---

export default function EducationPage() {
    const [isScrolled, setIsScrolled] = useState(false);
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    useEffect(() => {
        const handleScroll = () => setIsScrolled(window.scrollY > 20);
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <div className="bg-slate-50 text-slate-900 font-sans overflow-x-hidden min-h-screen">

            <main>
                {/* ================= HERO SECTION ================= */}
                <section className="relative min-h-screen flex items-center pt-20 overflow-hidden bg-slate-950">
                    {/* Background Image with Overlay */}
                    <div className="absolute inset-0 z-0">
                        <img
                            src="https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=2940&auto=format&fit=crop"
                            alt="University Campus"
                            className="w-full h-full object-cover opacity-40 scale-105 animate-slow-zoom"
                        />
                        <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/95 to-slate-950/30" />
                        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(99,102,241,0.15),transparent_50%)]" />
                    </div>

                    <div className="max-w-7xl mx-auto px-6 relative z-10 grid lg:grid-cols-2 gap-16 items-center w-full">
                        <div>
                            <Reveal>
                                <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 text-xs font-bold tracking-wide uppercase mb-8 backdrop-blur-md">
                                    <span className="w-2 h-2 rounded-full bg-indigo-400 animate-pulse" />
                                    New Enrollment Open 2024
                                </div>
                            </Reveal>

                            <Reveal delay={200}>
                                <h1 className="text-5xl md:text-7xl font-extrabold text-white leading-[1.1] mb-8 tracking-tight">
                                    Education That <br />
                                    <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">
                                        Shapes the Future
                                    </span>
                                </h1>
                            </Reveal>

                            <Reveal delay={400}>
                                <p className="text-slate-300 text-lg md:text-xl max-w-xl mb-10 leading-relaxed font-light">
                                    Building industry-ready professionals through innovation-driven education, applied research, and global collaboration.
                                </p>
                            </Reveal>

                        </div>

                        {/* Hero Stats Card */}
                        <div className="hidden lg:grid grid-cols-2 gap-4">
                            {[
                                { label: "Students Enrolled", value: "25K+", icon: Users, color: "text-blue-400" },
                                { label: "Global Mentors", value: "120+", icon: Globe, color: "text-emerald-400" },
                                { label: "Industry Courses", value: "60+", icon: BookOpen, color: "text-purple-400" },
                                { label: "Placement Rate", value: "92%", icon: Briefcase, color: "text-pink-400" },
                            ].map((stat, idx) => (
                                <Reveal key={idx} delay={800 + (idx * 100)}>
                                    <div className="bg-white/5 border border-white/10 backdrop-blur-md rounded-2xl p-8 hover:bg-white/10 transition-colors group">
                                        <stat.icon className={`mb-4 w-8 h-8 ${stat.color} group-hover:scale-110 transition-transform`} />
                                        <p className="text-3xl font-bold text-white mb-1 tracking-tight">{stat.value}</p>
                                        <p className="text-slate-400 text-sm font-medium uppercase tracking-wider">{stat.label}</p>
                                    </div>
                                </Reveal>
                            ))}
                        </div>
                    </div>
                </section>

                {/* ================= PROGRAMS SECTION ================= */}
                <section id="programs" className="py-32 bg-slate-50 relative">
                    <div className="max-w-7xl mx-auto px-6 relative z-10">
                        <SectionTitle
                            label="Academic Offerings"
                            title="Future-Focused Programs"
                            description="Designed to align with global industry standards and emerging technologies."
                        />

                        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {[
                                {
                                    icon: BookOpen,
                                    title: "Undergraduate Programs",
                                    desc: "Industry-integrated degrees with practical exposure.",
                                    color: "bg-blue-500"
                                },
                                {
                                    icon: Layers,
                                    title: "Postgraduate Studies",
                                    desc: "Advanced research-oriented and leadership programs.",
                                    color: "bg-purple-500"
                                },
                                {
                                    icon: Briefcase,
                                    title: "Professional Certifications",
                                    desc: "Skill-based certification aligned with corporate needs.",
                                    color: "bg-pink-500"
                                },
                                {
                                    icon: Globe,
                                    title: "Global Exchange",
                                    desc: "International collaboration and study programs.",
                                    color: "bg-orange-500"
                                },
                                {
                                    icon: Users,
                                    title: "Corporate Training",
                                    desc: "Custom workforce upskilling for enterprises.",
                                    color: "bg-emerald-500"
                                },
                                {
                                    icon: GraduationCap,
                                    title: "Research Fellowships",
                                    desc: "Innovation-driven research with real-world impact.",
                                    color: "bg-indigo-500"
                                },
                            ].map((item, idx) => (
                                <Reveal key={idx} delay={idx * 100} className="h-full">
                                    <div className="group h-full bg-white rounded-3xl p-8 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all duration-300 border border-slate-100 relative overflow-hidden">
                                        <div className="absolute top-0 right-0 w-32 h-32 bg-slate-50 rounded-bl-[100px] -mr-8 -mt-8 transition-colors group-hover:bg-slate-100" />

                                        <div className={`w-14 h-14 ${item.color} text-white rounded-2xl flex items-center justify-center mb-6 relative shadow-lg group-hover:scale-110 transition-transform`}>
                                            <item.icon size={24} />
                                        </div>

                                        <h3 className="text-xl font-bold text-slate-900 mb-3 relative">{item.title}</h3>
                                        <p className="text-slate-600 leading-relaxed relative">{item.desc}</p>

                                        <div className="mt-6 pt-6 border-t border-slate-50 flex items-center text-indigo-600 font-semibold text-sm group-hover:gap-2 transition-all">
                                            Learn more <ArrowRight size={16} className="ml-1 opacity-0 group-hover:opacity-100 transition-opacity" />
                                        </div>
                                    </div>
                                </Reveal>
                            ))}
                        </div>
                    </div>
                </section>

                {/* ================= WHY CHOOSE US (DARK) ================= */}
                <section className="py-32 bg-slate-950 relative overflow-hidden">
                    {/* Abstract Background Shapes */}
                    <div className="absolute top-0 right-0 w-1/3 h-full bg-slate-900 -skew-x-12 translate-x-32" />

                    <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-20 items-center relative z-10">
                        <div>
                            <Reveal>
                                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-md bg-green-500/10 text-green-400 border border-green-500/20 text-xs font-bold uppercase tracking-wide mb-6">
                                    <Award size={14} /> World Class Faculty
                                </div>
                                <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
                                    Why Institutions & <br /> Learners Trust Us
                                </h2>
                                <p className="text-lg text-slate-400 mb-10 leading-relaxed">
                                    We bridge the gap between academia and industry. Our curriculum is constantly updated by a board of global advisors to ensure relevance in a rapidly changing world.
                                </p>
                            </Reveal>

                            <div className="space-y-6">
                                {[
                                    "Curriculum aligned with industry & government frameworks",
                                    "Faculty from academia, research & corporate sectors",
                                    "AI-enabled learning & digital assessment platforms",
                                    "Strong placement & entrepreneurship support",
                                ].map((point, idx) => (
                                    <Reveal key={idx} delay={idx * 150}>
                                        <div className="flex gap-4 items-start group">
                                            <div className="mt-1 min-w-[24px] min-h-[24px] rounded-full bg-indigo-500/10 text-indigo-400 flex items-center justify-center group-hover:bg-indigo-500 group-hover:text-white transition-colors">
                                                <CheckCircle2 size={16} />
                                            </div>
                                            <span className="text-slate-300 font-medium text-lg group-hover:text-white transition-colors">{point}</span>
                                        </div>
                                    </Reveal>
                                ))}
                            </div>
                        </div>

                        <Reveal delay={300} className="relative">
                            {/* Image Card */}
                            <div className="relative rounded-3xl overflow-hidden shadow-2xl border-8 border-slate-800 group">
                                <div className="absolute inset-0 bg-indigo-900/10 group-hover:bg-indigo-900/0 transition-colors duration-500 z-10"></div>
                                <img
                                    src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=2940&auto=format&fit=crop"
                                    alt="Students Collaborating"
                                    className="w-full h-auto object-cover hover:scale-110 transition-transform duration-700"
                                />

                                {/* Floating Stats Card */}
                                <div className="absolute bottom-8 left-8 right-8 bg-slate-900/90 backdrop-blur-xl p-6 rounded-2xl border border-white/10 z-20">
                                    <div className="flex items-center justify-between">
                                        <div>
                                            <p className="text-white font-bold text-lg">Global Accreditations</p>
                                            <p className="text-slate-400 text-sm">Recognized worldwide</p>
                                        </div>
                                        <div className="flex -space-x-3">
                                            {[1, 2, 3, 4].map(i => (
                                                <div key={i} className="w-10 h-10 rounded-full border-2 border-slate-900 bg-slate-800 flex items-center justify-center text-xs text-white">
                                                    <Globe size={16} />
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* Decorative elements behind image */}
                            <div className="absolute -top-10 -right-10 w-40 h-40 bg-indigo-500/10 rounded-full blur-3xl -z-10" />
                            <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-purple-500/10 rounded-full blur-3xl -z-10" />
                        </Reveal>
                    </div>
                </section>

                {/* ================= CAMPUS LIFE GALLERY ================= */}
                <section id="campus" className="py-32 bg-white text-slate-900 relative">
                    {/* Background Mesh Gradient (Subtle Light) */}
                    <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-indigo-50/50 via-white to-white"></div>

                    <div className="max-w-7xl mx-auto px-6 relative z-10">
                        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                            <div className="max-w-2xl">
                                <Reveal>
                                    <p className="text-indigo-600 font-bold tracking-widest uppercase text-sm mb-3">Campus Life</p>
                                    <h2 className="text-4xl md:text-5xl font-bold">A Vibrant Ecosystem</h2>
                                </Reveal>
                            </div>
                            <Reveal delay={200}>
                                <button className="flex items-center gap-2 text-slate-600 border border-slate-200 px-6 py-3 rounded-full hover:bg-slate-50 transition-colors font-medium">
                                    View Full Gallery <ArrowRight size={16} />
                                </button>
                            </Reveal>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-4 grid-rows-2 gap-4 h-[600px]">
                            {/* Large Item */}
                            <div className="md:col-span-2 md:row-span-2 relative group rounded-3xl overflow-hidden shadow-lg">
                                <Reveal className="h-full">
                                    <img src="https://images.unsplash.com/photo-1541829070764-84a7d30dd3f3?q=80&w=1200&auto=format&fit=crop" alt="Library" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity"></div>
                                    <div className="absolute bottom-6 left-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 text-white">
                                        <p className="text-indigo-300 text-sm font-bold uppercase mb-1">Innovation Hub</p>
                                        <h3 className="text-2xl font-bold">State-of-the-art Library</h3>
                                    </div>
                                </Reveal>
                            </div>

                            {/* Top Right Item */}
                            <div className="md:col-span-2 relative group rounded-3xl overflow-hidden shadow-lg">
                                <Reveal delay={200} className="h-full">
                                    <img src="https://images.unsplash.com/photo-1523580846055-a72ccd62d5d4?q=80&w=800&auto=format&fit=crop" alt="Social" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity"></div>
                                    <div className="absolute bottom-6 left-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 text-white">
                                        <p className="text-indigo-300 text-sm font-bold uppercase mb-1">Community</p>
                                        <h3 className="text-xl font-bold">Student Networking</h3>
                                    </div>
                                </Reveal>
                            </div>

                            {/* Bottom Mid Item */}
                            <div className="relative group rounded-3xl overflow-hidden shadow-lg">
                                <Reveal delay={300} className="h-full">
                                    <img src="/img/strategy/jk.png" alt="Labs" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity"></div>
                                    <div className="absolute bottom-6 left-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 text-white">
                                        <h3 className="text-lg font-bold">Robotics Lab</h3>
                                    </div>
                                </Reveal>
                            </div>

                            {/* Bottom Right Item */}
                            <div className="relative group rounded-3xl overflow-hidden shadow-lg">
                                <Reveal delay={400} className="h-full">
                                    <img src="https://images.unsplash.com/photo-1562774053-701939374585?q=80&w=600&auto=format&fit=crop" alt="Campus" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80 group-hover:opacity-100 transition-opacity"></div>
                                    <div className="absolute bottom-6 left-6 translate-y-4 group-hover:translate-y-0 transition-transform duration-500 text-white">
                                        <h3 className="text-lg font-bold">Green Campus</h3>
                                    </div>
                                </Reveal>
                            </div>
                        </div>
                    </div>
                </section>

            </main>


        </div>
    );
}