import { motion, useScroll, useTransform } from 'framer-motion';
import { Link } from 'react-router-dom';
import {
  ArrowRight, Sparkles, BookOpen, Bot, GraduationCap,
  CheckCircle, Zap, Shield, Brain, Trophy, Award, Cpu, Users
} from 'lucide-react';
import SectionTitle from '@/components/SectionTitle/SectionTitle';
import FeatureCard from '@/components/FeatureCard/FeatureCard';
import FloatingCard from '@/components/FloatingCard/FloatingCard';
import ChatPreview from '@/components/ChatPreview/ChatPreview';
import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
import AnimatedContainer from '@/components/AnimatedContainer/AnimatedContainer';
import { FEATURES, CAMPUS_LOCATIONS } from '@/constants';
import * as LucideIcons from 'lucide-react';

export default function Home() {
  const { scrollY } = useScroll();
  const heroOpacity = useTransform(scrollY, [0, 450], [1, 0]);
  const heroY = useTransform(scrollY, [0, 450], [0, -80]);

  return (
    <div className="relative">
      {/* Sticky Background Video */}
      <div className="fixed inset-0 w-full h-full z-0 pointer-events-none">
        <video
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          className="w-full h-full object-cover"
          style={{ 
            filter: 'contrast(1.12) brightness(0.88) saturate(1.08)',
            transform: 'translate3d(0, 0, 0)',
            willChange: 'transform',
            imageRendering: 'high-quality'
          }}
        >
          <source src="/video/RIT Video.mp4" type="video/mp4" />
        </video>
        {/* Dark Overlay (40-50%) */}
        <div 
          className="absolute inset-0" 
          style={{ background: 'linear-gradient(to bottom, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.65))' }}
        />
      </div>

      {/* ─── Hero Section ─────────────────────────────────────────────────────── */}
      <section className="relative overflow-hidden min-h-screen flex flex-col justify-center pt-24 pb-32 z-10 bg-transparent">
        {/* Center Content */}
        <motion.div 
          className="container-custom relative z-20 flex flex-col items-center justify-center text-center px-4"
          style={{ opacity: heroOpacity, y: heroY }}
        >
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="mb-3"
          >
            <span className="text-[#F97316] text-xs font-bold uppercase tracking-widest" style={{ fontFamily: 'Poppins, sans-serif' }}>
              OUR LEGACY & FUTURE
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="text-white text-3xl md:text-4xl font-light mb-2"
            style={{ fontFamily: 'Playfair Display, serif', color: '#FFFFFF', textShadow: '0 2px 10px rgba(0, 0, 0, 0.5)' }}
          >
            Welcome to
          </motion.h1>

          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="text-5xl md:text-7xl font-extrabold leading-tight mb-6 bg-gradient-to-r from-[#F97316] via-[#FB923C] to-[#F97316] bg-clip-text text-transparent"
            style={{ fontFamily: 'Playfair Display, serif', color: 'transparent', WebkitTextFillColor: 'transparent', filter: 'drop-shadow(0 4px 12px rgba(249, 115, 22, 0.45))' }}
          >
            RIT Freshers Hub
          </motion.h2>

          <motion.p
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.3 }}
            className="max-w-2xl text-slate-200 text-sm md:text-base leading-relaxed mb-8"
            style={{ fontFamily: 'Inter, sans-serif' }}
          >
            The RIT Freshers Hub is your centralized gateway to campus life, academic resources, AI assistance, clubs, events, bus routes, notes, and student services.
          </motion.p>

          {/* Buttons */}
          <motion.div
            initial={{ opacity: 0, y: 15 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.4 }}
            className="flex flex-wrap justify-center gap-4 mb-8"
          >
            <a href="#built-for-freshers">
              <motion.button
                whileHover={{ scale: 1.05, boxShadow: '0 8px 25px rgba(249,115,22,0.4)' }}
                whileTap={{ scale: 0.95 }}
                className="flex items-center gap-2 px-8 py-3.5 rounded-xl text-white font-semibold text-sm cursor-pointer"
                style={{
                  fontFamily: 'Poppins, sans-serif',
                  background: 'linear-gradient(135deg, #F97316, #FB923C)',
                }}
              >
                <BookOpen className="w-4 h-4" />
                Explore Hub
                <ArrowRight className="w-3.5 h-3.5" />
              </motion.button>
            </a>

            <Link to="/ai-assistant">
              <motion.button
                whileHover={{ scale: 1.05, borderColor: '#F97316', backgroundColor: 'rgba(255,255,255,0.15)' }}
                whileTap={{ scale: 0.95 }}
                className="flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm border-2 border-white/20 text-white bg-white/10 backdrop-blur-md transition-all cursor-pointer"
                style={{ fontFamily: 'Poppins, sans-serif' }}
              >
                <Bot className="w-4 h-4" />
                Ask AI Assistant
              </motion.button>
            </Link>
          </motion.div>

          {/* Badges */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.5 }}
            className="flex flex-wrap justify-center gap-6 text-slate-300 border-t border-white/10 pt-6 max-w-lg w-full"
          >
            {[
              { icon: CheckCircle, text: 'Official Portal' },
              { icon: Zap, text: 'Instant AI Support' },
              { icon: Shield, text: 'Student Verified' },
            ].map((badge, i) => (
              <div key={i} className="flex items-center gap-1.5 text-xs font-medium" style={{ fontFamily: 'Inter, sans-serif' }}>
                <badge.icon className="w-4 h-4 text-[#F97316]" />
                <span>{badge.text}</span>
              </div>
            ))}
          </motion.div>
        </motion.div>
      </section>

      {/* Floating Glassmorphic Stats Section */}
      <section className="relative z-30 -mt-16 px-4">
        <div className="container-custom max-w-5xl">
          <style>{`
            @keyframes float {
              0%, 100% { transform: translateY(0px); }
              50% { transform: translateY(-8px); }
            }
            .animate-float {
              animation: float 6s ease-in-out infinite;
            }
          `}</style>
          
          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.6 }}
            className="animate-float rounded-[24px] border border-white/10 p-6 md:p-8 shadow-[0_25px_60px_-15px_rgba(0,0,0,0.4)]"
            style={{
              background: 'linear-gradient(135deg, rgba(11, 19, 43, 0.9) 0%, rgba(15, 23, 42, 0.8) 100%)',
              backdropFilter: 'blur(20px)',
              WebkitBackdropFilter: 'blur(20px)',
            }}
          >
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6 text-center">
              {[
                { value: '20+', label: 'SPORTS', icon: Trophy },
                { value: '100+', label: 'FACULTY', icon: GraduationCap },
                { value: '18', label: 'CLUBS', icon: Award },
                { value: '24/7', label: 'AI ASSISTANT', icon: Cpu },
                { value: '5000+', label: 'STUDENTS', icon: Users },
              ].map((stat, i) => (
                <div key={i} className="flex flex-col items-center justify-center p-4">
                  {/* Icon */}
                  <div className="w-10 h-10 rounded-xl bg-[#F97316]/10 flex items-center justify-center mb-3">
                    <stat.icon className="w-5 h-5 text-[#F97316]" />
                  </div>
                  {/* Value */}
                  <div 
                    className="text-2xl md:text-3xl font-extrabold text-white mb-1"
                    style={{ fontFamily: 'Poppins, sans-serif' }}
                  >
                    {stat.value}
                  </div>
                  {/* Label */}
                  <div 
                    className="text-[10px] md:text-xs font-semibold tracking-wider text-slate-300 uppercase whitespace-nowrap"
                    style={{ fontFamily: 'Inter, sans-serif' }}
                  >
                    {stat.label}
                  </div>
                </div>
              ))}
            </div>
          </motion.div>
        </div>
      </section>

      {/* ─── Features Section ─────────────────────────────────────────────────── */}
      <section id="built-for-freshers" className="section-padding relative z-20" style={{ backgroundColor: '#FAFAFA' }}>
        <div className="container-custom">
          <SectionTitle
            tag="Everything You Need"
            title="Built for"
            highlight="RIT Freshers"
            subtitle="From notes to AI assistance — we've got everything you need to navigate campus life with confidence."
          />

          <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {FEATURES.map((feature) => (
              <StaggerItem key={feature.id}>
                <FeatureCard feature={feature} />
              </StaggerItem>
            ))}
          </StaggerContainer>
        </div>
      </section>

      {/* ─── AI Section ───────────────────────────────────────────────────────── */}
      <section className="section-padding bg-white relative z-20">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            {/* Left – Text */}
            <AnimatedContainer direction="left">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-5"
                style={{ backgroundColor: '#F5F3FF', border: '1px solid #DDD6FE' }}>
                <Sparkles className="w-4 h-4 text-[#8B5CF6]" />
                <span className="text-xs font-semibold text-[#8B5CF6] uppercase tracking-wider" style={{ fontFamily: 'Poppins, sans-serif' }}>
                  AI-Powered
                </span>
              </div>
              <h2 className="text-3xl md:text-4xl font-bold mb-4" style={{ fontFamily: 'Playfair Display, serif', color: '#1E293B' }}>
                Your 24/7{' '}
                <span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
                  Campus Guide
                </span>
              </h2>
              <p className="text-[#475569] leading-relaxed mb-8" style={{ fontFamily: 'Inter, sans-serif' }}>
                Ask anything about RIT — from admission documents to canteen timings. Our AI assistant, powered by Google Gemini with campus-specific knowledge, gives you instant, accurate answers.
              </p>

              <div className="grid grid-cols-2 gap-4 mb-8">
                {[
                  { icon: 'Brain', label: 'Gemini AI', desc: 'State-of-the-art AI' },
                  { icon: 'Database', label: 'RAG System', desc: 'Campus knowledge base' },
                  { icon: 'Map', label: 'Campus Context', desc: 'RIT-specific answers' },
                  { icon: 'Zap', label: 'Instant Answers', desc: 'No wait time' },
                ].map((item, i) => {
                  const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string; style?: React.CSSProperties }>>)[item.icon];
                  return (
                    <div key={i} className="flex items-start gap-3 p-4 rounded-xl border border-[#E5E7EB] bg-[#FAFAFA]">
                      <div className="w-9 h-9 rounded-lg flex items-center justify-center bg-[#FFF7ED] shrink-0">
                        {Icon && <Icon className="w-4.5 h-4.5" style={{ color: '#F97316' }} />}
                      </div>
                      <div>
                        <div className="text-sm font-semibold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>{item.label}</div>
                        <div className="text-xs text-[#94A3B8]" style={{ fontFamily: 'Inter, sans-serif' }}>{item.desc}</div>
                      </div>
                    </div>
                  );
                })}
              </div>

              <Link to="/ai-assistant">
                <motion.button
                  whileHover={{ scale: 1.03 }}
                  whileTap={{ scale: 0.97 }}
                  className="flex items-center gap-2 px-7 py-3.5 rounded-xl text-white font-semibold"
                  style={{
                    fontFamily: 'Poppins, sans-serif',
                    background: 'linear-gradient(135deg, #F97316, #FB923C)',
                    boxShadow: '0 6px 20px rgba(249,115,22,0.35)',
                  }}
                >
                  <Bot className="w-4.5 h-4.5" />
                  Try AI Assistant
                  <ArrowRight className="w-4 h-4" />
                </motion.button>
              </Link>
            </AnimatedContainer>

            {/* Right – Chat Preview */}
            <AnimatedContainer direction="right" delay={0.2}>
              <ChatPreview />
            </AnimatedContainer>
          </div>
        </div>
      </section>

      {/* ─── Campus Quick Nav ─────────────────────────────────────────────────── */}
      <section className="section-padding relative z-20" style={{ backgroundColor: '#FAFAFA' }}>
        <div className="container-custom">
          <SectionTitle
            tag="Navigate Campus"
            title="Explore"
            highlight="RIT Campus"
            subtitle="Find your way around campus — departments, labs, library, and all key locations."
          />

          <AnimatedContainer>
            <div className="bg-white rounded-3xl border border-[#E5E7EB] overflow-hidden" style={{ boxShadow: '0 8px 40px -8px rgba(0,0,0,0.1)' }}>
              {/* Map placeholder */}
              <div
                className="h-56 flex items-center justify-center relative overflow-hidden"
                style={{ background: 'linear-gradient(135deg, #1E293B, #334155)' }}
              >
                <div
                  className="absolute inset-0 opacity-10"
                  style={{
                    backgroundImage: 'linear-gradient(rgba(249,115,22,0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(249,115,22,0.5) 1px, transparent 1px)',
                    backgroundSize: '30px 30px',
                  }}
                />
                {/* Location pins */}
                {[
                  { label: 'CSE Block', x: '25%', y: '30%' },
                  { label: 'Library', x: '55%', y: '45%' },
                  { label: 'Canteen', x: '70%', y: '65%' },
                  { label: 'Hostel', x: '20%', y: '65%' },
                ].map((pin, i) => (
                  <motion.div
                    key={i}
                    className="absolute flex flex-col items-center gap-1 cursor-pointer group"
                    style={{ left: pin.x, top: pin.y, transform: 'translate(-50%, -50%)' }}
                    whileHover={{ scale: 1.1 }}
                  >
                    <div className="w-6 h-6 rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-all"
                      style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)' }}>
                      <div className="w-2 h-2 rounded-full bg-white" />
                    </div>
                    <span className="text-[10px] text-white font-medium bg-black/50 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
                      {pin.label}
                    </span>
                  </motion.div>
                ))}
                <div className="relative z-10 text-center">
                  <div className="text-white/40 text-sm" style={{ fontFamily: 'Inter, sans-serif' }}>Interactive Campus Map</div>
                  <Link to="/campus">
                    <motion.button
                      whileHover={{ scale: 1.05 }}
                      className="mt-2 px-5 py-2 rounded-xl text-white text-xs font-semibold"
                      style={{ background: 'rgba(249,115,22,0.8)', fontFamily: 'Poppins, sans-serif' }}
                    >
                      Open Full Map
                    </motion.button>
                  </Link>
                </div>
              </div>

              {/* Quick nav buttons */}
              <div className="p-5 grid grid-cols-4 sm:grid-cols-8 gap-3">
                {CAMPUS_LOCATIONS.map((loc) => {
                  const Icon = (LucideIcons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[loc.icon];
                  return (
                    <Link to="/campus" key={loc.id}>
                      <motion.div
                        whileHover={{ y: -3, backgroundColor: '#FFF7ED' }}
                        className="flex flex-col items-center gap-2 p-3 rounded-xl cursor-pointer transition-all border border-transparent hover:border-[#FED7AA]"
                      >
                        <div className="w-9 h-9 rounded-xl bg-[#F8FAFC] flex items-center justify-center">
                          {Icon && <Icon className="w-4.5 h-4.5 text-[#F97316]" />}
                        </div>
                        <span className="text-[10px] text-[#475569] text-center leading-tight" style={{ fontFamily: 'Inter, sans-serif' }}>
                          {loc.name}
                        </span>
                      </motion.div>
                    </Link>
                  );
                })}
              </div>
            </div>
          </AnimatedContainer>
        </div>
      </section>

      {/* ─── Community Teaser ─────────────────────────────────────────────────── */}
      <section className="section-padding bg-white relative z-20">
        <div className="container-custom">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Q&A teaser */}
            <AnimatedContainer direction="left">
              <div className="rounded-3xl p-7 h-full border border-[#E5E7EB]"
                style={{ background: 'linear-gradient(135deg, #FAFAFA, #FFF7ED)', boxShadow: '0 4px 20px -4px rgba(0,0,0,0.07)' }}>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-11 h-11 rounded-xl flex items-center justify-center bg-[#FFF7ED]">
                    <LucideIcons.MessageCircle className="w-5 h-5 text-[#F97316]" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>Freshers Q&A</h3>
                    <p className="text-xs text-[#94A3B8]">Get answers from seniors</p>
                  </div>
                </div>
                <div className="space-y-3 mb-5">
                  {['How is hostel life at RIT?', 'Best clubs to join as a fresher?', 'Tips for first semester survival'].map((q, i) => (
                    <div key={i} className="flex items-start gap-2.5 p-3 bg-white rounded-xl border border-[#E5E7EB]">
                      <span className="text-[#F97316] text-xs font-bold mt-0.5">Q</span>
                      <span className="text-xs text-[#475569]" style={{ fontFamily: 'Inter, sans-serif' }}>{q}</span>
                    </div>
                  ))}
                </div>
                <Link to="/community">
                  <motion.button
                    whileHover={{ scale: 1.02 }}
                    className="w-full py-2.5 rounded-xl text-sm font-semibold text-[#F97316] border-2 border-[#F97316] hover:bg-[#FFF7ED] transition-all"
                    style={{ fontFamily: 'Poppins, sans-serif' }}
                  >
                    Join the Discussion
                  </motion.button>
                </Link>
              </div>
            </AnimatedContainer>

            {/* Anonymous Confession Teaser */}
            <AnimatedContainer direction="right" delay={0.1}>
              <div className="rounded-3xl p-7 h-full border border-[#E5E7EB]"
                style={{ background: 'linear-gradient(135deg, #1E293B, #334155)', boxShadow: '0 4px 20px -4px rgba(0,0,0,0.15)' }}>
                <div className="flex items-center gap-3 mb-4">
                  <div className="w-11 h-11 rounded-xl flex items-center justify-center" style={{ backgroundColor: 'rgba(249,115,22,0.2)' }}>
                    <LucideIcons.Heart className="w-5 h-5 text-[#F97316]" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-white" style={{ fontFamily: 'Poppins, sans-serif' }}>Anonymous Confessions</h3>
                    <p className="text-xs text-slate-400">Share without revealing identity</p>
                  </div>
                </div>
                <div className="space-y-3 mb-5">
                  {[
                    { text: "I went to the wrong department on my first day 😅", reactions: 87 },
                    { text: "The library WiFi is faster than my home connection 😂", reactions: 134 },
                  ].map((c, i) => (
                    <div key={i} className="p-3 rounded-xl" style={{ backgroundColor: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.1)' }}>
                      <p className="text-xs text-slate-300 mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>{c.text}</p>
                      <div className="flex items-center gap-1 text-xs text-slate-500">
                        <LucideIcons.Heart className="w-3 h-3 text-[#F97316]" />
                        <span>{c.reactions}</span>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="flex items-center gap-2 p-3 rounded-xl mb-4" style={{ backgroundColor: 'rgba(249,115,22,0.1)', border: '1px solid rgba(249,115,22,0.2)' }}>
                  <LucideIcons.Shield className="w-4 h-4 text-[#F97316] shrink-0" />
                  <span className="text-xs text-slate-400" style={{ fontFamily: 'Inter, sans-serif' }}>
                    100% Anonymous. No tracking. No identity revealed.
                  </span>
                </div>
                <Link to="/community">
                  <motion.button
                    whileHover={{ scale: 1.02 }}
                    className="w-full py-2.5 rounded-xl text-sm font-semibold text-white transition-all"
                    style={{ fontFamily: 'Poppins, sans-serif', background: 'linear-gradient(135deg, #F97316, #FB923C)' }}
                  >
                    Confess Anonymously
                  </motion.button>
                </Link>
              </div>
            </AnimatedContainer>
          </div>
        </div>
      </section>
    </div>
  );
}