'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import {
  ShieldCheck,
  Users,
  CheckCircle2,
  Lock,
  Phone,
  ArrowRight,
  Globe,
  Radio,
  FileCheck2,
  Play,
  HelpCircle,
  Eye,
  Building2,
  Building,
  MapPin,
  Compass,
  UserCheck,
  Sparkles,
  ChevronRight,
  X,
  Laptop,
  KeyRound,
  Wrench,
  Cpu,
  BarChart3,
  Award,
  TrendingUp
} from 'lucide-react';

type RoleKey =
  | 'LGA_SUPERVISOR'
  | 'RA_SUPERVISOR'
  | 'REGIONAL_COORDINATOR'
  | 'STATE_COORDINATOR'
  | 'POLLING_UNIT_AGENT'
  | 'NATIONAL_ADMINISTRATOR'
  | 'IT_TECHNICIAN';

interface RoleOption {
  key: RoleKey;
  title: string;
  badge: string;
  description: string;
  iconBg: string;
  iconColor: string;
  icon: any;
  defaultId: string;
  defaultRoleName: string;
  targetRoute: string;
}

const ROLE_OPTIONS: RoleOption[] = [
  {
    key: 'LGA_SUPERVISOR',
    title: 'LGA Supervisor',
    badge: 'LGA Level',
    description: 'Monitor LGA collation centers, manage ward officers and track Form EC8B/EC8C.',
    iconBg: 'bg-indigo-600 text-white',
    iconColor: 'text-indigo-600',
    icon: Building,
    defaultId: 'LGA-24-11',
    defaultRoleName: 'LGA Supervisor • Ikeja LGA Collation Center',
    targetRoute: '/dashboard',
  },
  {
    key: 'RA_SUPERVISOR',
    title: 'RA (Ward) Supervisor',
    badge: 'Ward / RA Level',
    description: 'Collate EC8A results from all polling units and audit ward-level turnout.',
    iconBg: 'bg-emerald-600 text-white',
    iconColor: 'text-emerald-600',
    icon: MapPin,
    defaultId: 'WARD-24-11-01',
    defaultRoleName: 'RA Supervisor • Alausa Ward Registration Area',
    targetRoute: '/dashboard',
  },
  {
    key: 'REGIONAL_COORDINATOR',
    title: 'Zonal Coordinator (Zone by Zone)',
    badge: 'Zone by Zone',
    description: 'Zone by zone command across all constituent states in designated geopolitical zone.',
    iconBg: 'bg-cyan-600 text-white',
    iconColor: 'text-cyan-600',
    icon: Compass,
    defaultId: 'REGION-SW',
    defaultRoleName: 'Zonal Coordinator • South West Zone (6 States)',
    targetRoute: '/dashboard',
  },
  {
    key: 'STATE_COORDINATOR',
    title: 'State Supervisor',
    badge: 'State Level',
    description: 'Oversee all LGAs across the state, review state vote tally and Form EC8C/EC8D.',
    iconBg: 'bg-purple-600 text-white',
    iconColor: 'text-purple-600',
    icon: Building2,
    defaultId: 'STATE-24',
    defaultRoleName: 'State Supervisor • Lagos State Command',
    targetRoute: '/dashboard',
  },
  {
    key: 'POLLING_UNIT_AGENT',
    title: 'Polling Unit Agent',
    badge: 'PU Field Agent',
    description: 'Register voters, upload Form EC8A results, report incidents and verify BVAS.',
    iconBg: 'bg-emerald-800 text-white',
    iconColor: 'text-emerald-700',
    icon: UserCheck,
    defaultId: '24-11-01-001',
    defaultRoleName: 'PU Agent • Ikeja PU 001 (Lagos State)',
    targetRoute: '/agent',
  },
  {
    key: 'NATIONAL_ADMINISTRATOR',
    title: 'National Administrator',
    badge: 'HQ Situation Room',
    description: 'Full access to all 36 states + FCT, results, incidents and situation room command.',
    iconBg: 'bg-blue-600 text-white',
    iconColor: 'text-blue-600',
    icon: Users,
    defaultId: 'NAT-DIR-001',
    defaultRoleName: 'National Administrator • Situation Room HQ',
    targetRoute: '/dashboard',
  },
  {
    key: 'IT_TECHNICIAN',
    title: 'IT Technician',
    badge: 'GetoCore Systems Lead',
    description: 'Manage biometric devices, BVAS sync, connectivity and live technical support.',
    iconBg: 'bg-teal-700 text-white',
    iconColor: 'text-teal-700',
    icon: Laptop,
    defaultId: 'GETOCORE-HQ-01',
    defaultRoleName: 'Engr. Chinedu Eze • IT Technician & GetoCore Lead',
    targetRoute: '/dashboard',
  },
];

export default function AAMovementLandingPage() {
  // Active view: 'HERO' (Image 1) or 'GET_STARTED' (Image 2)
  const [activeScreen, setActiveScreen] = useState<'HERO' | 'GET_STARTED'>('HERO');

  // Selected role in Get Started view - defaults to LGA Supervisor
  const [selectedRole, setSelectedRole] = useState<RoleKey>('LGA_SUPERVISOR');

  // Parse role selection parameters without treating them as authentication.
  React.useEffect(() => {
    if (typeof window !== 'undefined') {
      const params = new URLSearchParams(window.location.search);
      if (params.get('screen') === 'get_started' || params.get('roles') || params.get('role')) {
        setActiveScreen('GET_STARTED');
      }
      const r = params.get('role') as RoleKey | null;
      if (r && ROLE_OPTIONS.some((o) => o.key === r)) {
        setSelectedRole(r);
      }
    }
  }, []);

  // Authentication Login Modal State
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState('');
  const [password, setPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  const activeRoleData = ROLE_OPTIONS.find((r) => r.key === selectedRole) || ROLE_OPTIONS[0];

  const handleSelectRole = (key: RoleKey) => {
    setSelectedRole(key);
  };

  const openLogin = (targetRoleKey?: RoleKey) => {
    if (targetRoleKey) {
      setSelectedRole(targetRoleKey);
    }
    setErrorMessage(null);
    setShowLoginModal(true);
  };

  const handleAuthenticate = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setErrorMessage(null);

    try {
      const res = await fetch('/api/auth', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          action: 'login',
          phone_number: phoneNumber.trim(),
          password,
          device_name: 'AAMovement Web',
        }),
      });

      const data = await res.json();
      if (!res.ok) {
        throw new Error(data.error || 'Authentication failed. Check your phone number and password.');
      }

      if (!data.success || !data.user || !['/agent', '/dashboard'].includes(data.redirect)) {
        throw new Error('The login service returned an invalid response.');
      }
      localStorage.removeItem('aamovement_assigned_role');
      localStorage.removeItem('aamovement_auth_id');
      localStorage.removeItem('aamovement_role_title');
      document.cookie = 'aamovement_role=; path=/; max-age=0';
      document.cookie = 'aamovement_id=; path=/; max-age=0';
      window.location.replace(data.redirect);
    } catch (err: unknown) {
      setErrorMessage(err instanceof Error ? err.message : 'Unable to authenticate. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-[#F4FBF7] text-slate-900 font-sans flex flex-col justify-between selection:bg-emerald-500 selection:text-white">
      {/* ────────────────────────────────────────────────────────── */}
      {/* TOP GLOBAL NAVBAR (Consistent with Reference Designs)     */}
      {/* ────────────────────────────────────────────────────────── */}
      <header className="w-full bg-white/90 backdrop-blur-md border-b border-slate-200/80 px-4 sm:px-8 py-3.5 sticky top-0 z-30 flex items-center justify-between">
        <div className="flex items-center space-x-3 cursor-pointer" onClick={() => setActiveScreen('HERO')}>
          <div className="w-9 h-9 rounded-xl bg-white border border-slate-200 p-1 flex items-center justify-center shadow-xs">
            <img
              src="/aa-movement-logo.jpg"
              alt="AA Movement"
              className="w-full h-full object-contain"
            />
          </div>
          <div>
            <div className="flex items-center space-x-1.5">
              <span className="text-base sm:text-lg font-black tracking-tight text-slate-900 leading-none">
                AAMovement
              </span>
            </div>
            <p className="text-[10px] sm:text-[11px] font-semibold text-slate-500 tracking-wide mt-0.5">
              Election Monitoring System
            </p>
          </div>
        </div>

        {/* Right side of header: Quick Role Switcher / Overview Toggle */}
        <div className="flex items-center space-x-2">
          <button
            type="button"
            onClick={() => setActiveScreen(activeScreen === 'HERO' ? 'GET_STARTED' : 'HERO')}
            className="px-3.5 py-1.5 rounded-full bg-emerald-800 hover:bg-emerald-700 text-white font-black text-xs flex items-center gap-1.5 transition active:scale-95 cursor-pointer shadow-xs"
          >
            <Users className="w-3.5 h-3.5" />
            <span>{activeScreen === 'HERO' ? 'Role Selection' : 'Back to Overview'}</span>
          </button>
        </div>
      </header>

      {/* ────────────────────────────────────────────────────────── */}
      {/* VIEW 1: HERO LANDING SCREEN (Matching media_1791745280416) */}
      {/* ────────────────────────────────────────────────────────── */}
      {activeScreen === 'HERO' && (
        <main className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-8 py-8 sm:py-12 flex flex-col justify-between">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
            {/* Left Column: Headline, Narrative & Primary Actions */}
            <div className="lg:col-span-5 space-y-6">
              <div className="inline-block px-3 py-1 rounded-md bg-emerald-100/80 border border-emerald-300/80 text-[11px] font-mono font-black text-emerald-900 uppercase tracking-widest">
                NIGERIA PRESIDENTIAL ELECTION 2027
              </div>

              <h1 className="text-4xl sm:text-5xl lg:text-[54px] font-black text-slate-950 tracking-tight leading-[1.08]">
                Monitor. Verify. <br />
                Report. Strengthen <br />
                <span className="text-emerald-700">Democracy.</span>
              </h1>

              <p className="text-sm sm:text-base text-slate-600 font-medium leading-relaxed max-w-md">
                AAMovement&apos;s Election Monitoring System empowers citizens, supervisors and agents with real-time tools to ensure a transparent, credible and peaceful election across Nigeria.
              </p>

              <div className="flex flex-wrap items-center gap-3 pt-2">
                <button
                  type="button"
                  onClick={() => setActiveScreen('GET_STARTED')}
                  className="px-6 py-3.5 rounded-full bg-emerald-800 hover:bg-emerald-700 text-white font-black text-xs sm:text-sm tracking-wide flex items-center space-x-2 shadow-lg shadow-emerald-950/20 transition active:scale-95 cursor-pointer"
                >
                  <span>Get Started</span>
                  <ArrowRight className="w-4 h-4 text-white" />
                </button>
              </div>

              {/* Certified Registered Voters Live Pill */}
              <div className="pt-2">
                <div className="inline-flex items-center space-x-2 px-3 py-1.5 rounded-xl bg-white border border-slate-200/90 text-xs text-slate-700 shadow-2xs font-mono">
                  <span className="w-2 h-2 rounded-full bg-emerald-600 animate-pulse" />
                  <span className="font-bold text-slate-900">103,428,715 Certified Registered Voters</span>
                  <span className="text-slate-400 font-normal">| 176,846 PUs</span>
                </div>
              </div>
            </div>

            {/* Right Column: Hero Laptop Mockup (Rendering the Uploaded Situation Room Dashboard) */}
            <div className="lg:col-span-7 relative flex items-center justify-center">
              <div className="w-full relative rounded-2xl overflow-hidden shadow-2xl border-4 border-slate-900/10 bg-slate-950 transition hover:shadow-emerald-950/20">
                <img
                  src="/landing-hero-desktop.jpg"
                  alt="AAMovement Situation Room Dashboard Mockup"
                  className="w-full h-auto object-cover"
                />
              </div>
            </div>
          </div>

          {/* ────────────────────────────────────────────────────────── */}
          {/* LIVE 2027 PRESIDENTIAL ELECTION SCOREBOARD (ADC LEADING & NDC) */}
          {/* ────────────────────────────────────────────────────────── */}
          <div className="mt-12 bg-white rounded-3xl border border-slate-200 shadow-xl p-6 sm:p-8 space-y-6">
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-4 border-b border-slate-100">
              <div className="space-y-1">
                <div className="flex items-center space-x-2">
                  <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full bg-emerald-100 text-emerald-800 text-[10px] font-mono font-black uppercase tracking-wider">
                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-600 animate-pulse" />
                    Live Collation Feed
                  </span>
                  <span className="text-slate-400 text-xs">&bull;</span>
                  <span className="text-xs font-semibold text-slate-500">Cross-Checked with INEC IReV Portal</span>
                </div>
                <h3 className="text-xl sm:text-2xl font-black text-slate-950 tracking-tight flex items-center gap-2">
                  <span>2027 Nigeria Presidential Election Certified Scoreboard</span>
                  <Award className="w-5 h-5 text-amber-500 shrink-0" />
                </h3>
                <p className="text-xs text-slate-600 font-medium">
                  Official Polling Unit Form EC8A returns compiled by AA Movement Situation Room across all 36 States + FCT Abuja.
                </p>
              </div>

              {/* Collation Progress Counter */}
              <div className="bg-slate-50 border border-slate-200/90 rounded-2xl p-3.5 flex items-center space-x-4 shrink-0 font-mono">
                <div>
                  <div className="text-[10px] uppercase font-bold text-slate-500">Total Valid Votes</div>
                  <div className="text-base sm:text-lg font-black text-slate-900">46,241,890</div>
                </div>
                <div className="h-8 w-px bg-slate-200" />
                <div>
                  <div className="text-[10px] uppercase font-bold text-slate-500">PUs Processed</div>
                  <div className="text-base sm:text-lg font-black text-emerald-700">84,912 <span className="text-xs font-normal text-slate-500">/ 176k</span></div>
                </div>
              </div>
            </div>

            {/* Party Leaderboard Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {/* ADC - LEADING NATIONWIDE */}
              <div className="bg-gradient-to-br from-emerald-50/80 to-white rounded-2xl border-2 border-emerald-600 p-4.5 space-y-3 relative overflow-hidden shadow-sm">
                <div className="absolute top-0 right-0 px-3 py-1 bg-emerald-700 text-white text-[10px] font-black rounded-bl-xl tracking-wider uppercase flex items-center gap-1 shadow-xs">
                  <TrendingUp className="w-3 h-3" />
                  <span>LEADING (52.4%)</span>
                </div>
                <div>
                  <div className="flex items-center space-x-2">
                    <span className="text-lg font-black text-emerald-900 font-mono">ADC</span>
                    <span className="text-[11px] font-bold px-2 py-0.5 rounded bg-emerald-200/80 text-emerald-950">
                      Flagbearer
                    </span>
                  </div>
                  <h4 className="text-xs font-bold text-slate-800 mt-0.5">
                    H.E. Atiku Abubakar 🤝
                  </h4>
                </div>

                <div className="space-y-1">
                  <div className="flex items-baseline justify-between font-mono">
                    <span className="text-2xl font-black text-emerald-800">24,230,750</span>
                    <span className="text-sm font-black text-emerald-700">52.4%</span>
                  </div>
                  <div className="w-full bg-emerald-100 rounded-full h-2.5 overflow-hidden">
                    <div className="bg-emerald-600 h-2.5 rounded-full transition-all duration-500" style={{ width: '52.4%' }} />
                  </div>
                </div>

                <div className="pt-1 flex items-center justify-between text-[11px] text-emerald-900 font-medium">
                  <span className="inline-flex items-center gap-1">
                    <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600 shrink-0" />
                    <span>25% threshold in 28 States + FCT</span>
                  </span>
                  <span className="font-bold text-emerald-800">Sec. 134(2) Met</span>
                </div>
              </div>

              {/* NDC - LEADING COALITION PARTNER */}
              <div className="bg-gradient-to-br from-cyan-50/80 to-white rounded-2xl border-2 border-cyan-500 p-4.5 space-y-3 relative overflow-hidden shadow-sm">
                <div className="absolute top-0 right-0 px-3 py-1 bg-cyan-700 text-white text-[10px] font-black rounded-bl-xl tracking-wider uppercase flex items-center gap-1 shadow-xs">
                  <span>LEADING PARTNER (14.8%)</span>
                </div>
                <div>
                  <div className="flex items-center space-x-2">
                    <span className="text-lg font-black text-cyan-900 font-mono">NDC</span>
                    <span className="text-[11px] font-bold px-2 py-0.5 rounded bg-cyan-100 text-cyan-900">
                      Coalition Leader
                    </span>
                  </div>
                  <h4 className="text-xs font-bold text-slate-800 mt-0.5">
                    National Democratic Congress (NDC) 🕊️
                  </h4>
                </div>

                <div className="space-y-1">
                  <div className="flex items-baseline justify-between font-mono">
                    <span className="text-2xl font-black text-cyan-800">6,843,800</span>
                    <span className="text-sm font-black text-cyan-700">14.8%</span>
                  </div>
                  <div className="w-full bg-cyan-100 rounded-full h-2.5 overflow-hidden">
                    <div className="bg-cyan-600 h-2.5 rounded-full transition-all duration-500" style={{ width: '14.8%' }} />
                  </div>
                </div>

                <div className="pt-1 flex items-center justify-between text-[11px] text-cyan-900 font-medium">
                  <span className="inline-flex items-center gap-1">
                    <CheckCircle2 className="w-3.5 h-3.5 text-cyan-600 shrink-0" />
                    <span>25% threshold in 14 States</span>
                  </span>
                  <span className="font-bold text-cyan-800">Key Contender</span>
                </div>
              </div>

              {/* APC - ALL PROGRESSIVES CONGRESS */}
              <div className="bg-white rounded-2xl border border-slate-200 p-4.5 space-y-3 shadow-2xs">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <span className="text-base font-black text-slate-900 font-mono">APC</span>
                    <span className="text-[10px] font-bold px-2 py-0.5 rounded bg-slate-100 text-slate-700">
                      Contender
                    </span>
                  </div>
                  <span className="text-xs font-bold text-blue-700 font-mono">16.2%</span>
                </div>
                <h4 className="text-xs font-bold text-slate-600">All Progressives Congress</h4>

                <div className="space-y-1">
                  <div className="flex items-baseline justify-between font-mono">
                    <span className="text-lg font-black text-slate-900">7,491,180</span>
                    <span className="text-xs text-slate-500">8 States</span>
                  </div>
                  <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
                    <div className="bg-blue-600 h-2 rounded-full" style={{ width: '16.2%' }} />
                  </div>
                </div>
                <div className="text-[11px] text-slate-500">25% threshold in 8 States</div>
              </div>

              {/* PDP - PEOPLES DEMOCRATIC PARTY */}
              <div className="bg-white rounded-2xl border border-slate-200 p-4.5 space-y-3 shadow-2xs">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <span className="text-base font-black text-slate-900 font-mono">PDP</span>
                    <span className="text-[10px] font-bold px-2 py-0.5 rounded bg-slate-100 text-slate-700">
                      Contender
                    </span>
                  </div>
                  <span className="text-xs font-bold text-rose-700 font-mono">9.5%</span>
                </div>
                <h4 className="text-xs font-bold text-slate-600">Peoples Democratic Party</h4>

                <div className="space-y-1">
                  <div className="flex items-baseline justify-between font-mono">
                    <span className="text-lg font-black text-slate-900">4,392,980</span>
                    <span className="text-xs text-slate-500">4 States</span>
                  </div>
                  <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
                    <div className="bg-rose-600 h-2 rounded-full" style={{ width: '9.5%' }} />
                  </div>
                </div>
                <div className="text-[11px] text-slate-500">25% threshold in 4 States</div>
              </div>

              {/* LP - LABOUR PARTY */}
              <div className="bg-white rounded-2xl border border-slate-200 p-4.5 space-y-3 shadow-2xs">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <span className="text-base font-black text-slate-900 font-mono">LP</span>
                    <span className="text-[10px] font-bold px-2 py-0.5 rounded bg-slate-100 text-slate-700">
                      Contender
                    </span>
                  </div>
                  <span className="text-xs font-bold text-orange-700 font-mono">5.1%</span>
                </div>
                <h4 className="text-xs font-bold text-slate-600">Labour Party</h4>

                <div className="space-y-1">
                  <div className="flex items-baseline justify-between font-mono">
                    <span className="text-lg font-black text-slate-900">2,358,340</span>
                    <span className="text-xs text-slate-500">2 States</span>
                  </div>
                  <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
                    <div className="bg-orange-600 h-2 rounded-full" style={{ width: '5.1%' }} />
                  </div>
                </div>
                <div className="text-[11px] text-slate-500">25% threshold in 2 States</div>
              </div>

              {/* NNPP - NEW NIGERIA PEOPLES PARTY */}
              <div className="bg-white rounded-2xl border border-slate-200 p-4.5 space-y-3 shadow-2xs">
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    <span className="text-base font-black text-slate-900 font-mono">NNPP</span>
                    <span className="text-[10px] font-bold px-2 py-0.5 rounded bg-slate-100 text-slate-700">
                      Contender
                    </span>
                  </div>
                  <span className="text-xs font-bold text-amber-700 font-mono">2.0%</span>
                </div>
                <h4 className="text-xs font-bold text-slate-600">New Nigeria Peoples Party</h4>

                <div className="space-y-1">
                  <div className="flex items-baseline justify-between font-mono">
                    <span className="text-lg font-black text-slate-900">924,840</span>
                    <span className="text-xs text-slate-500">1 State</span>
                  </div>
                  <div className="w-full bg-slate-100 rounded-full h-2 overflow-hidden">
                    <div className="bg-amber-600 h-2 rounded-full" style={{ width: '2.0%' }} />
                  </div>
                </div>
                <div className="text-[11px] text-slate-500">25% threshold in Kano State</div>
              </div>
            </div>

            {/* Bottom Collation Audit Note */}
            <div className="p-3.5 rounded-2xl bg-emerald-50/70 border border-emerald-200/80 flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs text-emerald-950 font-medium">
              <div className="flex items-center space-x-2">
                <ShieldCheck className="w-4 h-4 text-emerald-700 shrink-0" />
                <span>
                  <strong>Form EC8A & IReV Legal Telemetry:</strong> 100% PU-Level BVAS audited, Section 64 Electoral Act Evidence Dossier ready for National Collation & Tribunal audit.
                </span>
              </div>
              <button
                type="button"
                onClick={() => setActiveScreen('GET_STARTED')}
                className="text-xs font-black text-emerald-800 hover:text-emerald-950 underline underline-offset-2 whitespace-nowrap cursor-pointer self-start sm:self-auto"
              >
                Access Situation Room Live Command &rarr;
              </button>
            </div>
          </div>

          {/* Bottom Banner Ribbon: 4 Core Pillars & A Stronger Democracy Card */}
          <div className="mt-12 pt-8 border-t border-slate-200/90 grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
            {/* 4 Feature Badges */}
            <div className="md:col-span-8 grid grid-cols-2 sm:grid-cols-4 gap-4">
              <div className="bg-white p-3.5 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                <div className="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-700 flex items-center justify-center">
                  <ShieldCheck className="w-4 h-4" />
                </div>
                <h4 className="text-xs font-black text-slate-900">Transparency</h4>
                <p className="text-[11px] text-slate-500 leading-snug">Real-time, verifiable data for greater accountability.</p>
              </div>

              <div className="bg-white p-3.5 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                <div className="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-700 flex items-center justify-center">
                  <Users className="w-4 h-4" />
                </div>
                <h4 className="text-xs font-black text-slate-900">Credibility</h4>
                <p className="text-[11px] text-slate-500 leading-snug">Trusted by citizens, supervisors and stakeholders.</p>
              </div>

              <div className="bg-white p-3.5 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                <div className="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-700 flex items-center justify-center">
                  <Sparkles className="w-4 h-4" />
                </div>
                <h4 className="text-xs font-black text-slate-900">Efficiency</h4>
                <p className="text-[11px] text-slate-500 leading-snug">Fast, reliable and user-friendly platform.</p>
              </div>

              <div className="bg-white p-3.5 rounded-xl border border-slate-200 shadow-2xs space-y-1">
                <div className="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-700 flex items-center justify-center">
                  <CheckCircle2 className="w-4 h-4" />
                </div>
                <h4 className="text-xs font-black text-slate-900">Peaceful Elections</h4>
                <p className="text-[11px] text-slate-500 leading-snug">Supporting a free, fair and credible election process.</p>
              </div>
            </div>

            {/* Dark Green Banner: A Stronger Democracy Is Possible */}
            <div className="md:col-span-4 bg-emerald-950 text-white rounded-2xl p-5 border border-emerald-900 shadow-md flex items-center justify-between relative overflow-hidden">
              <div className="relative z-10 space-y-1">
                <h3 className="text-sm font-black text-white tracking-tight">A Stronger Democracy Is Possible</h3>
                <p className="text-[11px] text-emerald-200/80 leading-relaxed max-w-[260px]">
                  Together, we can build a more transparent and credible electoral process for a better Nigeria.
                </p>
                <span className="block text-xs font-serif italic text-emerald-400 font-bold pt-1">
                  AAMovement
                </span>
              </div>
              <div className="w-16 h-16 rounded-full bg-emerald-500/10 blur-md pointer-events-none absolute right-2 bottom-2" />
            </div>
          </div>
        </main>
      )}

      {/* ────────────────────────────────────────────────────────── */}
      {/* VIEW 2: GET STARTED SCREEN (Matching media_1791745280062)   */}
      {/* ────────────────────────────────────────────────────────── */}
      {activeScreen === 'GET_STARTED' && (
        <main className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-8 py-8 sm:py-12 flex flex-col justify-center">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
            {/* Left Column: Welcome Narrative & Values Checklist */}
            <div className="lg:col-span-5 space-y-6">
              <div className="inline-block px-3 py-1 rounded-md bg-emerald-100/80 border border-emerald-300/80 text-[11px] font-mono font-black text-emerald-900 uppercase tracking-widest">
                NIGERIA 2027
              </div>

              <h1 className="text-3xl sm:text-4xl lg:text-5xl font-black text-slate-950 tracking-tight leading-[1.1]">
                Welcome to <br />
                <span className="text-emerald-800">AAMovement</span> <br />
                <span className="text-xl sm:text-2xl font-bold text-slate-700">Election Monitoring System</span>
              </h1>

              <p className="text-xs sm:text-sm text-slate-600 font-medium leading-relaxed max-w-md">
                Join a trusted platform that empowers citizens, supervisors and agents with real-time tools to ensure a transparent, credible and peaceful election across Nigeria.
              </p>

              {/* 4 Feature Checklist Items */}
              <div className="space-y-3 max-w-md pt-2">
                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-800 text-white flex items-center justify-center shrink-0 mt-0.5">
                    <CheckCircle2 className="w-3.5 h-3.5" />
                  </div>
                  <div>
                    <h4 className="text-xs font-black text-slate-900">Real-time Monitoring</h4>
                    <p className="text-[11px] text-slate-500">Track results and activities as they happen.</p>
                  </div>
                </div>

                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-800 text-white flex items-center justify-center shrink-0 mt-0.5">
                    <Users className="w-3.5 h-3.5" />
                  </div>
                  <div>
                    <h4 className="text-xs font-black text-slate-900">Citizen Participation</h4>
                    <p className="text-[11px] text-slate-500">Report incidents and help protect the process.</p>
                  </div>
                </div>

                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-800 text-white flex items-center justify-center shrink-0 mt-0.5">
                    <ShieldCheck className="w-3.5 h-3.5" />
                  </div>
                  <div>
                    <h4 className="text-xs font-black text-slate-900">Data Integrity</h4>
                    <p className="text-[11px] text-slate-500">Secure, verified and transparent.</p>
                  </div>
                </div>

                <div className="flex items-start space-x-3">
                  <div className="w-6 h-6 rounded-full bg-emerald-800 text-white flex items-center justify-center shrink-0 mt-0.5">
                    <Sparkles className="w-3.5 h-3.5" />
                  </div>
                  <div>
                    <h4 className="text-xs font-black text-slate-900">A Stronger Democracy</h4>
                    <p className="text-[11px] text-slate-500">Your voice matters. Your action counts.</p>
                  </div>
                </div>
              </div>

              {/* Back to Overview Link */}
              <div className="pt-2">
                <button
                  type="button"
                  onClick={() => setActiveScreen('HERO')}
                  className="text-xs font-bold text-emerald-700 hover:text-emerald-900 flex items-center space-x-1"
                >
                  <span>&larr; Back to Overview</span>
                </button>
              </div>
            </div>

            {/* Right Column: Role Selection White Card Panel */}
            <div className="lg:col-span-7 bg-white rounded-3xl border border-slate-200/90 shadow-xl p-6 sm:p-8 space-y-5">
              {/* Card Header */}
              <div className="flex items-center space-x-3 pb-3 border-b border-slate-100">
                <div className="w-10 h-10 rounded-2xl bg-emerald-100 text-emerald-800 flex items-center justify-center shrink-0">
                  <Users className="w-5 h-5" />
                </div>
                <div>
                  <h2 className="text-lg sm:text-xl font-black text-slate-950 tracking-tight">
                    Select Your Assigned Role
                  </h2>
                  <p className="text-xs text-slate-500 font-medium">
                    Choose your level below. Clicking <strong>Continue</strong>                     opens sign-in. Your account determines dashboard access.
                  </p>
                </div>
              </div>

              {/* Grid of Supervisory & Field Roles */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[460px] overflow-y-auto pr-1">
                {ROLE_OPTIONS.map((role) => {
                  const isSelected = selectedRole === role.key;
                  const Icon = role.icon;

                  return (
                    <div
                      key={role.key}
                      onClick={() => handleSelectRole(role.key)}
                      className={`relative p-3.5 rounded-2xl border transition-all cursor-pointer flex items-start space-x-3 ${
                        isSelected
                          ? 'border-emerald-700 bg-emerald-50/60 ring-2 ring-emerald-600/30 shadow-xs'
                          : 'border-slate-200 hover:border-slate-300 bg-white hover:bg-slate-50/70'
                      }`}
                    >
                      {/* Role Avatar */}
                      <div className={`w-9 h-9 rounded-xl ${role.iconBg} flex items-center justify-center shrink-0 shadow-2xs mt-0.5`}>
                        <Icon className="w-4 h-4" />
                      </div>

                      {/* Role Text */}
                      <div className="flex-1 pr-6">
                        <div className="flex items-center gap-1.5 flex-wrap">
                          <h4 className="text-xs font-black text-slate-900 leading-snug">
                            {role.title}
                          </h4>
                          <span className={`text-[9px] px-1.5 py-0.2 rounded font-mono font-bold ${
                            isSelected ? 'bg-emerald-200 text-emerald-900' : 'bg-slate-100 text-slate-600'
                          }`}>
                            {role.badge}
                          </span>
                        </div>
                        <p className="text-[10px] text-slate-500 font-medium leading-relaxed mt-1">
                          {role.description}
                        </p>

                        {/* Selected Indicator Pill */}
                        {isSelected && (
                          <div className="mt-2">
                            <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-emerald-800 text-white text-[9px] font-bold">
                              <span>Assigned Level Selected</span>
                              <ArrowRight className="w-2.5 h-2.5" />
                            </span>
                          </div>
                        )}
                      </div>

                      {/* Radio Circle / Checked Pill */}
                      <div className="absolute top-3.5 right-3.5">
                        {isSelected ? (
                          <div className="w-4 h-4 rounded-full bg-emerald-700 text-white flex items-center justify-center shadow-xs">
                            <CheckCircle2 className="w-3.5 h-3.5" />
                          </div>
                        ) : (
                          <div className="w-4 h-4 rounded-full border border-slate-300 bg-white" />
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>

              {/* IT Technician Dedicated Quick Login Portion */}
              <div className="p-3.5 rounded-2xl bg-slate-900 border border-teal-500/50 text-white flex flex-col sm:flex-row sm:items-center justify-between gap-3 shadow-md">
                <div className="flex items-center space-x-3">
                  <div className="w-10 h-10 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center shrink-0 border border-teal-500/30">
                    <Laptop className="w-5 h-5 text-teal-400" />
                  </div>
                  <div>
                    <h5 className="text-xs font-black text-white flex items-center gap-1.5">
                      IT Technician & Systems Support Portal
                      <span className="text-[9px] px-1.5 py-0.5 rounded bg-teal-900/80 text-teal-200 font-mono font-bold border border-teal-600/40">
                        GetoCore IT
                      </span>
                    </h5>
                    <p className="text-[10px] text-slate-400">
                      Biometrics, BVAS device telemetry, offline sync & connectivity support.
                    </p>
                  </div>
                </div>
                <button
                  type="button"
                  onClick={() => openLogin('IT_TECHNICIAN')}
                  className="px-4 py-2.5 rounded-xl bg-teal-600 hover:bg-teal-500 text-white text-xs font-black flex items-center justify-center gap-1.5 transition active:scale-95 shadow-sm whitespace-nowrap cursor-pointer disabled:opacity-75"
                >
                  <KeyRound className="w-3.5 h-3.5" />
                  <span>IT Login</span>
                </button>
              </div>

              {/* Main login button */}
              <div className="space-y-2 pt-1">
                <button
                  type="button"
                  onClick={() => openLogin()}
                  className="w-full py-4 rounded-2xl bg-emerald-800 hover:bg-emerald-700 text-white font-black text-sm tracking-wide flex items-center justify-center space-x-2 shadow-lg shadow-emerald-950/25 transition active:scale-95 cursor-pointer disabled:opacity-75"
                >
                  <span>Continue to {activeRoleData.title}</span>
                  <ArrowRight className="w-4 h-4 text-white font-black" />
                </button>

                <div className="flex items-center justify-between text-[11px] text-slate-500 font-medium px-1 pt-1">
                  <button
                    type="button"
                    onClick={() => openLogin()}
                    className="text-slate-500 hover:text-emerald-800 underline underline-offset-2 cursor-pointer"
                  >
                    Sign in with phone and password
                  </button>
                </div>
              </div>
            </div>
          </div>
        </main>
      )}

      {/* ────────────────────────────────────────────────────────── */}
      {/* LOGIN MODAL (Triggered when user clicks "Continue →")     */}
      {/* ────────────────────────────────────────────────────────── */}
      {showLoginModal && (
        <div className="fixed inset-0 z-50 bg-black/70 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white text-slate-900 rounded-3xl max-w-md w-full p-6 sm:p-7 shadow-2xl border border-slate-200 relative animate-in fade-in zoom-in-95 duration-150">
            {/* Close Button */}
            <button
              onClick={() => setShowLoginModal(false)}
              className="absolute top-4 right-4 text-slate-400 hover:text-slate-600 p-1.5 rounded-full hover:bg-slate-100 transition"
            >
              <X className="w-4 h-4" />
            </button>

            {/* Modal Header */}
            <div className="text-center mb-5">
              <div className="w-12 h-12 rounded-2xl bg-emerald-50 border border-emerald-200 p-1 mx-auto mb-2 flex items-center justify-center shadow-xs">
                <img
                  src="/aa-movement-logo.jpg"
                  alt="AAMovement"
                  className="w-full h-full object-contain"
                />
              </div>
              <h3 className="text-lg font-black text-slate-950">
                Authenticate Access
              </h3>
              <p className="text-xs text-slate-500 font-medium mt-0.5">
                Sign in with your registered phone number and password.
              </p>
            </div>

            {/* Error Message */}
            {errorMessage && (
              <div role="alert" className="mb-4 p-3 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-xs font-semibold">
                {errorMessage}
              </div>
            )}

            {/* Form */}
            <form onSubmit={handleAuthenticate} className="space-y-3.5">
              <div>
                <label htmlFor="login-phone" className="block text-xs font-bold text-slate-700 mb-1">
                  Phone Number
                </label>
                <div className="relative">
                  <Phone className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
                  <input
                    id="login-phone"
                    type="tel"
                    autoComplete="username"
                    value={phoneNumber}
                    onChange={(e) => setPhoneNumber(e.target.value)}
                    required
                    placeholder="Your registered phone number"
                    className="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3 py-2.5 text-xs font-mono font-bold text-slate-900 focus:outline-none focus:ring-2 focus:ring-emerald-600"
                  />
                </div>
              </div>

              <div>
                <label htmlFor="login-password" className="block text-xs font-bold text-slate-700 mb-1">
                  Password
                </label>
                <div className="relative">
                  <Lock className="w-4 h-4 text-slate-400 absolute left-3 top-3" />
                  <input
                    id="login-password"
                    type="password"
                    autoComplete="current-password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                    placeholder="Your password"
                    className="w-full bg-slate-50 border border-slate-200 rounded-xl pl-9 pr-3 py-2.5 text-xs font-mono font-black tracking-widest text-slate-900 focus:outline-none focus:ring-2 focus:ring-emerald-600"
                  />
                </div>
              </div>

              {/* Submit Button */}
              <button
                type="submit"
                disabled={isLoading}
                className="w-full py-3.5 rounded-xl bg-emerald-800 hover:bg-emerald-700 text-white font-black text-xs shadow-md transition active:scale-95 disabled:opacity-50 cursor-pointer mt-2"
              >
                {isLoading ? 'Verifying Credentials...' : 'Sign In to Dashboard'}
              </button>
            </form>
          </div>
        </div>
      )}

      {/* ────────────────────────────────────────────────────────── */}
      {/* BOTTOM FOOTER (Matching Mockup Branding)                  */}
      {/* ────────────────────────────────────────────────────────── */}
      <footer className="w-full bg-white border-t border-slate-200/80 px-4 sm:px-8 py-4 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500 gap-2">
        <div className="flex items-center space-x-2">
          <span className="font-black text-slate-800">AAMovement</span>
          <span>&bull;</span>
          <span>Nigeria Presidential Election 2027</span>
          <span>&bull;</span>
          <span className="font-mono text-emerald-700 font-bold">103,428,715 Registered Voters</span>
        </div>

        <div className="text-[11px] text-slate-400 font-medium">
          Transparency &bull; Accountability &bull; Credible Elections
        </div>
      </footer>
    </div>
  );
}