import React, { useEffect, useRef, useState } 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, Zap, Briefcase, Map, Tag } 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.webp';
import ProcessImg1 from '../assets/images/process.webp';
import ProcessImg2 from '../assets/images/process-2.webp';
import ProcessImg3 from '../assets/images/process-3.webp';

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] = useState(false);
    const [isScrolled, setIsScrolled] = useState(false);
    const [hoveredSplit, setHoveredSplit] = useState(null);
    const cursorGlowRef = useRef(null);

    // Scroll-aware nav — transparent at top, glass effect on scroll
    useEffect(() => {
        const handleScroll = () => setIsScrolled(window.scrollY > 50);
        window.addEventListener('scroll', handleScroll, { passive: true });
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    // Body scroll lock when mobile menu is open
    useEffect(() => {
        document.body.style.overflow = isMobileMenuOpen ? 'hidden' : '';
        return () => { document.body.style.overflow = ''; };
    }, [isMobileMenuOpen]);

    const scrollToSection = (id) => {
        const el = document.getElementById(id);
        if (el) {
            el.scrollIntoView({ behavior: 'smooth' });
            setIsMobileMenuOpen(false);
        }
    };

    // 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;

            // Helper function to format numbers with commas
            const formatNumber = (num) => {
                return Math.round(num).toLocaleString('en-US');
            };

            gsap.to(counter, {
                value: target,
                duration: 2.5,
                ease: "power2.out",
                scrollTrigger: {
                    trigger: el,
                    start: "top 85%",
                    toggleActions: "play none none none",
                },
                onUpdate: () => {
                    el.innerText = formatNumber(counter.value) + suffix;
                },
                snap: { value: 1 }
            });
        });

    }, []);

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

    // Helper to determine dashboard path based on role
    const getDashboardPath = (role) => {
        switch (role) {
            case 'OWNER': return '/owner/snapshot';
            case 'ADMIN': return '/admin/dashboard';
            case 'CONTRACTOR': return '/contractor/dashboard';
            case 'SUBCONTRACTOR': return '/subcontractor/dashboard';
            case 'VENDOR': return '/vendor/dashboard';
            case 'FIELD_AGENT': return '/emp/fa/dashboard';
            case 'CUSTOMER': return '/portal/profile';
            default: return '/login';
        }
    };

    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',
                }}
            />

            {/* ── Navigation ── */}
            <nav className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${isScrolled
                ? 'bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl border-b border-zinc-200 dark:border-white/5 shadow-sm'
                : 'bg-transparent border-b border-transparent'
                }`}>
                <div className="max-w-7xl mx-auto px-6 h-16 md:h-20 flex items-center justify-between">
                    {/* Logo */}
                    <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="flex items-center space-x-2 shrink-0">
                        <img src={Logo} alt="LynkedUp Pro" className="h-12 md:h-16 w-auto object-contain" />
                    </button>

                    {/* Desktop Nav Links */}
                    <div className="hidden lg:flex items-center gap-1">
                        {[
                            { label: 'How It Works', id: 'how-it-works' },
                            { label: 'Services', id: 'services' },
                            { label: 'Intelligence', id: 'intelligence' },
                        ].map((item) => (
                            <button
                                key={item.id}
                                onClick={() => scrollToSection(item.id)}
                                className="px-3 py-2 text-sm font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors rounded-lg hover:bg-zinc-100/50 dark:hover:bg-white/5"
                            >
                                {item.label}
                            </button>
                        ))}
                        <Link
                            to="/login"
                            className="px-3 py-2 text-sm font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors rounded-lg hover:bg-zinc-100/50 dark:hover:bg-white/5"
                        >
                            Pricing
                        </Link>
                    </div>

                    {/* Desktop Right Actions */}
                    <div className="hidden md:flex items-center gap-2">
                        <button
                            onClick={toggleTheme}
                            className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-500 dark:text-zinc-400"
                            aria-label="Toggle Theme"
                        >
                            {theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
                        </button>

                        {!user ? (
                            <>
                                <Link
                                    to="/login"
                                    className="px-4 py-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white transition-colors"
                                >
                                    Sign In
                                </Link>
                                <Link
                                    to="/login"
                                    className="px-5 py-2 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm shadow-blue-500/25"
                                >
                                    Get Started
                                </Link>
                            </>
                        ) : (
                            <div className="flex items-center gap-2">
                                <Link
                                    to={getDashboardPath(user.role)}
                                    className="px-5 py-2 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm shadow-blue-500/25"
                                >
                                    {user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
                                </Link>
                                <button
                                    onClick={useAuth().logout}
                                    className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-zinc-400 hover:text-red-500 transition-colors"
                                    title="Sign Out"
                                >
                                    <LogOut size={18} />
                                </button>
                            </div>
                        )}
                    </div>

                    {/* Mobile Menu Toggle */}
                    <div className="flex md:hidden items-center gap-2">
                        <button
                            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
                            className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-600 dark:text-zinc-400"
                            aria-label="Toggle menu"
                            aria-expanded={isMobileMenuOpen}
                        >
                            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
                        </button>
                    </div>
                </div>
            </nav>

            {/* ── Mobile Backdrop ── */}
            {isMobileMenuOpen && (
                <div
                    className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[100] md:hidden"
                    onClick={() => setIsMobileMenuOpen(false)}
                    aria-hidden="true"
                />
            )}

            {/* ── Mobile Sidebar — slides from left, mirrors Layout.jsx pattern ── */}
            <aside
                className={`
                    fixed inset-y-0 left-0 z-[101] w-72 md:hidden
                    bg-white dark:bg-[#09090b] border-r border-zinc-200 dark:border-white/5
                    transition-transform duration-300 ease-in-out flex flex-col shadow-2xl
                    ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}
                `}
            >
                {/* Header */}
                <div className="h-16 flex items-center justify-between px-4 border-b border-zinc-100 dark:border-white/5 shrink-0">
                    <div className="flex items-center gap-2">
                        <img src={Logo} alt="LynkedUp Pro" className="h-10 w-auto object-contain" />
                    </div>
                    <button
                        onClick={() => setIsMobileMenuOpen(false)}
                        className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 text-zinc-500 dark:text-zinc-400 transition-colors"
                        aria-label="Close menu"
                    >
                        <X size={20} />
                    </button>
                </div>

                {/* Nav Links */}
                <nav className="flex-1 px-3 py-6 space-y-1 overflow-y-auto">
                    {[
                        { label: 'How It Works', id: 'how-it-works', icon: Zap },
                        { label: 'Services', id: 'services', icon: Briefcase },
                        { label: 'Intelligence', id: 'intelligence', icon: Map },
                    ].map((item) => (
                        <button
                            key={item.id}
                            onClick={() => scrollToSection(item.id)}
                            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/5 hover:text-zinc-900 dark:hover:text-white transition-colors"
                        >
                            <item.icon size={18} className="shrink-0 text-zinc-400 dark:text-zinc-500" />
                            {item.label}
                        </button>
                    ))}
                    <Link
                        to="/login"
                        onClick={() => setIsMobileMenuOpen(false)}
                        className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/5 hover:text-zinc-900 dark:hover:text-white transition-colors"
                    >
                        <Tag size={18} className="shrink-0 text-zinc-400 dark:text-zinc-500" />
                        Pricing
                    </Link>

                    {/* Sign Up / Login nav item — visible only when logged out */}
                    {!user && (
                        <>
                            <div className="my-3 border-t border-zinc-100 dark:border-white/5" />
                            <Link
                                to="/login"
                                onClick={() => setIsMobileMenuOpen(false)}
                                className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-semibold text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-500/10 transition-colors"
                            >
                                <User size={18} className="shrink-0" />
                                Sign Up / Login
                            </Link>
                        </>
                    )}
                </nav>

                {/* Footer */}
                <div className="p-4 border-t border-zinc-100 dark:border-white/5 space-y-3 shrink-0">
                    {/* Theme Toggle */}
                    <button
                        onClick={toggleTheme}
                        className="w-full flex items-center justify-between px-3 py-2.5 rounded-lg text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 hover:text-amber-500 transition-colors"
                    >
                        <span className="text-xs font-medium">Dark Mode</span>
                        {theme === 'dark' ? <Moon size={16} /> : <Sun size={16} />}
                    </button>

                    {/* CTAs */}
                    {!user ? (
                        <>
                            <Link
                                to="/login"
                                onClick={() => setIsMobileMenuOpen(false)}
                                className="block w-full text-center py-3 rounded-xl text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm shadow-blue-500/25"
                            >
                                Get Started
                            </Link>
                            <Link
                                to="/login"
                                onClick={() => setIsMobileMenuOpen(false)}
                                className="block w-full text-center py-3 rounded-xl text-sm font-bold border border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors"
                            >
                                Sign In
                            </Link>
                        </>
                    ) : (
                        <>
                            <Link
                                to={getDashboardPath(user.role)}
                                onClick={() => setIsMobileMenuOpen(false)}
                                className="block w-full text-center py-3 rounded-xl text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm shadow-blue-500/25"
                            >
                                {user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
                            </Link>
                            <Link
                                to="/login"
                                onClick={() => setIsMobileMenuOpen(false)}
                                className="block w-full text-center py-3 rounded-xl text-sm font-bold border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/10 transition-colors"
                            >
                                Sign Out
                            </Link>
                        </>
                    )}
                </div>
            </aside>

            {/* ============================================ */}
            {/* 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-4 sm:px-6 text-center pt-20 sm:pt-24 pb-24 sm:pb-32" ref={textRef}>

                    {/* Patriotic badge — identity + mission statement */}
                    <div className="inline-flex items-center px-2 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-4 sm:mb-6 md:mb-8 shadow-sm max-w-[95%] sm:max-w-none">
                        <span className="mr-1.5 sm:mr-2.5 text-xs sm:text-sm md:text-base">🇺🇸</span>
                        <span className="text-[7px] 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-3xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl font-black tracking-tight sm:tracking-tighter mb-3 sm:mb-4 md:mb-6 leading-[0.95] sm:leading-[0.9] px-1 sm: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-sm sm:text-base md:text-lg lg:text-xl xl:text-2xl text-zinc-500 dark:text-white/50 max-w-[95%] sm:max-w-xl md:max-w-2xl mx-auto mb-8 sm:mb-10 md:mb-12 font-medium leading-relaxed px-1 sm:px-2">
                        Automated drone inspections. Instant AI estimates.
                        <br className="hidden sm:block" />
                        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-3 sm:gap-4 mb-8 sm:mb-10 md:mb-12 px-8 sm:px-0">
                        {/* B2C: Homeowners */}
                        <Link
                            to="/login"
                            className="group w-full max-w-[260px] sm:w-auto sm:max-w-none px-6 sm:px-8 py-3.5 sm:py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-xs sm:text-sm transition-all flex items-center justify-center shadow-lg shadow-blue-600/20 hover:shadow-blue-500/30 hover:scale-[1.02] ring-2 sm:ring-4 ring-blue-500/10"
                        >
                            Schedule Demo
                            <ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-0.5" />
                        </Link>
                        {/* B2B: Contractors */}
                        <a
                            href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                            target="_blank"
                            rel="noopener noreferrer"
                            className="group w-full max-w-[260px] sm:w-auto sm:max-w-none px-6 sm:px-8 py-3.5 sm: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-xs sm:text-sm transition-all flex items-center justify-center hover:scale-[1.02]"
                        >
                            See The Process
                            <ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-0.5" />
                        </a>
                    </div>

                    {/* Discount banner — Veterans, Seniors, Active Duty */}
                    <div className="max-w-[280px] sm:max-w-md mx-auto bg-red-50 dark:bg-white/[0.04] backdrop-blur-md rounded-xl sm: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-2 sm:gap-0 sm:space-x-4 shadow-sm">
                        <div className="w-7 h-7 sm:w-10 sm: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={14} className="sm:w-5 sm:h-5" />
                        </div>
                        <div className="text-center sm:text-left">
                            <h3 className="font-bold text-[10px] sm:text-xs md:text-sm text-zinc-900 dark:text-white">Active Duty, Veterans & Seniors</h3>
                            <p className="text-[9px] sm:text-[10px] md: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>
                            5,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>

            {/* ── TRUST BAR — Animated stat counters ── */}
            <div className="py-12 md:py-16 bg-zinc-50 dark:bg-zinc-950 border-y border-zinc-100 dark:border-white/5" ref={addToRefs}>
                <div className="max-w-5xl mx-auto px-6">
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-center">
                        {[
                            { value: 5000, suffix: '+', label: 'Properties Scanned' },
                            { value: 200, suffix: '+', label: 'Contractors Onboarded' },
                            { value: 98, suffix: '%', label: 'Estimate Accuracy' },
                            { value: 15, suffix: ' min', label: 'Avg Report Time' },
                        ].map((stat, i) => (
                            <div key={i} className="group">
                                <div
                                    ref={(el) => statRefs.current[i + 3] = el}
                                    data-target={stat.value}
                                    data-suffix={stat.suffix}
                                    className="text-3xl md:text-4xl font-mono font-bold text-zinc-900 dark:text-white tracking-tight"
                                >
                                    0{stat.suffix}
                                </div>
                                <div className="text-xs font-mono font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mt-1">
                                    {stat.label}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>

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

            {/* PROCESS SECTION (From Sky to Safety) */}
            <div id="how-it-works" className="scroll-mt-20 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-20 md:space-y-32">
                        {/* Step 1 */}
                        <div className="grid md:grid-cols-2 gap-10 md: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-10 md: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-10 md: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 */}
            <div id="services" className="scroll-mt-20">
                <Services />
            </div>

            {/* NEW INTELLIGENCE MAP SECTION */}
            <div id="intelligence" className="scroll-mt-20">
                <IntelligenceMap />
            </div>

            {/* ── 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-5 md: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-5 md: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-5 md: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" />

            {/* ── THE SPLIT — B2C / B2B Routing ── */}
            <div className="py-24 md:py-32 bg-white dark:bg-zinc-950 relative overflow-hidden" ref={addToRefs}>
                <div className="absolute inset-0 blueprint-grid opacity-40"></div>
                <div className="max-w-5xl mx-auto px-6 relative z-10">
                    <div className="text-center mb-12 md:mb-16">
                        <span className="permit-stamp permit-stamp--accent mb-6 inline-flex">&#9670; Dual Platform</span>
                        <h2 className="text-3xl md:text-5xl font-black tracking-tight text-zinc-900 dark:text-white mt-4">
                            Which side of the roof are you on?
                        </h2>
                        <p className="text-zinc-500 dark:text-zinc-400 mt-4 max-w-xl mx-auto">
                            Whether you need your roof fixed or you fix roofs for a living — we built LynkedUp for both.
                        </p>

                        {/* Roof Ridge — interactive peak shape, highlights on card hover */}
                        <div className="flex items-center justify-center mt-10">
                            <svg viewBox="0 0 400 40" className="w-56 md:w-80 h-auto" fill="none" aria-hidden="true">
                                {/* Left slope — Homeowner side */}
                                <path
                                    d="M0 38 L200 4"
                                    strokeWidth="1.5"
                                    strokeDasharray="8 4"
                                    stroke="currentColor"
                                    className="transition-all duration-300 text-blue-500/40 dark:text-blue-500/30 md:hidden"
                                />
                                <path
                                    d="M0 38 L200 4"
                                    strokeWidth={hoveredSplit === 'homeowner' ? 2.5 : 1.5}
                                    strokeDasharray={hoveredSplit === 'homeowner' ? 'none' : '8 4'}
                                    stroke={hoveredSplit === 'homeowner' ? '#10b981' : 'currentColor'}
                                    className={`hidden md:block transition-all duration-300 ${hoveredSplit === 'homeowner' ? '' : 'text-blue-500/40 dark:text-blue-500/30'}`}
                                />
                                {/* Right slope — Contractor side */}
                                <path
                                    d="M200 4 L400 38"
                                    strokeWidth="1.5"
                                    strokeDasharray="8 4"
                                    stroke="currentColor"
                                    className="transition-all duration-300 text-blue-500/40 dark:text-blue-500/30 md:hidden"
                                />
                                <path
                                    d="M200 4 L400 38"
                                    strokeWidth={hoveredSplit === 'contractor' ? 2.5 : 1.5}
                                    strokeDasharray={hoveredSplit === 'contractor' ? 'none' : '8 4'}
                                    stroke={hoveredSplit === 'contractor' ? '#3b82f6' : 'currentColor'}
                                    className={`hidden md:block transition-all duration-300 ${hoveredSplit === 'contractor' ? '' : 'text-blue-500/40 dark:text-blue-500/30'}`}
                                />
                                {/* Peak glow — pulses on either hover */}
                                <circle cx="200" cy="4" r="8" className="fill-blue-500/20" />
                                <circle cx="200" cy="4" r="4" className="fill-blue-500" />
                            </svg>
                        </div>
                    </div>

                    <div className="grid md:grid-cols-2 gap-6">
                        {/* Homeowner Card */}
                        <div
                            className="group relative p-5 md:p-10 rounded-2xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] hover:border-emerald-500/40 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:shadow-emerald-500/5 overflow-hidden"
                            onMouseEnter={() => setHoveredSplit('homeowner')}
                            onMouseLeave={() => setHoveredSplit(null)}
                            onTouchStart={() => setHoveredSplit('homeowner')}
                        >
                            <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
                            <div className="mt-2">
                                <div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-500/10 flex items-center justify-center mb-6">
                                    <Home size={24} className="text-emerald-600 dark:text-emerald-400" />
                                </div>
                                <h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-2">I'm a Homeowner</h3>
                                <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6 leading-relaxed">
                                    Get a transparent, AI-powered roof assessment. Know exactly what's wrong, what it costs, and who to trust — before anyone knocks on your door.
                                </p>
                                <ul className="space-y-2.5 mb-8">
                                    {['Free drone inspection', 'AI damage assessment', 'Verified contractor matching', 'Insurance claim support'].map((item) => (
                                        <li key={item} className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                                            <CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
                                            {item}
                                        </li>
                                    ))}
                                </ul>
                                <Link
                                    to="/login"
                                    className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-sm font-bold bg-emerald-500 text-white hover:bg-emerald-600 transition-colors shadow-sm"
                                >
                                    Protect My Home <ArrowRight size={16} />
                                </Link>
                            </div>
                            <div className="mt-6 pt-3 border-t border-zinc-200 dark:border-white/5">
                                <span className="permit-stamp permit-stamp--verified">&#10003; Residential Verified</span>
                            </div>
                            <div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
                        </div>

                        {/* Contractor Card */}
                        <div
                            className="group relative p-5 md:p-10 rounded-2xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] hover:border-blue-500/40 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:shadow-blue-500/5 overflow-hidden"
                            onMouseEnter={() => setHoveredSplit('contractor')}
                            onMouseLeave={() => setHoveredSplit(null)}
                            onTouchStart={() => setHoveredSplit('contractor')}
                        >
                            <div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
                            <div className="mt-2">
                                <div className="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-500/10 flex items-center justify-center mb-6">
                                    <Award size={24} className="text-blue-600 dark:text-blue-400" />
                                </div>
                                <h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-2">I'm a Contractor</h3>
                                <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6 leading-relaxed">
                                    Stop chasing leads. Our intelligence engine surfaces storm-damaged properties, pre-qualifies homeowners, and routes jobs directly to your crew.
                                </p>
                                <ul className="space-y-2.5 mb-8">
                                    {['AI-powered lead generation', 'Storm path intelligence', 'Automated estimates', 'Crew dispatch & scheduling'].map((item) => (
                                        <li key={item} className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
                                            <CheckCircle2 size={16} className="text-blue-500 shrink-0" />
                                            {item}
                                        </li>
                                    ))}
                                </ul>
                                <Link
                                    to="/login"
                                    className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm"
                                >
                                    Grow My Business <ArrowRight size={16} />
                                </Link>
                            </div>
                            <div className="mt-6 pt-3 border-t border-zinc-200 dark:border-white/5">
                                <span className="permit-stamp permit-stamp--accent">&#9733; Contractor Certified</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-20 md:py-24 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-6xl 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 460" fill="none" className="w-full" aria-hidden="true">

                            {/* ===== TOWER / LATTICE MAST ===== */}
                            {/* Main vertical rails — extended to full viewBox height */}
                            <line x1="145" y1="55" x2="145" y2="460" stroke="var(--crane-line-strong)" strokeWidth="2" />
                            <line x1="195" y1="55" x2="195" y2="460" 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" />
                            <line x1="145" y1="359" x2="195" y2="359" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="145" y1="397" x2="195" y2="397" stroke="var(--crane-line-medium)" strokeWidth="1" />
                            <line x1="145" y1="435" x2="195" y2="435" 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="359" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="195" y1="321" x2="145" y2="359" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="145" y1="359" x2="195" y2="397" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="195" y1="359" x2="145" y2="397" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="145" y1="397" x2="195" y2="435" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="195" y1="397" x2="145" y2="435" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="145" y1="435" x2="195" y2="460" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
                            <line x1="195" y1="435" x2="145" y2="460" 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="430" stroke="rgba(59,130,246,0.28)" strokeWidth="1.5" strokeDasharray="6 4" />

                            {/* ===== HOOK BLOCK ===== */}
                            <rect x="394" y="430" 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="438" x2="400" y2="446" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" />
                            <path d="M400 446 C400 453 392 453 392 448" 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-7 md:p-14 text-center max-w-2xl 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;