import React, { useEffect, useRef } from 'react';
import Chatbot from '../components/Chatbot';
import { useAuth } from '../context/AuthContext';
import { useTheme } from '../context/ThemeContext'; // Import useTheme
import { ArrowRight, CheckCircle2, Home, Star, ShieldCheck, Clock, Award, TrendingDown, Users, MapPin, Phone, Mail, Instagram, Twitter, Youtube, Sun, Moon, LogOut, LayoutDashboard, User, Menu, X } from 'lucide-react';
import { Link } from 'react-router-dom';

import { SpotlightCard } from '../components/SpotlightCard';
import { ComparisonSlider } from '../components/ComparisonSlider';
import Services from '../components/Services';
import IntelligenceMap from '../components/IntelligenceMap';
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';

gsap.registerPlugin(ScrollTrigger);

const Landing = () => {
    const { user } = useAuth();
    const { theme, toggleTheme } = useTheme();
    const heroRef = useRef(null);
    const textRef = useRef(null);
    const sectionsRef = useRef([]);
    const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);

    useEffect(() => {
        // Console Signature (Info level to persist in prod)
        console.info(
            "%c Built by Satyam Rastogi %c 🚀 Ready for liftoff ",
            "background: #3b82f6; color: white; padding: 4px; border-radius: 4px 0 0 4px; font-weight: bold;",
            "background: #10b981; color: white; padding: 4px; border-radius: 0 4px 4px 0;"
        );

        // 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="h-16 w-auto object-contain" />
                        {/* <span className="text-xl font-bold tracking-tight">LynkedUp Pro</span> */}
                    </div>

                    {/* Desktop Nav */}
                    <div className="hidden md:flex items-center space-x-4">
                        <button
                            onClick={toggleTheme}
                            className="p-2 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-600 dark:text-zinc-400"
                            aria-label="Toggle Theme"
                        >
                            {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
                        </button>

                        {!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>
                        ) : (
                            <div className="flex items-center gap-2">
                                <Link
                                    to={user.role === 'CUSTOMER' ? '/portal/profile' : '/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"
                                >
                                    {user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
                                </Link>
                                <button
                                    onClick={useAuth().logout}
                                    className="p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 text-zinc-400 hover:text-red-500 transition-colors"
                                    title="Sign Out"
                                >
                                    <LogOut size={20} />
                                </button>
                            </div>
                        )}
                    </div>

                    {/* Mobile Menu Toggle */}
                    <button
                        className="md:hidden p-2 text-zinc-600 dark:text-zinc-400"
                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                    >
                        {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
                    </button>
                </div>

                {/* Mobile Nav Dropdown */}
                {isMobileMenuOpen && (
                    <div className="md:hidden absolute top-20 left-0 right-0 bg-white dark:bg-black border-b border-zinc-200 dark:border-white/5 p-4 flex flex-col space-y-4 shadow-xl animate-in slide-in-from-top-4">
                        <button
                            onClick={() => { toggleTheme(); setIsMobileMenuOpen(false); }}
                            className="flex items-center space-x-3 p-3 rounded-xl bg-zinc-100 dark:bg-zinc-900"
                        >
                            {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
                            <span className="font-bold">{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
                        </button>

                        {!user ? (
                            <Link
                                to="/login"
                                onClick={() => setIsMobileMenuOpen(false)}
                                className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-blue-600 text-white"
                            >
                                Sign In
                            </Link>
                        ) : (
                            <>
                                <Link
                                    to={user.role === 'CUSTOMER' ? '/portal/profile' : '/emp/fa/dashboard'}
                                    onClick={() => setIsMobileMenuOpen(false)}
                                    className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-black dark:bg-white text-white dark:text-black"
                                >
                                    {user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
                                </Link>
                                <button
                                    onClick={() => { useAuth().logout(); setIsMobileMenuOpen(false); }}
                                    className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400"
                                >
                                    Sign Out
                                </button>
                            </>
                        )}
                    </div>
                )}
            </nav>

            {/* HERO SECTION */}
            <div className="relative min-h-[90vh] flex items-center justify-center 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 object-[center_35%] scale-110 opacity-20 dark:opacity-40" />
                    <div className="absolute inset-0 bg-gradient-to-b from-transparent via-zinc-50/50 to-zinc-50 dark:via-[#050505]/50 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>
                        Crafted to Level the Field for Those Who Build America
                    </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 text-4xl md:text-9xl">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">
                            Schedule Demo
                            <ArrowRight size={18} className="ml-2" />
                        </Link>
                        <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener noreferrer" 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
                        </a>
                    </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>

                </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>
                                <div className="space-y-4 mb-8">
                                    {[
                                        "Generate property assessment reports & repair estimates in minutes.",
                                        "Document visible damage using AI-verified, objective evidence.",
                                        "Share reports with property owners or insurance instantly.",
                                        "Base all findings on measurable inspection data, not opinions.",
                                        "Equip field reps with verified evidence to operate with confidence.",
                                        "Provide a single, factual record all parties can rely on."
                                    ].map((item, i) => (
                                        <div key={i} className="flex items-start">
                                            <div className="mt-0.5 bg-blue-500/10 dark:bg-blue-500/20 p-2 rounded-lg text-blue-600 dark:text-blue-400 shrink-0 mr-4">
                                                <CheckCircle2 size={22} strokeWidth={3} />
                                            </div>
                                            <p className="text-sm text-zinc-600 dark:text-zinc-300 font-medium leading-relaxed">{item}</p>
                                        </div>
                                    ))}
                                </div>
                                <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>

            {/* NEW SERVICES SECTION */}
            <Services />

            {/* NEW INTELLIGENCE MAP SECTION */}
            <IntelligenceMap />

            {/* 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>

            {/* INDUSTRIES THAT LOVE US */}
            <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">Industries that Love Us</h2>

                    <div className="grid md:grid-cols-3 gap-6">
                        {/* Contractors Card */}
                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
                            <div className="flex items-center gap-4 mb-6">
                                <div className="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
                                    <Award size={24} />
                                </div>
                                <h4 className="font-bold text-xl">Contractors</h4>
                            </div>
                            <p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
                                Contractors live and die by speed, quality workmanship, and trust; that’s exactly what LynkedUp delivers.
                            </p>
                            <ul className="space-y-3 mb-8">
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
                                    <span>Faster insurance approvals through time-stamped, geo-verified capture.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
                                    <span>Fewer chargebacks & denials with irrefutable evidence.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
                                    <span>Shorter sales cycles — homeowners trust what they can see.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
                                    <span>More profitable jobs with accurate scopes.</span>
                                </li>
                            </ul>
                            <div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
                                <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Result</p>
                                <p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">One system replaces 5–7 tools.</p>
                            </div>
                        </SpotlightCard>

                        {/* Asset Managers Card */}
                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
                            <div className="flex items-center gap-4 mb-6">
                                <div className="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400">
                                    <Users size={24} />
                                </div>
                                <h4 className="font-bold text-xl">Asset Managers</h4>
                            </div>
                            <p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
                                Asset managers care about risk reduction, documentation, and long-term asset value, not sales hype.
                            </p>
                            <ul className="space-y-3 mb-8">
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
                                    <span>Verified condition records for every property.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
                                    <span>Audit-ready documentation for lenders & investors.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
                                    <span>Reduced fraud exposure — no undocumented claims.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
                                    <span>Remote visibility across portfolios.</span>
                                </li>
                            </ul>
                            <div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
                                <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Net Effect</p>
                                <p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">A digital twin that reduces capital risk.</p>
                            </div>
                        </SpotlightCard>

                        {/* Homeowners Card */}
                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
                            <div className="flex items-center gap-4 mb-6">
                                <div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
                                    <Home size={24} />
                                </div>
                                <h4 className="font-bold text-xl">Homeowners</h4>
                            </div>
                            <p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
                                Homeowners want protection and clarity, not pressure. We give them exactly that.
                            </p>
                            <ul className="space-y-3 mb-8">
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
                                    <span>Clear, visual proof instead of confusing explanations.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
                                    <span>Transparency — see what’s submitted to insurance.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
                                    <span>Faster claim resolution with fewer surprises.</span>
                                </li>
                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
                                    <span>Permanent property record for resale value.</span>
                                </li>
                            </ul>
                            <div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
                                <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Feeling</p>
                                <p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">Informed, protected, and confident.</p>
                            </div>
                        </SpotlightCard>
                    </div>
                </div>
            </div>

            {/* FOOTER */}
            <footer className="bg-zinc-950 border-t border-white/10 pt-24 pb-12 relative overflow-hidden">
                {/* Background Pattern */}
                <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-5 pointer-events-none mix-blend-overlay"></div>

                <div className="max-w-7xl mx-auto px-6 relative z-10">
                    <div className="grid md:grid-cols-4 gap-12 mb-20">
                        <div className="col-span-1 md:col-span-2 space-y-6">
                            <div className="flex items-center space-x-2">
                                <img src={Logo} alt="LynkedUp Pro" className="h-16 w-auto object-contain" />
                                {/* Removed: <span className="text-xl font-bold text-white tracking-tight">LynkedUp Pro</span> */}
                            </div>
                            <p className="text-sm leading-relaxed max-w-sm text-zinc-500">
                                Revolutionizing property management and roofing inspections with military-grade precision and AI-driven insights. Built for the modern homeowner.
                            </p>
                            <div className="flex space-x-4">
                                <div className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-400 hover:text-pink-500"><Instagram size={18} /></div>
                                <div className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-400 hover:text-blue-400"><Twitter size={18} /></div>
                                <div className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-400 hover:text-red-500"><Youtube size={18} /></div>
                            </div>
                        </div>

                        <div className="space-y-4">
                            <h4 className="text-white font-bold uppercase tracking-widest text-xs">Contact</h4>
                            <ul className="space-y-4 text-sm text-zinc-400">
                                <li className="flex items-start">
                                    <MapPin size={16} className="mr-3 mt-1 text-blue-500 shrink-0" />
                                    <span>16990 Dallas Pkwy Suite 206<br />Dallas, TX 75248</span>
                                </li>
                                <li className="flex items-center">
                                    <Phone size={16} className="mr-3 text-blue-500 shrink-0" />
                                    <span>866-259-6533</span>
                                </li>
                                <li className="flex items-center">
                                    <Mail size={16} className="mr-3 text-blue-500 shrink-0" />
                                    <span>Info@LynkedUpPro.com</span>
                                </li>
                            </ul>
                            <div className="pt-4">
                                <Link to="/login" className="inline-flex items-center px-6 py-2.5 rounded-full bg-blue-700 hover:bg-blue-600 text-white text-sm font-bold transition-colors shadow-lg shadow-blue-900/20">
                                    Book Demo <ArrowRight size={14} className="ml-2" />
                                </Link>
                            </div>
                        </div>

                        <div className="space-y-4">
                            <h4 className="text-white font-bold uppercase tracking-widest text-xs">Legal</h4>
                            <ul className="space-y-2 text-sm text-zinc-500">
                                <li className="hover:text-white cursor-pointer transition-colors">Privacy Policy</li>
                                <li className="hover:text-white cursor-pointer transition-colors">Terms of Service</li>
                                <li className="hover:text-white cursor-pointer transition-colors">Drone Flight Safety</li>
                                <li className="hover:text-white cursor-pointer transition-colors">Sitemap</li>
                            </ul>
                        </div>
                    </div>

                    <div className="border-t border-white/5 pt-12 flex flex-col md:flex-row justify-between items-center gap-6 text-xs text-zinc-600">
                        <div className="flex flex-col items-center md:items-start gap-1">
                            <p>&copy; 2026 LynkedUp Pro. All Rights Reserved.</p>
                            <p>Powered by <span className="text-zinc-400">LynkedUp Technologies</span></p>
                        </div>

                        <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 transition-all group cursor-default">
                            <span className="text-zinc-500">✨</span>
                            <span><span className="font-bold text-zinc-400 group-hover:text-white transition-colors">Satyam Rastogi</span> made this. <span className="text-zinc-500 group-hover:text-blue-400 transition-colors">Blame him for the bugs, praise him for the features.</span></span>
                        </div>
                    </div>
                </div>
            </footer>

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

export default Landing;
