import React, { useEffect, useRef } from 'react';
import Chatbot from '../components/Chatbot';
import { useAuth } from '../context/AuthContext';
import { ArrowRight, CheckCircle2, Home, Star, ShieldCheck, Clock, Award, TrendingDown, Users } from 'lucide-react';
import { Link } from 'react-router-dom';

import { SpotlightCard } from '../components/SpotlightCard';
import { ComparisonSlider } from '../components/ComparisonSlider';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Logo from '../assets/images/LynkedUp_Pro_F_logo_Y.png';
import HeroImg from '../assets/images/hero.png';
import ProcessImg1 from '../assets/images/process.png';
import ProcessImg2 from '../assets/images/process-2.png';
import ProcessImg3 from '../assets/images/process-3.png';
import TestimonialsImg from '../assets/images/testimonials.png';

gsap.registerPlugin(ScrollTrigger);

const Landing = () => {
    const { user } = useAuth();
    const heroRef = useRef(null);
    const textRef = useRef(null);
    const sectionsRef = useRef([]);

    useEffect(() => {
        // Hero Animation
        gsap.fromTo(textRef.current.children,
            { y: 50, opacity: 0 },
            { y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out" }
        );

        // Scroll Animations
        sectionsRef.current.forEach((el) => {
            gsap.fromTo(el,
                { y: 50, opacity: 0 },
                {
                    y: 0, opacity: 1, duration: 0.8, ease: "power2.out",
                    scrollTrigger: {
                        trigger: el,
                        start: "top 80%",
                    }
                }
            );
        });

    }, []);

    const addToRefs = (el) => {
        if (el && !sectionsRef.current.includes(el)) {
            sectionsRef.current.push(el);
        }
    };

    return (
        <div className="min-h-screen bg-zinc-50 dark:bg-[#050505] text-zinc-900 dark:text-white transition-colors duration-300 overflow-x-hidden selection:bg-emerald-500/30">

            {/* DITHER EFFECT - Fixed Overlay */}
            <div className="fixed inset-0 pointer-events-none z-50 opacity-[0.03] dark:opacity-[0.05]" style={{ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E")' }}></div>

            {/* Nav */}
            <nav className="border-b border-zinc-200 dark:border-white/5 backdrop-blur-xl sticky top-0 z-40 bg-white/70 dark:bg-black/50">
                <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                        <img src={Logo} alt="LynkedUp Pro" className="w-10 h-10 object-contain" />
                        <span className="text-xl font-bold tracking-tight">LynkedUp Pro</span>
                    </div>
                    <div className="flex items-center space-x-4">

                        {!user ? (
                            <Link to="/login" className="px-5 py-2 rounded-full text-xs font-bold uppercase tracking-wider bg-zinc-100 dark:bg-zinc-900 border hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors">
                                Sign In
                            </Link>
                        ) : (
                            <Link to={user.role === 'customer' ? '/' : '/emp/fa/dashboard'} className="px-5 py-2 rounded-full text-xs font-bold uppercase tracking-wider bg-black dark:bg-white text-white dark:text-black hover:opacity-80 transition-colors">
                                Dashboard
                            </Link>
                        )}
                    </div>
                </div>
            </nav>

            {/* HERO SECTION */}
            <div className="relative pt-32 pb-40 overflow-hidden" ref={heroRef}>
                {/* Background Image with Overlay */}
                <div className="absolute inset-0 z-0">
                    <img src={HeroImg} alt="Modern Roof" className="w-full h-full object-cover opacity-20 dark:opacity-40" />
                    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-zinc-50/80 to-zinc-50 dark:via-[#050505]/80 dark:to-[#050505]"></div>
                </div>

                <div className="max-w-7xl mx-auto px-6 relative z-10 text-center" ref={textRef}>
                    <div className="inline-flex items-center px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-500/20 text-[10px] font-bold tracking-widest uppercase mb-8 backdrop-blur-sm shadow-sm text-blue-800 dark:text-blue-300">
                        <span className="mr-2 text-base">🇺🇸</span>
                        Proudly American • Made by Americans, For Americans
                    </div>

                    <h1 className="text-6xl md:text-9xl font-black tracking-tighter mb-6 leading-[0.9]">
                        ROOFING <br />
                        <span className="text-transparent bg-clip-text bg-gradient-to-b from-blue-700 to-red-600 dark:from-blue-400 dark:to-red-400">REVOLUTIONIZED</span>
                    </h1>

                    <p className="text-xl md:text-2xl text-zinc-500 dark:text-zinc-400 max-w-2xl mx-auto mb-12 font-medium">
                        Automated drone inspections. Instant AI estimates.
                        <br className="hidden md:block" />
                        Restoring your home's integrity with 20+ years of precision.
                    </p>

                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
                        <Link to="/login" className="px-8 py-4 rounded-full bg-blue-700 hover:bg-blue-800 text-white font-bold transition-all flex items-center shadow-lg shadow-blue-600/20 hover:scale-105 ring-4 ring-blue-500/10 dark:ring-blue-400/10">
                            Get Free Estimate
                            <ArrowRight size={18} className="ml-2" />
                        </Link>
                        <button className="px-8 py-4 rounded-full bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 hover:bg-zinc-200 dark:hover:bg-white/10 font-semibold transition-colors">
                            See The Process
                        </button>
                    </div>

                    {/* Patriotic Discount Banner */}
                    <div className="max-w-md mx-auto bg-white/50 dark:bg-zinc-900/50 backdrop-blur-md rounded-2xl border border-red-100 dark:border-red-900/30 p-4 flex items-center justify-center space-x-4 shadow-sm">
                        <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center text-red-600 dark:text-red-400">
                            <Award size={20} />
                        </div>
                        <div className="text-left">
                            <h3 className="font-bold text-sm text-zinc-900 dark:text-white">Active Duty, Veterans & Seniors</h3>
                            <p className="text-xs text-zinc-500 dark:text-zinc-400">Get an exclusive <span className="text-red-600 dark:text-red-400 font-bold">15% Discount</span> on all services.</p>
                        </div>
                    </div>

                    {/* Satisfaction Badges */}
                    <div className="mt-12 flex items-center justify-center gap-8 opacity-70 grayscale hover:grayscale-0 transition-all duration-500">
                        <div className="flex items-center space-x-2">
                            <div className="flex -space-x-2">
                                <div className="w-8 h-8 rounded-full bg-gray-300 border-2 border-white dark:border-black"></div>
                                <div className="w-8 h-8 rounded-full bg-gray-400 border-2 border-white dark:border-black"></div>
                                <div className="w-8 h-8 rounded-full bg-gray-500 border-2 border-white dark:border-black"></div>
                            </div>
                            <span className="text-xs font-bold">500+ Happy Homes</span>
                        </div>
                        <div className="flex items-center space-x-2">
                            <ShieldCheck size={16} />
                            <span className="text-xs font-bold">Licensed & Insured</span>
                        </div>
                    </div>
                </div>
            </div>

            {/* PROCESS SECTION (From Sky to Safety) */}
            <div className="py-24 bg-white dark:bg-black/40 border-y border-zinc-100 dark:border-white/5" ref={addToRefs}>
                <div className="max-w-7xl mx-auto px-6">
                    <div className="text-center mb-24">
                        <div className="inline-block px-4 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-bold text-xs tracking-widest uppercase mb-4">The Workflow</div>
                        <h2 className="text-4xl md:text-6xl font-black tracking-tight">From Sky to Safety in <span className="text-blue-500">3 Steps.</span></h2>
                    </div>

                    <div className="space-y-32">
                        {/* Step 1 */}
                        <div className="grid md:grid-cols-2 gap-16 items-center">
                            <div className="relative rounded-3xl overflow-hidden shadow-2xl border border-white/10 group order-2 md:order-1">
                                <img src={ProcessImg1} alt="The Scan" className="w-full h-auto transform transition-transform duration-700 group-hover:scale-105" />
                                <div className="absolute bottom-6 left-6 bg-black/70 backdrop-blur-md px-3 py-1 rounded text-xs font-mono text-green-400 border border-green-500/30">LIDAR_MAPPING_ACTIVE</div>
                            </div>
                            <div className="order-1 md:order-2">
                                <div className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center font-black text-xl mb-6">01</div>
                                <h3 className="text-3xl font-bold mb-4">The Scan.</h3>
                                <p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
                                    Drones use <strong className="text-zinc-900 dark:text-white">LiDAR imagery</strong> and high-fidelity photogrammetry to map out your roof in sub-millimeter detail. We capture every angle, creating a perfect digital twin of your property without anyone ever stepping foot on a ladder.
                                </p>
                                <ul className="space-y-2 text-sm font-medium text-zinc-500">
                                    <li className="flex items-center"><CheckCircle2 size={16} className="mr-2 text-blue-500" /> 100% Contactless Inspection</li>
                                    <li className="flex items-center"><CheckCircle2 size={16} className="mr-2 text-blue-500" /> 15-Minute Flight Time</li>
                                </ul>
                            </div>
                        </div>

                        {/* Step 2 */}
                        <div className="grid md:grid-cols-2 gap-16 items-center">
                            <div className="order-1">
                                <div className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center font-black text-xl mb-6">02</div>
                                <h3 className="text-3xl font-bold mb-4">The Diagnosis.</h3>
                                <p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
                                    This data is sent to our <strong className="text-zinc-900 dark:text-white">AI models</strong>, which instantly diagnose issues invisible to the naked eye. The algorithm highlights storm damage, wear patterns, and insulation failures, scoring them by urgency.
                                </p>
                                <div className="border-l-4 border-blue-500 pl-4 italic text-zinc-500">
                                    "Better, faster, and more accurate decisions—eliminating human error."
                                </div>
                            </div>
                            <div className="relative rounded-3xl overflow-hidden shadow-2xl border border-white/10 group order-2">
                                <img src={ProcessImg2} alt="The Diagnosis" className="w-full h-auto transform transition-transform duration-700 group-hover:scale-105" />
                                <div className="absolute top-6 right-6 bg-black/80 backdrop-blur-md p-4 rounded-xl border border-red-500/30 hidden md:block">
                                    <div className="flex items-center justify-between text-xs font-mono text-zinc-400 mb-2 gap-4">
                                        <span>SCAN_ID: 8842-A</span>
                                        <div className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
                                    </div>
                                    <div className="space-y-2">
                                        <div className="flex justify-between text-xs font-bold text-white"><span>Structure Integrity</span> <span className="text-yellow-400">76%</span></div>
                                        <div className="w-32 h-1 bg-zinc-700 rounded-full overflow-hidden"><div className="w-[76%] h-full bg-yellow-400"></div></div>
                                        <div className="flex justify-between text-xs font-bold text-white"><span>Moisture Level</span> <span className="text-red-500">CRITICAL</span></div>
                                        <div className="w-32 h-1 bg-zinc-700 rounded-full overflow-hidden"><div className="w-[90%] h-full bg-red-500"></div></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Step 3 */}
                        <div className="grid md:grid-cols-2 gap-16 items-center">
                            <div className="relative rounded-3xl overflow-hidden shadow-2xl border border-white/10 group order-2 md:order-1">
                                <img src={ProcessImg3} alt="The Resolution" className="w-full h-auto transform transition-transform duration-700 group-hover:scale-105" />
                            </div>
                            <div className="order-1 md:order-2">
                                <div className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center font-black text-xl mb-6">03</div>
                                <h3 className="text-3xl font-bold mb-4">The Resolution.</h3>
                                <p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
                                    Armed with precise data, our certified ground team executes the repair cheaply and effectively. Homeowners are assured and relaxed, knowing they are getting the best of the best.
                                </p>
                                <div className="flex gap-4">
                                    <span className="px-3 py-1 bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-bold uppercase rounded-md">Cost Efficient</span>
                                    <span className="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs font-bold uppercase rounded-md">Data-Backed</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* COMPARISON SLIDER SECTION */}
            <div className="py-24" ref={addToRefs}>
                <ComparisonSlider />
            </div>

            {/* FACT CHECK & STATS */}
            <div className="py-24 bg-zinc-900 text-white relative overflow-hidden" ref={addToRefs}>
                <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>

                <div className="max-w-7xl mx-auto px-6 relative z-10">
                    <div className="text-center mb-16">
                        <h2 className="text-3xl md:text-5xl font-black mb-4">Why Risk The Wait?</h2>
                        <p className="text-zinc-400 max-w-2xl mx-auto">Delaying roof repairs leads to exponential damage. Here are the facts.</p>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8">
                        <div className="bg-white/5 p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors">
                            <div className="text-4xl font-black text-red-500 mb-2">40%</div>
                            <h3 className="font-bold text-xl mb-2">Insurance Denials</h3>
                            <p className="text-zinc-400 text-sm">Of claims are denied due to "lack of maintenance" if proof of regular inspection isn't provided.</p>
                        </div>
                        <div className="bg-white/5 p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors">
                            <div className="text-4xl font-black text-yellow-500 mb-2">5yrs</div>
                            <h3 className="font-bold text-xl mb-2">Life Reduced</h3>
                            <p className="text-zinc-400 text-sm">A minor leak left for 6 months can reduce your roof's lifespan by up to 5 years.</p>
                        </div>
                        <div className="bg-white/5 p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors">
                            <div className="text-4xl font-black text-green-500 mb-2">15m</div>
                            <h3 className="font-bold text-xl mb-2">Our Estimate Time</h3>
                            <p className="text-zinc-400 text-sm">While others take days, we give you a quote before our drone even lands.</p>
                        </div>
                    </div>
                </div>
            </div>

            {/* TESTIMONIALS */}
            <div className="py-32" ref={addToRefs}>
                <div className="max-w-7xl mx-auto px-6">
                    <h2 className="text-4xl font-black text-center mb-16">Neighbors Who Love Us</h2>

                    <div className="grid md:grid-cols-3 gap-6">
                        {/* Senior/Veteran Testimonial */}
                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
                            <div className="flex items-center gap-4 mb-6">
                                <img src={TestimonialsImg} alt="Veterans" className="w-16 h-16 rounded-full object-cover border-2 border-emerald-500" />
                                <div>
                                    <h4 className="font-bold">The Hendersons</h4>
                                    <p className="text-xs text-zinc-500">Retired Veterans • Plano, TX</p>
                                </div>
                            </div>
                            <div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
                            <p className="text-zinc-600 dark:text-zinc-400 italic">"The veteran discount was such a blessing. They found a leak our previous inspector missed completely. The drone technology was fascinating to watch!"</p>
                        </SpotlightCard>

                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
                            <div className="flex items-center gap-4 mb-6">
                                <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center font-bold text-blue-600 text-xl">JD</div>
                                <div>
                                    <h4 className="font-bold">James D.</h4>
                                    <p className="text-xs text-zinc-500">Homeowner • Frisco, TX</p>
                                </div>
                            </div>
                            <div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
                            <p className="text-zinc-600 dark:text-zinc-400 italic">"I requested a quote at 9am and had the repair scheduled by noon. The transparency with the 3D model made me feel confident in the price."</p>
                        </SpotlightCard>

                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
                            <div className="flex items-center gap-4 mb-6">
                                <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center font-bold text-purple-600 text-xl">SM</div>
                                <div>
                                    <h4 className="font-bold">Sarah M.</h4>
                                    <p className="text-xs text-zinc-500">Investor • Dallas, TX</p>
                                </div>
                            </div>
                            <div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
                            <p className="text-zinc-600 dark:text-zinc-400 italic">"Managing 5 properties is hard. LynkedUpPro makes it easy. I can see the roof status of all my houses on my dashboard. Incredible tool."</p>
                        </SpotlightCard>
                    </div>
                </div>
            </div>

            <Chatbot />
        </div>
    );
};

export default Landing;