"use client";

import React, { useState } from 'react';
import {
    Menu, Search, ArrowRight, Globe, Share2, Mail,
    Briefcase, Users, Zap, TrendingUp, Shield,
    Cpu, Award, Coffee, Home, ChevronRight,
    PlayCircle, Layers, Target, MapPin, MoveRight,
    Code, Terminal, ExternalLink
} from 'lucide-react';

// --- Types ---
interface NavLink {
    name: string;
    active: boolean;
    href?: string;
}

// --- Mock Data ---
const NAV_LINKS: NavLink[] = [
    { name: "Work @ WIMRAW", active: true },
    { name: "Global Openings", active: false },
    { name: "Apprenticeship (NATS)", active: false },
    { name: "Research Fellowship", active: false },
    { name: "Labs & Infrastructure", active: false },
];

const DEPARTMENTS = [
    {
        id: 1,
        title: "Engineering & Tech",
        count: "42 OPEN ROLES",
        desc: "Build the sovereign cloud infrastructure and neural networks that power global intelligence.",
        icon: <Cpu className="w-8 h-8" />,
        tags: ["AI", "Cloud", "Quantum"]
    },
    {
        id: 2,
        title: "Media & Forensics",
        count: "18 OPEN ROLES",
        desc: "Decode narratives and detect synthetic media using proprietary deep-learning tools.",
        icon: <Layers className="w-8 h-8" />,
        tags: ["NLP", "Vision", "Design"]
    },
    {
        id: 3,
        title: "Global Operations",
        count: "12 OPEN ROLES",
        desc: "Finance, Legal, and HR teams that keep our 40-country network synchronized.",
        icon: <Globe className="w-8 h-8" />,
        tags: ["Legal", "Finance", "HR"]
    },
    {
        id: 4,
        title: "Cyber Intelligence",
        count: "25 OPEN ROLES",
        desc: "Offensive and defensive security operations protecting critical information assets.",
        icon: <Shield className="w-8 h-8" />,
        tags: ["SecOps", "Red Team", "Intel"]
    }
];

const STATS = [
    { label: "Global Workforce", value: "12,500+" },
    { label: "Nations Served", value: "40" },
    { label: "Active Patents", value: "850+" },
    { label: "Retention Rate", value: "94%" },
];

export default function WorkAtWimrawPage() {
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    return (
        <div className="min-h-screen bg-white text-zinc-900 font-sans selection:bg-black selection:text-white overflow-x-hidden">
            {/* Styles */}
            <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
        
        :root {
          --font-display: 'Space Grotesk', sans-serif;
          --font-body: 'Inter', sans-serif;
          --font-mono: 'JetBrains Mono', monospace;
        }

        h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
        body { font-family: var(--font-body); }
        .font-mono { font-family: var(--font-mono); }
        
        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: #ffffff; }
        ::-webkit-scrollbar-thumb { background: #000000; }

        .marquee-container {
          overflow: hidden;
          white-space: nowrap;
        }
        
        .marquee-content {
          display: inline-block;
          animation: marquee 30s linear infinite;
        }
        
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }

        .hover-invert {
          transition: all 0.3s ease;
        }
        .hover-invert:hover {
          background-color: black;
          color: white;
        }
        .hover-invert:hover svg {
          stroke: white;
        }
      `}</style>

            <main>
                {/* Brutalist Hero */}
                <section className="relative pt-20 pb-20 md:pt-32 md:pb-32 border-b border-black">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
                            <div className="lg:col-span-8">
                                <h1 className="text-7xl md:text-9xl font-medium tracking-tighter leading-[0.85] mb-8">
                                    WORK<br />
                                    <span className="text-zinc-400">FOR THE</span><br />
                                    FUTURE.
                                </h1>
                                <p className="text-xl md:text-2xl font-light text-zinc-600 max-w-2xl leading-relaxed mb-12">
                                    We are a clandestine collective of 12,500+ researchers defining the sovereign technology stack for the next century.
                                </p>
                                <div className="flex flex-col sm:flex-row gap-4">
                                    <button className="px-8 py-4 bg-black text-white text-sm font-mono uppercase tracking-widest hover:bg-zinc-800 transition-colors flex items-center justify-center gap-2">
                                        View Open Positions <ArrowRight size={16} />
                                    </button>
                                    <button className="px-8 py-4 border border-black text-black text-sm font-mono uppercase tracking-widest hover:bg-zinc-100 transition-colors">
                                        The WIMRAW Culture
                                    </button>
                                </div>
                            </div>
                            <div className="lg:col-span-4 flex flex-col justify-end">
                                <div className="border-t border-black pt-6">
                                    <span className="font-mono text-xs text-zinc-500 uppercase block mb-2">Current Focus</span>
                                    <div className="flex flex-wrap gap-2">
                                        {['Post-Quantum', 'Generative AI', '6G Networks', 'Synthetic Bio'].map(tag => (
                                            <span key={tag} className="px-3 py-1 bg-zinc-100 text-xs font-bold uppercase tracking-wider border border-zinc-200">
                                                {tag}
                                            </span>
                                        ))}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Stats Strip */}
                <section className="border-b border-black">
                    <div className="grid grid-cols-2 md:grid-cols-4">
                        {STATS.map((stat, i) => (
                            <div key={i} className={`p-8 md:p-12 border-b md:border-b-0 border-black ${i !== STATS.length - 1 ? 'md:border-r' : ''} hover:bg-zinc-50 transition-colors group`}>
                                <h3 className="text-4xl md:text-5xl font-medium mb-2 group-hover:translate-x-2 transition-transform">{stat.value}</h3>
                                <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">{stat.label}</p>
                            </div>
                        ))}
                    </div>
                </section>

                {/* Departments - Grid Layout */}
                <section className="bg-black text-white py-24">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
                            <div>
                                <h2 className="text-5xl md:text-6xl font-medium mb-6">Domains.</h2>
                                <p className="text-zinc-400 max-w-lg text-lg font-light">
                                    Where media analysis meets computational intelligence. Our structure is flat, fast, and focused on impact.
                                </p>
                            </div>
                            <a href="#" className="flex items-center gap-2 text-white font-mono text-xs uppercase tracking-widest hover:text-zinc-300 transition-colors border-b border-white pb-1">
                                View Org Chart <ExternalLink size={14} />
                            </a>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-zinc-800 border border-zinc-800">
                            {DEPARTMENTS.map((dept) => (
                                <div key={dept.id} className="bg-black p-8 md:p-12 hover:bg-zinc-900 transition-colors group relative overflow-hidden">
                                    <div className="absolute top-8 right-8 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <ArrowRight className="w-6 h-6 text-white" />
                                    </div>
                                    <div className="mb-8 text-white">
                                        {dept.icon}
                                    </div>
                                    <h3 className="text-2xl font-bold mb-4">{dept.title}</h3>
                                    <p className="text-zinc-400 leading-relaxed mb-8 min-h-[3rem]">{dept.desc}</p>

                                    <div className="flex flex-wrap gap-2 mb-8">
                                        {dept.tags.map(tag => (
                                            <span key={tag} className="px-2 py-1 border border-zinc-700 text-[10px] font-mono uppercase text-zinc-300">
                                                {tag}
                                            </span>
                                        ))}
                                    </div>

                                    <div className="inline-block border-b border-zinc-500 pb-1">
                                        <span className="font-mono text-xs text-white uppercase tracking-widest">{dept.count}</span>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </section>

                {/* Pathways Section */}
                <section className="py-24 border-b border-black">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
                            <div className="lg:col-span-5">
                                <span className="font-mono text-xs uppercase tracking-widest text-zinc-500 mb-4 block">Talent Pipelines</span>
                                <h2 className="text-5xl font-medium mb-8 leading-tight">Structured <br />Pathways.</h2>
                                <p className="text-lg text-zinc-600 mb-12">
                                    Specialized entry vectors for exceptional minds at different career stages.
                                </p>

                                <div className="space-y-6">
                                    <div className="group border border-black p-6 hover:bg-black hover:text-white transition-all cursor-pointer">
                                        <div className="flex justify-between items-start mb-4">
                                            <Award className="w-8 h-8" />
                                            <ArrowRight className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                                        </div>
                                        <h3 className="text-xl font-bold mb-2">Research Fellowship</h3>
                                        <p className="text-sm opacity-80 mb-4">For PhD/Post-Doc scholars. 24-month tenure.</p>
                                        <span className="font-mono text-xs uppercase underline">Learn More</span>
                                    </div>

                                    <div className="group border border-black p-6 hover:bg-black hover:text-white transition-all cursor-pointer">
                                        <div className="flex justify-between items-start mb-4">
                                            <Target className="w-8 h-8" />
                                            <ArrowRight className="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" />
                                        </div>
                                        <h3 className="text-xl font-bold mb-2">NATS Apprenticeship</h3>
                                        <p className="text-sm opacity-80 mb-4">Govt. sponsored training for fresh graduates.</p>
                                        <span className="font-mono text-xs uppercase underline">View Eligibility</span>
                                    </div>
                                </div>
                            </div>

                            <div className="lg:col-span-7 relative">
                                <div className="h-full bg-zinc-100 relative overflow-hidden">

                                    <div className="relative h-[520px] overflow-hidden">
                                        <img
                                            src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80"
                                            className="absolute inset-0 w-full h-full object-cover"
                                            alt="WIMRAW team"
                                        />
                                        <div className="absolute inset-0 bg-black/10"></div>
                                        <div className="absolute bottom-0 left-0 bg-white p-8 max-w-md border-t border-r border-black">
                                            <p className="font-mono text-xs uppercase mb-2 text-zinc-500">Featured Location</p>
                                            <h4 className="text-xl font-bold mb-2">WIMRAW Innovation Hub</h4>
                                            <p className="text-sm text-zinc-600 mb-4">Bangalore, India</p>
                                            <div className="flex gap-2">
                                                <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                                                <span className="text-xs font-bold uppercase">Hiring Active</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* Benefits List */}
                <section className="py-24 bg-zinc-50 border-b border-black">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
                            <div className="lg:col-span-4">
                                <h2 className="text-4xl font-medium mb-6">Benefits & <br />Perks.</h2>
                                <p className="text-zinc-600">Designed for longevity and holistic well-being.</p>
                            </div>
                            <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-10">
                                {[
                                    { title: "Sovereign Health", desc: "100% coverage at DMH Hospitals for family." },
                                    { title: "Wealth Creation", desc: "ESOPs and performance bonuses linked to IP." },
                                    { title: "Global Mobility", desc: "Rotation across 40+ country bureaus." },
                                    { title: "Research Grants", desc: "Internal funding for personal technical projects." },
                                    { title: "Learning", desc: "Unlimited access to WIMRAW Academy." },
                                    { title: "Remote-First", desc: "Flexible options for non-sensitive roles." }
                                ].map((item, i) => (
                                    <div key={i} className="flex gap-4 items-start">
                                        <div className="w-1.5 h-1.5 bg-black mt-2 shrink-0"></div>
                                        <div>
                                            <h4 className="text-lg font-bold mb-1">{item.title}</h4>
                                            <p className="text-sm text-zinc-600">{item.desc}</p>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </section>

                {/* Large CTA */}
                <section className="py-32 bg-white">
                    <div className="max-w-5xl mx-auto px-4 text-center">
                        <h2 className="text-6xl md:text-8xl font-medium tracking-tighter mb-12">
                            READY TO <br /> <span className="text-zinc-400">DEPLOY?</span>
                        </h2>
                        <div className="flex flex-col sm:flex-row items-center justify-center gap-6">
                            <button className="w-full sm:w-auto px-12 py-5 bg-black text-white text-sm font-mono uppercase tracking-widest hover:bg-zinc-800 transition-all flex items-center justify-center gap-3">
                                Explore Open Roles <ArrowRight size={16} />
                            </button>
                            <button className="w-full sm:w-auto px-12 py-5 border border-black text-black text-sm font-mono uppercase tracking-widest hover:bg-zinc-50 transition-all">
                                Join Talent Network
                            </button>
                        </div>
                    </div>
                </section>
            </main>

        </div>
    );
}