"use client";

import React, { useState, useEffect } from 'react';
import {
  Menu, Search, User, CheckCircle, Upload,
  RefreshCw, Send, ChevronRight, BookOpen,
  GraduationCap, ClipboardCheck, Briefcase,
  Globe, Share2, Mail, Cpu, Layers, Activity,
  Zap, Database, PenTool, ArrowUpRight
} 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: true },
  { name: "Research Internships", active: false },
  { name: "Life at WIMRAW", active: false },
];

const BRANCHES = [
  { name: "Civil Engineering", icon: <Layers className="w-5 h-5" /> },
  { name: "Computer Science", icon: <Cpu className="w-5 h-5" /> },
  { name: "Electronics & Comm.", icon: <Activity className="w-5 h-5" /> },
  { name: "Electrical & Electronics", icon: <Zap className="w-5 h-5" /> },
  { name: "Information Tech", icon: <Database className="w-5 h-5" /> },
  { name: "Mechanical Engg.", icon: <PenTool className="w-5 h-5" /> }
];

export default function ApprenticeshipPage() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [captchaAnswer, setCaptchaAnswer] = useState('');
  const [fileName, setFileName] = useState('No file chosen');

  // Fix: Initialize with 0 to match server/client, then randomize on client mount
  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); }
        
        /* Modern Scrollbar */
        ::-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>
        {/* Modern Hero Section */}
        <section className="relative min-h-[60vh] flex items-center border-b border-white/5 overflow-hidden">
          {/* Background Elements */}
          <div className="absolute inset-0 bg-black">
            <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-amber-600/10 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/2"></div>
            <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-blue-900/10 rounded-full blur-[120px] translate-y-1/2 -translate-x-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-amber-500/20 bg-amber-500/5 mb-8 backdrop-blur-sm">
                <span className="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse"></span>
                <span className="text-amber-500 font-mono text-[10px] tracking-[0.2em] uppercase">Govt. of India Sponsored • NATS 2025</span>
              </div>

              <h1 className="text-5xl md:text-7xl font-serif font-medium text-white mb-8 leading-[1.1]">
                Bridging Theory <br />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-zinc-200 via-zinc-400 to-zinc-600">with Innovation.</span>
              </h1>

              <p className="text-xl text-zinc-400 font-light leading-relaxed max-w-2xl">
                Join the National Apprenticeship Training Scheme at WIMRAW. A one-year transformative journey bridging academic concepts with industrial reality.
              </p>

              <div className="mt-10 flex gap-4">
                <a href="#apply" className="px-8 py-4 bg-white text-black font-semibold text-sm tracking-widest uppercase hover:bg-amber-500 transition-colors">
                  Start Application
                </a>
                <button className="px-8 py-4 border border-white/20 text-white font-semibold text-sm tracking-widest uppercase hover:bg-white/5 transition-colors">
                  Download Brochure
                </button>
              </div>
            </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: Info */}
            <div className="lg:col-span-7 space-y-20">

              {/* Introduction */}
              <section>
                <h3 className="text-2xl font-serif text-white mb-6">Program Overview</h3>
                <div className="space-y-6 text-lg font-light text-zinc-400 leading-relaxed">
                  <p>
                    The <strong className="text-white">National Apprenticeship Training Scheme (NATS)</strong> is a flagship program aiming to skill fresh graduates and diploma holders. At WIMRAW, we elevate this mandate by integrating it with our cutting-edge research ecosystems.
                  </p>
                  <p>
                    This one-year program combines rigorous classroom theory with hands-on practical training, governed strictly by the Apprenticeship Act 1961.
                  </p>
                </div>
              </section>

              {/* Disciplines Grid */}
              <section>
                <div className="flex items-end justify-between mb-8">
                  <h3 className="text-xl font-serif text-white flex items-center gap-3">
                    <BookOpen className="text-amber-500 w-5 h-5" />
                    Engineering Disciplines
                  </h3>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {BRANCHES.map((branch, idx) => (
                    <div key={idx} className="group glass-panel p-5 rounded-xl hover:bg-white/5 transition-all duration-300 border border-white/5 hover:border-amber-500/30 cursor-default">
                      <div className="flex items-center gap-4">
                        <div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-zinc-400 group-hover:text-amber-500 group-hover:scale-110 transition-all">
                          {branch.icon}
                        </div>
                        <div>
                          <h4 className="text-sm font-medium text-zinc-200 group-hover:text-white transition-colors">{branch.name}</h4>
                          <span className="text-[10px] text-zinc-600 font-mono uppercase tracking-wider group-hover:text-zinc-500">Engg. & Tech</span>
                        </div>
                      </div>
                    </div>
                  ))}

                  {/* Vocational Card */}
                  <div className="sm:col-span-2 group glass-panel p-5 rounded-xl hover:bg-white/5 transition-all duration-300 border border-dashed border-zinc-700 hover:border-amber-500/30">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <div className="w-10 h-10 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-500">
                          <GraduationCap className="w-5 h-5" />
                        </div>
                        <div>
                          <h4 className="text-sm font-medium text-white">Vocational Stream</h4>
                          <span className="text-[10px] text-zinc-500 font-mono uppercase tracking-wider">+2 Pass Out Candidates</span>
                        </div>
                      </div>
                      <ArrowUpRight className="w-4 h-4 text-zinc-600 group-hover:text-amber-500 transition-colors" />
                    </div>
                  </div>
                </div>
              </section>

              {/* Eligibility & Selection Cards */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="glass-panel p-8 rounded-2xl border-t-4 border-t-zinc-700 hover:border-t-amber-500 transition-colors">
                  <h3 className="text-lg font-serif text-white mb-4 flex items-center gap-2">
                    <ClipboardCheck className="text-zinc-500 w-5 h-5" />
                    Eligibility
                  </h3>
                  <p className="text-zinc-400 text-sm leading-relaxed mb-4">
                    Graduates/Diploma holders in listed branches. Must maintain a consistent academic record.
                  </p>
                  <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/5 rounded-full text-xs font-mono text-zinc-300">
                    <CheckCircle size={12} className="text-emerald-500" /> Min 60% in SSC+
                  </div>
                </div>

                <div className="glass-panel p-8 rounded-2xl border-t-4 border-t-zinc-700 hover:border-t-amber-500 transition-colors">
                  <h3 className="text-lg font-serif text-white mb-4 flex items-center gap-2">
                    <User className="text-zinc-500 w-5 h-5" />
                    Selection Process
                  </h3>
                  <p className="text-zinc-400 text-sm leading-relaxed mb-4">
                    rigorous two-stage filtering process designed to identify aptitude and attitude.
                  </p>
                  <div className="flex items-center gap-2 text-xs font-mono text-zinc-500">
                    <span className="text-white">Written Test</span>
                    <ChevronRight size={12} />
                    <span className="text-white">Interview</span>
                    <ChevronRight size={12} />
                    <span className="text-amber-500">Offer</span>
                  </div>
                </div>
              </div>

            </div>

            {/* RIGHT COLUMN: Application Form */}
            <div className="lg:col-span-5 relative" id="apply">
              {/* Decorative Glow */}
              <div className="absolute inset-0 bg-amber-500/5 blur-[60px] rounded-full pointer-events-none"></div>

              <div className="glass-panel rounded-2xl p-8 sticky top-24 shadow-2xl relative">
                <div className="mb-8">
                  <h3 className="text-3xl font-serif text-white mb-2">Apply Now</h3>
                  <p className="text-zinc-500 text-xs font-mono uppercase tracking-wide">Secure Gateway // WIM-NATS-25</p>
                </div>

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

                  {/* Full Name */}
                  <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="As per Aadhaar / PAN"
                    />
                  </div>

                  {/* Contact Info */}
                  <div className="grid 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">Mobile</label>
                      <input
                        type="tel"
                        className="w-full glass-input rounded-lg text-white px-4 py-3 text-sm placeholder:text-zinc-700 focus:outline-none"
                        placeholder="+91"
                      />
                    </div>
                    <div className="space-y-1.5">
                      <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Email</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="@"
                      />
                    </div>
                  </div>

                  {/* Branch Selection */}
                  <div className="space-y-1.5">
                    <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Discipline</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 Stream</option>
                        {BRANCHES.map(branch => (
                          <option key={branch.name} value={branch.name} className="bg-zinc-900">{branch.name}</option>
                        ))}
                        <option value="vocational" className="bg-zinc-900">+2 Vocational</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>

                  {/* Message */}
                  <div className="space-y-1.5">
                    <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Statement of Purpose</label>
                    <textarea
                      rows={3}
                      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="Briefly describe your motivation..."
                    ></textarea>
                  </div>

                  {/* Modern File Upload */}
                  <div className="space-y-1.5">
                    <label className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1">Resume</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">
                          <Upload 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/DOC</span>
                      <input type="file" className="hidden" onChange={handleFileChange} accept=".pdf,.doc,.docx" />
                    </label>
                  </div>

                  {/* Visual 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-white hover:bg-zinc-200 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(255,255,255,0.1)] hover:shadow-[0_0_30px_rgba(255,255,255,0.2)]">
                      Submit Application <Send size={14} />
                    </button>
                    <p className="text-center text-[10px] text-zinc-600 mt-4 font-mono">
                      By submitting, you agree to our NATS Privacy Policy.
                    </p>
                  </div>

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

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


    </div>
  );
}