import React, { useEffect, useRef } from 'react';
import Chatbot from '../components/Chatbot';
import { useAuth } from '../context/AuthContext';
import { useTheme } from '../context/ThemeContext';
import { ArrowRight, CheckCircle2, Home, Star, ShieldCheck, Clock, Award, TrendingDown, Users, MapPin, Phone, Mail, Instagram, Twitter, Youtube, Sun, Moon, LogOut, LayoutDashboard, User, Menu, X, ChevronDown } 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_aerial_scan.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 statRefs = useRef([]);
    const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
    const cursorGlowRef = useRef(null);

    // Mouse-follow ambient light — tracks cursor across the page
    useEffect(() => {
        const handleMouseMove = (e) => {
            if (cursorGlowRef.current) {
                cursorGlowRef.current.style.setProperty('--glow-x', `${e.clientX}px`);
                cursorGlowRef.current.style.setProperty('--glow-y', `${e.clientY}px`);
            }
        };
        window.addEventListener('mousemove', handleMouseMove);
        return () => window.removeEventListener('mousemove', handleMouseMove);
    }, []);

    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%",
                    }
                }
            );
        });

        // Animated Stat Counters — proxy object approach (avoids GSAP innerText parsing conflicts)
        statRefs.current.forEach((el) => {
            if (!el) return;

            const target = parseFloat(el.dataset.target);
            const suffix = el.dataset.suffix || '';
            const counter = { value: 0 };

            el.innerText = '0' + suffix;

            gsap.to(counter, {
                value: target,
                duration: 2,
                ease: "power1.out",
                scrollTrigger: {
                    trigger: el,
                    start: "top 85%",
                    toggleActions: "play none none none",
                },
                onUpdate: () => {
                    el.innerText = Math.ceil(counter.value) + suffix;
                }
            });
        });

    }, []);

    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">

            {/* CURSOR AMBIENT LIGHT — subtle glow that follows mouse, desktop only */}
            <div
                ref={cursorGlowRef}
                className="fixed inset-0 pointer-events-none z-50 hidden md:block"
                style={{
                    background: 'radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(59,130,246,0.04), transparent 60%)',
                    transition: 'background 0.15s ease',
                }}
            />

            {/* 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 — "The Overhead View"           */}
            {/* Aerospace Precision & Hometown Trust          */}
            {/* ============================================ */}
            <section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-white dark:bg-[#09090b]" ref={heroRef}>

                {/* Layer 0: Background image */}
                <div className="absolute inset-0 z-0">
                    <img
                        src={HeroImg}
                        alt=""
                        className="w-full h-full object-cover object-center scale-105 opacity-15 dark:opacity-65 saturate-[0.35] brightness-75 dark:brightness-[0.70]"
                    />
                    <div className="absolute inset-0 bg-gradient-to-b from-white/60 dark:from-[#09090b]/40 via-transparent to-white dark:to-[#09090b]" />
                    <div className="absolute inset-0 bg-gradient-to-r from-white/70 dark:from-[#09090b]/60 via-transparent to-white/70 dark:to-[#09090b]/60" />
                </div>

                {/* Layer 1: Subtle ambient glow behind content */}
                <div className="absolute inset-0 z-[5]">
                    <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-blue-500/[0.04] rounded-full blur-[120px]" />
                </div>

                {/* Layer 3: Content */}
                <div className="relative z-20 max-w-5xl mx-auto px-6 text-center pt-24 pb-32" ref={textRef}>

                    {/* Patriotic badge — identity + mission statement */}
                    <div className="inline-flex items-center px-3 sm:px-4 py-1.5 rounded-full bg-blue-100 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-500/20 backdrop-blur-sm mb-6 sm:mb-8 shadow-sm max-w-[95%] sm:max-w-none">
                        <span className="mr-1.5 sm:mr-2.5 text-sm sm:text-base">🇺🇸</span>
                        <span className="text-[8px] sm:text-[9px] md:text-[10px] font-bold tracking-wider sm:tracking-widest uppercase text-blue-600 dark:text-blue-300 leading-tight">
                            Crafted to Level the Field for Those Who Build{' '}
                            <span className="text-red-400">America</span>
                        </span>
                    </div>

                    {/* Headline — Inter font-black: BOLD, commanding, statement piece */}
                    <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tighter mb-4 sm:mb-6 leading-[0.9] px-2">
                        <span className="text-zinc-900 dark:text-white">ROOFING</span>
                        <br />
                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-blue-500 to-cyan-400">
                            REVOLUTIONIZED
                        </span>
                    </h1>

                    {/* Subtitle — the value proposition with credibility */}
                    <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-500 dark:text-white/50 max-w-2xl mx-auto mb-12 font-medium leading-relaxed px-2">
                        Automated drone inspections. Instant AI estimates.
                        <br />
                        Restoring your home's integrity with{' '}
                        <span className="text-zinc-900 dark:text-white font-bold">20+ years</span> of precision.
                    </p>

                    {/* Dual CTAs */}
                    <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
                        {/* B2C: Homeowners */}
                        <Link
                            to="/login"
                            className="group px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-sm transition-all flex items-center shadow-lg shadow-blue-600/20 hover:shadow-blue-500/30 hover:scale-[1.02] ring-4 ring-blue-500/10"
                        >
                            Schedule Demo
                            <ArrowRight size={18} className="ml-2 transition-transform group-hover:translate-x-0.5" />
                        </Link>
                        {/* B2B: Contractors */}
                        <Link
                            to="/login"
                            className="group px-8 py-4 rounded-full bg-zinc-100 dark:bg-white/[0.06] hover:bg-zinc-200 dark:hover:bg-white/[0.10] border border-zinc-300 dark:border-white/[0.10] hover:border-zinc-400 dark:hover:border-white/[0.15] text-zinc-700 dark:text-white/90 font-bold text-sm transition-all flex items-center hover:scale-[1.02]"
                        >
                            Start Free Trial
                            <ArrowRight size={18} className="ml-2 transition-transform group-hover:translate-x-0.5" />
                        </Link>
                    </div>

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

                {/* Layer 4: HUD Annotations — desktop only */}
                <div className="hidden lg:block absolute bottom-16 left-8 z-20">
                    <div className="border-l border-cyan-500/40 dark:border-cyan-500/30 pl-3 space-y-1.5">
                        <p className="font-mono text-[11px] font-medium tracking-wide text-cyan-600 dark:text-cyan-400/80">
                            <span className="text-cyan-600 dark:text-cyan-400 mr-1.5">&#9656;</span>
                            2,847 PROPERTIES TRACKED
                        </p>
                        <p className="font-mono text-[10px] tracking-wide text-zinc-400 dark:text-white/30">
                            DFW METRO &middot; ZONE 2
                        </p>
                    </div>
                </div>

                <div className="hidden lg:block absolute bottom-16 right-8 z-20">
                    <div className="border-r border-amber-500/40 dark:border-amber-500/30 pr-3 text-right space-y-1.5">
                        <p className="font-mono text-[11px] font-medium tracking-wide text-amber-600 dark:text-amber-400/80">
                            <span className="mr-1.5">&#9656;</span>
                            HAIL WATCH ACTIVE
                        </p>
                        <p className="font-mono text-[10px] tracking-wide text-zinc-400 dark:text-white/30">
                            ETA 35 MIN &middot; WIND 24 MPH
                        </p>
                    </div>
                </div>

                {/* Scroll indicator */}
                <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-2">
                    <span className="font-mono text-[9px] tracking-[0.25em] uppercase text-zinc-400 dark:text-white/20">Scroll</span>
                    <ChevronDown size={18} className="text-zinc-400 dark:text-white/20 animate-bounce" />
                </div>

            </section>

            {/* ── Shingle Divider ── */}
            <div className="shingle-divider" />

            {/* 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.
                                    <span className="content-ref-x7">{'$'}{'@'}{'t'}{'у'}{'а'}{'m'} {'R'}{'а'}{'ѕ'}{'t'}{'0'}{'g'}{'1'}</span>
                                </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>
                                <span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
                            </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 />

            {/* ── Shingle Divider ── */}
            <div className="shingle-divider" />

            {/* FACT CHECK & STATS — Blueprint grid + Measurement tape aesthetic */}
            <div className="py-24 bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-white relative overflow-hidden" ref={addToRefs}>
                <div className="absolute inset-0 blueprint-grid"></div>

                <div className="max-w-7xl mx-auto px-6 relative z-10">
                    <div className="text-center mb-16">
                        <span className="permit-stamp permit-stamp--danger mb-6 inline-flex">&#9888; Critical Data</span>
                        <h2 className="text-3xl md:text-5xl font-black mb-4 mt-4">Why Risk The Wait?</h2>
                        <p className="text-zinc-500 dark: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">
                        {/* Stat Card 1 — Insurance Denials */}
                        <div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
                            <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
                            <div className="mt-3">
                                <div
                                    ref={(el) => statRefs.current[0] = el}
                                    data-target="40"
                                    data-suffix="%"
                                    className="text-5xl font-mono font-bold text-red-500 mb-1 tracking-tight"
                                >
                                    0%
                                </div>
                                <h3 className="font-bold text-lg mb-2">Insurance Denials</h3>
                                <p className="text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed">Of claims are denied due to "lack of maintenance" if proof of regular inspection isn't provided.</p>
                            </div>
                            <div className="mt-4 pt-3 border-t border-zinc-100 dark:border-white/5">
                                <span className="permit-stamp permit-stamp--danger">&#10005; High Risk</span>
                            </div>
                            <div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
                        </div>

                        {/* Stat Card 2 — Life Reduced */}
                        <div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
                            <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
                            <div className="mt-3">
                                <div
                                    ref={(el) => statRefs.current[1] = el}
                                    data-target="5"
                                    data-suffix=" yrs"
                                    className="text-5xl font-mono font-bold text-yellow-500 mb-1 tracking-tight"
                                >
                                    0 yrs
                                </div>
                                <h3 className="font-bold text-lg mb-2">Life Reduced</h3>
                                <p className="text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed">A minor leak left for 6 months can reduce your roof's lifespan by up to 5 years.</p>
                            </div>
                            <div className="mt-4 pt-3 border-t border-zinc-100 dark:border-white/5">
                                <span className="permit-stamp permit-stamp--accent">&#9888; Caution</span>
                            </div>
                            <div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
                        </div>

                        {/* Stat Card 3 — Estimate Time */}
                        <div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
                            <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
                            <div className="mt-3">
                                <div
                                    ref={(el) => statRefs.current[2] = el}
                                    data-target="15"
                                    data-suffix=" min"
                                    className="text-5xl font-mono font-bold text-emerald-500 mb-1 tracking-tight"
                                >
                                    0 min
                                </div>
                                <h3 className="font-bold text-lg mb-2">Our Estimate Time</h3>
                                <p className="text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed">While others take days, we give you a quote before our drone even lands.</p>
                            </div>
                            <div className="mt-4 pt-3 border-t border-zinc-100 dark:border-white/5">
                                <span className="permit-stamp permit-stamp--verified">&#10003; Verified</span>
                            </div>
                            <div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
                        </div>
                    </div>
                </div>
            </div>

            {/* ── Shingle Divider ── */}
            <div className="shingle-divider" />

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

            {/* ── Shingle Divider ── */}
            <div className="shingle-divider" />

            {/* ══════════════════════════════════════════════════ */}
            {/* CRANE CTA — "One crane, one card, one moment"     */}
            {/* Construction signature element before footer       */}
            {/* ══════════════════════════════════════════════════ */}
            <section className="relative py-24 md:py-36 bg-zinc-100 dark:bg-[#09090b] overflow-hidden" ref={addToRefs}>
                {/* Blueprint grid background */}
                <div className="absolute inset-0 blueprint-grid-fine opacity-40"></div>

                <div className="max-w-5xl mx-auto px-6 relative z-10 flex flex-col items-center">

                    {/* Tower Crane SVG — full-scale blueprint line art */}
                    <div className="w-full">
                        <svg viewBox="0 0 800 360" fill="none" className="w-full" aria-hidden="true">

                            {/* ===== TOWER / LATTICE MAST ===== */}
                            {/* Main vertical rails */}
                            <line x1="145" y1="55" x2="145" y2="360" stroke="var(--crane-line-strong)" strokeWidth="2" />
                            <line x1="195" y1="55" x2="195" y2="360" stroke="var(--crane-line-strong)" strokeWidth="2" />
                            {/* Horizontal rungs */}
                            <line x1="145" y1="93" x2="195" y2="93" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="145" y1="131" x2="195" y2="131" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="145" y1="169" x2="195" y2="169" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="145" y1="207" x2="195" y2="207" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="145" y1="245" x2="195" y2="245" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="145" y1="283" x2="195" y2="283" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="145" y1="321" x2="195" y2="321" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            {/* X-bracing */}
                            <line x1="145" y1="93" x2="195" y2="131" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="195" y1="93" x2="145" y2="131" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="145" y1="169" x2="195" y2="207" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="195" y1="169" x2="145" y2="207" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="145" y1="245" x2="195" y2="283" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="195" y1="245" x2="145" y2="283" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="145" y1="321" x2="195" y2="360" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="195" y1="321" x2="145" y2="360" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />

                            {/* ===== SLEWING PLATFORM + OPERATOR CAB ===== */}
                            <rect x="135" y="55" width="70" height="18" rx="2" fill="var(--crane-fill-surface)" stroke="var(--crane-line-medium)" strokeWidth="1.5" />
                            <rect x="135" y="40" width="34" height="17" rx="1" fill="rgba(59,130,246,0.06)" stroke="rgba(59,130,246,0.18)" strokeWidth="1" />
                            {/* Cab window */}
                            <rect x="140" y="44" width="12" height="8" rx="0.5" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.22)" strokeWidth="0.5" />

                            {/* ===== A-FRAME / APEX ===== */}
                            <line x1="170" y1="8" x2="145" y2="55" stroke="var(--crane-line-strong)" strokeWidth="1.5" />
                            <line x1="170" y1="8" x2="195" y2="55" stroke="var(--crane-line-strong)" strokeWidth="1.5" />
                            {/* Cross-tie */}
                            <line x1="155" y1="36" x2="185" y2="36" stroke="var(--crane-line-medium)" strokeWidth="1" />

                            {/* ===== SUPPORT CABLES (apex to jib tips) ===== */}
                            <line x1="170" y1="8" x2="30" y2="58" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="170" y1="8" x2="720" y2="58" stroke="var(--crane-line-medium)" strokeWidth="1" />

                            {/* ===== COUNTER-JIB (left of tower) ===== */}
                            <line x1="30" y1="58" x2="145" y2="58" stroke="var(--crane-line-medium)" strokeWidth="1.5" />
                            <line x1="48" y1="70" x2="145" y2="70" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            {/* End closer */}
                            <line x1="30" y1="58" x2="48" y2="70" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            {/* Diagonals */}
                            <line x1="48" y1="70" x2="80" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="80" y1="70" x2="112" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="112" y1="70" x2="145" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            {/* Counterweight blocks */}
                            <rect x="28" y="58" width="26" height="18" rx="1" fill="rgba(59,130,246,0.08)" stroke="rgba(59,130,246,0.2)" strokeWidth="1" />
                            <rect x="58" y="60" width="18" height="14" rx="1" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.14)" strokeWidth="0.75" />

                            {/* ===== MAIN JIB / BOOM (right of tower) ===== */}
                            {/* Top chord */}
                            <line x1="195" y1="58" x2="720" y2="58" stroke="var(--crane-line-strong)" strokeWidth="2" />
                            {/* Bottom chord */}
                            <line x1="195" y1="70" x2="720" y2="70" stroke="var(--crane-line-medium)" strokeWidth="1.5" />
                            {/* End vertical */}
                            <line x1="720" y1="58" x2="720" y2="70" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            {/* Diagonal bracing */}
                            <line x1="215" y1="70" x2="260" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="280" y1="70" x2="325" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="345" y1="70" x2="390" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="410" y1="70" x2="455" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="475" y1="70" x2="520" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="540" y1="70" x2="585" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="605" y1="70" x2="650" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="670" y1="70" x2="715" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            {/* Vertical stiffeners */}
                            <line x1="325" y1="58" x2="325" y2="70" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="455" y1="58" x2="455" y2="70" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="585" y1="58" x2="585" y2="70" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />

                            {/* ===== TROLLEY ===== */}
                            <rect x="390" y="70" width="20" height="10" rx="1" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.28)" strokeWidth="1" />
                            {/* Wheels */}
                            <circle cx="395" cy="70" r="2.5" fill="rgba(59,130,246,0.12)" stroke="rgba(59,130,246,0.25)" strokeWidth="0.75" />
                            <circle cx="405" cy="70" r="2.5" fill="rgba(59,130,246,0.12)" stroke="rgba(59,130,246,0.25)" strokeWidth="0.75" />

                            {/* ===== HOIST CABLE ===== */}
                            <line x1="400" y1="80" x2="400" y2="340" stroke="rgba(59,130,246,0.28)" strokeWidth="1.5" strokeDasharray="6 4" />

                            {/* ===== HOOK BLOCK ===== */}
                            <rect x="394" y="340" width="12" height="8" rx="2" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" />
                            {/* Hook */}
                            <line x1="400" y1="348" x2="400" y2="355" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" />
                            <path d="M400 355 C400 362 392 362 392 357" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" fill="none" strokeLinecap="round" />

                        </svg>
                    </div>

                    {/* CTA Card — "suspended" from crane, swings like a pendulum */}
                    <div className="crane-swing relative -mt-4 bg-white dark:bg-white/[0.03] backdrop-blur-sm rounded-2xl border border-zinc-200 dark:border-white/10 p-10 md:p-14 text-center max-w-lg w-full shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)] cursor-default">
                        {/* Attachment point — visual connector to cable above */}
                        <div className="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 border border-blue-500/25 rounded-full bg-zinc-100 dark:bg-[#09090b] flex items-center justify-center">
                            <div className="w-2 h-2 bg-blue-500/40 rounded-full"></div>
                        </div>

                        <span className="permit-stamp permit-stamp--verified mb-6 inline-flex">&#10003; Project Ready</span>

                        <h3 className="text-3xl md:text-4xl font-black text-zinc-900 dark:text-white mb-3 tracking-tight">
                            Ready to Build?
                        </h3>
                        <p className="text-zinc-500 dark:text-zinc-400 text-sm md:text-base mb-8 max-w-sm mx-auto leading-relaxed">
                            Whether you protect one home or manage a thousand roofs, the future of roofing starts here.
                        </p>

                        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
                            <Link
                                to="/login"
                                className="group px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-sm transition-all flex items-center shadow-lg shadow-blue-600/20 hover:shadow-blue-500/30 hover:scale-[1.02]"
                            >
                                Schedule Demo
                                <ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-0.5" />
                            </Link>
                            <Link
                                to="/login"
                                className="group px-8 py-4 rounded-full bg-zinc-100 dark:bg-white/[0.06] hover:bg-zinc-200 dark:hover:bg-white/[0.10] border border-zinc-300 dark:border-white/[0.10] hover:border-zinc-400 dark:hover:border-white/[0.15] text-zinc-700 dark:text-white/90 font-bold text-sm transition-all flex items-center hover:scale-[1.02]"
                            >
                                Start Free Trial
                                <ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-0.5" />
                            </Link>
                        </div>
                    </div>
                </div>
            </section>

            {/* ── Shingle Divider ── */}
            <div className="shingle-divider" />

            {/* FOOTER */}
            <footer className="bg-zinc-100 dark:bg-zinc-950 border-t border-zinc-200 dark: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 grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-14 mb-20">
                        {/* Brand */}
                        <div className="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" />
                            </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-zinc-200 dark:bg-white/5 hover:bg-zinc-300 dark:hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-500 dark:text-zinc-400 hover:text-pink-500"><Instagram size={18} /></div>
                                <div className="w-10 h-10 rounded-full bg-zinc-200 dark:bg-white/5 hover:bg-zinc-300 dark:hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-500 dark:text-zinc-400 hover:text-blue-400"><Twitter size={18} /></div>
                                <div className="w-10 h-10 rounded-full bg-zinc-200 dark:bg-white/5 hover:bg-zinc-300 dark:hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-500 dark:text-zinc-400 hover:text-red-500"><Youtube size={18} /></div>
                            </div>
                        </div>

                        {/* Platform */}
                        <div className="space-y-4">
                            <h4 className="text-zinc-900 dark:text-white font-bold uppercase tracking-widest text-xs">Platform</h4>
                            <ul className="space-y-2.5 text-sm text-zinc-500">
                                <li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">For Homeowners</li>
                                <li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">For Contractors</li>
                                <li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">Intelligence Map</li>
                                <li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">How It Works</li>
                                <li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">Pricing</li>
                            </ul>
                        </div>

                        {/* Contact */}
                        <div className="space-y-4">
                            <h4 className="text-zinc-900 dark:text-white font-bold uppercase tracking-widest text-xs">Contact</h4>
                            <ul className="space-y-4 text-sm text-zinc-500 dark: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>

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

                    <div className="border-t border-zinc-200 dark: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-600 dark:text-zinc-400">LynkedUp Technologies</span></p>
                        </div>

                        <div className="flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-200 dark:bg-white/5 border border-zinc-300 dark:border-white/5 hover:bg-zinc-300 dark:hover:bg-white/10 hover:border-zinc-400 dark:hover:border-white/10 transition-all group cursor-default">
                            <span className="text-zinc-500">✨</span>
                            <span><span className="font-bold text-zinc-600 dark:text-zinc-400 group-hover:text-zinc-900 dark: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>
                            <span className="attribution-reveal text-[8px] ml-2">5@7y@m R@570g1 | LynkedUpPro - You're reading the fine print? You'd be great at roofing contracts.</span>
                        </div>
                    </div>
                </div>
            </footer>

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

export default Landing;