"use client";

import React, { useState, useEffect } from 'react';
import {
    Menu, Search, User, CheckCircle, Upload,
    Send, ChevronRight, BookOpen,
    GraduationCap, Globe, Share2, Mail,
    Cpu, Microscope, ShieldCheck, Atom,
    FileText, Link as LinkIcon, Download,
    Beaker, Network, Home // Added Home icon import
} from 'lucide-react';

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

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



const RESEARCH_DOMAINS = [
    { name: "Neural Architectures", icon: <Cpu className="w-5 h-5" />, desc: "Next-gen AI models & cognitive computing." },
    { name: "Quantum Info Science", icon: <Atom className="w-5 h-5" />, desc: "Post-quantum cryptography & qubit stability." },
    { name: "Synthetic Forensics", icon: <ShieldCheck className="w-5 h-5" />, desc: "Detection of deepfakes & generative media." },
    { name: "Bio-Informatics", icon: <Microscope className="w-5 h-5" />, desc: "Computational biology & genomic sequencing." },
    { name: "Adv. Network Protocols", icon: <Network className="w-5 h-5" />, desc: "6G infrastructure & decentralized web." },
    { name: "Sustainable Energy", icon: <Beaker className="w-5 h-5" />, desc: "Carbon capture & smart grid algorithms." }
];

export default function ResearchFellowshipPage() {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const [captchaAnswer, setCaptchaAnswer] = useState('');
    const [fileName, setFileName] = useState('Proposal (PDF)');

    const [captcha, setCaptcha] = useState({ num1: 0, num2: 0 });

    useEffect(() => {
        setCaptcha({
            num1: Math.floor(Math.random() * 10),
            num2: Math.floor(Math.random() * 10)
        });
    }, []);

    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files.length > 0) {
            setFileName(e.target.files[0].name);
        }
    };

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

        .font-serif { font-family: var(--font-serif); }
        .font-mono { font-family: var(--font-mono); }
        
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #09090b; }
        ::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #52525b; }

        .glass-panel {
          background: rgba(24, 24, 27, 0.6);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .glass-input {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          transition: all 0.3s ease;
        }
        .glass-input:focus {
          background: rgba(255, 255, 255, 0.05);
          border-color: #f59e0b;
          box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
        }
      `}</style>
            <main>
                {/* Hero Section */}
                <section className="relative min-h-[50vh] flex items-center border-b border-white/5 overflow-hidden">
                    <div className="absolute inset-0 bg-black">
                        <div className="absolute top-1/2 left-1/2 w-[600px] h-[600px] bg-amber-600/5 rounded-full blur-[100px] -translate-x-1/2 -translate-y-1/2"></div>
                        <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
                    </div>

                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 relative z-10 w-full">
                        <div className="max-w-4xl">
                            <div className="inline-flex items-center gap-3 px-3 py-1 rounded-full border border-zinc-800 bg-black/50 mb-8 backdrop-blur-sm">
                                <span className="text-zinc-400 font-mono text-[10px] tracking-[0.2em] uppercase">Applications Open: Cohort 2025-26</span>
                            </div>

                            <h1 className="text-5xl md:text-7xl font-serif font-medium text-white mb-8 leading-[1.1]">
                                Distinguished <br />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-amber-500 to-amber-700">Research Fellowship.</span>
                            </h1>

                            <p className="text-xl text-zinc-400 font-light leading-relaxed max-w-2xl">
                                A premier 24-month program for doctoral and post-doctoral researchers to define the edge of technology. Funded by WIMRAW Global Intelligence.
                            </p>
                        </div>
                    </div>
                </section>

                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
                    <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">

                        {/* LEFT COLUMN: Fellowship Details */}
                        <div className="lg:col-span-7 space-y-20">

                            {/* Introduction */}
                            <section>
                                <div className="glass-panel p-8 rounded-2xl border-l-4 border-l-amber-500">
                                    <h3 className="text-2xl font-serif text-white mb-4">The Mandate</h3>
                                    <p className="text-zinc-400 text-lg font-light leading-relaxed">
                                        The WIMRAW Research Fellowship aims to support visionary scholars tackling humanity's most complex computational and analytical challenges. Fellows receive full autonomy, lab access, and substantial funding to pursue high-risk, high-reward research.
                                    </p>
                                </div>
                            </section>

                            {/* Research Domains */}
                            <section>
                                <h3 className="text-xl font-serif text-white flex items-center gap-3 mb-8">
                                    <BookOpen className="text-amber-500 w-5 h-5" />
                                    Priority Domains
                                </h3>

                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                    {RESEARCH_DOMAINS.map((domain, idx) => (
                                        <div key={idx} className="group glass-panel p-6 rounded-xl hover:bg-white/5 transition-all duration-300 border border-white/5 hover:border-amber-500/30">
                                            <div className="flex items-start gap-4">
                                                <div className="w-10 h-10 rounded-lg bg-zinc-900 flex items-center justify-center text-zinc-500 group-hover:text-amber-500 transition-colors border border-white/5">
                                                    {domain.icon}
                                                </div>
                                                <div>
                                                    <h4 className="text-sm font-bold text-white mb-1 group-hover:text-amber-500 transition-colors">{domain.name}</h4>
                                                    <p className="text-xs text-zinc-500 leading-relaxed">{domain.desc}</p>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </section>

                            {/* Grant & Eligibility */}
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div className="glass-panel p-8 rounded-2xl">
                                    <h3 className="text-lg font-serif text-white mb-6 flex items-center gap-2">
                                        <CheckCircle className="text-emerald-500 w-5 h-5" />
                                        Fellowship Benefits
                                    </h3>
                                    <ul className="space-y-4 text-sm text-zinc-400">
                                        <li className="flex items-start gap-3">
                                            <span className="w-1.5 h-1.5 bg-amber-500 rounded-full mt-1.5"></span>
                                            <span><strong>$4,000 USD</strong> monthly stipend.</span>
                                        </li>
                                        <li className="flex items-start gap-3">
                                            <span className="w-1.5 h-1.5 bg-amber-500 rounded-full mt-1.5"></span>
                                            <span><strong>$10,000 USD</strong> annual innovation grant.</span>
                                        </li>
                                        <li className="flex items-start gap-3">
                                            <span className="w-1.5 h-1.5 bg-amber-500 rounded-full mt-1.5"></span>
                                            <span>Access to WIMRAW Supercomputing Cluster (Tier-1).</span>
                                        </li>
                                        <li className="flex items-start gap-3">
                                            <span className="w-1.5 h-1.5 bg-amber-500 rounded-full mt-1.5"></span>
                                            <span>Global conference travel allowance.</span>
                                        </li>
                                    </ul>
                                </div>

                                <div className="glass-panel p-8 rounded-2xl">
                                    <h3 className="text-lg font-serif text-white mb-6 flex items-center gap-2">
                                        <GraduationCap className="text-zinc-500 w-5 h-5" />
                                        Candidate Profile
                                    </h3>
                                    <ul className="space-y-4 text-sm text-zinc-400">
                                        <li className="flex items-start gap-3">
                                            <span className="w-1.5 h-1.5 bg-zinc-600 rounded-full mt-1.5"></span>
                                            <span>PhD or equivalent research experience (3+ years).</span>
                                        </li>
                                        <li className="flex items-start gap-3">
                                            <span className="w-1.5 h-1.5 bg-zinc-600 rounded-full mt-1.5"></span>
                                            <span>Demonstrated publication record in Q1 journals.</span>
                                        </li>
                                        <li className="flex items-start gap-3">
                                            <span className="w-1.5 h-1.5 bg-zinc-600 rounded-full mt-1.5"></span>
                                            <span>Strong proposal aligned with WIMRAW domains.</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div className="flex items-center gap-4 p-6 bg-zinc-900/50 border border-zinc-800 rounded-xl">
                                <Download className="text-amber-500 w-6 h-6" />
                                <div>
                                    <h4 className="text-sm font-bold text-white">Fellowship Brochure 2025</h4>
                                    <p className="text-xs text-zinc-500">Detailed breakdown of IP rights, tenure, and deliverables.</p>
                                </div>
                                <button className="ml-auto text-xs font-mono uppercase border-b border-zinc-600 hover:text-white hover:border-white transition-colors">Download PDF</button>
                            </div>

                        </div>

                        {/* RIGHT COLUMN: Proposal Submission */}
                        <div className="lg:col-span-5 relative" id="apply">
                            <div className="glass-panel rounded-2xl p-8 sticky top-24 shadow-2xl relative border-t-4 border-t-amber-500">
                                <div className="mb-8">
                                    <h3 className="text-3xl font-serif text-white mb-2">Submit Proposal</h3>
                                    <p className="text-zinc-500 text-xs font-mono uppercase tracking-wide">Encrypted Channel // WIM-RES-GTW</p>
                                </div>

                                <form className="space-y-5">

                                    {/* Name & Title */}
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div className="space-y-1.5">
                                            <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Title</label>
                                            <select className="w-full glass-input rounded-lg text-zinc-300 px-3 py-3 text-sm focus:outline-none appearance-none cursor-pointer">
                                                <option>Dr.</option>
                                                <option>Mr.</option>
                                                <option>Ms.</option>
                                                <option>Prof.</option>
                                            </select>
                                        </div>
                                        <div className="space-y-1.5">
                                            <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Full Name</label>
                                            <input
                                                type="text"
                                                className="w-full glass-input rounded-lg text-white px-4 py-3 text-sm placeholder:text-zinc-700 focus:outline-none"
                                                placeholder="Name"
                                            />
                                        </div>
                                    </div>

                                    {/* Academic Affiliation */}
                                    <div className="space-y-1.5">
                                        <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Current Affiliation</label>
                                        <input
                                            type="text"
                                            className="w-full glass-input rounded-lg text-white px-4 py-3 text-sm placeholder:text-zinc-700 focus:outline-none"
                                            placeholder="University / Institute / Organization"
                                        />
                                    </div>

                                    {/* Contact Info */}
                                    <div className="space-y-1.5">
                                        <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Email Address</label>
                                        <input
                                            type="email"
                                            className="w-full glass-input rounded-lg text-white px-4 py-3 text-sm placeholder:text-zinc-700 focus:outline-none"
                                            placeholder="institutional@email.edu"
                                        />
                                    </div>

                                    {/* Publications */}
                                    <div className="space-y-1.5">
                                        <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Research Profile</label>
                                        <div className="relative">
                                            <LinkIcon className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-600 w-4 h-4" />
                                            <input
                                                type="url"
                                                className="w-full glass-input rounded-lg text-white pl-10 pr-4 py-3 text-sm placeholder:text-zinc-700 focus:outline-none"
                                                placeholder="Google Scholar / ResearchGate URL"
                                            />
                                        </div>
                                    </div>

                                    {/* Domain Selection */}
                                    <div className="space-y-1.5">
                                        <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Target Domain</label>
                                        <div className="relative">
                                            <select className="w-full glass-input rounded-lg text-zinc-300 px-4 py-3 text-sm focus:outline-none appearance-none cursor-pointer hover:bg-white/5">
                                                <option value="" className="bg-zinc-900">Select Research Area</option>
                                                {RESEARCH_DOMAINS.map(d => (
                                                    <option key={d.name} value={d.name} className="bg-zinc-900">{d.name}</option>
                                                ))}
                                            </select>
                                            <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-500">
                                                <ChevronRight size={14} className="rotate-90" />
                                            </div>
                                        </div>
                                    </div>

                                    {/* Abstract */}
                                    <div className="space-y-1.5">
                                        <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Proposal Abstract (300 Words)</label>
                                        <textarea
                                            rows={4}
                                            className="w-full glass-input rounded-lg text-white px-4 py-3 text-sm placeholder:text-zinc-700 focus:outline-none resize-none"
                                            placeholder="Summarize your research hypothesis and methodology..."
                                        ></textarea>
                                    </div>

                                    {/* File Upload */}
                                    <div className="space-y-1.5">
                                        <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Detailed Proposal + CV</label>
                                        <label className="flex items-center justify-between w-full glass-input rounded-lg px-4 py-3 cursor-pointer group hover:bg-white/5 transition-colors border-dashed">
                                            <div className="flex items-center gap-3">
                                                <div className="w-8 h-8 rounded bg-zinc-800 flex items-center justify-center text-zinc-400 group-hover:text-amber-500 transition-colors">
                                                    <FileText size={14} />
                                                </div>
                                                <span className="text-sm text-zinc-400 group-hover:text-zinc-200 transition-colors truncate max-w-[140px]">{fileName}</span>
                                            </div>
                                            <span className="text-[10px] text-zinc-600 font-mono bg-zinc-900 px-2 py-1 rounded">PDF ONLY</span>
                                            <input type="file" className="hidden" onChange={handleFileChange} accept=".pdf" />
                                        </label>
                                    </div>

                                    {/* Captcha */}
                                    <div className="pt-2 flex items-center justify-between bg-white/5 rounded-lg p-3 border border-white/5">
                                        <span className="text-xs font-mono text-zinc-400 pl-2">
                                            Verify: <span className="text-white font-bold">{captcha.num1} + {captcha.num2} = ?</span>
                                        </span>
                                        <input
                                            type="text"
                                            value={captchaAnswer}
                                            onChange={(e) => setCaptchaAnswer(e.target.value)}
                                            className="w-16 bg-black border border-zinc-700 text-white px-2 py-1 text-sm text-center rounded focus:outline-none focus:border-amber-500"
                                        />
                                    </div>

                                    {/* Actions */}
                                    <div className="pt-4">
                                        <button type="button" className="w-full bg-amber-500 hover:bg-amber-400 text-black font-bold py-4 text-xs uppercase tracking-[0.2em] transition-all flex items-center justify-center gap-3 rounded-lg shadow-[0_0_20px_rgba(245,158,11,0.2)] hover:shadow-[0_0_30px_rgba(245,158,11,0.4)]">
                                            Submit for Peer Review <Send size={14} />
                                        </button>
                                        <p className="text-center text-[10px] text-zinc-600 mt-4 font-mono">
                                            All submissions are encrypted. IP remains with the author until grant ratification.
                                        </p>
                                    </div>

                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </main>

        </div>
    );
}