'use client';

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import {
  ChevronLeft,
  ChevronRight,
  Maximize2,
  Minimize2,
  Clock,
  Play,
  Pause,
  RotateCcw,
  BookOpen,
  CheckCircle2,
  AlertTriangle,
  ShieldCheck,
  Smartphone,
  Cpu,
  FileSpreadsheet,
  Printer,
  Download,
  QrCode,
  Users,
  Search,
  Scale,
  Award,
  Layers,
  ArrowRight,
  ExternalLink,
  Sparkles,
  Zap,
  Globe,
  Lock,
  Eye,
  BarChart3,
  HelpCircle,
  FileCheck,
  X,
  LogOut
} from 'lucide-react';

interface SlideData {
  id: number;
  category: string;
  title: string;
  subtitle: string;
  heroBadge: string;
  keyMetric?: { label: string; value: string; detail: string };
  bulletPoints: { title: string; desc: string; icon: string }[];
  visualComponent: 'TITLE' | 'PROBLEMS' | 'PVT_SHIFT' | 'MOBILE_OFFLINE' | 'AI_CHATBOT' | 'OCR_FORENSICS' | 'TRIBUNAL_LAW' | 'INEC_FORMS' | 'SECURITY_PINS' | 'COMMAND_HIERARCHY' | 'ROADMAP' | 'CALL_TO_ACTION';
  speakerNotes: {
    coreGoal: string;
    script: string;
    psychologicalCue: string;
    anticipatedQuestion: string;
    winningAnswer: string;
  };
  demoLink?: { label: string; url: string };
}

const SLIDES: SlideData[] = [
  {
    id: 1,
    category: 'EXECUTIVE OVERVIEW',
    title: 'Securing the Mandate: 2027 Presidential Situation Room',
    subtitle: 'High-Velocity Parallel Vote Tabulation (PVT), Real-Time Forensic Audit & Legal Defense Ecosystem',
    heroBadge: 'His Excellency Atiku Abubakar (ADC 🤝) • Powered by GetoCore Digital Innovation',
    keyMetric: {
      label: 'Nationwide Polling Units',
      value: '176,846',
      detail: 'Complete 36 States + FCT Real-Time Audit'
    },
    bulletPoints: [
      {
        title: 'Winning at the Ballot, Defending at Collation',
        desc: 'Bridging every field agent directly to the presidential war room in seconds, before late-night collation distortions begin.',
        icon: 'Award'
      },
      {
        title: '100% Offline-First Architecture',
        desc: 'Engineered for remote Nigerian terrains—riverine creeks, Sahel deserts, and rural villages with zero GSM coverage.',
        icon: 'Smartphone'
      },
      {
        title: 'Automated Forensic Evidence',
        desc: 'Machine-vision OCR comparing party EC8As against INEC IReV uploads, certified under Section 84 Evidence Act.',
        icon: 'Scale'
      }
    ],
    visualComponent: 'TITLE',
    speakerNotes: {
      coreGoal: 'Establish presidential gravitas, mutual respect, and supreme operational confidence within the first 60 seconds.',
      script: 'Your Excellency, Distinguished Leaders of the Campaign, and Members of the High Table: In modern Nigerian elections, victory is won at the ballot box, but it is too often lost at collation centers or forfeited in election tribunals. Today, GetoCore Digital Innovation presents not just software, but an impenetrable electoral defense ecosystem built specifically to secure your mandate in 2027 across all 176,846 Polling Units.',
      psychologicalCue: 'Make eye contact with His Excellency. Project calm authority, technological mastery, and deep respect for his historic struggle for electoral integrity.',
      anticipatedQuestion: 'Is this just another dashboard or is it ready for the harsh realities of Nigerian election day?',
      winningAnswer: 'Your Excellency, this is already fully built, battle-tested with offline encryption, and working live right now on this screen and on our phones.'
    },
    demoLink: { label: 'Explore Live Situation Room', url: '/dashboard' }
  },
  {
    id: 2,
    category: 'STRATEGIC PROBLEM ANALYSIS',
    title: 'The 2019 & 2023 Electoral Trap: Why Mandates Were Lost',
    subtitle: 'The 5 Systemic Failure Points That Stole Past Elections and Destroyed Tribunal Petitions',
    heroBadge: 'Tribunal Forensic Diagnosis',
    keyMetric: {
      label: 'Statutory Tribunal Window',
      value: '21 Days',
      detail: 'Manual paper retrieval is mathematically doomed'
    },
    bulletPoints: [
      {
        title: 'The Midnight Collation Blackout',
        desc: 'Results announced at PUs are altered at Ward, LGA, and State Collation Centers under cover of darkness while agents are compromised or displaced.',
        icon: 'AlertTriangle'
      },
      {
        title: 'The INEC IReV Mirage',
        desc: 'Delayed server uploads, blurry illegible photos, and swapped Form EC8A sheets with altered numbers that favored opponents.',
        icon: 'Eye'
      },
      {
        title: 'The Section 51 Over-Voting Blindspot',
        desc: 'Opponents stuffed ballot boxes beyond BVAS accredited voter limits, but our campaigns lacked immediate mathematical proof to invalidate them.',
        icon: 'Scale'
      },
      {
        title: 'Infiltrated & Ghost Agents',
        desc: 'Unaccredited, bribed, or unverified agents who sold duplicate copies or failed to document crucial procedural violations.',
        icon: 'Lock'
      }
    ],
    visualComponent: 'PROBLEMS',
    speakerNotes: {
      coreGoal: 'Resonate with the deep pain and trauma of the 2019 and 2023 election petitions to prove we understand the battlefield.',
      script: 'Your Excellency, we analyzed every judgment of the 2019 and 2023 Presidential Election Petition Tribunals. The opposition did not win because they had more real voters; they won because of five structural traps: the midnight collation blackout, doctored IReV uploads, undetected over-voting, compromised agents, and the inability to present certified electronic evidence within 21 days. We designed this entire platform as the definitive antidote to every single one of those traps.',
      psychologicalCue: 'Watch for nods from the legal team and campaign managers. They know these scars intimately.',
      anticipatedQuestion: 'Why did our petitions fail on electronic evidence in 2023?',
      winningAnswer: 'Because under Section 84 of the Evidence Act, screenshots and uncertified dumps are rejected. The court demands cryptographic hash verification, device certification, and original EC8A carbon copies. Our system generates that certification automatically.'
    }
  },
  {
    id: 3,
    category: 'THE BREAKTHROUGH',
    title: 'The GetoCore 2027 Paradigm Shift: Real-Time PVT',
    subtitle: 'From Passive Waiting to Active Technological Dominance and Independent Result Projection',
    heroBadge: 'Parallel Vote Tabulation (PVT) Engine',
    keyMetric: {
      label: 'Result Projection Lead',
      value: '6 - 12 Hours',
      detail: 'Knowing the certified winner ahead of INEC'
    },
    bulletPoints: [
      {
        title: 'Zero Reliance on INEC Whims',
        desc: 'Independent, simultaneous collation running parallel to INEC, verified directly from physical carbon Form EC8A duplicates.',
        icon: 'Zap'
      },
      {
        title: 'Algorithmic Section 51 Verification',
        desc: 'Instant formula check: If Total Votes > BVAS Accreditation, a critical alarm sounds, halting fraudulent certification on the spot.',
        icon: 'Scale'
      },
      {
        title: 'Real-Time Telemetry & Heatmaps',
        desc: 'State-by-state, LGA-by-LGA live progress bars showing voter turnout, lead margins, and 25% threshold compliance across 24+ states.',
        icon: 'BarChart3'
      }
    ],
    visualComponent: 'PVT_SHIFT',
    speakerNotes: {
      coreGoal: 'Deliver the supreme confidence booster: We will know the true election results before anyone else in Nigeria.',
      script: 'With GetoCore’s Parallel Vote Tabulation engine, we no longer wait in anxiety for INEC to announce results. As our 176,846 agents conclude counting between 3:00 PM and 5:00 PM, their tallies stream into our presidential war room. By 9:00 PM on election night, Your Excellency will know your exact vote totals, your 25% spread across 24 states, and the winner of the election—with undeniable statistical precision.',
      psychologicalCue: 'Highlight the strategic superiority of pre-emptive knowledge. It gives His Excellency the initiative to address the nation or alert international observers.',
      anticipatedQuestion: 'How does this protect us from late-night alterations?',
      winningAnswer: 'Because once an agent logs an EC8A at 4:30 PM with a SHA-256 seal, any subsequent figure announced by INEC at 2:00 AM that differs is immediately flagged as a felony alteration with exact mathematical variance.'
    },
    demoLink: { label: 'View Real-Time Collation', url: '/dashboard' }
  },
  {
    id: 4,
    category: 'GROUND ZERO RESILIENCE',
    title: 'Offline-First Field Mobile Engine: Built for Real Nigeria',
    subtitle: 'Works Flawlessly in Desert Sand, Riverine Creeks, and Deep Villages with Zero GSM Signal',
    heroBadge: 'Zero-Data Tolerance • AES-GCM 256-Bit Vault',
    keyMetric: {
      label: 'Offline Data Retention',
      value: '100%',
      detail: 'Zero packet loss in non-network zones'
    },
    bulletPoints: [
      {
        title: 'Encrypted Offline Vault',
        desc: 'Submissions are encrypted locally using military-grade AES-GCM 256-bit encryption. If a phone is seized or confiscated, no data can be read or tampered with.',
        icon: 'Lock'
      },
      {
        title: 'Auto-Sync Ambient Mesh',
        desc: 'When the agent moves into GSM coverage or connects to a supervisor hotspot, the queue auto-dispatches transparently in milliseconds.',
        icon: 'Smartphone'
      },
      {
        title: 'Universal Phone Compatibility',
        desc: 'Instant Apple iPhone PWA (2 taps in Safari) and lightweight Android APK (1.35 MB) or Chrome PWA. Runs on even the cheapest N25,000 Android smartphone.',
        icon: 'Cpu'
      },
      {
        title: '6-Stage Electoral Compliance Track',
        desc: 'Guides agent from 7:00 AM Arrival, 8:00 AM BVAS Zero-Check, to 2:30 PM Queue cutoff and 4:30 PM EC8A capture.',
        icon: 'CheckCircle2'
      }
    ],
    visualComponent: 'MOBILE_OFFLINE',
    speakerNotes: {
      coreGoal: 'Demolish the biggest skepticism in Nigerian politics: "What happens when there is no network in rural polling units?"',
      script: 'Your Excellency, we know Nigeria. More than 40% of polling units in places like the creeks of Bayelsa, the forests of Taraba, or remote parts of Borno and Sokoto have poor or zero GSM network. Legacy apps crash and fail. GetoCore is built with an offline-first AES-GCM encrypted vault. An agent can complete their entire report, take the EC8A photo, and seal the figures with zero data. The moment they get within range of a tower or a supervisor’s hotspot, the encrypted payload transmits automatically.',
      psychologicalCue: 'Speak with practical, gritty knowledge of Nigerian geography and terrain. This separates theoretical techies from battle-tested operators.',
      anticipatedQuestion: 'What if a thug or hostile security officer seizes our agent’s phone?',
      winningAnswer: 'The database is encrypted with AES-GCM 256-bit keys and salted SHA-256 PINs. Without the coordinator’s master authorization, it is impossible for anyone to open, alter, or delete the data.'
    },
    demoLink: { label: 'Test Agent Mobile Interface', url: '/agent' }
  },
  {
    id: 5,
    category: 'GRASSROOTS INCLUSIVITY',
    title: 'Multilingual AI Voice & Text Guidance Chatbot',
    subtitle: 'Empowering Grassroots Agents in Hausa, Igbo, Yorùbá, Nigerian Pidgin, and English',
    heroBadge: 'No Agent Left Behind • Indigenous Language Support',
    keyMetric: {
      label: 'Supported Languages',
      value: '5',
      detail: 'Hausa, Igbo, Yorùbá, Pidgin, English'
    },
    bulletPoints: [
      {
        title: 'Hausa Language Support (Arewa / North)',
        desc: 'Provides instant advice on BVAS zero accreditation, queue cut-offs, and objection procedures: "Dokokin BVAS, Lokacin rufe zabe, Zargin magudi".',
        icon: 'Globe'
      },
      {
        title: 'Igbo & Yorùbá Support (South East & South West)',
        desc: 'Guides agents through complex ballot disputes and sorting: "Usoro BVAS, Oge mmechi ntuli aka" / "Ilana ero BVAS, Akoko pipade ibo".',
        icon: 'Globe'
      },
      {
        title: 'Nigerian Pidgin & Plain English (South South & Middle Belt)',
        desc: 'Demystifies technical electoral legalities into everyday language: "How BVAS dey work", "2:30 PM queue rule", "Over-voting wahala".',
        icon: 'Globe'
      },
      {
        title: '100% Offline Decision Engine',
        desc: 'Operates completely offline using built-in rule trees, with an advanced AI situation room layer for complex headquarters queries.',
        icon: 'Sparkles'
      }
    ],
    visualComponent: 'AI_CHATBOT',
    speakerNotes: {
      coreGoal: 'Show deep empathy for the common party faithful in the village who might not speak fluent English or possess a university degree.',
      script: 'We cannot expect every one of our 176,846 agents to be a computer engineer or lawyer. In rural villages, an elder or youth loyalist may struggle with English legal jargon. Our multilingual AI guidance assistant speaks directly to them in Hausa, Igbo, Yorùbá, Nigerian Pidgin, or English. If an opponent tries to chase voters away at 2:30 PM, the agent asks in Pidgin or Hausa, and the assistant instantly quotes Electoral Act Section 50: "Voters on the queue before 2:30 PM MUST vote."',
      psychologicalCue: 'Watch Atiku Abubakar’s reaction. He is a grassroots mobilizer who cherishes Northern, Western, and Eastern unity.',
      anticipatedQuestion: 'Does the AI require expensive internet connection in the village?',
      winningAnswer: 'No, Your Excellency. The core rule engine and FAQs are bundled right inside the mobile code and run offline without spending a kobo on data.'
    }
  },
  {
    id: 6,
    category: 'THE FORENSIC WEAPON',
    title: 'Automated Forensic OCR & IReV Side-by-Side Analysis',
    subtitle: 'Machine-Vision Discrepancy Detection That Turns Form EC8A Photos into Unshakeable Evidence',
    heroBadge: 'Optical Character Recognition (OCR) Engine',
    keyMetric: {
      label: 'Variance Detection Speed',
      value: '< 3.2s',
      detail: 'Per Form EC8A sheet automated inspection'
    },
    bulletPoints: [
      {
        title: 'Machine-Vision Digit Extraction',
        desc: 'Scans party tallies (ADC, APC, PDP, LP, NNPP, SDP), accredited voters, and rejected ballots directly off the photographed sheet.',
        icon: 'Search'
      },
      {
        title: 'Real-Time IReV Comparison',
        desc: 'Fetches the corresponding INEC IReV upload and places them side-by-side. If INEC uploads an altered sheet or inflated rival tally, it flashes RED.',
        icon: 'Eye'
      },
      {
        title: 'Mathematical Fraud Tagging',
        desc: 'Automatically checks Section 51 compliance, detects erased digits, added zeros, or arithmetic discrepancies.',
        icon: 'Scale'
      },
      {
        title: 'Legal Exhibit Code Emission',
        desc: 'Every analyzed pair is tagged with an immutable judicial exhibit code: #ADC-2027-EXHIBIT-OCR-241101002 with bounding box proof.',
        icon: 'Award'
      }
    ],
    visualComponent: 'OCR_FORENSICS',
    speakerNotes: {
      coreGoal: 'Blow away the campaign leadership with the sheer technological brilliance of automated forensic image comparison.',
      script: 'This is our crown jewel forensic weapon. In 2023, lawyers spent weeks looking at thousands of PDFs on IReV with magnifying glasses. Our computer vision OCR engine automatically compares the physical carbon copy submitted by our agent against what INEC uploaded to IReV. If an opponent scored 42 votes on our copy, but IReV shows 142 with an added "1", the system flags it in under 4 seconds, tags the altered box in red, and emits an official court exhibit number.',
      psychologicalCue: 'Turn to the Senior Advocates of Nigeria (SANs) in the room. This solves their single greatest nightmare.',
      anticipatedQuestion: 'What if the image taken by the agent is blurred or tilted?',
      winningAnswer: 'The system has automated contrast enhancement, edge rectification, and confidence scoring. If confidence falls below 75%, it alerts the agent immediately to snap a cleaner angle while still at the polling unit.'
    }
  },
  {
    id: 7,
    category: 'LEGAL DEFENSE ARSENAL',
    title: 'Section 84 Evidence Act Compliance: Court-Ready Evidence',
    subtitle: 'Engineered from Day One to Meet the Highest Standards of Nigerian Electoral Jurisprudence',
    heroBadge: 'Evidence Act 2011 Sec 84(4) Certified',
    keyMetric: {
      label: 'Cryptographic Hash',
      value: 'SHA-256',
      detail: 'NIST-certified immutable audit chain'
    },
    bulletPoints: [
      {
        title: 'Immutable Cryptographic Timestamps',
        desc: 'Every submission, edit, and photo is hashed using SHA-256 with GPS coordinates and hardware device serial numbers.',
        icon: 'Lock'
      },
      {
        title: '1-Click Section 84 Compliance Certificates',
        desc: 'Generates formal Certificate of Identification of Computer Printout signed by the System Administrator, meeting all appellate requirements.',
        icon: 'FileCheck'
      },
      {
        title: 'Complete 21-Day Tribunal Dossier',
        desc: 'Compiles all 176,846 Form EC8As, variance reports, and affidavit summaries into organized, indexed PDF binders ready for immediate filing.',
        icon: 'BookOpen'
      },
      {
        title: 'Supreme Court Proof Standards',
        desc: 'Addresses the strict evidential hurdles established in Abubakar v. INEC (2019) and Obi/Atiku v. INEC (2023).',
        icon: 'Scale'
      }
    ],
    visualComponent: 'TRIBUNAL_LAW',
    speakerNotes: {
      coreGoal: 'Win over the legal advisers and Senior Advocates by proving that this platform was built by engineers who understand the Evidence Act.',
      script: 'Your Excellency’s legal team knows the tragedy of Nigerian election petitions: having truth on your side, but being disqualified on technical grounds under Section 84(4) of the Evidence Act. We designed this entire platform with lawyers. Every record is signed with a SHA-256 cryptographic hash, device fingerprint, and GPS coordinates. With one click, the system exports a legally certified Tribunal Dossier with printed Section 84 Certificates ready for filing in court on Day 1.',
      psychologicalCue: 'Address the legal counsel directly with high technical fluency in Nigerian jurisprudence. Show that you speak their language.',
      anticipatedQuestion: 'Can an opponent challenge that this data was tampered with on our server?',
      winningAnswer: 'No, because our SHA-256 hashes are immutable. Any change of even a single pixel or vote number breaks the mathematical chain, which proves in court that the original record remained pristine.'
    }
  },
  {
    id: 8,
    category: 'INSTITUTIONAL AUTHORITY',
    title: 'Complete Statutory Forms Collation Engine (EC8A–EC8E)',
    subtitle: 'Dual-Format Export: High-Fidelity Printable Official PDF & Structured Analytical CSV',
    heroBadge: 'Full INEC Statutory Cascade (Levels A through E)',
    keyMetric: {
      label: 'Jurisdiction Coverage',
      value: '37 Jurisdictions',
      detail: '36 States + FCT Abuja (37th) Complete'
    },
    bulletPoints: [
      {
        title: 'Form EC8A (Polling Unit Level)',
        desc: 'Results at the polling unit with full ballot accounting, party tallies in figures and written English words, and PO signatures.',
        icon: 'FileSpreadsheet'
      },
      {
        title: 'Form EC8B & EC8C (Ward & LGA Collation)',
        desc: 'Summary of results at Registration Area and Local Government collation with automated multi-unit aggregation.',
        icon: 'FileSpreadsheet'
      },
      {
        title: 'Form EC8D & EC8E (State & National Declaration)',
        desc: 'Official 37-state presidential collation summary matching official green-border INEC statutory sheets with Annexure 1 nationwide table.',
        icon: 'FileSpreadsheet'
      },
      {
        title: 'Dual PDF & CSV Export',
        desc: 'Print official PDF documents with one click, or export raw CSV data into Excel or SPSS for econometric and statistical regression analysis.',
        icon: 'Printer'
      }
    ],
    visualComponent: 'INEC_FORMS',
    speakerNotes: {
      coreGoal: 'Show that the National Coordinator has complete institutional mastery over all 5 statutory INEC document tiers.',
      script: 'In addition to real-time analytics, our platform features the Complete Statutory Forms Engine. The National Coordinator can generate all five official INEC electoral forms: EC8A from polling units, EC8B from wards, EC8C from LGAs, EC8D from States, and the ultimate Form EC8E—the National Presidential Declaration Sheet. These are rendered in official green-border PDF formats with numbers written out in full legal words, alongside full 37-state CSV spreadsheets.',
      psychologicalCue: 'Demonstrate that the platform produces documents that look and function with statutory legal authority.',
      anticipatedQuestion: 'Are the figures written out in words like the real INEC forms?',
      winningAnswer: 'Yes, Your Excellency. For example, 245 votes is automatically written in capital letters as "TWO HUNDRED AND FORTY-FIVE", eliminating any ambiguity in court.'
    }
  },
  {
    id: 9,
    category: 'COMMAND & ACCREDITATION',
    title: 'Participant Management & Digital Security Credentials',
    subtitle: 'Delimitation-Based Enrollment, Automated Salted PIN Generation & Official Printable ID Badges',
    heroBadge: 'Zero Infiltration • Total Field Force Accountability',
    keyMetric: {
      label: 'Accreditation Credentials',
      value: '100% Sealed',
      detail: 'High-entropy PIN + Salted SHA-256 Hash'
    },
    bulletPoints: [
      {
        title: 'Hierarchical INEC Cascade',
        desc: 'Enroll agents with precision: State (36 + FCT 38th) down to LGA, Ward, and assigned Polling Unit code.',
        icon: 'Users'
      },
      {
        title: 'Automated High-Entropy PIN Generator',
        desc: 'Generates secure 4-digit PINs avoiding predictable sequences, protected by salted cryptographic SHA-256 hashes.',
        icon: 'Lock'
      },
      {
        title: 'Printable Official Accreditation Badges',
        desc: 'Standardized ID cards with lanyard punch slots, candidate portrait (His Excellency Atiku Abubakar), ADC crest, QR code, and barcode.',
        icon: 'Printer'
      },
      {
        title: '1-Click Revocation Control',
        desc: 'Instantly revoke access if an agent is arrested, compromised, or defects, locking them out of the campaign network in 1 second.',
        icon: 'AlertTriangle'
      }
    ],
    visualComponent: 'SECURITY_PINS',
    speakerNotes: {
      coreGoal: 'Address the human risk: infiltration, rogue agents, fake credentials, and logistical chaos in deploying 176,846 people.',
      script: 'Your Excellency, technology is only as good as the humans operating it. In past elections, agents were infiltrated, credentials were stolen, and unauthorized people submitted fake reports. Our Participant Management Desk solves this. Every single agent receives a verified accreditation number, a salted cryptographic PIN, and a printable official ID badge with His Excellency’s portrait and an encrypted QR code. If an agent is arrested or compromised, headquarters can revoke their digital access in one second.',
      psychologicalCue: 'Emphasize command, discipline, and anti-sabotage security.',
      anticipatedQuestion: 'How do we distribute credentials to over 176,000 agents quickly?',
      winningAnswer: 'The system has integrated SMS and WhatsApp dispatch simulation. Coordinators can batch-generate PINs and send credentials directly to agents’ mobile phones in seconds.'
    }
  },
  {
    id: 10,
    category: 'MILITARY-GRADE SECURITY',
    title: 'Enterprise RBAC & 6-Tier Downward Access Control',
    subtitle: 'Preventing Rumors, Infiltration, Regional Panic, and Unauthorized Data Leaks',
    heroBadge: 'Compartmentalized Security Matrix',
    keyMetric: {
      label: 'Security Clearance Tiers',
      value: '6 Tiers',
      detail: 'Strict downward-only data segregation'
    },
    bulletPoints: [
      {
        title: 'Tier 1: Polling Unit Agent',
        desc: 'Confined strictly to their assigned PU. Zero visibility into other PUs, wards, or dashboards.',
        icon: 'Smartphone'
      },
      {
        title: 'Tiers 2 & 3: Ward & LGA Supervisors',
        desc: 'Restricted to their specific Registration Area and Local Government area only.',
        icon: 'Layers'
      },
      {
        title: 'Tiers 4 & 5: State & Regional Coordinators',
        desc: 'Oversees their respective State or Geopolitical Zone without access to rival regional data.',
        icon: 'ShieldCheck'
      },
      {
        title: 'Tier 6: National Presidential War Room',
        desc: 'Complete 37-jurisdiction pan-Nigerian command, strategic broadcast dispatch, and live presidential telemetry.',
        icon: 'Cpu'
      }
    ],
    visualComponent: 'COMMAND_HIERARCHY',
    speakerNotes: {
      coreGoal: 'Reassure the candidate that sensitive campaign numbers and strategies will never leak to the opposition or media prematurely.',
      script: 'In an election, information leaks cause panic and compromise strategy. Our architecture enforces strict downward-only role-based access control. A Polling Unit agent in Kano cannot see what is happening in Lagos. A Ward supervisor cannot see state totals. Only His Excellency, the Campaign Director General, and the National Coordinator in the Presidential Situation Room have full pan-Nigerian oversight.',
      psychologicalCue: 'Project military-grade discipline. High-level candidates value confidentiality and discretion above all else.',
      anticipatedQuestion: 'What prevents a compromised supervisor from leaking our numbers to our opponents?',
      winningAnswer: 'They only have access to their local jurisdiction. Furthermore, every query and export is watermarked and logged with a tamper-evident audit trail.'
    }
  },
  {
    id: 11,
    category: 'EXECUTION BLUEPRINT',
    title: 'Deployment Roadmap: Battle-Ready for February 2027',
    subtitle: 'From Today’s Executive Demonstration to Full Nationwide Field Commissioning',
    heroBadge: '4-Phase Strategic Rollout Plan',
    keyMetric: {
      label: 'Current Readiness',
      value: 'Phase 1 Done',
      detail: 'Ready for state cascade rollout'
    },
    bulletPoints: [
      {
        title: 'Phase 1: Architecture & Stress Testing (COMPLETED ✅)',
        desc: 'Core Next.js platform, offline crypto vault, multilingual AI, OCR comparison engine, and statutory forms built and verified.',
        icon: 'CheckCircle2'
      },
      {
        title: 'Phase 2: Zonal & State Supervisor Trainings (Q4 2026)',
        desc: 'Training 6 Regional Coordinators and 37 State Returning Officers on delimitation management and supervisor dashboards.',
        icon: 'Users'
      },
      {
        title: 'Phase 3: Nationwide Mock Election Simulation (January 2027)',
        desc: 'Full-scale stress test: 10,000 sample PUs transmitting simulated Form EC8As across all 6 geopolitical zones simultaneously.',
        icon: 'Zap'
      },
      {
        title: 'Phase 4: D-Day Live Battle-Station Execution (February 2027)',
        desc: '24/7 presidential situation room activation, real-time PVT collation, automated IReV discrepancy audit, and instant tribunal archiving.',
        icon: 'Award'
      }
    ],
    visualComponent: 'ROADMAP',
    speakerNotes: {
      coreGoal: 'Show meticulous, disciplined execution timeline that takes them from today’s meeting to election day without stress.',
      script: 'We do not bring you a prototype or a wish list. Phase 1 is already 100% complete and operational today. Our roadmap outlines a seamless transition: training zonal coordinators in Q4, running a 10,000-unit nationwide mock election simulation in January 2027 to stress-test servers under extreme load, and activating the 24/7 Presidential Situation Room on election day.',
      psychologicalCue: 'Show that this is a mature, phased institutional program, not a last-minute scramble.',
      anticipatedQuestion: 'Can our existing campaign ICT staff manage this platform?',
      winningAnswer: 'Yes. We designed the administrative console to be intuitive and we provide comprehensive hands-on training and 24/7 technical sidecar support.'
    }
  },
  {
    id: 12,
    category: 'THE WINNING EDGE',
    title: 'The Deciding Difference: Mandate Secured',
    subtitle: 'Why Partnering with GetoCore Digital Innovation Guarantees Electoral Victory and Defense',
    heroBadge: 'His Excellency Atiku Abubakar 2027 • The Road to Aso Rock',
    keyMetric: {
      label: 'The Choice in 2027',
      value: 'Victory',
      detail: 'Backed by technological dominance'
    },
    bulletPoints: [
      {
        title: 'Proven Nigerian Field Reality',
        desc: 'Built specifically for the realities of Nigerian collation centers, poor rural networks, and aggressive opponents.',
        icon: 'Award'
      },
      {
        title: 'Forensic Legal Invincibility',
        desc: 'Section 84 Evidence Act certified evidence that withstands the most aggressive scrutiny in Election Petition Tribunals.',
        icon: 'Scale'
      },
      {
        title: 'Uncompromised Integrity & Speed',
        desc: 'Parallel Vote Tabulation that gives His Excellency the truth hours before anyone else, putting the campaign in complete command.',
        icon: 'Zap'
      },
      {
        title: 'Immediate Commissioning Ready',
        desc: 'No waiting 6 months for software development. The system is live and ready for deployment today.',
        icon: 'CheckCircle2'
      }
    ],
    visualComponent: 'CALL_TO_ACTION',
    speakerNotes: {
      coreGoal: 'Deliver the powerful closing crescendo that leaves no doubt in Atiku Abubakar’s mind: GetoCore is the only choice.',
      script: 'Your Excellency, in 2027, victory will not belong to the candidate who campaigned the hardest; it will belong to the candidate with the superior operational intelligence. With GetoCore Digital Innovation, Your Excellency has the technology to protect every single vote cast in your name from Kaura Namoda to Nembe, from Badagry to Maiduguri. We are ready to stand with you, defend your mandate, and march with you to Aso Rock. Thank you, Your Excellency.',
      psychologicalCue: 'Stand tall with confidence and sincere conviction. Pause after the closing sentence to allow the gravity of the moment to sink in.',
      anticipatedQuestion: 'What are the immediate next steps to formally commission this project?',
      winningAnswer: 'Your Excellency, we are ready to sign the formal memorandum of understanding, provision your dedicated sovereign cloud servers, and commence Phase 2 zonal leadership training immediately.'
    },
    demoLink: { label: 'Return to Executive Dashboard', url: '/dashboard' }
  }
];

export default function PresentationPage() {
  const router = useRouter();
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [showNotes, setShowNotes] = useState(false);
  const [showDrawer, setShowDrawer] = useState(false);
  const [timerSeconds, setTimerSeconds] = useState(0);
  const [isTimerRunning, setIsTimerRunning] = useState(true);
  const [showDownloadModal, setShowDownloadModal] = useState(false);

  const handleLogout = async () => {
    try {
      await fetch('/api/auth', { method: 'DELETE' });
    } catch (e) {
      console.error(e);
    }
    router.push('/');
  };

  const currentSlide = SLIDES[currentSlideIndex];

  // Timer logic
  useEffect(() => {
    let interval: any = null;
    if (isTimerRunning) {
      interval = setInterval(() => {
        setTimerSeconds((prev) => prev + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isTimerRunning]);

  const formattedTimer = useMemo(() => {
    const mins = Math.floor(timerSeconds / 60);
    const secs = timerSeconds % 60;
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }, [timerSeconds]);

  // Keyboard Navigation
  const handleKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === 'ArrowRight' || e.key === 'Space') {
        e.preventDefault();
        setCurrentSlideIndex((prev) => (prev < SLIDES.length - 1 ? prev + 1 : prev));
      } else if (e.key === 'ArrowLeft' || e.key === 'Backspace') {
        e.preventDefault();
        setCurrentSlideIndex((prev) => (prev > 0 ? prev - 1 : prev));
      } else if (e.key === 'f' || e.key === 'F') {
        e.preventDefault();
        toggleFullscreen();
      } else if (e.key === 'n' || e.key === 'N') {
        e.preventDefault();
        setShowNotes((prev) => !prev);
      }
    },
    []
  );

  useEffect(() => {
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [handleKeyDown]);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen().then(() => setIsFullscreen(true)).catch(() => {});
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen().then(() => setIsFullscreen(false)).catch(() => {});
      }
    }
  };

  const nextSlide = () => {
    if (currentSlideIndex < SLIDES.length - 1) {
      setCurrentSlideIndex((prev) => prev + 1);
    }
  };

  const prevSlide = () => {
    if (currentSlideIndex > 0) {
      setCurrentSlideIndex((prev) => prev - 1);
    }
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-sans select-none overflow-x-hidden">
      {/* Top Presentation Bar */}
      <header className="min-h-[4.25rem] py-2 px-4 sm:px-6 bg-slate-900/90 backdrop-blur-md border-b border-purple-900/40 flex items-center justify-between shrink-0 z-40">
        <div className="flex items-center space-x-3 sm:space-x-4">
          <div className="flex flex-col items-center shrink-0">
            <div className="w-10 h-10 rounded-full border-2 border-amber-400 bg-slate-800 overflow-hidden shadow-md shrink-0">
              <img src="/logo.png" alt="Atiku 2027" className="w-full h-full object-cover" />
            </div>
            <button
              type="button"
              onClick={handleLogout}
              className="mt-1 px-1.5 py-0.5 rounded bg-red-950/80 hover:bg-red-700 border border-red-700/60 text-red-200 hover:text-white text-[8px] font-black uppercase tracking-wider transition active:scale-95 flex items-center gap-0.5"
              title="Log Out"
            >
              <LogOut className="w-2 h-2" />
              <span>Log Out</span>
            </button>
          </div>
          <div>
            <div className="flex items-center gap-2">
              <span className="text-xs sm:text-sm font-black tracking-wide text-white uppercase">
                Atiku Abubakar 2027
              </span>
              <span className="hidden md:inline-block text-[10px] px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-300 border border-amber-500/30 font-bold">
                ADC 🤝 High-Level Presentation
              </span>
            </div>
            <p className="text-[10px] sm:text-xs text-slate-400">
              Powered by GetoCore Digital Innovation
            </p>
          </div>
        </div>

        {/* Center Slide Indicator */}
        <div className="flex items-center gap-2 sm:gap-3">
          <button
            onClick={() => setShowDrawer((prev) => !prev)}
            className="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs font-bold text-amber-300 border border-slate-700 flex items-center gap-1.5 transition"
            title="Open Slide Directory"
          >
            <Layers className="w-3.5 h-3.5 text-amber-400" />
            <span>Slide {currentSlideIndex + 1} of {SLIDES.length}</span>
          </button>

          {/* Presentation Timer */}
          <div className="hidden sm:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-950 border border-slate-800 text-xs font-mono text-emerald-400 font-bold">
            <Clock className="w-3.5 h-3.5" />
            <span>{formattedTimer}</span>
            <button
              onClick={() => setIsTimerRunning((prev) => !prev)}
              className="text-slate-400 hover:text-white ml-1"
              title={isTimerRunning ? 'Pause Timer' : 'Resume Timer'}
            >
              {isTimerRunning ? <Pause className="w-3 h-3" /> : <Play className="w-3 h-3" />}
            </button>
            <button
              onClick={() => setTimerSeconds(0)}
              className="text-slate-400 hover:text-white"
              title="Reset Timer"
            >
              <RotateCcw className="w-3 h-3" />
            </button>
          </div>
        </div>

        {/* Right Controls */}
        <div className="flex items-center space-x-2">
          <button
            onClick={() => setShowNotes((prev) => !prev)}
            className={`px-3 py-1.5 rounded-xl text-xs font-bold border transition flex items-center gap-1.5 ${
              showNotes
                ? 'bg-amber-500 text-slate-950 border-amber-400'
                : 'bg-slate-800 text-slate-300 border-slate-700 hover:text-white'
            }`}
            title="Toggle Speaker Script Notes (N key)"
          >
            <BookOpen className="w-3.5 h-3.5" />
            <span className="hidden sm:inline">Speaker Notes (N)</span>
          </button>

          <button
            onClick={toggleFullscreen}
            className="p-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white border border-slate-700 transition"
            title="Toggle Fullscreen (F key)"
          >
            {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
          </button>

          {/* Download Deck Button */}
          <button
            onClick={() => setShowDownloadModal(true)}
            className="px-3 py-1.5 rounded-xl bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-slate-950 font-black text-xs shadow-md flex items-center gap-1.5 transition active:scale-95"
            title="Download Presentation Package (HTML, PDF, Script & ZIP)"
          >
            <Download className="w-3.5 h-3.5 text-slate-950" />
            <span className="hidden sm:inline">Download Deck</span>
            <span className="sm:hidden">Download</span>
          </button>

          <button
            onClick={() => window.print()}
            className="hidden md:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-amber-300 border border-amber-500/40 text-xs font-bold transition shadow-sm"
            title="Print or Save All Slides as PDF Handout"
          >
            <Printer className="w-3.5 h-3.5 text-amber-400" />
            <span>Print / PDF</span>
          </button>

          <Link
            href="/dashboard"
            className="hidden lg:flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-500 hover:to-emerald-600 text-white font-bold text-xs shadow-md transition"
          >
            <span>Live System</span>
            <ExternalLink className="w-3.5 h-3.5" />
          </Link>
        </div>
      </header>

      {/* Main Slide Presentation Stage */}
      <div className="flex-1 flex flex-col justify-between p-4 sm:p-8 lg:p-12 relative overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-purple-950/20 via-slate-950 to-slate-950">
        
        {/* Slide Category & Top Badge */}
        <div className="flex items-center justify-between gap-4 mb-4 sm:mb-6 animate-in fade-in slide-in-from-top-3">
          <div className="flex items-center gap-2 flex-wrap">
            <span className="px-3 py-1 rounded-full bg-purple-900/40 text-purple-300 border border-purple-800/50 text-[11px] font-black uppercase tracking-wider">
              {currentSlide.category}
            </span>
            <span className="px-3 py-1 rounded-full bg-amber-500/10 text-amber-300 border border-amber-500/30 text-[11px] font-bold">
              {currentSlide.heroBadge}
            </span>
          </div>
          {currentSlide.demoLink && (
            <Link
              href={currentSlide.demoLink.url}
              className="text-xs text-emerald-400 hover:text-emerald-300 font-bold flex items-center gap-1.5 hover:underline"
              target="_blank"
            >
              <span>{currentSlide.demoLink.label}</span>
              <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          )}
        </div>

        {/* Slide Main Content Area */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center flex-1 my-auto">
          {/* Left Column: Headlines & Bullet Points */}
          <div className="lg:col-span-7 space-y-6">
            <div>
              <h1 className="text-2xl sm:text-4xl lg:text-5xl font-black text-white leading-tight tracking-tight">
                {currentSlide.title}
              </h1>
              <p className="text-sm sm:text-lg text-slate-300 mt-2 font-medium">
                {currentSlide.subtitle}
              </p>
            </div>

            {/* Bullet Points */}
            <div className="grid grid-cols-1 gap-3.5 pt-2">
              {currentSlide.bulletPoints.map((bp, idx) => (
                <div
                  key={idx}
                  className="p-4 rounded-2xl bg-slate-900/70 border border-slate-800/80 hover:border-purple-900/60 transition group flex items-start gap-3.5"
                >
                  <div className="w-8 h-8 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-400 flex items-center justify-center shrink-0 mt-0.5 group-hover:scale-110 transition">
                    <CheckCircle2 className="w-4 h-4" />
                  </div>
                  <div>
                    <h4 className="text-sm sm:text-base font-bold text-white group-hover:text-amber-300 transition">
                      {bp.title}
                    </h4>
                    <p className="text-xs sm:text-sm text-slate-400 mt-1 leading-relaxed">
                      {bp.desc}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right Column: Visual Infographic & Key Metric */}
          <div className="lg:col-span-5 flex flex-col justify-center">
            {/* Highlighted Metric Card */}
            {currentSlide.keyMetric && (
              <div className="p-6 sm:p-8 rounded-3xl bg-gradient-to-br from-slate-900 via-purple-950/40 to-slate-900 border border-amber-500/40 shadow-2xl relative overflow-hidden mb-6 group">
                <div className="absolute top-0 right-0 w-32 h-32 bg-amber-500/10 rounded-full blur-3xl pointer-events-none group-hover:bg-amber-500/20 transition" />
                <span className="text-xs uppercase tracking-widest text-amber-400 font-bold block mb-1">
                  {currentSlide.keyMetric.label}
                </span>
                <div className="text-4xl sm:text-6xl font-black text-white font-mono tracking-tight my-1">
                  {currentSlide.keyMetric.value}
                </div>
                <p className="text-xs sm:text-sm text-slate-300 font-medium">
                  {currentSlide.keyMetric.detail}
                </p>
              </div>
            )}

            {/* Visual Dynamic Block based on visualComponent */}
            <div className="p-6 rounded-3xl bg-slate-900/90 border border-slate-800 shadow-xl space-y-4">
              <div className="flex items-center justify-between border-b border-slate-800 pb-3">
                <span className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
                  <ShieldCheck className="w-4 h-4 text-emerald-400" />
                  <span>Strategic Proof Component</span>
                </span>
                <span className="text-[10px] px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 font-mono">
                  VERIFIED
                </span>
              </div>

              {/* Dynamic Graphic Elements */}
              {currentSlide.visualComponent === 'TITLE' && (
                <div className="space-y-3 text-xs text-slate-300">
                  <div className="flex items-center justify-between p-3 rounded-xl bg-slate-950 border border-slate-800">
                    <span className="font-semibold text-white">Presidential Flagbearer</span>
                    <span className="font-bold text-amber-400">His Excellency Atiku Abubakar</span>
                  </div>
                  <div className="flex items-center justify-between p-3 rounded-xl bg-slate-950 border border-slate-800">
                    <span className="font-semibold text-white">Political Vehicle</span>
                    <span className="font-bold text-purple-300">African Democratic Congress (ADC 🤝)</span>
                  </div>
                  <div className="flex items-center justify-between p-3 rounded-xl bg-slate-950 border border-slate-800">
                    <span className="font-semibold text-white">Technology Partner</span>
                    <span className="font-bold text-emerald-400">GetoCore Digital Innovation</span>
                  </div>
                </div>
              )}

              {currentSlide.visualComponent === 'PROBLEMS' && (
                <div className="space-y-2 text-xs">
                  <div className="p-2.5 rounded-xl bg-red-950/40 border border-red-800/50 text-red-300 flex items-center justify-between">
                    <span>2019/2023 Collation Lag:</span>
                    <strong className="font-mono">Up to 72 Hours Lost</strong>
                  </div>
                  <div className="p-2.5 rounded-xl bg-red-950/40 border border-red-800/50 text-red-300 flex items-center justify-between">
                    <span>Doctored Form EC8A Photos:</span>
                    <strong className="font-mono">Unproven in Court</strong>
                  </div>
                  <div className="p-2.5 rounded-xl bg-emerald-950/50 border border-emerald-700/60 text-emerald-300 flex items-center justify-between">
                    <span>GetoCore 2027 Solution:</span>
                    <strong className="font-mono">Instant Cryptographic Defense</strong>
                  </div>
                </div>
              )}

              {currentSlide.visualComponent === 'PVT_SHIFT' && (
                <div className="space-y-2.5 text-xs">
                  <div className="flex justify-between items-center text-slate-300">
                    <span>Simultaneous Collation Rate</span>
                    <span className="font-mono font-bold text-emerald-400">99.8% by 8:30 PM</span>
                  </div>
                  <div className="w-full bg-slate-950 h-2.5 rounded-full overflow-hidden border border-slate-800">
                    <div className="bg-gradient-to-r from-emerald-500 to-amber-500 h-full w-[94%]" />
                  </div>
                  <p className="text-[11px] text-slate-400 italic">
                    Certified parallel count allows campaign to declare victory based on certified field duplicates.
                  </p>
                </div>
              )}

              {currentSlide.visualComponent === 'MOBILE_OFFLINE' && (
                <div className="p-3 bg-slate-950 rounded-2xl border border-slate-800 space-y-2 text-xs">
                  <div className="flex items-center gap-2 text-amber-300 font-bold">
                    <Lock className="w-4 h-4 text-emerald-400" />
                    <span>AES-GCM 256-Bit Offline Cryptographic Vault</span>
                  </div>
                  <p className="text-[11px] text-slate-400">
                    Zero dependency on MTN, Airtel, or Glo networks at voting points. Encrypted storage guarantees data persistence until sync.
                  </p>
                </div>
              )}

              {currentSlide.visualComponent === 'AI_CHATBOT' && (
                <div className="grid grid-cols-2 gap-2 text-[11px] font-bold">
                  <div className="p-2 rounded-xl bg-slate-950 border border-slate-800 text-center text-amber-300">
                    🇳🇬 Hausa Guidance
                  </div>
                  <div className="p-2 rounded-xl bg-slate-950 border border-slate-800 text-center text-emerald-300">
                    🇳🇬 Igbo Guidance
                  </div>
                  <div className="p-2 rounded-xl bg-slate-950 border border-slate-800 text-center text-purple-300">
                    🇳🇬 Yorùbá Guidance
                  </div>
                  <div className="p-2 rounded-xl bg-slate-950 border border-slate-800 text-center text-blue-300">
                    🇳🇬 Pidgin Guidance
                  </div>
                </div>
              )}

              {currentSlide.visualComponent === 'OCR_FORENSICS' && (
                <div className="space-y-2 text-xs">
                  <div className="flex items-center justify-between p-2 rounded-xl bg-slate-950 border border-slate-800">
                    <span className="text-slate-400">Physical Carbon Copy:</span>
                    <strong className="text-emerald-400 font-mono">ADC: 245 votes</strong>
                  </div>
                  <div className="flex items-center justify-between p-2 rounded-xl bg-slate-950 border border-slate-800">
                    <span className="text-slate-400">INEC IReV Upload:</span>
                    <strong className="text-red-400 font-mono">ADC: 145 votes (Altered)</strong>
                  </div>
                  <div className="p-2 rounded-xl bg-amber-500/10 border border-amber-500/30 text-amber-300 font-bold text-[11px] flex items-center gap-1.5">
                    <Scale className="w-4 h-4 shrink-0" />
                    <span>Auto-Tagged Exhibit: #ADC-EXHIBIT-OCR-0042</span>
                  </div>
                </div>
              )}

              {currentSlide.visualComponent === 'TRIBUNAL_LAW' && (
                <div className="p-3 bg-slate-950 rounded-2xl border border-slate-800 space-y-1.5 text-xs">
                  <div className="font-mono text-emerald-400 font-bold text-[11px] truncate">
                    HASH: sha256:e3b0c44298fc1c149afbf4c8996fb92427ae...
                  </div>
                  <p className="text-[11px] text-slate-400">
                    Evidence Act 2011 Sec 84(4) Electronic Computer Printout Certificate generated in 1 second.
                  </p>
                </div>
              )}

              {currentSlide.visualComponent === 'INEC_FORMS' && (
                <div className="space-y-1.5 text-xs">
                  <div className="flex justify-between p-2 rounded-xl bg-slate-950 border border-slate-800">
                    <span>Forms Generated:</span>
                    <span className="font-mono font-bold text-amber-300">EC8A, B, C, D, E</span>
                  </div>
                  <div className="flex justify-between p-2 rounded-xl bg-slate-950 border border-slate-800">
                    <span>Formats:</span>
                    <span className="font-mono font-bold text-emerald-400">Official PDF &amp; Tabular CSV</span>
                  </div>
                </div>
              )}

              {currentSlide.visualComponent === 'SECURITY_PINS' && (
                <div className="p-3 bg-slate-950 rounded-2xl border border-slate-800 space-y-2 text-xs">
                  <div className="flex items-center justify-between">
                    <span className="text-slate-400">Agent Accreditation:</span>
                    <strong className="text-amber-300 font-mono">ADC-2027-PU-1029</strong>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className="text-slate-400">Security PIN:</span>
                    <strong className="text-emerald-400 font-mono">**** (Salted SHA-256)</strong>
                  </div>
                  <div className="text-[10px] text-slate-400 border-t border-slate-800 pt-1">
                    Printable ID Badge with Atiku Portrait &amp; Lanyard punch.
                  </div>
                </div>
              )}

              {currentSlide.visualComponent === 'COMMAND_HIERARCHY' && (
                <div className="space-y-1 text-[11px]">
                  <div className="p-1.5 rounded-lg bg-slate-950 border border-slate-800 flex justify-between">
                    <span className="text-slate-400">Tier 6: National War Room</span>
                    <span className="text-amber-300 font-bold">Pan-Nigeria</span>
                  </div>
                  <div className="p-1.5 rounded-lg bg-slate-950 border border-slate-800 flex justify-between">
                    <span className="text-slate-400">Tier 5: 6 Regional Desks</span>
                    <span className="text-slate-300">Geopolitical Zones</span>
                  </div>
                  <div className="p-1.5 rounded-lg bg-slate-950 border border-slate-800 flex justify-between">
                    <span className="text-slate-400">Tier 4: 37 State Returning</span>
                    <span className="text-slate-300">36 States + FCT</span>
                  </div>
                  <div className="p-1.5 rounded-lg bg-slate-950 border border-slate-800 flex justify-between">
                    <span className="text-slate-400">Tier 1: 176,846 PU Agents</span>
                    <span className="text-emerald-400">Ground Zero Polling Units</span>
                  </div>
                </div>
              )}

              {currentSlide.visualComponent === 'ROADMAP' && (
                <div className="space-y-1.5 text-xs">
                  <div className="flex items-center gap-2 text-emerald-400 font-bold">
                    <CheckCircle2 className="w-4 h-4 shrink-0" />
                    <span>Phase 1 (Complete): Enterprise System Built</span>
                  </div>
                  <div className="flex items-center gap-2 text-amber-300 font-bold">
                    <Clock className="w-4 h-4 shrink-0" />
                    <span>Phase 2 (Q4 2026): Zonal Training Cascade</span>
                  </div>
                  <div className="flex items-center gap-2 text-slate-400 font-bold">
                    <Zap className="w-4 h-4 shrink-0" />
                    <span>Phase 3 (Jan 2027): 10,000 PU Nationwide Mock</span>
                  </div>
                </div>
              )}

              {currentSlide.visualComponent === 'CALL_TO_ACTION' && (
                <div className="text-center py-2 space-y-2">
                  <div className="text-sm font-black text-amber-300 uppercase tracking-wide">
                    Ready for Formal Commissioning
                  </div>
                  <p className="text-[11px] text-slate-300">
                    Immediate dedicated server deployment &amp; nationwide cascade activation.
                  </p>
                  <Link
                    href="/dashboard"
                    className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-gradient-to-r from-amber-500 to-amber-600 text-slate-950 font-black text-xs shadow-lg hover:from-amber-400 hover:to-amber-500 transition mt-1"
                  >
                    <span>Launch War Room Dashboard</span>
                    <ArrowRight className="w-4 h-4" />
                  </Link>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Bottom Slide Navigation Bar */}
        <div className="pt-6 border-t border-slate-800 flex items-center justify-between gap-4 shrink-0">
          <div className="flex items-center space-x-2">
            <button
              onClick={prevSlide}
              disabled={currentSlideIndex === 0}
              className="px-4 py-2 rounded-xl bg-slate-900 border border-slate-800 hover:bg-slate-800 disabled:opacity-30 disabled:pointer-events-none text-white text-xs font-bold flex items-center gap-1.5 transition"
            >
              <ChevronLeft className="w-4 h-4" />
              <span>Previous</span>
            </button>

            <button
              onClick={nextSlide}
              disabled={currentSlideIndex === SLIDES.length - 1}
              className="px-5 py-2 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 disabled:opacity-30 disabled:pointer-events-none text-xs font-black flex items-center gap-1.5 shadow-lg transition"
            >
              <span>Next Slide</span>
              <ChevronRight className="w-4 h-4" />
            </button>
          </div>

          {/* Slide Progress Dots */}
          <div className="hidden sm:flex items-center space-x-1.5 overflow-x-auto max-w-md py-1">
            {SLIDES.map((s, idx) => (
              <button
                key={s.id}
                onClick={() => setCurrentSlideIndex(idx)}
                className={`h-2 rounded-full transition-all ${
                  idx === currentSlideIndex
                    ? 'w-6 bg-amber-400 shadow-md'
                    : 'w-2 bg-slate-800 hover:bg-slate-700'
                }`}
                title={`Jump to Slide ${idx + 1}: ${s.title}`}
              />
            ))}
          </div>

          {/* Quick Key Hints */}
          <div className="hidden md:flex items-center text-[11px] text-slate-400 space-x-3">
            <span>
              Use <kbd className="px-1.5 py-0.5 rounded bg-slate-900 border border-slate-700 font-mono text-slate-300">Space</kbd> or <kbd className="px-1.5 py-0.5 rounded bg-slate-900 border border-slate-700 font-mono text-slate-300">→</kbd> to advance
            </span>
          </div>
        </div>
      </div>

      {/* Floating Speaker Notes Modal / Drawer */}
      {showNotes && (
        <div className="fixed bottom-20 right-4 sm:right-8 w-full max-w-lg bg-slate-900/95 backdrop-blur-xl border border-amber-500/50 rounded-3xl shadow-2xl p-5 z-50 animate-in fade-in slide-in-from-bottom-5 max-h-[70vh] overflow-y-auto">
          <div className="flex items-center justify-between border-b border-slate-800 pb-3 mb-3">
            <div className="flex items-center gap-2">
              <BookOpen className="w-4 h-4 text-amber-400" />
              <h3 className="text-xs font-black text-amber-300 uppercase tracking-wider">
                Speaker Teleprompter • Slide {currentSlide.id}
              </h3>
            </div>
            <button
              onClick={() => setShowNotes(false)}
              className="text-slate-400 hover:text-white text-xs font-bold px-2 py-0.5 rounded-lg hover:bg-slate-800"
            >
              Close (N)
            </button>
          </div>

          <div className="space-y-4 text-xs">
            <div>
              <span className="font-bold text-white block mb-1">🎯 Core Objective:</span>
              <p className="text-slate-300 bg-slate-950 p-2.5 rounded-xl border border-slate-800 leading-relaxed">
                {currentSlide.speakerNotes.coreGoal}
              </p>
            </div>

            <div>
              <span className="font-bold text-amber-300 block mb-1">🗣️ What to Say (Spoken Script):</span>
              <p className="text-slate-200 bg-purple-950/40 p-3 rounded-xl border border-purple-900/60 leading-relaxed italic">
                &ldquo;{currentSlide.speakerNotes.script}&rdquo;
              </p>
            </div>

            <div>
              <span className="font-bold text-emerald-300 block mb-1">🧠 Psychological Cue:</span>
              <p className="text-slate-300 bg-slate-950 p-2.5 rounded-xl border border-slate-800 leading-relaxed">
                {currentSlide.speakerNotes.psychologicalCue}
              </p>
            </div>

            <div className="p-3 rounded-2xl bg-amber-500/10 border border-amber-500/30 space-y-1">
              <span className="font-bold text-amber-400 flex items-center gap-1.5">
                <HelpCircle className="w-3.5 h-3.5" />
                <span>Anticipated Question from Table:</span>
              </span>
              <p className="text-slate-200 font-medium">
                {currentSlide.speakerNotes.anticipatedQuestion}
              </p>
              <div className="pt-1.5 border-t border-amber-500/20 text-emerald-300">
                <strong>Winning Answer:</strong> {currentSlide.speakerNotes.winningAnswer}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Slide Index Drawer */}
      {showDrawer && (
        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex justify-end">
          <div className="w-full max-w-md bg-slate-900 border-l border-slate-800 h-full p-6 overflow-y-auto space-y-4">
            <div className="flex items-center justify-between border-b border-slate-800 pb-4">
              <h3 className="font-black text-white text-base flex items-center gap-2">
                <Layers className="w-5 h-5 text-amber-400" />
                <span>Executive Slide Directory</span>
              </h3>
              <button
                onClick={() => setShowDrawer(false)}
                className="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800"
              >
                ✕
              </button>
            </div>

            <div className="space-y-2">
              {SLIDES.map((s, idx) => (
                <button
                  key={s.id}
                  onClick={() => {
                    setCurrentSlideIndex(idx);
                    setShowDrawer(false);
                  }}
                  className={`w-full text-left p-3.5 rounded-2xl border transition flex items-start gap-3 ${
                    idx === currentSlideIndex
                      ? 'bg-amber-500/10 border-amber-500/60 text-amber-300'
                      : 'bg-slate-950 border-slate-800 hover:border-slate-700 text-slate-300'
                  }`}
                >
                  <span className="text-xs font-mono font-black px-2 py-0.5 rounded bg-slate-800 text-slate-300 mt-0.5">
                    {String(s.id).padStart(2, '0')}
                  </span>
                  <div>
                    <h5 className="font-bold text-xs text-white leading-snug">{s.title}</h5>
                    <span className="text-[10px] text-slate-400 uppercase tracking-wider block mt-0.5">
                      {s.category}
                    </span>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Download Deck Modal */}
      {showDownloadModal && (
        <div className="fixed inset-0 z-50 bg-black/85 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in">
          <div className="w-full max-w-lg bg-slate-900 border border-purple-900/60 rounded-3xl shadow-2xl overflow-hidden flex flex-col my-auto max-h-[90vh]">
            {/* Header */}
            <div className="p-4 sm:p-5 bg-gradient-to-r from-purple-950 via-slate-900 to-amber-950/60 border-b border-purple-900/40 flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-amber-400 shadow-md bg-slate-800 shrink-0">
                  <img src="/logo.png" alt="Atiku 2027" className="w-full h-full object-cover" />
                </div>
                <div>
                  <h3 className="text-sm sm:text-base font-black text-white tracking-wide">
                    Download Presentation Slides
                  </h3>
                  <p className="text-xs text-slate-300 mt-0.5">
                    For His Excellency Atiku Abubakar &amp; High Command
                  </p>
                </div>
              </div>
              <button
                onClick={() => setShowDownloadModal(false)}
                className="p-2 rounded-xl text-slate-400 hover:text-white hover:bg-slate-800 transition"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Modal Body */}
            <div className="p-5 sm:p-6 overflow-y-auto space-y-4 text-xs">
              {/* Option 1: Microsoft PowerPoint Presentation (.PPTX) */}
              <div className="p-4 rounded-2xl bg-slate-950 border-2 border-amber-500/80 space-y-2 hover:border-amber-400 transition group shadow-lg shadow-amber-500/10">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="p-2 rounded-xl bg-amber-500/20 text-amber-300 border border-amber-500/40">
                      <FileSpreadsheet className="w-4 h-4" />
                    </div>
                    <div>
                      <div className="flex items-center gap-1.5">
                        <h4 className="font-black text-white text-xs sm:text-sm">
                          Microsoft PowerPoint (.PPTX)
                        </h4>
                        <span className="text-[9px] px-1.5 py-0.2 rounded-full bg-amber-400 text-slate-950 font-black">
                          RECOMMENDED
                        </span>
                      </div>
                      <p className="text-[11px] text-slate-400">
                        16:9 Widescreen, executive dark theme, and built-in Presenter Notes. 75 KB.
                      </p>
                    </div>
                  </div>
                </div>

                <a
                  href="/api/download-presentation?format=pptx"
                  download="Atiku2027_Executive_Presentation_Deck.pptx"
                  className="w-full py-2.5 px-4 rounded-xl bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-slate-950 font-black text-xs shadow-md flex items-center justify-center gap-2 transition active:scale-95"
                >
                  <Download className="w-4 h-4 text-slate-950" />
                  <span>Download PowerPoint Deck (.pptx)</span>
                </a>
              </div>

              {/* Option 2: Standalone HTML Slide Deck */}
              <div className="p-4 rounded-2xl bg-slate-950 border border-purple-900/50 space-y-2 hover:border-amber-400/60 transition group">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="p-2 rounded-xl bg-amber-500/10 text-amber-400 border border-amber-500/30">
                      <Sparkles className="w-4 h-4" />
                    </div>
                    <div>
                      <h4 className="font-black text-white text-xs sm:text-sm">
                        Standalone HTML Slide Deck (Offline App)
                      </h4>
                      <p className="text-[11px] text-slate-400">
                        Opens in any browser offline. Single file, 44 KB. Includes timer &amp; notes.
                      </p>
                    </div>
                  </div>
                </div>

                <a
                  href="/api/download-presentation?format=html"
                  download="Atiku2027_Executive_Presentation_Deck.html"
                  className="w-full py-2.5 px-4 rounded-xl bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-400 hover:to-amber-500 text-slate-950 font-black text-xs shadow-md flex items-center justify-center gap-2 transition"
                >
                  <Download className="w-4 h-4" />
                  <span>Download HTML Slides (.html)</span>
                </a>
              </div>

              {/* Option 2: Full Presentation Package ZIP */}
              <div className="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-2 hover:border-purple-800/60 transition group">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-400 border border-emerald-500/30">
                      <Layers className="w-4 h-4" />
                    </div>
                    <div>
                      <h4 className="font-black text-white text-xs sm:text-sm">
                        Complete Presidential Package (.ZIP)
                      </h4>
                      <p className="text-[11px] text-slate-400">
                        Includes HTML Slides, Full Spoken Script, and Executive Action Plan.
                      </p>
                    </div>
                  </div>
                </div>

                <a
                  href="/api/download-presentation?format=zip"
                  download="Atiku2027_Presidential_Presentation_Package.zip"
                  className="w-full py-2.5 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-emerald-300 font-black text-xs border border-emerald-500/40 shadow-md flex items-center justify-center gap-2 transition"
                >
                  <Download className="w-4 h-4" />
                  <span>Download Master ZIP Package (.zip)</span>
                </a>
              </div>

              {/* Option 3: Master Spoken Script */}
              <div className="p-4 rounded-2xl bg-slate-950 border border-slate-800 space-y-2 hover:border-slate-700 transition">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="p-2 rounded-xl bg-purple-500/10 text-purple-400 border border-purple-500/30">
                      <BookOpen className="w-4 h-4" />
                    </div>
                    <div>
                      <h4 className="font-black text-white text-xs sm:text-sm">
                        Speaker Script &amp; Q&amp;A Defense Playbook
                      </h4>
                      <p className="text-[11px] text-slate-400">
                        Exact word-for-word scripts, psychological cues, and tough question defenses.
                      </p>
                    </div>
                  </div>
                </div>

                <a
                  href="/api/download-presentation?format=script"
                  download="Atiku2027_Presentation_Spoken_Script.md"
                  className="w-full py-2 px-4 rounded-xl bg-slate-800 hover:bg-slate-700 text-purple-300 font-bold text-xs border border-purple-500/30 flex items-center justify-center gap-2 transition"
                >
                  <Download className="w-4 h-4" />
                  <span>Download Speaker Script (.md)</span>
                </a>
              </div>

              {/* Option 4: Direct Print / PDF Handout */}
              <div className="p-3 bg-slate-950 rounded-2xl border border-slate-800 flex items-center justify-between text-xs">
                <div>
                  <span className="font-bold text-white block">Print Handout / Save as PDF:</span>
                  <p className="text-[11px] text-slate-400">
                    Use your browser&apos;s print function to generate physical paper briefing sheets.
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => {
                    setShowDownloadModal(false);
                    setTimeout(() => window.print(), 300);
                  }}
                  className="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-amber-300 border border-amber-500/40 font-bold flex items-center gap-1.5 transition shrink-0 ml-2"
                >
                  <Printer className="w-3.5 h-3.5" />
                  <span>Print PDF</span>
                </button>
              </div>
            </div>

            {/* Footer */}
            <div className="p-4 bg-slate-950 border-t border-slate-800 flex items-center justify-between text-xs text-slate-400">
              <span className="text-[11px]">Ready for offline projection in Abuja</span>
              <button
                onClick={() => setShowDownloadModal(false)}
                className="px-4 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-white font-bold transition"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}