"use client";

import React, { useState, useEffect } from 'react';
import {
    Menu,
    X,
    ArrowRight,
    ChevronRight,
    Cpu,
    Zap,
    Globe,
    Activity,
    Layers,
    Terminal,
    Bot,
    Scan,
    Crosshair,
    Box,
    Wifi,
    Battery,
    Settings,
    ShieldCheck,
    Play,
    Maximize2,
    Move
} from 'lucide-react';

// --- Types ---
interface RobotModel {
    id: string;
    name: string;
    tagline: string;
    specs: { label: string; value: string }[];
    image: string;
    status: 'Production' | 'Prototype';
}

interface Sector {
    id: string;
    title: string;
    desc: string;
    image: string;
}

// --- Mock Data ---
const MODELS: RobotModel[] = [
    {
        id: '01',
        name: 'Atlas-X',
        tagline: 'Heavy Industrial Manipulator',
        status: 'Production',
        specs: [
            { label: 'Lift Cap', value: '500kg' },
            { label: 'Reach', value: '4.2m' },
            { label: 'Power', value: '480V' },
        ],
        image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?q=80&w=2070&auto=format&fit=crop'
    },
    {
        id: '02',
        name: 'Stratus-V',
        tagline: 'Aerial Logistics Network',
        status: 'Production',
        specs: [
            { label: 'Range', value: '120km' },
            { label: 'Speed', value: '90km/h' },
            { label: 'AI', value: 'L5 Auto' },
        ],
        image: 'https://images.unsplash.com/photo-1506947411487-a56738267384?q=80&w=2070&auto=format&fit=crop'
    },
    {
        id: '03',
        name: 'Vector-Nano',
        tagline: 'Micro-Assembly Bot',
        status: 'Prototype',
        specs: [
            { label: 'Accuracy', value: '10μm' },
            { label: 'Cycle', value: '0.05s' },
            { label: 'Vision', value: '8K 3D' },
        ],
        image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?q=80&w=2070&auto=format&fit=crop'
    }
];

const SECTORS: Sector[] = [
    {
        id: 'automotive',
        title: 'Automotive',
        desc: 'High-speed assembly and precision welding for next-generation EV platforms.',
        image: 'https://images.unsplash.com/photo-1565043589221-1a6fd9ae45c7?q=80&w=2070&auto=format&fit=crop'
    },
    {
        id: 'medical',
        title: 'Bio-Medical',
        desc: 'Sterile environment automation for pharmaceutical processing and lab research.',
        image: 'https://images.unsplash.com/photo-1579684385127-1ef15d508118?q=80&w=2070&auto=format&fit=crop'
    },
    {
        id: 'logistics',
        title: 'Global Logistics',
        desc: 'Autonomous fulfillment centers operating at 99.9% efficiency rates.',
        image: 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=2070&auto=format&fit=crop'
    },
    {
        id: 'aerospace',
        title: 'Aerospace',
        desc: 'Zero-tolerance component manufacturing for orbital and deep-space systems.',
        image: 'https://images.unsplash.com/photo-1517976487492-5750f3195933?q=80&w=2070&auto=format&fit=crop'
    }
];

export default function RoboticsPage() {
    const [isVisible, setIsVisible] = useState(false);
    const [activeTab, setActiveTab] = useState(0);

    useEffect(() => {
        setIsVisible(true);
    }, []);

    return (
        <div className="min-h-screen bg-zinc-50 text-zinc-900 font-sans selection:bg-blue-600 selection:text-white">

            {/* --- Technical Grid Background --- */}
            <div className="fixed inset-0 pointer-events-none z-0">
                <div className="absolute inset-0 bg-[linear-gradient(to_right,#00000008_1px,transparent_1px),linear-gradient(to_bottom,#00000008_1px,transparent_1px)] bg-size:40px_40px]"></div>
            </div>

            {/* ================= HERO SECTION ================= */}
            <section className="relative pt-32 pb-20 lg:pt-28 lg:pb-32 px-6 overflow-hidden bg-zinc-900 text-white clip-path-slant-bottom">
                <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1485827404703-89b55fcc595e?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-20"></div>
                <div className="absolute inset-0 bg-linear-to-t from-black via-black/80 to-transparent"></div>

                <div className="relative z-10 max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center">
                    <div>
                        <div className={`inline-flex items-center gap-2 px-3 py-1 border border-blue-500/50 bg-blue-500/10 text-blue-400 text-xs font-mono uppercase tracking-widest mb-8 transition-all duration-1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
                            <Activity className="w-3 h-3" />
                            Systems Nominal
                        </div>

                        <h1 className={`text-6xl md:text-7xl font-bold tracking-tighter text-white mb-8 leading-[0.9] transition-all duration-1000 delay-150 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
                            Automating <br />
                            <span className="text-transparent bg-clip-text bg-linear-to-t from-blue-500 to-white">
                                The Impossible.
                            </span>
                        </h1>

                        <p className={`text-lg text-zinc-400 max-w-xl leading-relaxed mb-10 border-l-2 border-blue-600 pl-6 transition-all duration-1000 delay-300 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
                            We engineer autonomous robotics for the world's most demanding environments. Precision hardware meets adaptive AI.
                        </p>

                        <div className={`flex flex-wrap gap-4 transition-all duration-1000 delay-500 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
                            <button className="h-14 px-8 bg-blue-600 text-white font-bold text-sm uppercase tracking-wider hover:bg-blue-500 transition-colors flex items-center gap-2 rounded-sm">
                                View Platform <ArrowRight className="w-4 h-4" />
                            </button>
                            <button className="h-14 px-8 border border-zinc-700 text-white font-bold text-sm uppercase tracking-wider hover:bg-white/5 transition-colors flex items-center gap-2 rounded-sm">
                                <Play className="w-4 h-4 fill-current" /> Field Demo
                            </button>
                        </div>
                    </div>

                    {/* Hero Graphic: Holographic Schematic */}
                    <div className={`relative hidden lg:flex justify-end transition-all duration-1000 delay-700 ${isVisible ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`}>
                        <div className="relative w-[500px] h-[600px] border border-white/10 bg-black/40 backdrop-blur-sm p-6 rounded-lg">
                            {/* UI Overlay Elements */}
                            <div className="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-blue-500"></div>
                            <div className="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-blue-500"></div>
                            <div className="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-blue-500"></div>
                            <div className="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-blue-500"></div>

                            <div className="flex justify-between items-center mb-8 border-b border-white/10 pb-4">
                                <span className="text-xs font-mono text-blue-400">UNIT_01 DIAGNOSTICS</span>
                                <div className="flex gap-2">
                                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                                    <span className="text-xs font-mono text-zinc-500">ONLINE</span>
                                </div>
                            </div>

                            {/* Schematic Image Placeholder */}
                            <div className="h-[300px] w-full bg-zinc-900/50 rounded flex items-center justify-center border border-dashed border-white/10 mb-6 group">
                                <Bot className="w-24 h-24 text-zinc-700 group-hover:text-blue-500 transition-colors duration-500" />
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                {[
                                    { label: "Battery", value: "98%", color: "text-green-400" },
                                    { label: "Hydraulics", value: "3200 PSI", color: "text-blue-400" },
                                    { label: "Motor Temp", value: "45°C", color: "text-white" },
                                    { label: "Latency", value: "12ms", color: "text-white" },
                                ].map((stat, i) => (
                                    <div key={i} className="bg-white/5 p-3 rounded border border-white/5">
                                        <div className="text-[10px] uppercase text-zinc-500 font-mono mb-1">{stat.label}</div>
                                        <div className={`text-lg font-bold font-mono ${stat.color}`}>{stat.value}</div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* ================= STATS STRIP ================= */}
            <section className="bg-[#4a00e0] text-white py-12 relative z-20 -mt-8 mx-6 rounded-lg shadow-2xl">
                <div className="max-w-7xl mx-auto px-8 grid grid-cols-2 md:grid-cols-4 gap-8">
                    {[
                        { val: "50k+", label: "Operating Hours" },
                        { val: "0.01mm", label: "Precision Accuracy" },
                        { val: "24/7", label: "Autonomous Uptime" },
                        { val: "ISO", label: "9001 Certified" },
                    ].map((s, i) => (
                        <div key={i} className="text-center md:text-left">
                            <div className="text-3xl md:text-4xl font-black mb-1">{s.val}</div>
                            <div className="text-xs uppercase tracking-widest font-medium text-blue-100">{s.label}</div>
                        </div>
                    ))}
                </div>
            </section>

            {/* ================= PRODUCT CATALOG (Cards) ================= */}
            <section className="py-32 px-6 relative z-10">
                <div className="max-w-7xl mx-auto">
                    <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                        <div>
                            <span className="text-blue-600 font-mono text-xs uppercase tracking-widest mb-2 block">Our Fleet</span>
                            <h2 className="text-4xl md:text-5xl font-bold text-zinc-900">Robotic Platforms</h2>
                        </div>
                        <button className="text-sm font-bold border-b-2 border-zinc-900 pb-1 hover:text-blue-600 hover:border-blue-600 transition-colors flex items-center gap-2">
                            View Full Catalog <ArrowRight className="w-4 h-4" />
                        </button>
                    </div>

                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        {MODELS.map((model, i) => (
                            <div key={model.id} className="group bg-white rounded-lg border border-zinc-200 overflow-hidden hover:shadow-2xl hover:border-blue-500/50 transition-all duration-500 flex flex-col h-full">

                                {/* Image Area */}
                                <div className="relative h-72 overflow-hidden bg-zinc-100">
                                    <div className="absolute top-4 left-4 z-10 flex gap-2">
                                        <span className="px-2 py-1 bg-black text-white text-[10px] font-bold uppercase tracking-wider rounded-sm">{model.status}</span>
                                        <span className="px-2 py-1 bg-white/90 text-zinc-900 text-[10px] font-bold uppercase tracking-wider rounded-sm font-mono">{model.id}</span>
                                    </div>
                                    <img
                                        src={model.image}
                                        alt={model.name}
                                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 filter grayscale group-hover:grayscale-0"
                                    />
                                    {/* Overlay Scan Effect */}
                                    <div className="absolute inset-0 bg-liner-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end p-6">
                                        <button className="w-full py-3 bg-white text-black font-bold uppercase text-xs tracking-widest hover:bg-blue-600 hover:text-white transition-colors">
                                            Configure Unit
                                        </button>
                                    </div>
                                </div>

                                {/* Info Area */}
                                <div className="p-8 flex-1 flex flex-col">
                                    <div className="mb-6">
                                        <h3 className="text-2xl font-bold text-zinc-900 mb-2">{model.name}</h3>
                                        <p className="text-sm text-zinc-500 font-mono uppercase">{model.tagline}</p>
                                    </div>

                                    <div className="space-y-3 mt-auto">
                                        {model.specs.map((spec, j) => (
                                            <div key={j} className="flex justify-between items-center text-sm border-b border-zinc-100 pb-2">
                                                <span className="text-zinc-500">{spec.label}</span>
                                                <span className="font-bold text-zinc-900 font-mono">{spec.value}</span>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= TECH SCHEMATIC (Dark) ================= */}
            <section className="py-32 bg-zinc-900 text-white relative overflow-hidden">
                {/* Background Grid */}
                <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-size:20px_20px]"></div>

                <div className="max-w-7xl mx-auto px-6 relative z-10">
                    <div className="flex flex-col md:flex-row gap-16">

                        {/* Left Content */}
                        <div className="md:w-1/2">
                            <div className="inline-flex items-center gap-2 text-blue-500 font-mono text-xs uppercase tracking-widest mb-6">
                                <Cpu className="w-4 h-4" /> Core Architecture
                            </div>
                            <h2 className="text-4xl md:text-5xl font-bold mb-8">Proprietary <br /> Technology Stack</h2>
                            <p className="text-zinc-400 text-lg mb-12 leading-relaxed">
                                Our robots are built on a unified hardware-software architecture, enabling seamless over-the-air updates, swarm intelligence, and millisecond-latency control.
                            </p>

                            <div className="space-y-8">
                                {[
                                    { icon: Zap, title: "Solid State Power", desc: "Next-gen battery density providing 48h+ continuous operation." },
                                    { icon: Eye, title: "Lidar Vision 4.0", desc: "360-degree spatial awareness with sub-millimeter depth perception." },
                                    { icon: Wifi, title: "Swarm Link", desc: "Mesh networking allows units to share mapping data in real-time." }
                                ].map((item, i) => (
                                    <div key={i} className="flex gap-6 group">
                                        <div className="w-12 h-12 bg-white/5 border border-white/10 rounded-lg flex items-center justify-center text-blue-500 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300">
                                            <item.icon className="w-6 h-6" />
                                        </div>
                                        <div>
                                            <h3 className="text-xl font-bold mb-2">{item.title}</h3>
                                            <p className="text-sm text-zinc-500 group-hover:text-zinc-300 transition-colors">{item.desc}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* Right Content: Schematic Visual */}
                        <div className="md:w-1/2 relative">
                            <div className="absolute inset-0 bg-blue-500/20 blur-[100px] rounded-full"></div>
                            <div className="relative h-full bg-black/50 border border-white/10 rounded-xl p-8 backdrop-blur-md">
                                <div className="flex justify-between items-center border-b border-white/10 pb-4 mb-8">
                                    <span className="text-xs font-mono text-zinc-500">SYSTEM_OVERVIEW</span>
                                    <Settings className="w-4 h-4 text-zinc-500 animate-spin-slow" />
                                </div>

                                {/* Animated schematic lines would go here - simplified for code */}
                                <div className="space-y-6">
                                    <div className="h-2 w-full bg-zinc-800 rounded-full overflow-hidden">
                                        <div className="h-full bg-blue-500 w-[75%] animate-pulse"></div>
                                    </div>
                                    <div className="grid grid-cols-2 gap-4">
                                        <div className="h-24 bg-white/5 rounded border border-white/5 p-4 flex flex-col justify-between">
                                            <Cpu className="w-6 h-6 text-zinc-400" />
                                            <span className="text-xs font-mono text-blue-400">PROCESSING</span>
                                        </div>
                                        <div className="h-24 bg-white/5 rounded border border-white/5 p-4 flex flex-col justify-between">
                                            <Wifi className="w-6 h-6 text-zinc-400" />
                                            <span className="text-xs font-mono text-green-400">CONNECTED</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            {/* ================= SECTORS (Hover Reveal) ================= */}
            <section className="py-32 px-6 bg-zinc-50">
                <div className="max-w-7xl mx-auto">
                    <div className="text-center mb-20">
                        <h2 className="text-4xl font-bold text-zinc-900 mb-4">Operational Sectors</h2>
                        <p className="text-zinc-500">Where our machines go to work.</p>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {SECTORS.map((sector, i) => (
                            <div key={i} className="group relative h-[300px] overflow-hidden rounded-lg cursor-pointer">
                                <img
                                    src={sector.image}
                                    alt={sector.title}
                                    className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                                />
                                <div className="absolute inset-0 bg-black/60 group-hover:bg-black/40 transition-colors duration-500"></div>

                                <div className="absolute inset-0 p-8 flex flex-col justify-end">
                                    <div className="transform translate-y-4 group-hover:translate-y-0 transition-transform duration-500">
                                        <h3 className="text-2xl font-bold text-white mb-2">{sector.title}</h3>
                                        <p className="text-zinc-300 text-sm max-w-md opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
                                            {sector.desc}
                                        </p>
                                    </div>
                                </div>

                                <div className="absolute top-6 right-6 w-10 h-10 bg-white/10 backdrop-blur rounded-full flex items-center justify-center text-white border border-white/20 opacity-0 group-hover:opacity-100 transition-all duration-300">
                                    <ArrowRight className="w-5 h-5" />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ================= FINAL CTA ================= */}
            <section className="py-24 bg-white border-t border-zinc-200">
                <div className="max-w-4xl mx-auto px-6 text-center">
                    <h2 className="text-5xl font-bold text-zinc-900 mb-8 tracking-tight">Ready to Deploy?</h2>
                    <p className="text-xl text-zinc-500 mb-12 max-w-2xl mx-auto">
                        Schedule a consultation with our engineering team to discuss your automation requirements.
                    </p>

                    <div className="flex flex-col sm:flex-row justify-center gap-4">
                        <button className="h-16 px-12 bg-zinc-900 text-white font-bold text-lg uppercase tracking-wide rounded-sm hover:bg-blue-600 transition-colors shadow-2xl">
                            Configure Solution
                        </button>
                        <button className="h-16 px-12 bg-white border-2 border-zinc-200 text-zinc-900 font-bold text-lg uppercase tracking-wide rounded-sm hover:border-zinc-900 transition-colors">
                            Download Specs
                        </button>
                    </div>
                </div>
            </section>

        </div>
    );
}

// Helper component for Icons
function Eye({ className }: { className?: string }) {
    return (
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" /><circle cx="12" cy="12" r="3" /></svg>
    )
}