so I am developing NUGS STUDENT PORTAL, I have developed it upto a point and I am looking at continueing. but briefly lemme tell you about the project, 
Career Portal
 This is a personalized digital space that helps students discover their interests and receive guided career recommendations. Interest Areas: Students select topics they enjoy, allowing the system to understand their strengths and preferences. Students can explore diverse fields such as: a. Electronics b. Computer Games c. Technology d. Health & Medicine e. Business & Entrepreneurship f. Creative Arts g. Engineering & Architecture h. Law & Governance i. Environmental Science j. Communication & Media Smart Career Recommendations Based on selected interests, the platform suggests suitable career paths to guide students’ future planning. Once interest areas are selected, the system automatically suggests suitable career paths, including: a. Computer Programmer
b. Robotics Engineer c. Digital Marketer d. Biomedical Scientist e. Lawyer / Policy Analyst f. Environmental Consultant 2. Community Forum A safe and interactive space for students nationwide to share ideas, engage in discussions, and collaborate. Discussion Topics include: a. Gender Equality b. Student Leadership & Governance c. Mental Health & Wellness d. Climate Change & Sustainability e. Education Reforms f. Youth Employment g. Innovation & Entrepreneurship h. Political Awareness i. Social Media & Student Life Features: a. Browse discussion topics b. Read, comment, and contribute c. Like or report comments d. Moderation tools for safe interactions

Quiz Tools Interactive quizzes designed to test knowledge, build confidence, and enhance learning across key subjects. Categories: a. International Politics b. African History c. General Knowledge d. Science & Innovation e. Leadership & Governance f. Economics & Development g. Technology Trends Features: a. Multiple-choice & timed quizzes b. Instant scoring c. Detailed answer review d. Leaderboard rankings 4. Resume Builder A user-friendly tool for creating professional resumes tailored for internships, jobs, and academic applications.
Features include: a. Profile setup b. Professionally designed templates c. Guided writing tips d. Export as PDF / Word e. Integration with the Career Portal and job tools Empowering Students for the Future The new NUGS Website and Career Portal represent the union’s commitment to innovation, transparency, and student development. This platform is built not just as a website, but as a hub for information, opportunities, and community engagement.


As it stands now I want to focus on the building one module or feauture after the other, I want to start with the career portal, I have designed the fronted with mock data, the frontend is using react and typescript. I will share that one too here for your reference and also the entire database and sample of how I am calling some dtte

1. Current Tech Stack & Core Logic:

  - Styling: Tailwind CSS v4 with Global Dark Mode support.
  - State Management: resumeSlice (Redux) to manage JSON-based resume content
    and sync with the backend.
  - Database: resumes table uses a JSON column for content and template_settings
    to allow flexible section management without schema changes.
  - Template Strategy: Registry-based. The backend defines metadata (IDs,
    thumbnails, color rules), and the frontend maps these IDs to specific React
    Layout Components.

2. Completed Backend Architecture (Task 4.3):

  - Migrations: resumes table ready with user_id, name, template_id, and
    completeness_percentage.
  - Models: Resume.php with array casting for JSON fields.
  - Controller: ResumeController built with:
      - CRUD logic: Save/Update student resumes.
      - Auto-fill Engine: Endpoint to pull data from user_profiles and
        successful quiz_results (to suggest skills).
      - Strength Calculator: Logic to score resumes based on section completion.
  - Template Registry: TemplateRegistry.php service created to manage layout
    metadata (Modern, Classic, NSS-Special).

3. Frontend UI Foundation (The Editor):

  - Dual-Pane Interface: Left-side Editor (nested forms for Exp/Edu) +
    Right-side Real-time A4 Preview.
  - Logic: Handles complex state for dynamic lists (Add/Remove items), photo
    uploads, and template switching.
  - Ghanaian Context: Planned support for National Service (NSS) specific
    sections and "NUGS Verified" badges for verified students.

4. Immediate Next Steps (When You Return):

  working on the backend for the career portal and hooking to the frontend portal



CREATE TABLE `careers` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `description` text NOT NULL,
  `interest_id` bigint(20) UNSIGNED NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `events`
--

CREATE TABLE `events` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `organizer` varchar(255) NOT NULL,
  `location` varchar(255) NOT NULL,
  `start_date` datetime NOT NULL,
  `end_date` datetime DEFAULT NULL,
  `time_string` varchar(255) NOT NULL,
  `type` enum('Physical','Virtual') NOT NULL,
  `category` varchar(255) NOT NULL,
  `image_url` varchar(255) NOT NULL,
  `price` varchar(255) NOT NULL DEFAULT 'Free',
  `description` text NOT NULL,
  `external_link` varchar(255) DEFAULT NULL,
  `tags` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL CHECK (json_valid(`tags`)),
  `is_featured` tinyint(1) NOT NULL DEFAULT 0,
  `payment_status` enum('unpaid','pending','paid') NOT NULL DEFAULT 'unpaid',
  `status` enum('draft','pending_approval','published','rejected') NOT NULL DEFAULT 'draft',
  `transaction_id` varchar(255) DEFAULT NULL,
  `attendees_count` int(11) NOT NULL DEFAULT 0,
  `payment_choice` varchar(40) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `forum_categories`
--

CREATE TABLE `forum_categories` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `name` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `description` varchar(255) DEFAULT NULL,
  `icon` varchar(255) NOT NULL DEFAULT 'MessageSquare',
  `color` varchar(255) NOT NULL DEFAULT '#3b82f6',
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `forum_comments`
--

CREATE TABLE `forum_comments` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `forum_post_id` bigint(20) UNSIGNED NOT NULL,
  `parent_id` bigint(20) UNSIGNED DEFAULT NULL,
  `content` text NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `forum_comment_likes`
--

CREATE TABLE `forum_comment_likes` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `forum_comment_id` bigint(20) UNSIGNED NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `forum_posts`
--

CREATE TABLE `forum_posts` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `category_id` bigint(20) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `content` longtext DEFAULT NULL,
  `status` enum('pending','approved','rejected') NOT NULL DEFAULT 'pending',
  `views_count` int(11) NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `forum_post_images`
--

CREATE TABLE `forum_post_images` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `forum_post_id` bigint(20) UNSIGNED NOT NULL,
  `image_path` varchar(255) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `forum_post_likes`
--

CREATE TABLE `forum_post_likes` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `forum_post_id` bigint(20) UNSIGNED NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `forum_reports`
--

CREATE TABLE `forum_reports` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `reportable_type` varchar(255) NOT NULL,
  `reportable_id` bigint(20) UNSIGNED NOT NULL,
  `reason` varchar(255) NOT NULL,
  `details` text DEFAULT NULL,
  `status` enum('pending','resolved','dismissed') NOT NULL DEFAULT 'pending',
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `galleries`
--

CREATE TABLE `galleries` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `gallery_album_id` bigint(20) UNSIGNED NOT NULL,
  `image_path` varchar(255) NOT NULL,
  `caption` varchar(255) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `gallery_albums`
--

CREATE TABLE `gallery_albums` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `name` varchar(255) NOT NULL,
  `cover_image` varchar(255) NOT NULL,
  `description` varchar(400) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `gallery_photos`
--

CREATE TABLE `gallery_photos` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `gallery_album_id` bigint(20) UNSIGNED NOT NULL,
  `image_path` varchar(255) NOT NULL,
  `caption` varchar(255) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `interests`
--

CREATE TABLE `interests` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `name` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `interest_user`
--

CREATE TABLE `interest_user` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `interest_id` bigint(20) UNSIGNED NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `jobs`
--

CREATE TABLE `jobs` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `queue` varchar(255) NOT NULL,
  `payload` longtext NOT NULL,
  `attempts` tinyint(3) UNSIGNED NOT NULL,
  `reserved_at` int(10) UNSIGNED DEFAULT NULL,
  `available_at` int(10) UNSIGNED NOT NULL,
  `created_at` int(10) UNSIGNED NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `jobs_postings`
--

CREATE TABLE `jobs_postings` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `company_name` varchar(255) NOT NULL,
  `job_title` varchar(255) NOT NULL,
  `job_description` text NOT NULL,
  `location` varchar(255) NOT NULL,
  `application_url` varchar(255) DEFAULT NULL,
  `interest_id` bigint(20) UNSIGNED NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `job_batches`
--

CREATE TABLE `job_batches` (
  `id` varchar(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `total_jobs` int(11) NOT NULL,
  `pending_jobs` int(11) NOT NULL,
  `failed_jobs` int(11) NOT NULL,
  `failed_job_ids` longtext NOT NULL,
  `options` mediumtext DEFAULT NULL,
  `cancelled_at` int(11) DEFAULT NULL,
  `created_at` int(11) NOT NULL,
  `finished_at` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `likes`
--

CREATE TABLE `likes` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `likeable_type` varchar(255) NOT NULL,
  `likeable_id` bigint(20) UNSIGNED NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `messages`
--

CREATE TABLE `messages` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `sender_id` bigint(20) UNSIGNED NOT NULL,
  `receiver_id` bigint(20) UNSIGNED DEFAULT NULL,
  `subject` varchar(255) NOT NULL,
  `body` text NOT NULL,
  `is_broadcast` tinyint(1) NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `migrations`
--

CREATE TABLE `migrations` (
  `id` int(10) UNSIGNED NOT NULL,
  `migration` varchar(255) NOT NULL,
  `batch` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `notifications`
--

CREATE TABLE `notifications` (
  `id` char(36) NOT NULL,
  `type` varchar(255) NOT NULL,
  `notifiable_type` varchar(255) NOT NULL,
  `notifiable_id` bigint(20) UNSIGNED NOT NULL,
  `data` text NOT NULL,
  `read_at` timestamp NULL DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `options`
--

CREATE TABLE `options` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `question_id` bigint(20) UNSIGNED NOT NULL,
  `option_text` varchar(255) NOT NULL,
  `is_correct` tinyint(1) NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `password_resets`
--

CREATE TABLE `password_resets` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `email` varchar(255) NOT NULL,
  `otp_code` varchar(10) NOT NULL,
  `used` tinyint(1) NOT NULL DEFAULT 0,
  `expires_at` timestamp NULL DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `password_reset_tokens`
--

CREATE TABLE `password_reset_tokens` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `email` varchar(255) NOT NULL,
  `token` varchar(255) NOT NULL,
  `used` tinyint(1) NOT NULL DEFAULT 0,
  `expires_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `personal_access_tokens`
--

CREATE TABLE `personal_access_tokens` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `tokenable_type` varchar(255) NOT NULL,
  `tokenable_id` bigint(20) UNSIGNED NOT NULL,
  `name` text NOT NULL,
  `token` varchar(64) NOT NULL,
  `abilities` text DEFAULT NULL,
  `last_used_at` timestamp NULL DEFAULT NULL,
  `expires_at` timestamp NULL DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `profiles`
--

CREATE TABLE `profiles` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `institution` varchar(255) DEFAULT NULL,
  `graduation_year` varchar(255) DEFAULT NULL,
  `bio` text DEFAULT NULL,
  `avatar_url` varchar(255) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `questions`
--

CREATE TABLE `questions` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `quiz_id` bigint(20) UNSIGNED NOT NULL,
  `question_text` text NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `quizzes`
--

CREATE TABLE `quizzes` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `quiz_category_id` bigint(20) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `time_limit` int(11) NOT NULL DEFAULT 10,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `quiz_attempts`
--

CREATE TABLE `quiz_attempts` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `quiz_id` bigint(20) UNSIGNED NOT NULL,
  `score` int(11) NOT NULL,
  `total_questions` int(11) NOT NULL,
  `time_taken` int(11) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `quiz_categories`
--

CREATE TABLE `quiz_categories` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `name` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `reports`
--

CREATE TABLE `reports` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `reportable_type` varchar(255) NOT NULL,
  `reportable_id` bigint(20) UNSIGNED NOT NULL,
  `reason` text NOT NULL,
  `status` varchar(255) NOT NULL DEFAULT 'pending',
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `resources`
--

CREATE TABLE `resources` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `resource_category_id` bigint(20) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `description` text DEFAULT NULL,
  `file_url` varchar(255) NOT NULL,
  `file_type` varchar(255) NOT NULL DEFAULT 'pdf',
  `download_count` int(11) NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `resource_categories`
--

CREATE TABLE `resource_categories` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `name` varchar(255) NOT NULL,
  `slug` varchar(255) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `resumes`
--

CREATE TABLE `resumes` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `user_id` bigint(20) UNSIGNED NOT NULL,
  `name` varchar(255) NOT NULL DEFAULT 'My Resume',
  `template_id` varchar(255) NOT NULL DEFAULT 'modern',
  `template_settings` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL CHECK (json_valid(`template_settings`)),
  `content` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL CHECK (json_valid(`content`)),
  `completeness_score` int(11) NOT NULL DEFAULT 0,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `scholarships`
--

CREATE TABLE `scholarships` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `organization` varchar(255) NOT NULL,
  `type` enum('Government','Corporate','NGO','International') NOT NULL,
  `category` enum('Local','International') NOT NULL,
  `amount_description` varchar(255) NOT NULL,
  `deadline` date DEFAULT NULL,
  `expected_open` varchar(255) DEFAULT NULL,
  `status` enum('active','upcoming') NOT NULL DEFAULT 'active',
  `color_code` varchar(255) NOT NULL DEFAULT 'bg-slate-800',
  `logo_text` varchar(5) NOT NULL,
  `description` text NOT NULL,
  `tags` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL CHECK (json_valid(`tags`)),
  `eligibility` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL CHECK (json_valid(`eligibility`)),
  `requirements` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL CHECK (json_valid(`requirements`)),
  `website_url` varchar(255) NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `sessions`
--

CREATE TABLE `sessions` (
  `id` varchar(255) NOT NULL,
  `user_id` bigint(20) UNSIGNED DEFAULT NULL,
  `ip_address` varchar(45) DEFAULT NULL,
  `user_agent` text DEFAULT NULL,
  `payload` longtext NOT NULL,
  `last_activity` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `role` varchar(255) NOT NULL DEFAULT 'student',
  `is_suspended` tinyint(1) NOT NULL DEFAULT 0,
  `suspended_until` timestamp NULL DEFAULT NULL,
  `email_verified_at` timestamp NULL DEFAULT NULL,
  `is_verified` int(11) NOT NULL DEFAULT 0,
  `password` varchar(255) NOT NULL,
  `remember_token` varchar(100) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  `notifications_enabled` tinyint(1) NOT NULL DEFAULT 1,
  `dark_mode` tinyint(1) NOT NULL DEFAULT 0,
  `avatar_url` varchar(255) DEFAULT NULL,
  `cover_url` varchar(400) DEFAULT NULL,
  `headline` varchar(100) DEFAULT NULL,
  `level` varchar(100) DEFAULT NULL,
  `location` varchar(100) DEFAULT NULL,
  `year` varchar(100) DEFAULT NULL,
  `phone` varchar(100) DEFAULT NULL,
  `student_id` varchar(100) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

-- --------------------------------------------------------

--
-- Table structure for table `videos`
--

CREATE TABLE `videos` (
  `id` bigint(20) UNSIGNED NOT NULL,
  `title` varchar(255) NOT NULL,
  `youtube_id` varchar(255) NOT NULL,
  `category` varchar(255) NOT NULL DEFAULT 'General',
  `description` text DEFAULT NULL,
  `guest` varchar(200) DEFAULT NULL,
  `role` varchar(100) DEFAULT NULL,
  `duration` varchar(100) DEFAULT NULL,
  `views_count` varchar(100) DEFAULT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;



you can upgrade and modify the database where you seem fit 


now the frontend details
"use client";

import React, { useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Cpu, HeartPulse, Briefcase, Palette, Leaf, Gavel,
  ArrowRight, CheckCircle2, TrendingUp,
  DollarSign, Star, X, Sparkles, Lightbulb, GraduationCap,
  Building2, Book, UserPlus, Map, Gamepad2, AlertTriangle,
  Trophy, RefreshCcw, Award, Quote, Linkedin, Mail,
  Facebook, ExternalLink, Phone, Wrench,
  Zap, Target, Wand2, Loader2, MessageSquare, ChevronRight,
  ChevronLeft,
  Calculator, Utensils, Music, Camera, Scissors, Flower2,
} from "lucide-react";

import careersData, { CATEGORY_META } from "./CareersMock";
import type { Career, CareerCategory } from "./CareersMock";

// ─── TYPES ────────────────────────────────────────────────────────────────────

type CareerIdScore = Record<string, number>;
type CategoryKey = "tech" | "vocational" | "health" | "business" | "creative" | "agri";
type ScoreMap = Record<CategoryKey, number>;

const CAREER_CATEGORY: Record<string, CategoryKey> = {
  v1:"vocational", v2:"vocational", v3:"vocational", v4:"vocational",
  v5:"vocational", v6:"vocational", v7:"vocational", v8:"vocational",
  d1:"tech",       d2:"tech",       d3:"business",   d4:"health",
  d5:"agri",       d6:"creative",   d7:"business",   d8:"health",
  d9:"business",
};

// ─── SCORING HELPERS ──────────────────────────────────────────────────────────

function computeCareerScores(answers: CareerIdScore[]): CareerIdScore {
  const totals: CareerIdScore = {};
  answers.forEach((a) => {
    Object.keys(a).forEach((id) => {
      totals[id] = (totals[id] || 0) + (a[id] || 0);
    });
  });
  return totals;
}

function categoryScoresFromCareer(cs: CareerIdScore): ScoreMap {
  const out: ScoreMap = { tech:0, vocational:0, health:0, business:0, creative:0, agri:0 };
  Object.entries(cs).forEach(([id, val]) => {
    const cat = CAREER_CATEGORY[id];
    if (cat) out[cat] = (out[cat] || 0) + val;
  });
  return out;
}

function pickBestCareer(cs: CareerIdScore): Career {
  const sorted = Object.entries(cs).sort((a, b) => b[1] - a[1]);
  const bestId = sorted[0]?.[0];
  return careersData.find((c) => c.id === bestId) ?? careersData[0];
}

// FIX: rankAlternatives now correctly uses CareerIdScore (per-career scores)
function rankAlternatives(cs: CareerIdScore, primaryId: string): Career[] {
  return Object.entries(cs)
    .filter(([id]) => id !== primaryId)
    .sort((a, b) => b[1] - a[1])
    .map(([id]) => careersData.find((c) => c.id === id))
    .filter(Boolean)
    .slice(0, 9) as Career[];
}

// ─── QUESTIONS ────────────────────────────────────────────────────────────────

const QUESTIONS: Array<{
  id: number;
  question: string;
  subtitle: string;
  options: Array<{ label: string; emoji: string; color: string; scores: CareerIdScore }>;
}> = [
  {
    id: 1,
    question: "It's Saturday — no school. What are you most likely doing?",
    subtitle: "Your weekend tells us everything about who you are 🧠",
    options: [
      { label: "Cooking a new dish or trying a recipe",
        emoji: "🍳", color: "hover:bg-orange-50 hover:border-orange-400",
        scores: { v6:4, d5:1 } },
      { label: "Taking apart electronics to see how they work",
        emoji: "🔧", color: "hover:bg-amber-50 hover:border-amber-400",
        scores: { v7:3, v3:3, v5:2, d1:1 } },
      { label: "Posting content, making videos or reels",
        emoji: "📸", color: "hover:bg-pink-50 hover:border-pink-400",
        scores: { d7:4, d6:3 } },
      { label: "Watching tutorials and learning something online",
        emoji: "📱", color: "hover:bg-blue-50 hover:border-blue-400",
        scores: { d1:3, d2:3, d3:1 } },
      { label: "Decorating my room or making things look beautiful",
        emoji: "🏠", color: "hover:bg-rose-50 hover:border-rose-400",
        scores: { d6:4, v8:3 } },
      { label: "Dancing, singing, performing, or entertaining",
        emoji: "🕺", color: "hover:bg-violet-50 hover:border-violet-400",
        scores: { d6:3, d7:2, d9:1 } },
    ],
  },
  {
    id: 2,
    question: "Your friend is hosting a big event. What role do you naturally play?",
    subtitle: "Events reveal your natural superpower 🎉",
    options: [
      { label: "I'm in the kitchen — cooking for everyone",
        emoji: "👨‍🍳", color: "hover:bg-orange-50 hover:border-orange-400",
        scores: { v6:5 } },
      { label: "I'm decorating the venue — making it look beautiful",
        emoji: "🌸", color: "hover:bg-rose-50 hover:border-rose-400",
        scores: { d6:4, v8:2 } },
      { label: "I'm managing the budget and coordinating people",
        emoji: "📋", color: "hover:bg-violet-50 hover:border-violet-400",
        scores: { d3:3, d9:3, d7:2 } },
      { label: "I'm filming and creating content for social media",
        emoji: "🎬", color: "hover:bg-pink-50 hover:border-pink-400",
        scores: { d7:4, d6:3 } },
      { label: "I built the sound system or set up the tech",
        emoji: "🔊", color: "hover:bg-amber-50 hover:border-amber-400",
        scores: { v5:3, v3:3, d1:2 } },
      { label: "I'm the MC — hyping people up, keeping energy high",
        emoji: "🎤", color: "hover:bg-blue-50 hover:border-blue-400",
        scores: { d7:3, d9:2, d6:2 } },
    ],
  },
  {
    id: 3,
    question: "Which of these would you happily do for FREE because you love it?",
    subtitle: "Passion is the compass that never lies ❤️",
    options: [
      { label: "Sew, tailor, or make clothes and accessories",
        emoji: "🧵", color: "hover:bg-rose-50 hover:border-rose-400",
        scores: { v8:5, d6:2 } },
      { label: "Fix broken appliances, machines, or cars",
        emoji: "🛠️", color: "hover:bg-amber-50 hover:border-amber-400",
        scores: { v7:4, v4:3, v5:3, v1:2 } },
      { label: "Tend to plants, crops, or look after animals",
        emoji: "🌱", color: "hover:bg-emerald-50 hover:border-emerald-400",
        scores: { d5:5, d8:1 } },
      { label: "Care for sick people or children",
        emoji: "🩺", color: "hover:bg-teal-50 hover:border-teal-400",
        scores: { d4:5, d8:3, d9:1 } },
      { label: "Design logos, posters, or social media graphics",
        emoji: "🎨", color: "hover:bg-pink-50 hover:border-pink-400",
        scores: { d6:5, d7:3 } },
      { label: "Build or code apps, websites, or games",
        emoji: "💻", color: "hover:bg-blue-50 hover:border-blue-400",
        scores: { d1:5, d2:3 } },
    ],
  },
  {
    id: 4,
    question: "Your friend's small chop business is struggling. What is your FIRST suggestion?",
    subtitle: "How you solve problems shows where your genius lives 💡",
    options: [
      { label: "Make the jollof better — the food quality is the issue",
        emoji: "🍛", color: "hover:bg-orange-50 hover:border-orange-400",
        scores: { v6:4, d5:1 } },
      { label: "Redesign the packaging and create an Instagram page",
        emoji: "📦", color: "hover:bg-pink-50 hover:border-pink-400",
        scores: { d6:3, d7:4 } },
      { label: "Track the income and expenses properly",
        emoji: "📊", color: "hover:bg-violet-50 hover:border-violet-400",
        scores: { d3:5, d9:2 } },
      { label: "Get influencers to promote it on TikTok",
        emoji: "🎯", color: "hover:bg-rose-50 hover:border-rose-400",
        scores: { d7:5, d6:2 } },
      { label: "Build a website and online ordering system",
        emoji: "💻", color: "hover:bg-blue-50 hover:border-blue-400",
        scores: { d1:4, d2:2, d7:1 } },
      { label: "Source cheaper, fresher local farm ingredients",
        emoji: "🌽", color: "hover:bg-emerald-50 hover:border-emerald-400",
        scores: { d5:5, d3:1 } },
    ],
  },
  {
    id: 5,
    question: "Which school subject or activity makes you feel the most capable?",
    subtitle: "Your strengths are already pointing the way ✨",
    options: [
      { label: "Technical drawing, woodwork, or home management",
        emoji: "📐", color: "hover:bg-amber-50 hover:border-amber-400",
        scores: { v1:3, v4:2, v5:2, v2:2 } },
      { label: "Biology, chemistry, or integrated science",
        emoji: "🧬", color: "hover:bg-teal-50 hover:border-teal-400",
        scores: { d4:4, d8:4, d5:1 } },
      { label: "Maths, ICT, or computing",
        emoji: "🧮", color: "hover:bg-blue-50 hover:border-blue-400",
        scores: { d1:4, d2:4, d3:2 } },
      { label: "Visual arts, literature, or music",
        emoji: "🎭", color: "hover:bg-pink-50 hover:border-pink-400",
        scores: { d6:5, v8:2, d7:1 } },
      { label: "Economics, business management, or social studies",
        emoji: "📈", color: "hover:bg-violet-50 hover:border-violet-400",
        scores: { d3:4, d7:3, d9:3 } },
      { label: "Agriculture, food & nutrition, or environmental science",
        emoji: "🌿", color: "hover:bg-emerald-50 hover:border-emerald-400",
        scores: { d5:5, d4:2, d8:1 } },
    ],
  },
  {
    id: 6,
    question: "If someone gives you GH₵ 500 to start anything, what do you do?",
    subtitle: "Money responds to the way you think 💰",
    options: [
      { label: "Start a small food business — jollof, pastries, or drinks",
        emoji: "🍱", color: "hover:bg-orange-50 hover:border-orange-400",
        scores: { v6:5, d3:1 } },
      { label: "Buy fabrics and start making clothes or accessories",
        emoji: "👗", color: "hover:bg-rose-50 hover:border-rose-400",
        scores: { v8:5, d6:2 } },
      { label: "Start a social media page and build a following",
        emoji: "📲", color: "hover:bg-pink-50 hover:border-pink-400",
        scores: { d7:5, d6:3 } },
      { label: "Buy tech equipment — mic, ring light, editing tools",
        emoji: "🎙️", color: "hover:bg-blue-50 hover:border-blue-400",
        scores: { d1:3, d6:3, d7:2 } },
      { label: "Invest in farming — vegetables, poultry, or snails",
        emoji: "🐔", color: "hover:bg-emerald-50 hover:border-emerald-400",
        scores: { d5:5, d3:1 } },
      { label: "Buy tools and offer a repair or installation service",
        emoji: "🔩", color: "hover:bg-amber-50 hover:border-amber-400",
        scores: { v7:3, v5:3, v4:2, v2:2 } },
    ],
  },
  {
    id: 7,
    question: "A new shopping mall is opening in your town. Which job excites you most?",
    subtitle: "Where you see yourself shows what you value 🏙️",
    options: [
      { label: "Restaurant or food court chef",
        emoji: "👨‍🍳", color: "hover:bg-orange-50 hover:border-orange-400",
        scores: { v6:5 } },
      { label: "Interior designer for the shops and spaces",
        emoji: "🛋️", color: "hover:bg-rose-50 hover:border-rose-400",
        scores: { d6:5, v8:2 } },
      { label: "IT or tech support for the entire building",
        emoji: "🖥️", color: "hover:bg-blue-50 hover:border-blue-400",
        scores: { d1:3, v5:3, v3:2 } },
      { label: "Marketing and social media manager",
        emoji: "📣", color: "hover:bg-pink-50 hover:border-pink-400",
        scores: { d7:5, d6:2 } },
      { label: "Business analyst or financial manager",
        emoji: "💼", color: "hover:bg-violet-50 hover:border-violet-400",
        scores: { d3:4, d2:3, d9:2 } },
      { label: "Facilities, maintenance, or HVAC technician",
        emoji: "🏗️", color: "hover:bg-amber-50 hover:border-amber-400",
        scores: { v2:4, v5:3, v1:1 } },
    ],
  },
  // Q8 EXPANDED: 8 options covering more career paths
  {
    id: 8,
    question: "Which headline would make your mother cry tears of joy?",
    subtitle: "Your dream is valid — and closer than you think 🌟",
    options: [
      { label: "'Local chef's restaurant is the best in Accra — fully booked every weekend'",
        emoji: "🍽️", color: "hover:bg-orange-50 hover:border-orange-400",
        scores: { v6:5, d3:1 } },
      { label: "'Ghanaian engineer's app used by 1 million Africans'",
        emoji: "🚀", color: "hover:bg-blue-50 hover:border-blue-400",
        scores: { d1:5, d2:3 } },
      { label: "'Content creator from Kumasi becomes West Africa's biggest influencer'",
        emoji: "🌟", color: "hover:bg-pink-50 hover:border-pink-400",
        scores: { d7:4, d6:4 } },
      { label: "'Technician opens Ghana's first robotics training centre for youth'",
        emoji: "🤖", color: "hover:bg-amber-50 hover:border-amber-400",
        scores: { v3:5, v5:3, d1:1 } },
      { label: "'Young CEO's company employs 500 Ghanaians — expanding to Nigeria'",
        emoji: "🏆", color: "hover:bg-violet-50 hover:border-violet-400",
        scores: { d3:3, d9:3, d7:2, d5:1 } },
      { label: "'Doctor saves lives — builds free clinic in her home village'",
        emoji: "🏥", color: "hover:bg-teal-50 hover:border-teal-400",
        scores: { d4:5, d8:4 } },
      { label: "'Ghanaian agribusiness founder feeds a continent — exports cocoa to 20 countries'",
        emoji: "🌾", color: "hover:bg-emerald-50 hover:border-emerald-400",
        scores: { d5:5, d3:2 } },
      { label: "'Master welder from Takoradi wins West Africa's top pipeline engineering award'",
        emoji: "⚙️", color: "hover:bg-slate-100 hover:border-slate-400",
        scores: { v4:5, v5:3, v3:2 } },
    ],
  },
];


// ─── SIMULATIONS ──────────────────────────────────────────────────────────────

const SIMULATIONS: Record<string, {
  title: string;
  scenario: string;
  options: { text: string; correct: boolean; feedback: string }[];
}> = {
  v1: {
    title: "The Warped Timber Job 🪵",
    scenario: "A client orders 200 cabinet door panels. Halfway through the CNC run, you notice the timber has a slight warp — barely visible. The deadline is tomorrow morning. What do you do?",
    options: [
      { text: "Continue cutting — the warp is minor", correct: false, feedback: "Even minor warps compound across 200 panels. The client will reject the batch and you lose the contract." },
      { text: "Stop, measure warp tolerance, and decide if it's within spec", correct: true, feedback: "Exactly right. Precision means measuring before deciding. You check specs, then make an informed call." },
      { text: "Replace all timber immediately without checking", correct: false, feedback: "Waste of material and time. Check whether the warp exceeds tolerance first." },
    ],
  },
  v2: {
    title: "The Frozen Supermarket 🧊",
    scenario: "You get an emergency call at 2am. The cold room at a major supermarket has lost cooling. Thousands of cedis of stock will spoil by morning. What is your FIRST move?",
    options: [
      { text: "Check the electrical breaker panel first", correct: true, feedback: "Correct. 70% of HVAC failures are electrical. A tripped breaker takes 2 minutes to fix and could save the whole stock." },
      { text: "Start disassembling the compressor unit", correct: false, feedback: "Never disassemble before diagnosing. You could create a bigger problem — and it takes hours." },
      { text: "Tell them to move the stock to another store", correct: false, feedback: "Logistics nightmare at 2am. Diagnose first. Moving stock is a last resort." },
    ],
  },
  v3: {
    title: "The Production Line Crash 🤖",
    scenario: "The automated bottling line you maintain has suddenly halted mid-shift. The error light is flashing on PLC Station 3. 500 workers are standing idle. What do you do first?",
    options: [
      { text: "Check the PLC error log on the HMI screen", correct: true, feedback: "Excellent. The HMI error log tells you the exact fault code so you apply the right fix immediately." },
      { text: "Restart the entire PLC system", correct: false, feedback: "Restarting without reading the error can mask the fault — and cause the same crash 10 minutes later." },
      { text: "Call the machine supplier in Germany", correct: false, feedback: "Correct escalation eventually, but only after you've checked the local diagnostics first." },
    ],
  },
  v4: {
    title: "The Rejected Weld 💥",
    scenario: "An X-ray inspection reveals porosity in 3 of your pipeline welds. The project manager says to keep going — the deadline is tight. What do you do?",
    options: [
      { text: "Keep welding — 3 welds won't fail", correct: false, feedback: "Pipeline failure can be catastrophic. Safety is never negotiable." },
      { text: "Refuse, document the finding, and cut out the defective welds", correct: true, feedback: "Correct. AWS and ASME codes require defective welds to be removed. Your certification and safety depend on this." },
      { text: "Ask a colleague to sign off on it", correct: false, feedback: "That's liability transfer, not problem-solving. You are personally responsible for your welds." },
    ],
  },
  v5: {
    title: "The Energised Cable 🔌",
    scenario: "You are about to work on a motor control panel. You test the circuit with a multimeter and get no reading. A colleague says 'It's dead, just go in.' What do you do?",
    options: [
      { text: "Trust your colleague and proceed", correct: false, feedback: "Never. Multimeters can fail. One energised wire can kill instantly." },
      { text: "Test with a second device and apply Lockout-Tagout", correct: true, feedback: "Correct. LOTO is mandatory before working on any electrical panel. Always. No exceptions." },
      { text: "Ask your supervisor to test it again", correct: false, feedback: "Close — but you should apply LOTO yourself. Delegation does not remove personal responsibility." },
    ],
  },
  v6: {
    title: "The VIP Dinner Disaster 🍽️",
    scenario: "Your Head Chef calls in sick 2 hours before a 200-person VIP dinner. You are the most senior person in the kitchen. Three courses are half-prepped. What do you do first?",
    options: [
      { text: "Panic and call the event coordinator", correct: false, feedback: "Panic spreads to your team. Your calm is the kitchen's calm. Assess first, communicate second." },
      { text: "Call the team together, assign roles, and simplify the menu if needed", correct: true, feedback: "Leadership. Brief your team, re-assign stations, and make an executive decision on any course that can't be executed to standard." },
      { text: "Cancel the dinner", correct: false, feedback: "Last resort only. A great chef finds a way. Assess what you can deliver excellently and do that." },
    ],
  },
  v7: {
    title: "The Mystery Warning Light 🚗",
    scenario: "A customer brings in their Toyota with a Check Engine light. You scan the code: P0420. The customer says another garage told them it needs a new catalytic converter — a GH₵ 3,000 repair. What do you do?",
    options: [
      { text: "Order the catalytic converter immediately", correct: false, feedback: "P0420 can be caused by a faulty O2 sensor (GH₵ 150), an exhaust leak, or bad fuel. Diagnose properly first." },
      { text: "Check O2 sensor data and do a smoke test first", correct: true, feedback: "Excellent diagnostic thinking. Live O2 sensor data and a smoke test will confirm the real root cause." },
      { text: "Clear the code and tell the customer to come back if it returns", correct: false, feedback: "Clearing without diagnosing is unprofessional. Never ignore a fault." },
    ],
  },
  v8: {
    title: "The 'Make it Pop' Client 🎨",
    scenario: "You designed a sophisticated minimal look for a fashion brand. The client hates it — they want 'more colours, bigger logos, and some sparkle.' You know this will look cheap. What do you do?",
    options: [
      { text: "Do exactly what they asked", correct: false, feedback: "You are the design expert. Executing bad design damages your portfolio and the client's brand." },
      { text: "Show mockups in real-world context (packaging, social media, store front)", correct: true, feedback: "Smart. Seeing the design applied to real contexts almost always convinces clients that 'simple is powerful.'" },
      { text: "Tell them their taste is wrong", correct: false, feedback: "You may be right, but you will lose the client. Diplomacy and visual evidence are more powerful than opinions." },
    ],
  },
  d1: {
    title: "The Election Day Crash 🗳️",
    scenario: "It's SRC election day. The voting app you built just crashed because 5,000 students tried to vote at the exact same minute. The President is calling. What is your FIRST move?",
    options: [
      { text: "Restart the server and hope for the best", correct: false, feedback: "Restarting without reading logs is guesswork. You could make things worse." },
      { text: "Check the server logs to identify the root cause", correct: true, feedback: "Excellent. The logs will tell you exactly what failed — memory overload, DB connection limit, etc." },
      { text: "Post an apology on Twitter", correct: false, feedback: "Communication matters, but fix the system first." },
    ],
  },
  d2: {
    title: "The Sales Slump 📉",
    scenario: "Sales in the Kumasi branch dropped 40% last month. The Regional Manager wants to fire the sales team. You have the data. What do you look for first?",
    options: [
      { text: "Agree to fire the team — numbers don't lie", correct: false, feedback: "The numbers show WHAT happened, not WHY. Never act on a metric without understanding its context." },
      { text: "Analyse external factors — weather, competitor activity, economic events", correct: true, feedback: "Brilliant. The data might show heavy rains closed the market for two weeks." },
      { text: "Adjust the data to look better in the report", correct: false, feedback: "Data integrity is sacred. Manipulating data is fraud." },
    ],
  },
  d3: {
    title: "The Missing Thousands 💸",
    scenario: "You are auditing a company and find GH₵ 50,000 labelled 'transport costs' with no receipts. The CFO says 'Just sign it off — it's fine.' What do you do?",
    options: [
      { text: "Sign it off to maintain the relationship", correct: false, feedback: "This is fraud by omission. An accountant's greatest asset is their integrity." },
      { text: "Flag it as an unsubstantiated expense and document your finding", correct: true, feedback: "Correct. Without supporting documentation, it cannot be treated as a valid business expense." },
      { text: "Pay the GH₵ 50,000 yourself to fix it", correct: false, feedback: "Never mix personal and corporate funds." },
    ],
  },
  d4: {
    title: "The Dangerous Prescription 💊",
    scenario: "An elderly patient hands you a prescription for a strong blood thinner. You check their records and see they are already on a medication that interacts dangerously with this new one.",
    options: [
      { text: "Dispense it — the doctor knows best", correct: false, feedback: "Doctors make errors. As a pharmacist, you are the final safety check in the healthcare system." },
      { text: "Call the prescribing doctor immediately to discuss an alternative", correct: true, feedback: "Perfect. Inter-professional communication saves lives." },
      { text: "Tell the patient to stop their old medicine themselves", correct: false, feedback: "Never alter a patient's chronic medication without consulting their primary physician." },
    ],
  },
  d5: {
    title: "The Stuck Truck 🚛",
    scenario: "Your truck carrying 5 tonnes of fresh pineapples for export has broken down at Suhum. The ship leaves Tema in 8 hours. If you miss it, the fruit spoils and you lose the contract.",
    options: [
      { text: "Wait for a mechanic to arrive", correct: false, feedback: "Too risky. Mechanics can take 3-6 hours. You will miss the vessel." },
      { text: "Hire smaller vans from nearby towns immediately and transfer the load", correct: true, feedback: "Great crisis management. More expensive, but missing the export contract costs far more." },
      { text: "Sell the fruit by the roadside", correct: false, feedback: "You lose most of the revenue and almost certainly lose your European buyer contract permanently." },
    ],
  },
  d6: {
    title: "The Stolen Logo 🎨",
    scenario: "A client asks you to 'make something like this' and sends you a logo from a multinational company. They want something nearly identical for their new brand. What do you do?",
    options: [
      { text: "Recreate it closely — the client wants it", correct: false, feedback: "Copyright infringement exposes both you and your client to legal liability." },
      { text: "Explain the risk and propose drawing inspiration from the concept, not the design", correct: true, feedback: "Professional and ethical. Understand why they like it — then create something original that achieves the same goal." },
      { text: "Refuse the project entirely", correct: false, feedback: "Refusing loses the client. Educating them and offering a better solution keeps it." },
    ],
  },
  d7: {
    title: "The Detty December Dilemma 🎄",
    scenario: "Your juice brand client has GH₵ 10,000 for December. The CEO wants a motorway billboard. You believe digital is more effective. What do you recommend?",
    options: [
      { text: "Buy the billboard — the CEO is the boss", correct: false, feedback: "You are the expert. Your job is to give evidence-based advice, not just agree." },
      { text: "Present data comparing billboard CPM vs TikTok influencer reach for this audience", correct: true, feedback: "Exactly. Lead with data. Show the CEO that GH₵ 5k on TikTok can reach 500,000 targeted users." },
      { text: "Split the budget 50/50 without analysis", correct: false, feedback: "Compromise without data is not strategy. Analyse first, then recommend." },
    ],
  },
  d8: {
    title: "The Leaking Sample 🩸",
    scenario: "A blood sample arrives urgently for a malaria test. The tube is cracked and partially leaked. The doctor is calling for results. What do you do?",
    options: [
      { text: "Test the remaining blood — speed matters", correct: false, feedback: "A compromised sample gives unreliable results. A wrong malaria diagnosis can be fatal." },
      { text: "Reject the sample, document the reason, and request a fresh draw", correct: true, feedback: "Correct. Sample integrity is non-negotiable. Accurate results, even if delayed, are always better than fast wrong ones." },
      { text: "Estimate the result based on patient history", correct: false, feedback: "Guessing a lab result is not science — it is negligence." },
    ],
  },
  d9: {
    title: "The Office Confrontation 😤",
    scenario: "Two of your best employees are shouting at each other in an open-plan office. The whole floor has stopped working. Everyone is watching.",
    options: [
      { text: "Fire them both on the spot to set an example", correct: false, feedback: "You lose valuable talent and create a culture of fear." },
      { text: "Calmly separate them, address the office, and mediate privately", correct: true, feedback: "Leadership under pressure. De-escalate publicly, then listen to both sides privately before taking any action." },
      { text: "Send an email asking them to behave professionally", correct: false, feedback: "An email during a live confrontation is useless. Physical de-escalation must happen first." },
    ],
  },
};

// ─── HELPERS ─────────────────────────────────────────────────────────────────

const getCategoryIcon = (cat: string, size = 20) => {
  const props = { size };
  switch (cat) {
    case "tech":       return <Cpu {...props} />;
    case "health":     return <HeartPulse {...props} />;
    case "business":   return <Briefcase {...props} />;
    case "creative":   return <Palette {...props} />;
    case "vocational": return <Wrench {...props} />;
    case "agri":       return <Leaf {...props} />;
    case "law":        return <Gavel {...props} />;
    default:           return <Briefcase {...props} />;
  }
};

// ─── FUTURE SELF STORIES ──────────────────────────────────────────────────────

const FUTURE_SELF_STORIES: Record<string, string[]> = {
  v1: ["It's 7am in Kumasi. You pull on your overalls and ride to the workshop you own.", "Your three apprentices are already there. You trained them yourself.", "A furniture company in Tema has ordered 500 premium cabinet panels by Friday.", "The smell of fresh timber fills the air. It smells like money, and purpose.", "By noon your phone rings — a contractor from Takoradi wants 200 more units next month.", "You smile and say yes. Because you built this. With your hands. And nobody can take it away."],
  v2: ["It's 6am. Your phone buzzes — the Kempinski Hotel's HVAC system flagged a fault.", "You love being the person Accra's best hotels trust when things go wrong.", "By 7:45am you've diagnosed and fixed a faulty pressure valve. The manager shakes your hand.", "Your calendar shows three more sites today — a hospital, a cold storage facility, a new hotel.", "You have two technicians working under you now. You pay them well.", "Ghana's hospitality sector is booming. And you — the kid who took apart every appliance — are at the centre of it."],
  v3: ["The factory floor hums with machines you programmed yourself.", "You are the Automation Engineer at Kasapreko. 600 workers depend on these lines.", "A sensor throws an error. You read the fault code and fix it in four minutes.", "Your manager walks by. 'Good catch,' he says. You nod.", "After work, you lead a training session for junior technicians just like the student you were.", "You came from a polytechnic in Sunyani. You didn't go to university. And today you earn more than most graduates here."],
  v4: ["You're 40 feet underground, checking pipeline welds on a Ghana Gas project.", "Your AWS certification badge is clipped to your hard hat. It took two years to earn.", "'Perfect,' the Inspection Engineer says. 'As always.'", "Tonight you fly to Takoradi for a new offshore contract. Your daily rate is more than some people earn in a month.", "Your mother doesn't fully understand what you do.", "But she understands the house you built for her last year."],
  v5: ["The town of Dambai now has power — and it was your hands that made it happen.", "You installed a 50kW solar microgrid for 300 households.", "Children are studying under electric light tonight. That matters more than any salary.", "Your company, Asare Solar Solutions, now has contracts in four regions.", "You started as an HND student at Takoradi Technical University.", "You drive home past your solar panels catching the last rays of sunset. You built this. All of it."],
  v6: ["Your restaurant, Abena's Kitchen, is fully booked for the third weekend in a row.", "The flavours on your menu are purely Ghanaian — but the technique is world-class.", "Jollof arancini. Kelewele bruschetta. Kontomire risotto.", "A food blogger from London is dining at Table 4 tonight.", "You were told catering is not a 'real career'.", "Tonight, 80 people are paying to taste your future. And it is absolutely delicious."],
  v7: ["Your diagnostic workshop, KAO Auto Clinic, is the most trusted in Accra.", "A customer comes in — another garage quoted GH₵ 4,000 for parts they didn't need.", "You diagnose the real issue in 20 minutes. GH₵ 150 for an O2 sensor. They nearly cry with relief.", "Word of mouth is your best marketing. Honesty is your brand.", "You came from Nkawkaw. You studied at Sunyani Technical.", "Cars from ministers and CEOs come to your bay now."],
  v8: ["Your label, Akoma Designs, has just been featured in Vogue Africa.", "You are backstage at Accra Fashion Week. Your six models are wearing your latest collection.", "The fabrics are locally sourced. The patterns inspired by your grandmother's kente from Bonwire.", "A buyer from Paris is in the front row.", "You started with a second-hand sewing machine in your mother's living room in Kumasi.", "Tonight the world is watching you. And you are dressed in your own work."],
  d1: ["Your startup, PayLink Ghana, processes GH₵ 2 million in transactions every day.", "You started it from a laptop in your university hostel room.", "Today it has 800,000 users across six African countries.", "You are presenting at a Lagos tech conference. The audience hangs on your every word.", "A VC firm from London just offered you $2 million in funding.", "You came from a small town. You wrote your first line of code on a shared school computer. And you changed the continent."],
  d2: ["Your dashboard shows MTN Ghana's churn rate has dropped 12% since your analysis last quarter.", "You spotted a pattern nobody else did — customers were leaving because top-up wasn't accessible, not network quality.", "One data finding. Millions of cedis saved.", "Your manager presents your work to the Executive Committee. Your name is on every slide.", "You took the Google Data Analytics course online. For free. At age 17.", "Data doesn't care where you grew up. It only cares whether you can read it. And you can."],
  d3: ["PwC Partner. Three letters. A decade of work. Completely worth it.", "Today you are signing off on the audit for a company listing on the Ghana Stock Exchange.", "The CEO, the CFO, and the entire legal team are watching you. Your signature makes this real.", "You remember the ICAG exams — sitting in the study centre at midnight.", "You remember your father saying accounting was too difficult for someone from your background.", "You sign your name at the bottom of the report. Calm. Certain. Proud."],
  d4: ["It's 8am at Korle-Bu. You're reviewing the medication list for a 70-year-old patient.", "You catch a dangerous interaction between two drugs prescribed by two doctors who never communicated.", "You call both doctors. You suggest an alternative. The patient never knows how close they came.", "That is your job. Not dispensing pills. Being the safety net.", "You grew up in a village where the nearest pharmacy was 30km away.", "You became a pharmacist so no child would ever face that distance again."],
  d5: ["Your export company, GreenBridge Ghana, just shipped 40 tonnes of shea butter to Germany.", "COCOBOD calls you to advise on a new supply chain reform. You are 32 years old.", "You started by managing a cooperative of 40 farmers in Brong-Ahafo.", "Now 400 farmers depend on you for their income.", "Agriculture is not 'hoe and cutlass'. It built this country.", "And you are building its future."],
  d6: ["Your agency, Sankofa Studio, just won the pitch for MTN's Christmas campaign.", "GH₵ 800,000 contract. Your team of six — all Ghanaians.", "The brief says 'connect with young Ghanaians.' You smile. That's literally who you are.", "You remember submitting your first logo on Behance and getting zero views for three months.", "You kept designing. Every day. Even when nobody was watching.", "Now everyone is watching. And what they see is Ghana — in colour, in confidence, in your own hand."],
  d7: ["Your campaign for a Ghanaian coconut water brand just hit 2 million views on TikTok.", "From GH₵ 8,000 ad spend, the brand made GH₵ 180,000 in sales in one weekend.", "Your client is speechless. In a good way.", "You learned everything from free YouTube videos and Google courses.", "You did not wait for permission. You built a portfolio and showed what you could do.", "Now brands from Nigeria and Côte d'Ivoire are in your inbox. Results travel fast."],
  d8: ["Your lab at Noguchi just confirmed a new malaria strain in three district samples.", "You report it to the Ghana Health Service. Within 48 hours, a public health response is mobilised.", "You may never meet the thousands of people protected by that early warning.", "You are not a doctor. But without you, doctors would be guessing.", "Science ran in your blood since JHS — when you stayed late to finish every single lab experiment.", "You are a Biomedical Scientist. You are a guardian of public health. Ghana needs more of you."],
  d9: ["You are the HR Director of Gold Fields Ghana. 3,000 employees. You know many of their names.", "Today you are launching a mentorship programme for 200 young engineers from Ghanaian polytechnics.", "It was your idea. Your CEO approved it in under 10 minutes.", "You remember your first job interview — how nervous you were, how under-prepared you felt.", "You built this programme so no young Ghanaian joining this company ever feels that way again.", "People are your life's work. Not policies. Not paperwork. People."],
};

// ─── FUTURE SELF MODAL ────────────────────────────────────────────────────────

const FutureSelfModal: React.FC<{ career: Career; onClose: () => void }> = ({ career, onClose }) => {
  const [loading, setLoading] = useState(true);
  const [story, setStory] = useState<string[]>([]);
  const [displayedLines, setDisplayedLines] = useState(0);
  const cat = CATEGORY_META[career.category] ?? CATEGORY_META.tech;

  React.useEffect(() => {
    let cancelled = false;
    const fallback = FUTURE_SELF_STORIES[career.id] ?? [
      `It's a bright morning in Accra. You are a ${career.title}.`,
      "You wake up knowing today will matter.",
      "Your skills, built over years of hard work, are needed today.",
      "You are proof that where you start does not determine where you finish.",
      "Ghana built you. And now you are building Ghana.",
    ];
    if (!cancelled) {
      setStory(fallback);
      setLoading(false);
    }
    return () => { cancelled = true; };
  }, [career.id]);

  React.useEffect(() => {
    if (loading || story.length === 0) return;
    setDisplayedLines(0);
    const id = setInterval(() => {
      setDisplayedLines((n) => {
        if (n >= story.length) { clearInterval(id); return n; }
        return n + 1;
      });
    }, 850);
    return () => clearInterval(id);
  }, [loading, story]);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 cursor-pointer" style={{ background: "rgba(0,0,0,0.88)", backdropFilter: "blur(10px)" }} onClick={onClose}>
      <motion.div initial={{ scale: 0.88, opacity: 0, y: 32 }} animate={{ scale: 1, opacity: 1, y: 0 }} exit={{ scale: 0.88, opacity: 0, y: 32 }} transition={{ type: "spring", stiffness: 280, damping: 26 }} className="bg-slate-950 rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl relative cursor-default" onClick={(e) => e.stopPropagation()}>
        <div className="absolute inset-0 pointer-events-none overflow-hidden">
          {Array.from({ length: 28 }).map((_, i) => (
            <div key={i} className="absolute rounded-full bg-white animate-pulse" style={{ width: Math.random() * 2 + 1, height: Math.random() * 2 + 1, top: `${Math.random() * 100}%`, left: `${Math.random() * 100}%`, opacity: Math.random() * 0.35 + 0.08, animationDelay: `${Math.random() * 3}s`, animationDuration: `${2 + Math.random() * 3}s` }} />
          ))}
        </div>
        <div className="relative z-10 p-7 pb-4">
          <button onClick={onClose} className="absolute top-5 right-5 w-8 h-8 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors cursor-pointer"><X size={16} /></button>
          <div className="flex items-center gap-3 mb-2">
            <div className="w-10 h-10 rounded-2xl flex items-center justify-center" style={{ background: cat.color }}>
              <Wand2 size={20} className="text-white" />
            </div>
            <div>
              <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Your Future Self</p>
              <h3 className="text-white font-black text-lg leading-tight">{career.title}</h3>
            </div>
          </div>
          <p className="text-slate-500 text-xs">A glimpse of who you are becoming…</p>
        </div>
        <div className="relative z-10 px-7 pb-8 min-h-[220px]">
          {loading ? (
            <div className="flex flex-col items-center justify-center py-12 gap-3">
              <Loader2 size={28} className="text-white/40 animate-spin" />
              <p className="text-slate-500 text-sm">Writing your story…</p>
            </div>
          ) : (
            <div className="space-y-4">
              {story.slice(0, displayedLines).map((line, i) => (
                <motion.p key={i} initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.45 }} className="text-white leading-relaxed" style={{ fontSize: i === 0 ? 17 : 14, fontWeight: i === story.length - 1 ? 700 : 400 }}>
                  {i === 0 ? "🌅 " : i === story.length - 1 ? "⭐ " : ""}{line}
                </motion.p>
              ))}
            </div>
          )}
        </div>
        {!loading && displayedLines >= story.length && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="relative z-10 px-7 pb-7">
            <div className="h-px bg-white/10 mb-5" />
            <div className="flex gap-3">
              <button onClick={onClose} className="flex-1 py-3 rounded-2xl font-black text-sm text-white transition-all hover:brightness-110 cursor-pointer" style={{ background: cat.color }}>This is my future 🔥</button>
              <button onClick={onClose} className="px-5 py-3 rounded-2xl font-black text-sm bg-white/10 text-white hover:bg-white/20 transition-colors cursor-pointer">Close</button>
            </div>
          </motion.div>
        )}
      </motion.div>
    </div>
  );
};

// ─── LIFE PROJECTOR MODAL ─────────────────────────────────────────────────────

const LIFE_DATA: Record<string, { min: number; max: number; city: string; industry: string }> = {
  v1: { min: 4000,  max: 9000,  city: "Kumasi",   industry: "Timber & Furniture" },
  v2: { min: 4500,  max: 10000, city: "Accra",    industry: "HVAC & Facilities" },
  v3: { min: 6000,  max: 14000, city: "Tema",     industry: "Manufacturing" },
  v4: { min: 5000,  max: 12000, city: "Takoradi", industry: "Oil & Gas" },
  v5: { min: 5000,  max: 13000, city: "Accra",    industry: "Energy & Solar" },
  v6: { min: 5000,  max: 15000, city: "Accra",    industry: "Hospitality" },
  v7: { min: 4000,  max: 11000, city: "Accra",    industry: "Automotive" },
  v8: { min: 3500,  max: 10000, city: "Accra",    industry: "Fashion & Textiles" },
  d1: { min: 8000,  max: 20000, city: "Accra",    industry: "Technology" },
  d2: { min: 7000,  max: 15000, city: "Accra",    industry: "Data & Analytics" },
  d3: { min: 6000,  max: 18000, city: "Accra",    industry: "Finance & Audit" },
  d4: { min: 5000,  max: 14000, city: "Kumasi",   industry: "Healthcare" },
  d5: { min: 5000,  max: 15000, city: "Accra",    industry: "Agriculture" },
  d6: { min: 4000,  max: 10000, city: "Accra",    industry: "Creative & Design" },
  d7: { min: 5000,  max: 12000, city: "Accra",    industry: "Marketing" },
  d8: { min: 6000,  max: 15000, city: "Accra",    industry: "Medical Science" },
  d9: { min: 5000,  max: 12000, city: "Accra",    industry: "Human Resources" },
};

const fmtGhc = (n: number) => `GH\u20b5 ${n.toLocaleString()}`;

const LifeProjectorModal: React.FC<{ career: Career; onClose: () => void }> = ({ career, onClose }) => {
  const data = LIFE_DATA[career.id] ?? { min: 5000, max: 12000, city: "Accra", industry: "Professional" };
  const [year, setYear] = useState(5);
  const cat = CATEGORY_META[career.category] ?? CATEGORY_META.tech;

  const salaryAtYear = Math.round(data.min * Math.pow(1.08, year));
  const annualSalary = salaryAtYear * 12;
  const rent = Math.round(salaryAtYear * 0.22);
  const food = Math.round(salaryAtYear * 0.18);
  const transport = Math.round(salaryAtYear * 0.12);
  const savings = Math.round(salaryAtYear * 0.20);
  const schoolFees = year >= 5 ? Math.round(salaryAtYear * 0.10) : 0;
  const lifestyle = Math.max(0, salaryAtYear - rent - food - transport - savings - schoolFees);

  const bars = [
    { label: "Rent",        value: rent,        color: "#EF4444" },
    { label: "Food",        value: food,        color: "#F97316" },
    { label: "Transport",   value: transport,   color: "#EAB308" },
    { label: "Savings",     value: savings,     color: "#22C55E" },
    { label: "School fees", value: schoolFees,  color: "#3B82F6" },
    { label: "Lifestyle",   value: lifestyle,   color: "#8B5CF6" },
  ].filter((b) => b.value > 0);

  const milestones = [
    { label: "Latest smartphone",     ok: salaryAtYear >= 3000,  icon: "📱" },
    { label: "Personal laptop",       ok: salaryAtYear >= 5000,  icon: "💻" },
    { label: "Pay family school fees",ok: salaryAtYear >= 6000,  icon: "🎓" },
    { label: "Buy a car",             ok: salaryAtYear >= 8000,  icon: "🚗" },
    { label: "Build or buy a house",  ok: year >= 15 && annualSalary >= 120000, icon: "🏠" },
    { label: "Start your own business",ok: salaryAtYear >= 7000, icon: "🏪" },
  ];

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 cursor-pointer" style={{ background: "rgba(15,23,42,0.85)", backdropFilter: "blur(8px)" }} onClick={onClose}>
      <motion.div
        initial={{ scale: 0.9, opacity: 0, y: 30 }}
        animate={{ scale: 1, opacity: 1, y: 0 }}
        exit={{ scale: 0.9, opacity: 0, y: 30 }}
        transition={{ type: "spring", stiffness: 280, damping: 26 }}
        className="bg-white rounded-3xl w-full max-w-lg overflow-hidden shadow-2xl cursor-default"
        style={{ maxHeight: "90vh", overflowY: "auto" }}
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-6 pb-4 relative" style={{ background: cat.color }}>
          <button onClick={onClose} className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/30 text-white transition-colors cursor-pointer">
            <X size={16} />
          </button>
          <div className="flex items-center gap-3 mb-1">
            <Calculator size={22} className="text-white" />
            <div>
              <p className="text-white/70 text-xs font-bold uppercase tracking-wider">Life Projector</p>
              <h3 className="text-white font-black text-lg leading-tight">{career.title}</h3>
            </div>
          </div>
          <p className="text-white/70 text-xs">{data.city} · {data.industry} · Real Ghanaian salary data</p>
        </div>

        <div className="p-6 space-y-6">
          <div>
            <div className="flex justify-between items-center mb-2">
              <label className="text-sm font-black text-slate-900">Years into your career</label>
              <span className="text-2xl font-black" style={{ color: cat.color }}>Year {year}</span>
            </div>
            <input type="range" min={1} max={20} value={year} step={1} onChange={(e) => setYear(Number(e.target.value))} className="w-full cursor-pointer" />
            <div className="flex justify-between text-[10px] text-slate-400 font-bold mt-1">
              <span>Yr 1</span><span>Yr 5</span><span>Yr 10</span><span>Yr 15</span><span>Yr 20</span>
            </div>
          </div>

          <div className="text-center p-5 rounded-2xl border-2" style={{ borderColor: cat.color, background: cat.bg }}>
            <p className="text-xs font-black uppercase tracking-wider mb-1" style={{ color: cat.accent }}>Monthly salary at Year {year}</p>
            <p className="text-4xl font-black" style={{ color: cat.color }}>{fmtGhc(salaryAtYear)}</p>
            <p className="text-xs text-slate-500 mt-1">{fmtGhc(annualSalary)} / year · Growing ~8% annually</p>
          </div>

          <div>
            <p className="text-sm font-black text-slate-900 mb-3">Where your money goes (monthly)</p>
            <div className="space-y-2.5">
              {bars.map((b) => (
                <div key={b.label}>
                  <div className="flex justify-between text-xs font-bold mb-1">
                    <span className="text-slate-600">{b.label}</span>
                    <span style={{ color: b.color }}>{fmtGhc(b.value)}</span>
                  </div>
                  <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                    <motion.div className="h-full rounded-full" initial={{ width: 0 }} animate={{ width: `${Math.min((b.value / salaryAtYear) * 100, 100)}%` }} transition={{ duration: 0.6 }} style={{ background: b.color }} />
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <p className="text-sm font-black text-slate-900 mb-3">What you can afford at Year {year}</p>
            <div className="grid grid-cols-2 gap-2">
              {milestones.map((m) => (
                <div key={m.label} className={`flex items-center gap-2 p-2.5 rounded-xl text-xs font-bold transition-all ${m.ok ? "bg-emerald-50 text-emerald-700 border border-emerald-200" : "bg-slate-100 text-slate-400 border border-slate-200"}`}>
                  <span className={m.ok ? "" : "grayscale opacity-40"}>{m.icon}</span>
                  <span className="leading-tight">{m.label}</span>
                  {m.ok && <CheckCircle2 size={11} className="ml-auto shrink-0" />}
                </div>
              ))}
            </div>
          </div>

          <div className="bg-slate-950 text-white p-4 rounded-2xl">
            <div className="flex items-center gap-2 mb-2">
              <span className="text-amber-400 text-lg">🐷</span>
              <p className="font-black text-sm">Save {fmtGhc(savings)}/month for {year} years</p>
            </div>
            <p className="text-2xl font-black text-amber-400">{fmtGhc(savings * 12 * year)}</p>
            <p className="text-slate-400 text-xs mt-1">Total saved · Without any investment returns</p>
          </div>

          <button onClick={onClose} className="w-full py-3 rounded-2xl font-black text-white text-sm hover:brightness-110 transition-all cursor-pointer" style={{ background: cat.color }}>
            This is my future — let's go! 🔥
          </button>
        </div>
      </motion.div>
    </div>
  );
};

// ─── AI TEXT INPUT VIEW ───────────────────────────────────────────────────────

const KEYWORD_SCORES: Array<{ words: string[]; scores: CareerIdScore }> = [
  { words: ["cook","cooking","chef","kitchen","bake","baking","pastry","jollof","waakye","kelewele","recipe","meal","dish","catering","restaurant","fry","stew","food prep","confection"], scores: { v6:5 } },
  { words: ["sew","sewing","tailor","tailoring","fabric","cloth","kente","stitch","pattern","garment","dress","outfit","needle","thread","wax print","ankara","fashion design","seamstress"], scores: { v8:5, d6:2 } },
  { words: ["car repair","vehicle repair","automotive","brake","tyre","tire","garage","mechanic","engine repair","auto repair"], scores: { v7:5 } },
  { words: ["weld","welding","fabricat","pipeline","structural steel","metal work"], scores: { v4:5 } },
  { words: ["carpenter","carpentry","cabinet","joinery","woodwork","furniture making","cnc wood"], scores: { v1:5 } },
  { words: ["electric","electrical","solar panel","solar energy","inverter","wiring","socket","power","generator install"], scores: { v5:5 } },
  { words: ["hvac","air condition","refrigerat","cooling","cold room","compressor","plumb","plumbing","pipe fitting","boiler"], scores: { v2:5 } },
  { words: ["robot","robotics","automat","mechatronics","plc programming","industrial machine"], scores: { v3:5, d1:1 } },
  { words: ["hair","hairdress","hairstyle","barber","barbering","nail art","manicure","pedicure","lash","makeup artist","skincare","salon","braiding","weave","beautician"], scores: { v8:3 } },
  { words: ["decor","decoration","decorating","interior design","home design","home decor","event decor","flowers","floral arrangement","staging"], scores: { d6:4, v8:2 } },
  { words: ["dance","dancing","dancer","choreograph","perform","performance","entertain","theatre","stage","drama"], scores: { d6:3, d7:2 } },
  { words: ["code","coding","program","programming","software","developer","web developer","app developer","website","python","java","javascript","html","game develop","cybersecurity","network","cloud","artificial intelligence","machine learning"], scores: { d1:5, d2:2 } },
  { words: ["data","analytics","data analysis","excel pivot","sql","dashboard","powerbi","tableau","statistics","dataset","insights"], scores: { d2:5, d1:1 } },
  { words: ["phone repair","laptop repair","hardware","electronic repair","circuit board","gadget repair"], scores: { v7:3, d1:1 } },
  { words: ["doctor","medicine","medical","nurse","nursing","hospital","clinic","patient","pharmacy","pharmacist","drug","diagnose","surgery","midwife","physiotherapy","paramedic","first aid","healthcare"], scores: { d4:5, d8:2 } },
  { words: ["lab","laboratory","biology","chemistry","specimen","sample","biomedical","microbiology","haematology","lab scientist"], scores: { d8:5, d4:2 } },
  { words: ["accounting","finance","financial","audit","tax","bookkeeping","icag","acca","balance sheet","budget","investment","banking","stock market"], scores: { d3:5, d2:1 } },
  { words: ["marketing","social media","instagram","tiktok","content","influencer","followers","viral","vlog","brand","campaign","seo","digital ads","promote"], scores: { d7:5, d6:2 } },
  { words: ["business","entrepreneur","sell","selling","sales","trade","trading","import","export","management","ceo","company","startup","negotiate","customer"], scores: { d3:3, d9:2, d7:1 } },
  { words: ["human resource","hr manager","recruitment","hire","employee","welfare","people management","talent management"], scores: { d9:5 } },
  { words: ["farm","farming","farmer","crop","crops","plant","garden","animal","livestock","poultry","chicken","fish","agric","agriculture","cocoa","maize","cassava","yam","vegetable","harvest","soil","agribusiness"], scores: { d5:5 } },
];

function scoreTextLocally(input: string): { career: Career; catScores: ScoreMap; careerScores: CareerIdScore } {
  const lower = input.toLowerCase();
  const cs: CareerIdScore = {};

  for (const entry of KEYWORD_SCORES) {
    for (const word of entry.words) {
      if (lower.includes(word)) {
        Object.keys(entry.scores).forEach((id) => {
          cs[id] = (cs[id] || 0) + (entry.scores[id] || 0);
        });
        break;
      }
    }
  }

  if (Object.keys(cs).length === 0) cs["d3"] = 1;

  const career = pickBestCareer(cs);
  const catScores = categoryScoresFromCareer(cs);
  return { career, catScores, careerScores: cs };
}

const AITextInputView: React.FC<{
  onComplete: (primary: Career, catScores: ScoreMap, careerScores: CareerIdScore) => void;
  onBack: () => void;
}> = ({ onComplete, onBack }) => {
  const [text, setText] = useState("");
  const [error, setError] = useState("");
  const [analysing, setAnalysing] = useState(false);
  const [matchedKeywords, setMatchedKeywords] = useState<string[]>([]);

  const examples = [
    "I love cooking and I often make food for my family. I enjoy making the house look nice and pretty. I watch a lot of cooking shows.",
    "I am good at fixing things like phones, radios, and even our generator. I like building stuff with my hands.",
    "I enjoy dancing and performing. I post videos online and people like them. I also like fashion and designing outfits.",
    "I like helping people. I want to be a nurse or doctor one day. Biology is my best subject.",
    "I love making hair and doing nails for people. Everyone says I have a creative eye. I also sell clothes sometimes.",
    "I am interested in farming. I help my father on the farm and I love watching plants grow.",
  ];

  React.useEffect(() => {
    if (!text) { setMatchedKeywords([]); return; }
    const lower = text.toLowerCase();
    const found: string[] = [];
    for (const entry of KEYWORD_SCORES) {
      for (const word of entry.words) {
        if (lower.includes(word) && !found.includes(word)) {
          found.push(word);
          if (found.length >= 6) break;
        }
      }
      if (found.length >= 6) break;
    }
    setMatchedKeywords(found);
  }, [text]);

  const handleSubmit = () => {
    if (text.trim().length < 20) {
      setError("Please write at least a sentence or two about yourself.");
      return;
    }
    setError("");
    setAnalysing(true);
    setTimeout(() => {
      const { career, catScores, careerScores } = scoreTextLocally(text);
      onComplete(career, catScores, careerScores);
    }, 1200);
  };

  return (
    <div className="max-w-2xl mx-auto py-10 px-4">
      <button onClick={onBack} className="flex items-center gap-2 text-slate-400 hover:text-slate-700 text-sm font-bold mb-8 transition-colors cursor-pointer">
        <ArrowRight size={14} className="rotate-180" /> Back to options
      </button>

      <div className="bg-white rounded-3xl border border-slate-200 shadow-xl overflow-hidden">
        <div className="p-8 pb-6 border-b border-slate-100">
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 rounded-2xl bg-violet-100 text-violet-600 flex items-center justify-center">
              <MessageSquare size={20} />
            </div>
            <div>
              <h2 className="text-xl font-black text-slate-900">Tell us about yourself</h2>
              <p className="text-slate-400 text-sm">Write naturally — our system finds your best career match instantly</p>
            </div>
          </div>
        </div>

        <div className="p-8 space-y-6">
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">
              Describe yourself — what do you love doing, what are you good at, what excites you?
            </label>
            <textarea
              value={text}
              onChange={(e) => setText(e.target.value)}
              placeholder="Example: I love cooking and always help my mum in the kitchen. I also enjoy making things look beautiful — I decorated our sitting room and everyone loved it..."
              rows={5}
              className="w-full p-4 rounded-2xl border-2 border-slate-200 focus:border-violet-400 focus:outline-none resize-none text-slate-700 leading-relaxed text-sm transition-colors"
              style={{ fontFamily: "inherit" }}
            />
            <div className="flex justify-between items-start mt-2">
              {error && <p className="text-red-500 text-xs font-bold">{error}</p>}
              <p className="text-slate-300 text-xs ml-auto">{text.length} chars</p>
            </div>

            {matchedKeywords.length > 0 && (
              <div className="mt-3 flex flex-wrap gap-1.5">
                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider w-full mb-0.5">Detected interests:</span>
                {matchedKeywords.map((kw) => (
                  <span key={kw} className="text-[11px] font-bold bg-violet-100 text-violet-700 px-2 py-0.5 rounded-full">{kw}</span>
                ))}
              </div>
            )}
          </div>

          <div>
            <p className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3">Not sure what to write? Tap an example:</p>
            <div className="space-y-2">
              {examples.map((ex, i) => (
                <button
                  key={i}
                  onClick={() => setText(ex)}
                  className="w-full text-left p-3 rounded-xl border border-slate-100 hover:border-violet-300 hover:bg-violet-50 transition-colors text-xs text-slate-500 leading-relaxed cursor-pointer"
                >
                  {ex}
                </button>
              ))}
            </div>
          </div>

          <button
            onClick={handleSubmit}
            disabled={analysing || text.trim().length < 20}
            className="w-full py-4 rounded-2xl font-black text-white text-base transition-all flex items-center justify-center gap-3 disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
            style={{ background: "linear-gradient(135deg,#7C3AED,#4F46E5)" }}
          >
            {analysing ? (
              <><Loader2 size={20} className="animate-spin" /> Matching your profile</>
            ) : (
              <><Wand2 size={20} /> Find my career match</>
            )}
          </button>
        </div>
      </div>
    </div>
  );
};

// ─── OVERLAY ──────────────────────────────────────────────────────────────────

const Overlay: React.FC<{ onClose: () => void; children: React.ReactNode }> = ({ onClose, children }) => (
  <div
    className="fixed inset-0 z-50 flex items-center justify-center p-4 cursor-pointer"
    style={{ background: "rgba(15,23,42,0.7)", backdropFilter: "blur(6px)" }}
    onClick={onClose}
  >
    <motion.div
      initial={{ scale: 0.92, opacity: 0, y: 20 }}
      animate={{ scale: 1, opacity: 1, y: 0 }}
      exit={{ scale: 0.92, opacity: 0, y: 20 }}
      transition={{ type: "spring", stiffness: 300, damping: 28 }}
      className="cursor-default"
      onClick={(e) => e.stopPropagation()}
    >
      {children}
    </motion.div>
  </div>
);

// ─── SIMULATOR MODAL ─────────────────────────────────────────────────────────

const SimulatorModal: React.FC<{ careerId: string; onClose: () => void }> = ({ careerId, onClose }) => {
  const sim = SIMULATIONS[careerId] ?? SIMULATIONS["d1"];
  const [selected, setSelected] = useState<number | null>(null);

  return (
    <Overlay onClose={onClose}>
      <div className="bg-white rounded-3xl w-full max-w-2xl overflow-hidden shadow-2xl">
        <div className="bg-slate-950 p-8 text-white relative overflow-hidden">
          <div className="relative z-10">
            <div className="flex items-center gap-2 text-amber-400 font-bold text-xs uppercase tracking-widest mb-3">
              <Gamepad2 size={14} /> Job Simulator
            </div>
            <h2 className="text-2xl font-black mb-3 leading-tight">{sim.title}</h2>
            <p className="text-slate-300 leading-relaxed">{sim.scenario}</p>
          </div>
          <Gamepad2 className="absolute -right-8 -bottom-8 text-white/5" size={180} />
        </div>

        <div className="p-8">
          <AnimatePresence mode="wait">
            {selected === null ? (
              <motion.div key="options" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-3">
                {sim.options.map((opt, i) => (
                  <button
                    key={i}
                    onClick={() => setSelected(i)}
                    className="w-full text-left p-4 rounded-2xl border-2 border-slate-100 hover:border-slate-800 hover:bg-slate-50 transition-all font-semibold text-slate-700 flex items-center gap-4 group cursor-pointer"
                  >
                    <div className="w-8 h-8 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center font-bold text-sm group-hover:bg-slate-800 group-hover:text-white transition-colors shrink-0">
                      {String.fromCharCode(65 + i)}
                    </div>
                    {opt.text}
                  </button>
                ))}
              </motion.div>
            ) : (
              <motion.div
                key="result"
                initial={{ opacity: 0, y: 16 }}
                animate={{ opacity: 1, y: 0 }}
                className="text-center py-4"
              >
                <div className={`w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4 ${sim.options[selected].correct ? "bg-emerald-100 text-emerald-600" : "bg-red-100 text-red-600"}`}>
                  {sim.options[selected].correct ? <Trophy size={36} /> : <AlertTriangle size={36} />}
                </div>
                <h3 className={`text-2xl font-black mb-3 ${sim.options[selected].correct ? "text-emerald-600" : "text-red-600"}`}>
                  {sim.options[selected].correct ? "Excellent Choice!" : "Not quite right..."}
                </h3>
                <p className="text-slate-600 leading-relaxed mb-8 max-w-md mx-auto">{sim.options[selected].feedback}</p>
                <div className="flex justify-center gap-3">
                  {!sim.options[selected].correct && (
                    <button onClick={() => setSelected(null)} className="px-6 py-3 bg-slate-100 text-slate-700 font-bold rounded-xl hover:bg-slate-200 transition-colors cursor-pointer">
                      Try Again
                    </button>
                  )}
                  <button onClick={onClose} className="px-6 py-3 bg-slate-950 text-white font-bold rounded-xl hover:bg-slate-800 transition-colors cursor-pointer">
                    Finish Simulation
                  </button>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>
      </div>
    </Overlay>
  );
};

const CompanyModal: React.FC<{ company: Career["topEmployers"][0]; onClose: () => void }> = ({ company, onClose }) => (
  <Overlay onClose={onClose}>
    <div className="bg-white rounded-3xl w-full max-w-sm overflow-hidden shadow-2xl">
      <div className="p-6 border-b border-slate-100 flex justify-between items-center">
        <span className="font-black text-slate-900 text-lg">{company.name}</span>
        <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors cursor-pointer">
          <X size={18} />
        </button>
      </div>
      <div className="p-6 space-y-4">
        <div className="flex items-center gap-3">
          <div className="w-14 h-14 rounded-2xl bg-slate-100 flex items-center justify-center font-black text-slate-700 text-xl">
            {company.name.charAt(0)}
          </div>
          <span className="text-xs font-bold text-slate-400 uppercase tracking-widest px-3 py-1 bg-slate-100 rounded-full">{company.type}</span>
        </div>
        <p className="text-slate-600 leading-relaxed text-sm">{company.desc}</p>
        <a href={company.website} target="_blank" rel="noreferrer" className="flex items-center justify-center gap-2 w-full py-3 bg-slate-950 text-white rounded-2xl font-bold text-sm hover:bg-slate-800 transition-colors cursor-pointer">
          Visit Website <ExternalLink size={14} />
        </a>
      </div>
    </div>
  </Overlay>
);

const ResourceModal: React.FC<{ resource: Career["resources"][0]; onClose: () => void }> = ({ resource, onClose }) => (
  <Overlay onClose={onClose}>
    <div className="bg-white rounded-3xl w-full max-w-sm overflow-hidden shadow-2xl">
      <div className="p-6 border-b border-slate-100 flex justify-between items-center">
        <span className="font-black text-slate-900">Resource</span>
        <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors cursor-pointer">
          <X size={18} />
        </button>
      </div>
      <div className="p-6 space-y-4">
        <div className="flex gap-4">
          <div className="w-16 h-20 bg-emerald-100 rounded-xl flex items-center justify-center text-emerald-600 shrink-0">
            <Book size={28} />
          </div>
          <div>
            <h4 className="font-black text-slate-900 leading-tight mb-1">{resource.title}</h4>
            <p className="text-sm text-slate-500">{resource.author}</p>
            <span className="text-xs font-bold bg-slate-100 text-slate-600 px-2 py-0.5 rounded-md mt-1 inline-block">{resource.type}</span>
          </div>
        </div>
        <p className="text-sm text-slate-600 leading-relaxed">{resource.desc}</p>
        <a href={resource.link} target="_blank" rel="noreferrer" className="flex items-center justify-center gap-2 w-full py-3 bg-emerald-600 text-white rounded-2xl font-bold text-sm hover:bg-emerald-700 transition-colors cursor-pointer">
          Get Resource <ExternalLink size={14} />
        </a>
      </div>
    </div>
  </Overlay>
);

const MentorModal: React.FC<{ mentor: Career["mentors"][0]; onClose: () => void }> = ({ mentor, onClose }) => (
  <Overlay onClose={onClose}>
    <div className="bg-white rounded-3xl w-full max-w-sm overflow-hidden shadow-2xl">
      <div className="p-6 border-b border-slate-100 flex justify-between items-center">
        <span className="font-black text-slate-900">Mentor Profile</span>
        <button onClick={onClose} className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors cursor-pointer">
          <X size={18} />
        </button>
      </div>
      <div className="p-6 space-y-4">
        <div className="text-center">
          <img src={mentor.image} alt={mentor.name} className="w-20 h-20 rounded-full mx-auto mb-3 object-cover ring-4 ring-slate-100" />
          <h3 className="font-black text-slate-900 text-lg">{mentor.name}</h3>
          <p className="text-sm text-slate-500 font-medium">{mentor.role} · {mentor.company}</p>
        </div>
        <div className="bg-slate-50 p-4 rounded-2xl text-sm text-slate-600 italic border border-slate-100 leading-relaxed">
          "{mentor.bio}"
        </div>
        <div className="grid grid-cols-3 gap-3">
          <a href={mentor.linkedin} className="flex flex-col items-center justify-center p-3 rounded-xl bg-blue-50 text-blue-700 hover:bg-blue-100 transition-colors gap-1 cursor-pointer">
            <Linkedin size={18} />
            <span className="text-[10px] font-bold">LinkedIn</span>
          </a>
          <a href={`mailto:${mentor.email}`} className="flex flex-col items-center justify-center p-3 rounded-xl bg-slate-100 text-slate-700 hover:bg-slate-200 transition-colors gap-1 cursor-pointer">
            <Mail size={18} />
            <span className="text-[10px] font-bold">Email</span>
          </a>
          <a href="#" className="flex flex-col items-center justify-center p-3 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-colors gap-1 cursor-pointer">
            <Facebook size={18} />
            <span className="text-[10px] font-bold">Facebook</span>
          </a>
        </div>
      </div>
    </div>
  </Overlay>
);

const CounselingModal: React.FC<{ onClose: () => void }> = ({ onClose }) => (
  <Overlay onClose={onClose}>
    <div className="bg-white rounded-3xl w-full max-w-md overflow-hidden shadow-2xl">
      <div className="bg-gradient-to-br from-red-800 to-red-950 p-7 text-white relative overflow-hidden">
        <button onClick={onClose} className="absolute top-4 right-4 p-1.5 bg-white/10 hover:bg-white/20 rounded-full transition-colors cursor-pointer">
          <X size={18} />
        </button>
        <div className="w-12 h-12 rounded-2xl bg-white/15 flex items-center justify-center mb-4 backdrop-blur-sm">
          <GraduationCap size={24} />
        </div>
        <h3 className="font-black text-xl mb-1">Career Counselling Unit</h3>
        <p className="text-red-100 text-sm opacity-90">We are here to listen and guide you forward.</p>
        <div className="absolute -right-8 -bottom-8 opacity-10"><GraduationCap size={120} /></div>
      </div>
      <div className="p-6 space-y-5">
        <p className="text-slate-500 text-sm leading-relaxed">
          Our certified student counsellors and career mentors support you through academic stress, career confusion, or personal challenges. All sessions are strictly confidential.
        </p>
        <div className="space-y-3">
          <a href="mailto:support@nugs.org.gh" className="flex items-center gap-4 p-4 rounded-2xl border border-slate-100 hover:border-red-100 hover:bg-red-50 transition-colors group cursor-pointer">
            <div className="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center group-hover:bg-red-600 group-hover:text-white transition-colors">
              <Mail size={18} />
            </div>
            <div>
              <span className="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">Email Support</span>
              <span className="block text-slate-800 font-bold text-sm">support@nugs.org.gh</span>
            </div>
          </a>
          <a href="tel:+233551234567" className="flex items-center gap-4 p-4 rounded-2xl border border-slate-100 hover:border-red-100 hover:bg-red-50 transition-colors group cursor-pointer">
            <div className="w-10 h-10 rounded-full bg-red-100 text-red-600 flex items-center justify-center group-hover:bg-red-600 group-hover:text-white transition-colors">
              <Phone size={18} />
            </div>
            <div>
              <span className="block text-[10px] text-slate-400 font-bold uppercase tracking-wider">Helpline (24/7)</span>
              <span className="block text-slate-800 font-bold text-sm">+233 55 123 4567</span>
            </div>
          </a>
          <div className="grid grid-cols-2 gap-3">
            <a href="#" className="flex items-center justify-center gap-2 p-3 rounded-xl bg-blue-50 text-blue-700 hover:bg-blue-100 transition-colors font-bold text-sm cursor-pointer">
              <Linkedin size={16} /> LinkedIn
            </a>
            <a href="#" className="flex items-center justify-center gap-2 p-3 rounded-xl bg-blue-600 text-white hover:bg-blue-700 transition-colors font-bold text-sm cursor-pointer">
              <Facebook size={16} /> Facebook
            </a>
          </div>
        </div>
      </div>
    </div>
  </Overlay>
);

// ─── ASSESSMENT VIEW ──────────────────────────────────────────────────────────

const AssessmentView: React.FC<{
  onComplete: (primary: Career, catScores: ScoreMap, careerScores: CareerIdScore) => void;
}> = ({ onComplete }) => {
  const [step, setStep] = useState(0);
  const [collectedScores, setCollectedScores] = useState<CareerIdScore[]>([]);

  const handleOption = (scores: CareerIdScore) => {
    const updated = [...collectedScores, scores];
    if (step < QUESTIONS.length - 1) {
      setCollectedScores(updated);
      setStep(step + 1);
    } else {
      const careerScores = computeCareerScores(updated);
      const primary = pickBestCareer(careerScores);
      const catScores = categoryScoresFromCareer(careerScores);
      onComplete(primary, catScores, careerScores);
    }
  };

  // ── Back button: undo last answer and go back one step
  const handleBack = () => {
    if (step === 0) return;
    setCollectedScores((prev) => prev.slice(0, -1));
    setStep((s) => s - 1);
  };

  const q = QUESTIONS[step];
  const progress = ((step + 1) / QUESTIONS.length) * 100;
  // Q8 has 8 options — use 2-col grid always; rest use md:grid-cols-2
  const isWideGrid = q.options.length > 6;

  return (
    <div className="max-w-2xl mx-auto py-8 px-4">
      {/* Progress header */}
      <div className="mb-6">
        <div className="flex justify-between items-center mb-3">
          <div className="flex items-center gap-2">
            {/* Back button */}
            {step > 0 && (
              <button
                onClick={handleBack}
                className="w-8 h-8 rounded-full bg-slate-100 hover:bg-slate-200 text-slate-600 hover:text-slate-900 flex items-center justify-center transition-colors cursor-pointer mr-1"
                aria-label="Go back"
              >
                <ChevronLeft size={18} />
              </button>
            )}
            <div className="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center font-black text-sm">{step + 1}</div>
            <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">Q{step + 1} of {QUESTIONS.length}</span>
          </div>
          <div className="flex gap-1">
            {QUESTIONS.map((_, i) => (
              <div key={i} className="w-5 h-1.5 rounded-full transition-all" style={{ background: i <= step ? "#EF4444" : "#E2E8F0" }} />
            ))}
          </div>
        </div>
        <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
          <motion.div className="h-full rounded-full" style={{ background: "linear-gradient(90deg,#EF4444,#F97316)" }} initial={{ width: 0 }} animate={{ width: `${progress}%` }} transition={{ duration: 0.4 }} />
        </div>
      </div>

      <AnimatePresence mode="wait">
        <motion.div key={step} initial={{ opacity: 0, x: 40 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -40 }} transition={{ duration: 0.22 }} className="bg-white p-7 md:p-9 rounded-3xl border border-slate-200 shadow-xl">
          <h2 className="text-xl md:text-2xl font-black text-slate-900 mb-1 text-center leading-tight">{q.question}</h2>
          <p className="text-center text-slate-400 text-sm mb-7">{q.subtitle}</p>
          <div className={`grid grid-cols-1 gap-3 ${isWideGrid ? "md:grid-cols-2" : "md:grid-cols-2"}`}>
            {q.options.map((opt, idx) => (
              <button key={idx} onClick={() => handleOption(opt.scores)} className={`p-4 rounded-2xl border-2 border-slate-100 text-left transition-all duration-150 group hover:shadow-md cursor-pointer ${opt.color}`}>
                <div className="flex items-start gap-3">
                  <span className="text-2xl group-hover:scale-110 transition-transform duration-150 shrink-0">{opt.emoji}</span>
                  <span className="font-semibold text-slate-700 group-hover:text-slate-900 leading-snug text-sm">{opt.label}</span>
                </div>
              </button>
            ))}
          </div>
        </motion.div>
      </AnimatePresence>
    </div>
  );
};

// ─── RESULTS VIEW ─────────────────────────────────────────────────────────────

const ResultsView: React.FC<{
  primaryCareer: Career;
  catScores: ScoreMap;
  careerScores: CareerIdScore;  // FIX: passed separately so alternatives work
  onSwitch: (career: Career) => void;
  onRestart: () => void;
}> = ({ primaryCareer, catScores, careerScores, onSwitch, onRestart }) => {
  const [simOpen, setSimOpen] = useState(false);
  const [futureSelfOpen, setFutureSelfOpen] = useState(false);
  const [lifeProjectorOpen, setLifeProjectorOpen] = useState(false);
  const [activeCompany, setActiveCompany] = useState<Career["topEmployers"][0] | null>(null);
  const [activeResource, setActiveResource] = useState<Career["resources"][0] | null>(null);
  const [activeMentor, setActiveMentor] = useState<Career["mentors"][0] | null>(null);
  const [counselingOpen, setCounselingOpen] = useState(false);

  const cat = CATEGORY_META[primaryCareer.category] ?? CATEGORY_META.tech;

  // FIX: use careerScores (per-career) for ranking alternatives, not catScores
  const alternatives = useMemo(
    () => rankAlternatives(careerScores, primaryCareer.id),
    [careerScores, primaryCareer.id]
  );

  // Aptitude profile uses catScores (category-level)
  const scoreEntries = Object.entries(catScores)
    .sort((a, b) => b[1] - a[1])
    .filter(([, v]) => v > 0) as [string, number][];
  const maxScore = scoreEntries[0]?.[1] ?? 1;

  return (
    <motion.div initial={{ opacity: 0, y: 24 }} animate={{ opacity: 1, y: 0 }} className="space-y-10 px-4 md:px-6 pb-16">
      {/* ── Page Header ── */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pt-2">
        <div>
          <p className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">Your Top Match</p>
          <h1 className="text-3xl font-black text-slate-900 flex items-center gap-2">
            Career Pathfinder <Sparkles className="text-red-500 fill-current" size={22} />
          </h1>
        </div>
        <button
          onClick={onRestart}
          className="flex items-center gap-2 text-sm font-bold text-slate-500 hover:text-red-600 transition-colors bg-white px-4 py-2.5 rounded-xl border border-slate-200 shadow-sm cursor-pointer"
        >
          <RefreshCcw size={15} /> Retake Quiz
        </button>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
        {/* ── LEFT: Main Career Card ── */}
        <div className="lg:col-span-8 space-y-6">

          {/* Hero Card */}
          <div className="bg-white rounded-3xl overflow-hidden border border-slate-200 shadow-xl">
            <div className="h-44 relative p-8 flex items-end" style={{ background: cat.color }}>
              <div className="absolute inset-0 opacity-10" style={{ backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px)", backgroundSize: "24px 24px" }} />
              <div className="relative z-10 flex justify-between items-end w-full">
                <div>
                  <div className="flex items-center gap-2 mb-3">
                    <span className="inline-flex items-center gap-1.5 bg-white/20 text-white text-xs font-bold px-3 py-1 rounded-full border border-white/30 backdrop-blur-sm">
                      <Star size={11} className="fill-current" /> Top Recommendation
                    </span>
                    {primaryCareer.type === "vocational" && (
                      <span className="inline-flex items-center gap-1.5 bg-amber-400/25 text-amber-100 text-xs font-bold px-3 py-1 rounded-full border border-amber-300/30 backdrop-blur-sm">
                        <Wrench size={11} /> TVET Path
                      </span>
                    )}
                  </div>
                  <h2 className="text-white text-3xl md:text-4xl font-black tracking-tight leading-none">
                    {primaryCareer.title}
                  </h2>
                  <p className="text-white/70 text-sm mt-1 font-medium">{primaryCareer.programme}</p>
                </div>
                <div className="bg-white/15 backdrop-blur-sm p-3 rounded-2xl border border-white/20">
                  {getCategoryIcon(primaryCareer.category, 28)}
                </div>
              </div>
            </div>

            <div className="p-8">
              {/* Stats Row */}
              <div className="flex flex-wrap gap-3 mb-8">
                <div className="flex items-center gap-2 bg-emerald-50 text-emerald-700 px-4 py-2.5 rounded-xl text-sm font-bold border border-emerald-100">
                  <CheckCircle2 size={16} /> {primaryCareer.matchScore}% Match
                </div>
                <div className="flex items-center gap-2 bg-slate-50 text-slate-700 px-4 py-2.5 rounded-xl text-sm font-bold border border-slate-100">
                  <DollarSign size={16} /> {primaryCareer.salary}
                </div>
                <div className="flex items-center gap-2 bg-slate-50 text-slate-700 px-4 py-2.5 rounded-xl text-sm font-bold border border-slate-100">
                  <TrendingUp size={16} /> {primaryCareer.growth}
                </div>
              </div>

              <p className="text-slate-600 leading-relaxed mb-8">{primaryCareer.description}</p>

              {/* Future Self CTA */}
              <div
                onClick={() => setFutureSelfOpen(true)}
                className="relative overflow-hidden rounded-2xl mb-4 cursor-pointer group"
                style={{ background: "linear-gradient(135deg,#0F172A 0%,#1E1B4B 100%)" }}
              >
                <div className="absolute inset-0 pointer-events-none">
                  {[...Array(10)].map((_, i) => (
                    <div key={i} className="absolute rounded-full bg-white/20 animate-pulse" style={{ width: 3, height: 3, top: `${(i * 11) % 100}%`, left: `${(i * 13) % 100}%`, animationDelay: `${i * 0.35}s` }} />
                  ))}
                </div>
                <div className="relative z-10 p-6 flex items-center justify-between gap-4">
                  <div>
                    <h3 className="text-xl font-black text-white mb-1 flex items-center gap-2"><Wand2 className="text-violet-400" size={20} /> See Your Future Self ✨</h3>
                    <p className="text-slate-400 text-sm">AI writes your story — set in Ghana, 10 years from now.</p>
                  </div>
                  <div className="shrink-0 bg-violet-600 text-white px-5 py-2.5 rounded-xl font-black text-sm group-hover:bg-violet-500 transition-colors group-hover:scale-105">Show me →</div>
                </div>
              </div>

              {/* Life Projector CTA */}
              <div
                onClick={() => setLifeProjectorOpen(true)}
                className="relative overflow-hidden rounded-2xl mb-10 cursor-pointer group border-2"
                style={{ borderColor: cat.color + "33", background: cat.bg }}
              >
                <div className="p-6 flex items-center justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-black mb-1 flex items-center gap-2" style={{ color: cat.color }}>
                      <Calculator size={20} /> See Your Life in Numbers 📊
                    </h3>
                    <p className="text-slate-500 text-sm">Salary projector — see what you earn, save, and can afford at Year 5, 10, 20.</p>
                  </div>
                  <div className="shrink-0 px-5 py-2.5 rounded-xl font-black text-sm text-white group-hover:scale-105 transition-transform" style={{ background: cat.color }}>
                    Project →
                  </div>
                </div>
              </div>

              {/* Simulator CTA */}
              <div
                onClick={() => setSimOpen(true)}
                className="bg-slate-950 text-white p-6 rounded-2xl mb-10 cursor-pointer hover:bg-slate-800 transition-colors relative overflow-hidden group"
              >
                <div className="relative z-10 flex items-center justify-between gap-4">
                  <div>
                    <h3 className="text-lg font-black mb-1 flex items-center gap-2">
                      <Gamepad2 className="text-amber-400" size={20} /> Try This Job
                    </h3>
                    <p className="text-slate-300 text-sm">Play a 2-minute scenario and see if you actually like the work.</p>
                  </div>
                  <div className="shrink-0 bg-white text-slate-900 px-5 py-2.5 rounded-xl font-black text-sm group-hover:scale-105 transition-transform">
                    Start Sim →
                  </div>
                </div>
                <Gamepad2 className="absolute -right-6 -bottom-6 text-white/5 rotate-12" size={140} />
              </div>

              {/* Top Employers */}
              <section className="mb-10">
                <h3 className="text-base font-black text-slate-900 mb-4 flex items-center gap-2">
                  <Building2 size={18} className="text-blue-600" /> Where You Could Work
                </h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                  {primaryCareer.topEmployers.map((emp, i) => (
                    <button
                      key={i}
                      onClick={() => setActiveCompany(emp)}
                      className="p-4 rounded-2xl border border-slate-200 text-center hover:border-slate-400 hover:shadow-md transition-all bg-white group cursor-pointer"
                    >
                      <div className="w-10 h-10 mx-auto bg-slate-100 rounded-full flex items-center justify-center font-black text-slate-700 mb-2 group-hover:scale-110 transition-transform text-sm">
                        {emp.name.charAt(0)}
                      </div>
                      <p className="font-bold text-slate-800 text-xs leading-tight">{emp.name}</p>
                      <p className="text-[10px] text-slate-400 mt-0.5">{emp.type}</p>
                    </button>
                  ))}
                </div>
              </section>

              {/* Roadmap */}
              <section className="mb-10">
                <h3 className="text-base font-black text-slate-900 mb-6 flex items-center gap-2">
                  <Map size={18} className="text-red-600" /> Your Master Plan
                </h3>
                <div className="relative border-l-2 border-slate-200 ml-4 space-y-0">
                  {primaryCareer.detailedRoadmap.map((step, i) => (
                    <div key={i} className={`relative pl-8 ${i < primaryCareer.detailedRoadmap.length - 1 ? "pb-8" : ""}`}>
                      <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full border-4 border-white shadow-sm" style={{ background: cat.color }} />
                      <div className="flex flex-wrap items-baseline gap-2 mb-1">
                        <span className="font-black text-slate-900 text-sm">{step.phase}</span>
                        <span className="text-xs font-bold px-2 py-0.5 rounded-full" style={{ background: cat.bg, color: cat.accent }}>{step.time}</span>
                      </div>
                      <p className="text-slate-500 text-sm leading-relaxed">{step.action}</p>
                    </div>
                  ))}
                </div>
              </section>

              {/* Certifications */}
              <section className="mb-10">
                <h3 className="text-base font-black text-slate-900 mb-4 flex items-center gap-2">
                  <Award size={18} className="text-orange-500" /> Recommended Certifications
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                  {primaryCareer.certifications.map((cert, i) => (
                    <div key={i} className="flex items-center gap-3 p-3 rounded-xl border border-slate-200 bg-white">
                      <Award size={22} className="text-orange-400 shrink-0" />
                      <div>
                        <p className="font-bold text-xs text-slate-900 leading-tight">{cert.name}</p>
                        <p className="text-[10px] text-slate-400 mt-0.5">{cert.provider} · {cert.difficulty}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </section>

              {/* Resources & Mentors */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
                <div>
                  <h3 className="text-base font-black text-slate-900 mb-4 flex items-center gap-2">
                    <Book size={18} className="text-emerald-600" /> Essential Reading
                  </h3>
                  <ul className="space-y-3">
                    {primaryCareer.resources.map((res, i) => (
                      <li
                        key={i}
                        onClick={() => setActiveResource(res)}
                        className="flex gap-3 items-start p-3 rounded-xl border border-slate-100 hover:border-emerald-300 hover:bg-emerald-50/50 transition-colors cursor-pointer group"
                      >
                        <div className="w-8 h-8 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0">
                          <Book size={14} />
                        </div>
                        <div>
                          <p className="font-bold text-sm text-slate-900 group-hover:text-emerald-700 transition-colors">{res.title}</p>
                          <p className="text-xs text-slate-400">{res.author} · {res.type}</p>
                        </div>
                      </li>
                    ))}
                  </ul>
                </div>

                <div>
                  <h3 className="text-base font-black text-slate-900 mb-4 flex items-center gap-2">
                    <UserPlus size={18} className="text-violet-600" /> Recommended Mentors
                  </h3>
                  <ul className="space-y-3">
                    {primaryCareer.mentors.map((mentor, i) => (
                      <li
                        key={i}
                        onClick={() => setActiveMentor(mentor)}
                        className="flex gap-3 items-center p-3 rounded-xl border border-slate-100 hover:border-violet-300 hover:bg-violet-50/50 transition-colors cursor-pointer group"
                      >
                        <img src={mentor.image} alt={mentor.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-white shadow-sm" />
                        <div className="flex-1 min-w-0">
                          <p className="font-bold text-sm text-slate-900 group-hover:text-violet-700 transition-colors">{mentor.name}</p>
                          <p className="text-xs text-slate-400 truncate">{mentor.role} · {mentor.company}</p>
                        </div>
                        <span className="text-xs font-bold text-violet-600 border border-violet-200 px-2 py-1 rounded-lg bg-white shrink-0">
                          Connect
                        </span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              {/* Advice Quote */}
              <div className="bg-slate-950 p-8 rounded-3xl text-white relative overflow-hidden">
                <div className="absolute inset-0 opacity-10" style={{ backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px)", backgroundSize: "28px 28px" }} />
                <div className="relative z-10 text-center max-w-lg mx-auto">
                  <Quote size={28} className="mx-auto mb-4 text-amber-400 opacity-70" />
                  <p className="text-lg font-medium italic leading-relaxed mb-4">"{primaryCareer.advice}"</p>
                  <div className="w-12 h-0.5 bg-red-500 mx-auto rounded-full" />
                  <p className="mt-4 text-xs font-bold uppercase tracking-widest text-slate-500">Your Future Awaits</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ── RIGHT: Sidebar ── */}
        <div className="lg:col-span-4 space-y-5">
          {/* Aptitude Profile */}
          <div className="bg-white rounded-3xl p-5 border border-slate-200 shadow-sm">
            <h3 className="font-black text-slate-900 text-sm mb-4 flex items-center gap-2"><Zap size={16} className="text-amber-500" /> Your Aptitude Profile</h3>
            <div className="space-y-3">
              {scoreEntries.map(([catKey, val]) => {
                const meta = CATEGORY_META[catKey as CategoryKey] ?? CATEGORY_META.tech;
                const pct = Math.round((val / maxScore) * 100);
                return (
                  <div key={catKey}>
                    <div className="flex justify-between items-center mb-1">
                      <span className="text-xs font-bold text-slate-700">{meta.name}</span>
                      <span className="text-xs font-black" style={{ color: meta.color }}>{pct}%</span>
                    </div>
                    <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
                      <motion.div className="h-full rounded-full" initial={{ width: 0 }} animate={{ width: `${pct}%` }} transition={{ duration: 0.8, delay: 0.1 }} style={{ background: meta.color }} />
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Counseling CTA */}
          <div className="bg-gradient-to-br from-red-700 to-red-950 rounded-3xl p-6 text-white relative overflow-hidden">
            <div className="relative z-10">
              <GraduationCap className="mb-3 text-amber-400" size={36} />
              <h4 className="font-black mb-1 text-lg">Need Guidance?</h4>
              <p className="text-sm text-red-100 mb-4 leading-relaxed">Book a 1-on-1 session with a certified career counsellor.</p>
              <button
                onClick={() => setCounselingOpen(true)}
                className="w-full py-3 bg-white text-red-900 rounded-xl text-sm font-black hover:bg-red-50 transition-colors cursor-pointer"
              >
                Book Session
              </button>
            </div>
            <div className="absolute -right-6 -bottom-6 opacity-10"><GraduationCap size={100} /></div>
          </div>

          {/* ── Alternative Paths ── */}
          <div>
            <h3 className="font-black text-slate-900 text-base mb-4 flex items-center gap-2">
              <Target size={18} className="text-red-500" /> Alternative Paths
              <span className="text-[10px] font-bold text-slate-400 bg-slate-100 px-2 py-0.5 rounded-full ml-auto">Ranked for you</span>
            </h3>

            {alternatives.length === 0 ? (
              // Graceful fallback: show all other careers sorted by matchScore
              <div className="space-y-3">
                {careersData
                  .filter((c) => c.id !== primaryCareer.id)
                  .sort((a, b) => b.matchScore - a.matchScore)
                  .slice(0, 6)
                  .map((career) => {
                    const c = CATEGORY_META[career.category] ?? CATEGORY_META.tech;
                    return (
                      <motion.button
                        key={career.id}
                        whileHover={{ scale: 1.02 }}
                        whileTap={{ scale: 0.98 }}
                        onClick={() => onSwitch(career)}
                        className="w-full text-left bg-white border border-slate-200 rounded-2xl p-4 hover:border-slate-400 hover:shadow-md transition-all group cursor-pointer"
                      >
                        <div className="flex justify-between items-start mb-2">
                          <div className="p-1.5 rounded-lg" style={{ background: c.bg, color: c.color }}>
                            {getCategoryIcon(career.category, 16)}
                          </div>
                          <span className="text-[10px] font-bold px-2 py-0.5 rounded-full" style={{ background: c.bg, color: c.accent }}>
                            {career.matchScore}%
                          </span>
                        </div>
                        <p className="font-black text-slate-900 text-sm group-hover:text-red-600 transition-colors leading-tight mb-0.5">
                          {career.title}
                        </p>
                        <p className="text-[11px] text-slate-400 font-medium">{career.programme}</p>
                        {career.type === "vocational" && (
                          <span className="inline-flex items-center gap-1 text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full mt-1.5">
                            <Wrench size={9} /> TVET
                          </span>
                        )}
                      </motion.button>
                    );
                  })}
              </div>
            ) : (
              <div className="space-y-3">
                {alternatives.map((career) => {
                  const c = CATEGORY_META[career.category] ?? CATEGORY_META.tech;
                  return (
                    <motion.button
                      key={career.id}
                      whileHover={{ scale: 1.02 }}
                      whileTap={{ scale: 0.98 }}
                      onClick={() => onSwitch(career)}
                      className="w-full text-left bg-white border border-slate-200 rounded-2xl p-4 hover:border-slate-400 hover:shadow-md transition-all group cursor-pointer"
                    >
                      <div className="flex justify-between items-start mb-2">
                        <div className="p-1.5 rounded-lg" style={{ background: c.bg, color: c.color }}>
                          {getCategoryIcon(career.category, 16)}
                        </div>
                        <span className="text-[10px] font-bold px-2 py-0.5 rounded-full" style={{ background: c.bg, color: c.accent }}>
                          {career.matchScore}%
                        </span>
                      </div>
                      <p className="font-black text-slate-900 text-sm group-hover:text-red-600 transition-colors leading-tight mb-0.5">
                        {career.title}
                      </p>
                      <p className="text-[11px] text-slate-400 font-medium">{career.programme}</p>
                      {career.type === "vocational" && (
                        <span className="inline-flex items-center gap-1 text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full mt-1.5">
                          <Wrench size={9} /> TVET
                        </span>
                      )}
                    </motion.button>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Modals */}
      <AnimatePresence>
        {futureSelfOpen && <FutureSelfModal career={primaryCareer} onClose={() => setFutureSelfOpen(false)} />}
        {lifeProjectorOpen && <LifeProjectorModal career={primaryCareer} onClose={() => setLifeProjectorOpen(false)} />}
        {simOpen && <SimulatorModal careerId={primaryCareer.id} onClose={() => setSimOpen(false)} />}
        {activeCompany && <CompanyModal company={activeCompany} onClose={() => setActiveCompany(null)} />}
        {activeResource && <ResourceModal resource={activeResource} onClose={() => setActiveResource(null)} />}
        {activeMentor && <MentorModal mentor={activeMentor} onClose={() => setActiveMentor(null)} />}
        {counselingOpen && <CounselingModal onClose={() => setCounselingOpen(false)} />}
      </AnimatePresence>
    </motion.div>
  );
};

// ─── MAIN COMPONENT ───────────────────────────────────────────────────────────

export default function CareerPortal() {
  const [view, setView] = useState<"intro" | "quiz" | "ai-text" | "loading" | "results">("intro");
  const [primaryCareer, setPrimaryCareer] = useState<Career | null>(null);
  const [catScores, setCatScores] = useState<ScoreMap>({ tech: 0, vocational: 0, health: 0, business: 0, creative: 0, agri: 0 });
  // FIX: store careerScores separately so alternatives can be ranked correctly
  const [careerScores, setCareerScores] = useState<CareerIdScore>({});

  const handleComplete = (career: Career, cs: ScoreMap, crs: CareerIdScore) => {
    setPrimaryCareer(career);
    setCatScores(cs);
    setCareerScores(crs);
    setView("loading");
    setTimeout(() => setView("results"), 2800);
  };

  const handleRestart = () => {
    setView("intro");
    setPrimaryCareer(null);
    setCatScores({ tech: 0, vocational: 0, health: 0, business: 0, creative: 0, agri: 0 });
    setCareerScores({});
  };

  const handleSwitch = (career: Career) => setPrimaryCareer(career);

  return (
    <div className="min-h-screen bg-slate-50/40">

      {/* ── INTRO ── */}
      {view === "intro" && (
        <div className="p-6 max-w-4xl mx-auto pt-12">
          <div className="bg-slate-950 rounded-[2.5rem] p-12 md:p-16 text-white overflow-hidden relative shadow-2xl">
            <div className="relative z-10 max-w-xl mx-auto text-center space-y-7 py-6">
              <div className="inline-flex p-3 bg-white/10 rounded-2xl backdrop-blur-sm border border-white/10">
                <Lightbulb size={32} className="text-amber-400 fill-current" />
              </div>
              <h2 className="text-4xl md:text-5xl font-black tracking-tight leading-tight">
                Your future starts <br />
                <span className="text-transparent bg-clip-text" style={{ backgroundImage: "linear-gradient(90deg,#F87171,#FB923C)" }}>right here.</span>
              </h2>
              <p className="text-slate-300 text-lg leading-relaxed">
                Discover the career that fits you perfectly — whether it's a university degree, a TVET skill, or a creative passion. Two ways to begin:
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-md mx-auto">
                <button
                  onClick={() => setView("quiz")}
                  className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-red-600 hover:bg-red-500 text-white transition-all hover:scale-105 shadow-lg cursor-pointer"
                >
                  <span className="text-3xl">🎯</span>
                  <div className="text-center">
                    <p className="font-black text-base">Take the Quiz</p>
                    <p className="text-red-200 text-xs mt-0.5">8 questions · 3 minutes</p>
                  </div>
                </button>
                <button
                  onClick={() => setView("ai-text")}
                  className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-violet-600 hover:bg-violet-500 text-white transition-all hover:scale-105 shadow-lg cursor-pointer"
                >
                  <span className="text-3xl">✍️</span>
                  <div className="text-center">
                    <p className="font-black text-base">Tell Us About You</p>
                    <p className="text-violet-200 text-xs mt-0.5">Your story you power</p>
                  </div>
                </button>
              </div>
              <p className="text-slate-500 text-sm">No wrong answers · Free · Built for Ghanaian students</p>
            </div>
            <div className="absolute top-0 left-0 w-full h-full opacity-15 pointer-events-none">
              <div className="absolute top-10 left-10 rotate-12"><Cpu size={100} /></div>
              <div className="absolute bottom-10 right-10 -rotate-12"><Wrench size={100} /></div>
              <div className="absolute top-1/2 left-1/4 w-64 h-64 bg-red-600 rounded-full blur-[100px]" />
              <div className="absolute top-1/3 right-1/4 w-48 h-48 bg-violet-600 rounded-full blur-[100px]" />
            </div>
          </div>
        </div>
      )}

      {/* ── QUIZ ── */}
      {view === "quiz" && <AssessmentView onComplete={handleComplete} />}

      {/* ── AI TEXT ── */}
      {view === "ai-text" && (
        <AITextInputView
          onComplete={handleComplete}
          onBack={() => setView("intro")}
        />
      )}

      {/* ── LOADING ── */}
      {view === "loading" && (
        <div className="flex flex-col items-center justify-center min-h-screen text-center px-4 gap-5">
          <div className="relative">
            <div className="w-20 h-20 border-4 border-t-red-600 border-slate-100 rounded-full animate-spin" />
            <div className="absolute inset-0 flex items-center justify-center"><Sparkles size={22} className="text-red-500" /></div>
          </div>
          <h3 className="text-2xl font-black text-slate-900">Analysing your profile…</h3>
          <p className="text-slate-400 max-w-xs">Matching across {careersData.length} career paths in Ghana.</p>
        </div>
      )}

      {/* ── RESULTS ── */}
      {view === "results" && primaryCareer && (
        <ResultsView
          primaryCareer={primaryCareer}
          catScores={catScores}
          careerScores={careerScores}
          onSwitch={handleSwitch}
          onRestart={handleRestart}
        />
      )}
    </div>
  );
}



mock data
// ─── TYPES ────────────────────────────────────────────────────────────────────

export type CareerCategory = "tech" | "health" | "business" | "creative" | "vocational" | "agri" | "law";

export interface CareerRoadmapStep {
  phase: string;
  time: string;
  action: string;
}

export interface CareerCertification {
  name: string;
  provider: string;
  difficulty: "Beginner" | "Intermediate" | "Hard";
}

export interface CareerResource {
  title: string;
  author: string;
  type: string;
  link: string;
  desc: string;
}

export interface CareerMentor {
  name: string;
  role: string;
  company: string;
  image: string;
  bio: string;
  linkedin: string;
  email: string;
}

export interface CareerEmployer {
  name: string;
  type: string;
  website: string;
  desc: string;
}

export interface Career {
  id: string;
  title: string;
  programme: string;
  category: CareerCategory;
  type: "degree" | "vocational";
  matchScore: number;
  salary: string;
  salaryMin: number;
  salaryMax: number;
  growth: string;
  growthPct: number;
  description: string;
  reason: string;
  skills: string[];
  topEmployers: CareerEmployer[];
  detailedRoadmap: CareerRoadmapStep[];
  certifications: CareerCertification[];
  resources: CareerResource[];
  mentors: CareerMentor[];
  advice: string;
}

// ─── CATEGORY META ─────────────────────────────────────────────────────────

export const CATEGORY_META: Record<CareerCategory, {
  name: string; color: string; bg: string; accent: string;
}> = {
  tech:       { name: "Technology",         color: "#2563EB", bg: "#EFF6FF", accent: "#1D4ED8" },
  health:     { name: "Health & Medicine",  color: "#059669", bg: "#ECFDF5", accent: "#047857" },
  business:   { name: "Business",           color: "#7C3AED", bg: "#F5F3FF", accent: "#6D28D9" },
  creative:   { name: "Creative Arts",      color: "#DB2777", bg: "#FDF2F8", accent: "#BE185D" },
  vocational: { name: "Vocational / TVET",  color: "#D97706", bg: "#FFFBEB", accent: "#B45309" },
  agri:       { name: "Agriculture",        color: "#16A34A", bg: "#F0FDF4", accent: "#15803D" },
  law:        { name: "Law & Policy",       color: "#1E40AF", bg: "#EFF6FF", accent: "#1E3A8A" },
};

// ─── FULL CAREER DATA ─────────────────────────────────────────────────────────

const careersData: Career[] = [

  // ══════════════════════════════════════════════════════════
  // VOCATIONAL / TVET CAREERS
  // ══════════════════════════════════════════════════════════

  {
    id: "v1",
    title: "CNC Wood Machinist",
    programme: "Wood Technology (TVET)",
    category: "vocational",
    type: "vocational",
    matchScore: 94,
    salary: "GH₵ 4k – 9k",
    salaryMin: 4000,
    salaryMax: 9000,
    growth: "Stable",
    growthPct: 8,
    description: "Operate computer-controlled machinery to cut, shape, and finish timber products for furniture manufacturers and construction firms across Ghana. CNC operators sit at the intersection of craft and technology.",
    reason: "Your aptitude for precision work and interest in manual skills maps directly to this in-demand technical role.",
    skills: ["CNC Operation", "Timber Science", "Quality Control", "CAD Basics"],
    topEmployers: [
      { name: "Meridian Wood Industries", type: "Manufacturing", website: "#", desc: "One of Ghana's largest timber processing companies based in Kumasi." },
      { name: "Dzata Cement", type: "Construction", website: "#", desc: "Major construction group with large carpentry and woodwork departments." },
      { name: "SSNIT Estates", type: "Real Estate", website: "#", desc: "Government housing developer requiring skilled wood specialists." },
      { name: "Freelance / SMEs", type: "Self-Employed", website: "#", desc: "Thousands of furniture workshops across Ghana need CNC-trained technicians." },
    ],
    detailedRoadmap: [
      { phase: "TVET Certificate", time: "1–2 yrs", action: "Enrol in Wood Technology at any COTVET-accredited institution such as Accra Technical Training Centre." },
      { phase: "Apprenticeship", time: "1 yr", action: "Attach to a licensed timber firm for hands-on CNC training and workshop experience." },
      { phase: "NVTI Certification", time: "Year 3", action: "Obtain NVTI Level III certificate from the National Vocational Training Institute." },
      { phase: "Career Launch", time: "Ongoing", action: "Apply via the Ghana Timber Association job board and Jobberman. CNC operators earn a premium over general carpenters." },
    ],
    certifications: [
      { name: "NVTI Level III – Wood Tech", provider: "NVTI Ghana", difficulty: "Intermediate" },
      { name: "COTVET National Certificate", provider: "COTVET", difficulty: "Beginner" },
      { name: "AutoCAD Fundamentals", provider: "Autodesk", difficulty: "Beginner" },
    ],
    resources: [
      { title: "Understanding Wood", author: "R. Bruce Hoadley", type: "Book", link: "#", desc: "The definitive science of wood as a working material." },
      { title: "CNC Programming Handbook", author: "Peter Smid", type: "Book", link: "#", desc: "Everything you need to master G-code and CNC operations." },
      { title: "Ghana Timber Association", author: "GTA", type: "Website", link: "#", desc: "Industry body with training resources and job listings." },
    ],
    mentors: [
      { name: "Kofi Asante", role: "Master Craftsman", company: "Meridian Wood", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", bio: "30 years in timber processing. Trains the next generation of CNC operators.", linkedin: "#", email: "#" },
      { name: "Abena Darko", role: "Production Supervisor", company: "Dzata Cement", image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop&crop=face", bio: "Oversees a team of 40 woodworkers. Champion of vocational training in construction.", linkedin: "#", email: "#" },
    ],
    advice: "Ghana's construction boom means skilled woodworkers are scarce and well-paid. Your hands are your degree. Perfect your craft and the money will follow.",
  },

  {
    id: "v2",
    title: "HVAC/R Technician",
    programme: "Refrigeration & Air Conditioning (TVET)",
    category: "vocational",
    type: "vocational",
    matchScore: 91,
    salary: "GH₵ 4.5k – 10k",
    salaryMin: 4500,
    salaryMax: 10000,
    growth: "High (+20%)",
    growthPct: 20,
    description: "Install and maintain cooling systems for Ghana's growing hospitality and commercial real estate sector — from 5-star hotels in Accra to cold-chain facilities at Tema Port.",
    reason: "A practical mind with interest in mechanics makes HVACR a lucrative and always-in-demand path.",
    skills: ["Refrigeration Mechanics", "Electrical Wiring", "Solar Thermal", "Cold Chain"],
    topEmployers: [
      { name: "Zoomlion Ghana", type: "Engineering", website: "#", desc: "Large infrastructure group with active HVAC installation divisions." },
      { name: "Electroland Ghana", type: "Electronics Retail", website: "#", desc: "Authorised installer for major AC brands across Ghana." },
      { name: "Holiday Inn Accra", type: "Hospitality", website: "#", desc: "Part of IHG hotels — requires a dedicated in-house HVAC team." },
      { name: "Tema Cold Storage", type: "Logistics", website: "#", desc: "Cold chain logistics firm serving Ghana's food export sector." },
    ],
    detailedRoadmap: [
      { phase: "TVET Training", time: "2 yrs", action: "Complete HVACR programme at Accra Technical Training Centre or Tema Technical Institute." },
      { phase: "Industry Cert", time: "Year 2", action: "Pursue EPA 608 certification for handling refrigerants — recognised regionally." },
      { phase: "Apprenticeship", time: "6 months", action: "Attach to Electroland or a cold-chain logistics firm for real-site installation experience." },
      { phase: "Career Launch", time: "Ongoing", action: "Register with Ghana Institution of Engineering. Apply directly to hotels and facilities management firms." },
    ],
    certifications: [
      { name: "EPA 608 Technician Cert", provider: "US EPA", difficulty: "Intermediate" },
      { name: "NVTI HVACR Level III", provider: "NVTI Ghana", difficulty: "Intermediate" },
      { name: "Solar Thermal Installation", provider: "KITE Solar GH", difficulty: "Beginner" },
    ],
    resources: [
      { title: "Refrigeration & Air Conditioning Technology", author: "Whitman & Johnson", type: "Textbook", link: "#", desc: "The industry-standard HVACR training textbook." },
      { title: "ASHRAE Handbook", author: "ASHRAE", type: "Reference", link: "#", desc: "The global standard for HVAC system design." },
      { title: "Ghana Energy Commission", author: "EC Ghana", type: "Website", link: "#", desc: "Licensing and regulation information for energy technicians." },
    ],
    mentors: [
      { name: "Emmanuel Quaye", role: "Lead HVAC Engineer", company: "Zoomlion", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", bio: "Has installed HVAC systems in over 200 commercial buildings across Ghana.", linkedin: "#", email: "#" },
      { name: "Grace Nkrumah", role: "Cold Chain Specialist", company: "Tema Cold Storage", image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop&crop=face", bio: "Pioneering cold-chain logistics for Ghana's food export sector.", linkedin: "#", email: "#" },
    ],
    advice: "Every supermarket, hospital, and office block needs you. This skill travels well — HVAC technicians work across West Africa and the Gulf States.",
  },

  {
    id: "v3",
    title: "Robotics & Automation Technician",
    programme: "Mechatronics Engineering Technology (TVET)",
    category: "vocational",
    type: "vocational",
    matchScore: 97,
    salary: "GH₵ 6k – 14k",
    salaryMin: 6000,
    salaryMax: 14000,
    growth: "Very High (+35%)",
    growthPct: 35,
    description: "Programme and maintain industrial robots and automated production lines. Ghana's manufacturing and agro-processing sectors are rapidly automating — and urgently need technicians who understand the machines.",
    reason: "Analytical thinking combined with hands-on mechanical aptitude is the perfect combination for this cutting-edge role.",
    skills: ["PLC Programming", "Robotics", "IoT Systems", "Automation Design"],
    topEmployers: [
      { name: "Kasapreko", type: "Beverages", website: "#", desc: "Ghana's largest beverage manufacturer actively automating its production lines." },
      { name: "Nestlé Ghana", type: "FMCG", website: "#", desc: "Global FMCG company with automated packaging facilities in Tema." },
      { name: "Jospong Group", type: "Conglomerate", website: "#", desc: "Waste management and manufacturing conglomerate investing heavily in automation." },
      { name: "Fan Milk / Danone", type: "Dairy", website: "#", desc: "Cold-chain dairy producer with high automation requirements." },
    ],
    detailedRoadmap: [
      { phase: "HND Mechatronics", time: "2–3 yrs", action: "HND in Mechatronics at Kumasi Technical University or Sunyani Technical University." },
      { phase: "PLC Certification", time: "Year 3", action: "Siemens SITRAIN PLC certification — available online and through KNUST short courses." },
      { phase: "Industry Network", time: "Crucial", action: "Join the Ghana Robotics Academy network on LinkedIn. Attend GIIF industrial trade fairs." },
      { phase: "Career Launch", time: "Post-HND", action: "Apply directly to manufacturing conglomerates' engineering departments. They are always hiring." },
    ],
    certifications: [
      { name: "Siemens SITRAIN PLC", provider: "Siemens", difficulty: "Intermediate" },
      { name: "ABB Robotics Certificate", provider: "ABB", difficulty: "Hard" },
      { name: "IoT Fundamentals", provider: "Cisco NetAcad", difficulty: "Beginner" },
    ],
    resources: [
      { title: "Automation for Everyone", author: "Rockwell Automation", type: "Course", link: "#", desc: "Free course covering PLC basics and industrial automation concepts." },
      { title: "Robotics: Science and Systems", author: "MIT OpenCourseWare", type: "Course", link: "#", desc: "Free MIT course on robotics fundamentals." },
      { title: "Ghana Robotics Academy", author: "GRA Online", type: "Website", link: "#", desc: "Local community for robotics and automation professionals." },
    ],
    mentors: [
      { name: "Dr. Kwame Mensah", role: "Automation Engineer", company: "Nestlé Ghana", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face", bio: "Led the full automation of Nestlé's Tema factory. Passionate about TVET pathways.", linkedin: "#", email: "#" },
      { name: "Ama Boateng", role: "Robotics Researcher", company: "KNUST", image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=100&h=100&fit=crop&crop=face", bio: "PhD in Mechatronics from TU Delft. Building Ghana's robotics ecosystem from within.", linkedin: "#", email: "#" },
    ],
    advice: "The factory of the future is being built in Ghana today. Be the person who understands the machines — and you will never be out of work.",
  },

  {
    id: "v4",
    title: "Pipeline Welder",
    programme: "Welding & Fabrication Technology (TVET)",
    category: "vocational",
    type: "vocational",
    matchScore: 88,
    salary: "GH₵ 5k – 12k",
    salaryMin: 5000,
    salaryMax: 12000,
    growth: "High (+15%)",
    growthPct: 15,
    description: "Weld pipelines and structural steel for Ghana's oil & gas sector and major infrastructure projects. Certified pipeline welders are among the highest-paid technical workers in West Africa.",
    reason: "Precision, physical stamina, and attention to detail are the core traits of great welders — and great welders are always in demand.",
    skills: ["TIG/MIG Welding", "Pipe Fitting", "Weld Inspection", "Blueprint Reading"],
    topEmployers: [
      { name: "Tullow Oil Ghana", type: "Oil & Gas", website: "#", desc: "Offshore operator with continuous pipeline maintenance and installation needs." },
      { name: "Ghana Gas Company", type: "Energy", website: "#", desc: "National gas infrastructure company — always recruiting certified welders." },
      { name: "Julius Berger Ghana", type: "Construction", website: "#", desc: "Major infrastructure contractor for roads, bridges, and pipelines." },
      { name: "Rigworld Ghana", type: "Oil Services", website: "#", desc: "Oilfield services company serving the Jubilee Field offshore." },
    ],
    detailedRoadmap: [
      { phase: "NVTI Training", time: "2 yrs", action: "Complete Welding & Fabrication at any NVTI centre. Focus on pipe welding from day one." },
      { phase: "AWS Certification", time: "Year 3", action: "American Welding Society certification is recognised globally and triples your earning potential." },
      { phase: "Entry Role", time: "Year 3–4", action: "Start as Welding Helper or Structural Fabricator on a construction site to accumulate hours." },
      { phase: "Specialist Role", time: "Year 5+", action: "Certify as a Pipeline Welder to access oil & gas sector wages and offshore positions." },
    ],
    certifications: [
      { name: "AWS Certified Welder", provider: "American Welding Society", difficulty: "Hard" },
      { name: "NVTI Welding Level III", provider: "NVTI Ghana", difficulty: "Intermediate" },
      { name: "ASME B31.3 Pipeline Code", provider: "ASME", difficulty: "Hard" },
    ],
    resources: [
      { title: "Welding Principles and Applications", author: "Larry Jeffus", type: "Textbook", link: "#", desc: "The gold-standard welding textbook used worldwide." },
      { title: "AWS Welding Handbook", author: "AWS", type: "Reference", link: "#", desc: "Comprehensive technical reference for all welding processes." },
      { title: "WeldingTipsAndTricks (YouTube)", author: "Jody Collier", type: "Video", link: "#", desc: "Best free visual resource for welding techniques online." },
    ],
    mentors: [
      { name: "Isaac Amponsah", role: "Senior Pipeline Welder", company: "Ghana Gas", image: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face", bio: "15 years in pipeline welding. Trains young welders on major infrastructure projects.", linkedin: "#", email: "#" },
      { name: "Yaa Frimpong", role: "QC Weld Inspector", company: "Julius Berger", image: "https://images.unsplash.com/photo-1551836022-deb4988cc6c0?w=100&h=100&fit=crop&crop=face", bio: "First female weld inspector on Ghana's major gas pipeline project.", linkedin: "#", email: "#" },
    ],
    advice: "A certified pipeline welder in Ghana earns more than most university graduates. Skill and precision are your passport — not just to Ghana, but to Qatar, the UK, and beyond.",
  },

  {
    id: "v5",
    title: "Industrial Electrician",
    programme: "Electrical Engineering Technology (TVET)",
    category: "vocational",
    type: "vocational",
    matchScore: 93,
    salary: "GH₵ 5k – 13k",
    salaryMin: 5000,
    salaryMax: 13000,
    growth: "High (+18%)",
    growthPct: 18,
    description: "Wire and maintain electrical systems in factories, mines, and commercial buildings. Ghana's energy transition to solar and the ECG sector reforms are creating thousands of new roles for skilled electricians.",
    reason: "Problem-solving ability and comfort with technical systems are the hallmarks of a great industrial electrician.",
    skills: ["Power Systems", "Solar PV Installation", "Electrical Code", "Control Systems"],
    topEmployers: [
      { name: "GRIDCo", type: "Power Transmission", website: "#", desc: "Ghana's national electricity transmission company." },
      { name: "Gold Fields Ghana", type: "Mining", website: "#", desc: "Major gold mine with 24/7 electrical maintenance requirements." },
      { name: "Voltic Ghana", type: "FMCG", website: "#", desc: "Beverage manufacturer with a large industrial electrical team." },
      { name: "BXC Solar Ghana", type: "Renewable Energy", website: "#", desc: "Ghana's fastest-growing solar installation and EPC company." },
    ],
    detailedRoadmap: [
      { phase: "HND Electrical", time: "3 yrs", action: "HND in Electrical Engineering Technology at Takoradi Technical University." },
      { phase: "EC Ghana License", time: "Year 4", action: "Register with the Electricity Company for the Grade B contractor license examination." },
      { phase: "Solar Add-on", time: "Flexible", action: "Solar PV installation certificate from KITE Solar or KNUST — doubles your career options." },
      { phase: "Career Launch", time: "Ongoing", action: "GRIDCo, mining companies, and manufacturing plants actively advertise on LinkedIn and Jobberman." },
    ],
    certifications: [
      { name: "Grade B EC Ghana License", provider: "Electricity Company Ghana", difficulty: "Hard" },
      { name: "Solar PV Installation", provider: "KITE Solar GH", difficulty: "Intermediate" },
      { name: "NEC Electrical Code", provider: "NFPA", difficulty: "Intermediate" },
    ],
    resources: [
      { title: "Ugly's Electrical References", author: "Charles R. Miller", type: "Reference", link: "#", desc: "The pocket guide every electrician carries on site." },
      { title: "Mike Holt's NEC Guide", author: "Mike Holt", type: "Book", link: "#", desc: "Plain-English breakdown of electrical codes and safety regulations." },
      { title: "Ghana Energy Commission Portal", author: "EC Ghana", type: "Website", link: "#", desc: "Official licensing and regulation portal for electrical professionals." },
    ],
    mentors: [
      { name: "Ben Otchere", role: "Chief Electrician", company: "GRIDCo", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", bio: "30 years maintaining Ghana's national grid. Strong advocate for TVET pathways.", linkedin: "#", email: "#" },
      { name: "Efua Asare", role: "Solar Engineer", company: "BXC Solar", image: "https://images.unsplash.com/photo-1594824476967-48c8b964273f?w=100&h=100&fit=crop&crop=face", bio: "Installing solar microgrids across northern Ghana — changing lives one rooftop at a time.", linkedin: "#", email: "#" },
    ],
    advice: "Ghana's energy transition to renewables is accelerating. An electrician with solar knowledge is not just employed — they are essential to the country's future.",
  },

  {
    id: "v6",
    title: "Executive Chef",
    programme: "Catering & Hospitality Management (TVET)",
    category: "vocational",
    type: "vocational",
    matchScore: 85,
    salary: "GH₵ 5k – 15k",
    salaryMin: 5000,
    salaryMax: 15000,
    growth: "Medium (+12%)",
    growthPct: 12,
    description: "Lead kitchen operations for hotels, restaurants, and catering firms. Ghana's hospitality sector is expanding rapidly — Marriott, Kempinski, and Movenpick are all operating in Accra and growing.",
    reason: "Creativity, discipline, and leadership under pressure are the three traits that define both great chefs and great leaders.",
    skills: ["Culinary Arts", "Kitchen Management", "Menu Development", "Food Safety (HACCP)"],
    topEmployers: [
      { name: "Kempinski Hotel Gold Coast", type: "Luxury Hospitality", website: "#", desc: "Ghana's premier 5-star hotel with multiple fine-dining outlets." },
      { name: "La Palm Royal Beach Hotel", type: "Hospitality", website: "#", desc: "Conference and leisure hotel with a large catering operation." },
      { name: "Accra Marriott Hotel", type: "International Hotel", website: "#", desc: "300-room Marriott in Airport City requiring a full culinary brigade." },
      { name: "Jofel Catering", type: "Institutional Catering", website: "#", desc: "Ghana's leading institutional catering company serving major corporates." },
    ],
    detailedRoadmap: [
      { phase: "Certificate", time: "2 yrs", action: "Certificate in Catering & Hospitality at Hotel, Catering & Tourism Training Centre, Accra." },
      { phase: "International Cert", time: "Year 2", action: "City & Guilds Professional Cookery qualification — widely recognised by international hotel brands." },
      { phase: "Hotel Internship", time: "6 months", action: "Intern at a 4 or 5-star hotel kitchen — focus on continental and fusion cuisine." },
      { phase: "Career Launch", time: "Ongoing", action: "Apply via Ghana Hotels Association (GHA) careers portal and directly to hotel HR departments." },
    ],
    certifications: [
      { name: "City & Guilds Professional Cookery", provider: "City & Guilds", difficulty: "Intermediate" },
      { name: "HACCP Food Safety", provider: "ServSafe", difficulty: "Beginner" },
      { name: "COTVET Hospitality Certificate", provider: "COTVET", difficulty: "Beginner" },
    ],
    resources: [
      { title: "The Professional Chef", author: "Culinary Institute of America", type: "Textbook", link: "#", desc: "The definitive guide used by every professional culinary school." },
      { title: "Salt, Fat, Acid, Heat", author: "Samin Nosrat", type: "Book", link: "#", desc: "A masterclass in flavour fundamentals for any level of chef." },
      { title: "MasterClass – Gordon Ramsay", author: "MasterClass", type: "Course", link: "#", desc: "World-class culinary instruction available fully online." },
    ],
    mentors: [
      { name: "Chef Binta", role: "Executive Chef", company: "Kempinski Accra", image: "https://images.unsplash.com/photo-1583394293214-0e9e11e78e4e?w=100&h=100&fit=crop&crop=face", bio: "Head of culinary operations at Kempinski. Trained in France and Ghana.", linkedin: "#", email: "#" },
      { name: "Nana Addo-Mensah", role: "Catering Director", company: "Jofel Catering", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", bio: "Feeds 10,000 people daily across Accra's corporate clients.", linkedin: "#", email: "#" },
    ],
    advice: "Food is culture. A chef who fuses authentic Ghanaian flavours with world-class technique can open doors from Accra to London to Dubai.",
  },

  {
    id: "v7",
    title: "Automotive Diagnostic Specialist",
    programme: "Automotive Engineering Technology (TVET)",
    category: "vocational",
    type: "vocational",
    matchScore: 90,
    salary: "GH₵ 4k – 11k",
    salaryMin: 4000,
    salaryMax: 11000,
    growth: "High (+16%)",
    growthPct: 16,
    description: "Use advanced software tools to diagnose and repair modern vehicles. Ghana's car import market is growing fast and demand for trained diagnosticians outstrips supply by a factor of three.",
    reason: "Combining technical curiosity with problem-solving instincts makes automotive diagnostics a powerful career match.",
    skills: ["OBD Diagnostics", "Engine Performance", "EV/Hybrid Basics", "Workshop Management"],
    topEmployers: [
      { name: "Toyota Ghana", type: "Auto Dealership", website: "#", desc: "Authorised Toyota dealer with the largest certified workshop in Ghana." },
      { name: "RMG Ghana (Mercedes)", type: "Auto Dealership", website: "#", desc: "Official Mercedes-Benz dealer requiring OEM-trained diagnosticians." },
      { name: "Mechanical Lloyd", type: "Engineering Services", website: "#", desc: "Long-standing vehicle maintenance and fleet management company." },
      { name: "Own Workshop", type: "Entrepreneurship", website: "#", desc: "Accra's vehicle density creates a massive market for skilled independent specialists." },
    ],
    detailedRoadmap: [
      { phase: "HND Automotive", time: "3 yrs", action: "HND in Automotive Technology at Kumasi or Sunyani Technical University." },
      { phase: "OEM Training", time: "Year 3", action: "Apply for dealer-sponsored OEM training from Toyota or Mercedes — free for accepted technicians." },
      { phase: "EV Certificate", time: "Flexible", action: "Add an EV and hybrid vehicle servicing certificate — the industry is shifting fast." },
      { phase: "Career Launch", time: "Post-HND", action: "Authorised dealerships pay the highest rates. Top diagnosticians earn a commission on top of salary." },
    ],
    certifications: [
      { name: "Toyota T-TEN Certification", provider: "Toyota", difficulty: "Hard" },
      { name: "ASE Automotive Service Excellence", provider: "ASE", difficulty: "Intermediate" },
      { name: "EV Technician Certificate", provider: "IMI UK", difficulty: "Intermediate" },
    ],
    resources: [
      { title: "Auto Fundamentals", author: "Hollembeak", type: "Textbook", link: "#", desc: "Standard automotive fundamentals training textbook." },
      { title: "Mitchell1 / Identifix", author: "Online Software", type: "Tool", link: "#", desc: "Industry-standard diagnostic software used by professional workshops." },
      { title: "ScannerDanner (YouTube)", author: "Paul Danner", type: "Video", link: "#", desc: "Best free channel for learning real-world automotive diagnostics." },
    ],
    mentors: [
      { name: "Kwabena Owusu", role: "Master Technician", company: "Toyota Ghana", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", bio: "Ghana's only Toyota Master Technician. Has trained over 50 apprentices in 20 years.", linkedin: "#", email: "#" },
      { name: "Abena Frimpong", role: "Workshop Manager", company: "Mechanical Lloyd", image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face", bio: "First female workshop manager at a major Ghanaian automotive firm.", linkedin: "#", email: "#" },
    ],
    advice: "The mechanic who understands computers as well as engines is indispensable. Ghana's roads need you — and the earnings reflect that.",
  },

  {
    id: "v8",
    title: "Fashion Designer & Production Manager",
    programme: "Garment / Fashion Technology (TVET)",
    category: "vocational",
    type: "vocational",
    matchScore: 86,
    salary: "GH₵ 3.5k – 10k",
    salaryMin: 3500,
    salaryMax: 10000,
    growth: "Medium (+10%)",
    growthPct: 10,
    description: "Design and oversee production of garments for Ghana's growing textile and fashion export industry — from kente-inspired luxury labels to commercial fast fashion for West African markets.",
    reason: "Creativity combined with commercial sense defines fashion success. Ghana's rich textile heritage is your competitive advantage globally.",
    skills: ["Pattern Making", "Garment Technology", "Production Planning", "Fashion Illustration"],
    topEmployers: [
      { name: "Vlisco Ghana", type: "Textile Manufacturer", website: "#", desc: "World-renowned wax print fabric brand with operations based in Ghana." },
      { name: "Christie Brown", type: "Luxury Fashion", website: "#", desc: "Ghana's flagship luxury fashion label, retailing across Africa and Europe." },
      { name: "Afia Ghana Fabrics", type: "Textiles", website: "#", desc: "Leading domestic textile manufacturer based in Tema Industrial Area." },
      { name: "Own Label / Freelance", type: "Entrepreneurship", website: "#", desc: "Accra Fashion Week creates a platform for independent designers to reach global buyers." },
    ],
    detailedRoadmap: [
      { phase: "Certificate", time: "2 yrs", action: "Fashion Technology certificate at NVTI or Kumasi National Cultural Centre Fashion School." },
      { phase: "Portfolio", time: "Year 2", action: "Build a lookbook of 10 original pieces. Document every sketch, pattern, and finished sample." },
      { phase: "Factory Internship", time: "6 months", action: "Attach to a mid-size garment factory in Accra's Industrial Area for production experience." },
      { phase: "Career Launch", time: "Ongoing", action: "Lagos and Accra Fashion Weeks are your annual showcase. Participate every year without exception." },
    ],
    certifications: [
      { name: "NVTI Fashion Technology III", provider: "NVTI Ghana", difficulty: "Intermediate" },
      { name: "Adobe Illustrator for Fashion", provider: "LinkedIn Learning", difficulty: "Beginner" },
      { name: "CLO 3D Virtual Fashion", provider: "CLO Software", difficulty: "Intermediate" },
    ],
    resources: [
      { title: "The Fashion Designer's Handbook", author: "Wendye Sahyoun", type: "Book", link: "#", desc: "Practical guide covering the full journey from sketch to production." },
      { title: "Pattern Making for Fashion Design", author: "Helen Joseph-Armstrong", type: "Textbook", link: "#", desc: "The definitive pattern-making reference used in fashion schools globally." },
      { title: "Business of Fashion", author: "BoF", type: "Website", link: "#", desc: "Industry news and career resources for fashion professionals worldwide." },
    ],
    mentors: [
      { name: "Aisha Osei", role: "Creative Director", company: "Christie Brown", image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop&crop=face", bio: "Dresses Ghanaian first ladies and African celebrities. Born and trained in Kumasi.", linkedin: "#", email: "#" },
      { name: "Michael Darko", role: "Production Manager", company: "Afia Ghana Fabrics", image: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face", bio: "Manages production of 50,000 garments per month for domestic and export markets.", linkedin: "#", email: "#" },
    ],
    advice: "Ghana has a rich textile heritage the world is hungry for. Tell your story through cloth — and the world will buy it.",
  },

  // ══════════════════════════════════════════════════════════
  // DEGREE / UNIVERSITY CAREERS
  // ══════════════════════════════════════════════════════════

  {
    id: "d1",
    title: "Software Engineer",
    programme: "BSc Computer Science",
    category: "tech",
    type: "degree",
    matchScore: 98,
    salary: "GH₵ 8k – 20k",
    salaryMin: 8000,
    salaryMax: 20000,
    growth: "Very High (+25%)",
    growthPct: 25,
    description: "Build the digital infrastructure of Ghana. Design apps, platforms, and systems that solve real problems for real Ghanaians — from mobile payments to healthcare records.",
    reason: "Your love for logic and systematic thinking suggests you have the analytical mind that software engineering demands.",
    skills: ["Python", "React", "Cloud Architecture", "Problem Solving"],
    topEmployers: [
      { name: "Hubtel", type: "Fintech", website: "https://hubtel.com", desc: "Ghana's leading payment and messaging platform — engineers at the core." },
      { name: "mPharma", type: "HealthTech", website: "https://mpharma.com", desc: "Using technology to fix the drug supply chain across Africa." },
      { name: "Turntabl", type: "Global Tech", website: "https://turntabl.io", desc: "An Accra-based software shop building systems for global investment banks." },
      { name: "ExpressPay", type: "Payments", website: "https://expresspaygh.com", desc: "Pioneer in Ghanaian fintech. Always hiring engineers." },
    ],
    detailedRoadmap: [
      { phase: "Degree", time: "Yr 1–4", action: "BSc Computer Science at KNUST, Legon, or Ashesi. Focus on Data Structures from Year 1." },
      { phase: "Build Projects", time: "Yr 2–3", action: "Build 3 real projects (a voting app, expense tracker, marketplace). Host on GitHub." },
      { phase: "Internship", time: "Yr 3", action: "6-month internship at a fintech firm — Hubtel, Zeepay, or ExpressPay." },
      { phase: "Career Launch", time: "Final yr", action: "Portfolio-first applications on LinkedIn and JobHunt GH." },
    ],
    certifications: [
      { name: "AWS Certified Developer", provider: "Amazon", difficulty: "Intermediate" },
      { name: "Google Cloud Associate", provider: "Google", difficulty: "Intermediate" },
      { name: "Meta Front-End Certificate", provider: "Coursera", difficulty: "Beginner" },
    ],
    resources: [
      { title: "Cracking the Coding Interview", author: "Gayle Laakmann McDowell", type: "Book", link: "#", desc: "The bible for technical interview preparation." },
      { title: "Clean Code", author: "Robert C. Martin", type: "Book", link: "#", desc: "Learn to write code that others can understand and maintain." },
      { title: "freeCodeCamp", author: "freeCodeCamp.org", type: "Course", link: "https://freecodecamp.org", desc: "The best free resource for learning web development." },
    ],
    mentors: [
      { name: "Ivy Barley", role: "Tech Entrepreneur", company: "Developers in Vogue", image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=100&h=100&fit=crop&crop=face", bio: "Co-founder of Developers in Vogue, helping African women break into tech.", linkedin: "#", email: "#" },
      { name: "Kwadwo Agyapong", role: "Senior Engineer", company: "Google", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face", bio: "From KNUST to Silicon Valley. Passionate about cloud computing and mentoring.", linkedin: "#", email: "#" },
    ],
    advice: "Every expert you see was a beginner who refused to give up. The tech industry in Ghana is booming — your unique perspective is exactly what's needed.",
  },

  {
    id: "d2",
    title: "Data Analyst",
    programme: "BSc Statistics / Computer Science",
    category: "tech",
    type: "degree",
    matchScore: 92,
    salary: "GH₵ 7k – 15k",
    salaryMin: 7000,
    salaryMax: 15000,
    growth: "Very High (+30%)",
    growthPct: 30,
    description: "Turn raw numbers into business decisions. Help MTN figure out where to build the next mast. Help COCOBOD forecast harvests. Help a bank detect fraud before it happens.",
    reason: "You enjoy Maths and solving puzzles. Data Analytics combines logic with storytelling — a rare and valuable combination.",
    skills: ["SQL", "PowerBI", "Python (Pandas)", "Data Storytelling"],
    topEmployers: [
      { name: "MTN Ghana", type: "Telecom", website: "https://mtn.com.gh", desc: "Uses massive datasets to optimise network quality and customer experience." },
      { name: "Turntabl", type: "Tech", website: "https://turntabl.io", desc: "Global software company dealing with complex financial data daily." },
      { name: "Stanbic Bank", type: "Banking", website: "#", desc: "Pan-African bank with strong demand for financial data analysts." },
      { name: "Farmerline", type: "AgriTech", website: "https://farmerline.co", desc: "Analysing crop data and farmer behaviour to improve agricultural yields." },
    ],
    detailedRoadmap: [
      { phase: "Core Skills", time: "Month 1–6", action: "Master Excel (Pivot Tables) and SQL. These are non-negotiable foundations." },
      { phase: "Visualisation", time: "Month 6–12", action: "Learn PowerBI or Tableau. Stories told with data are the ones that get funded." },
      { phase: "Programming", time: "Year 2", action: "Learn Python Pandas for deeper analysis, then enter Kaggle competitions." },
      { phase: "Career Launch", time: "Ongoing", action: "LinkedIn is your primary channel. Publish 3 original dataset analyses to signal expertise." },
    ],
    certifications: [
      { name: "Google Data Analytics", provider: "Coursera", difficulty: "Beginner" },
      { name: "Microsoft Power BI Data Analyst", provider: "Microsoft", difficulty: "Intermediate" },
      { name: "SQL for Data Science", provider: "Datacamp", difficulty: "Beginner" },
    ],
    resources: [
      { title: "Storytelling with Data", author: "Cole Nussbaumer Knaflic", type: "Book", link: "#", desc: "How to visualise data so it actually influences decisions." },
      { title: "Kaggle", author: "Kaggle.com", type: "Platform", link: "https://kaggle.com", desc: "The world's largest data science community. Practice here daily." },
      { title: "Mode Analytics Blog", author: "Mode", type: "Blog", link: "#", desc: "SQL tutorials and analytics case studies from practitioners." },
    ],
    mentors: [
      { name: "Jessica Poku", role: "Business Analyst", company: "Stanbic Bank", image: "https://images.unsplash.com/photo-1551836022-deb4988cc6c0?w=100&h=100&fit=crop&crop=face", bio: "Turning banking transaction data into profitable product decisions at Stanbic.", linkedin: "#", email: "#" },
      { name: "Pythagoras Nkrumah", role: "Data Scientist", company: "Microsoft Africa", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", bio: "Leading AI and data science initiatives across sub-Saharan Africa.", linkedin: "#", email: "#" },
    ],
    advice: "Data is the new cocoa — even in Ghana. Don't just learn the tools. Learn the business domain. A Data Analyst who understands the local market is unstoppable.",
  },

  {
    id: "d3",
    title: "Chartered Accountant",
    programme: "BSc Administration (Accounting)",
    category: "business",
    type: "degree",
    matchScore: 95,
    salary: "GH₵ 6k – 18k",
    salaryMin: 6000,
    salaryMax: 18000,
    growth: "Stable (+7%)",
    growthPct: 7,
    description: "Manage audits, financial statements, and tax compliance for Ghana's corporate sector. The most trusted professional in every boardroom — and the most consistently employed.",
    reason: "Interest in Economics and a logical, organised mind suggests financial strategy is where you will truly thrive.",
    skills: ["Financial Analysis", "Auditing", "Excel & ERP", "Tax Law (Ghana)"],
    topEmployers: [
      { name: "PwC Ghana", type: "Big 4 Audit", website: "https://www.pwc.com/gh", desc: "One of the Big 4 accounting firms. The most prestigious training ground in Ghana." },
      { name: "KPMG Ghana", type: "Big 4 Audit", website: "https://home.kpmg/gh", desc: "Global network providing Audit, Tax, and Advisory services." },
      { name: "Ecobank Ghana", type: "Banking", website: "https://ecobank.com", desc: "Pan-African bank with robust finance departments." },
      { name: "GRA", type: "Government", website: "https://gra.gov.gh", desc: "Ghana Revenue Authority — the central body for national tax administration." },
    ],
    detailedRoadmap: [
      { phase: "Degree", time: "Yr 1–4", action: "BSc Administration (Accounting option) at UPSA, Legon, or KNUST." },
      { phase: "ICAG Enrolment", time: "Yr 2", action: "Enrol in ICAG professional examinations while still in school — get ahead of your peers." },
      { phase: "Articleship", time: "3 yrs post-grad", action: "Complete 3-year practical training at a licensed audit firm." },
      { phase: "Career Launch", time: "Post-qualification", action: "The Big 4 firms recruit heavily from ICAG professional cohorts every year." },
    ],
    certifications: [
      { name: "ICAG (Chartered Accountant)", provider: "ICA Ghana", difficulty: "Hard" },
      { name: "ACCA", provider: "ACCA Global", difficulty: "Hard" },
      { name: "Financial Modelling (FMVA)", provider: "CFI", difficulty: "Intermediate" },
    ],
    resources: [
      { title: "Rich Dad Poor Dad", author: "Robert Kiyosaki", type: "Book", link: "#", desc: "Essential reading for understanding assets vs. liabilities." },
      { title: "Accounting Principles", author: "Weygandt, Kimmel & Kieso", type: "Textbook", link: "#", desc: "The standard textbook for undergraduate accounting students." },
      { title: "Excel for Finance", author: "Udemy", type: "Course", link: "#", desc: "Mastering spreadsheets is non-negotiable in this profession." },
    ],
    mentors: [
      { name: "Abena Amoah", role: "Managing Director", company: "Ghana Stock Exchange", image: "https://images.unsplash.com/photo-1594824476967-48c8b964273f?w=100&h=100&fit=crop&crop=face", bio: "A titan in Ghanaian investment banking and capital markets.", linkedin: "#", email: "#" },
      { name: "Yaw Barimah", role: "Partner", company: "PwC Ghana", image: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face", bio: "Leads PwC's Financial Services assurance practice in Ghana.", linkedin: "#", email: "#" },
    ],
    advice: "Accounting is the language of business. Integrity is your currency. Don't just count the money — understand what the numbers are actually saying.",
  },

  {
    id: "d4",
    title: "Pharmacist",
    programme: "Doctor of Pharmacy (PharmD)",
    category: "health",
    type: "degree",
    matchScore: 89,
    salary: "GH₵ 5k – 14k",
    salaryMin: 5000,
    salaryMax: 14000,
    growth: "High (+15%)",
    growthPct: 15,
    description: "The most accessible healthcare professional in Ghana. Work in hospitals, community pharmacies, or the booming pharmaceutical manufacturing sector. You are the last safety net between a patient and a medication error.",
    reason: "High chemistry scores and a genuine desire to help people makes Pharmacy the perfect blend of science and compassionate care.",
    skills: ["Clinical Pharmacology", "Patient Counselling", "Drug Interaction Management", "Supply Chain"],
    topEmployers: [
      { name: "Ernest Chemists", type: "Manufacturing & Retail", website: "https://ernestchemists.com", desc: "Ghana's largest pharmaceutical manufacturer and retail chain." },
      { name: "Korle-Bu Teaching Hospital", type: "Public Health", website: "https://kbth.gov.gh", desc: "Ghana's premier teaching hospital." },
      { name: "mPharma", type: "HealthTech", website: "https://mpharma.com", desc: "Managing drug inventory and access across 200+ pharmacies in Africa." },
      { name: "FDA Ghana", type: "Regulatory", website: "https://fdaghana.gov.gh", desc: "Ghana Food and Drugs Authority — a regulatory career path with impact." },
    ],
    detailedRoadmap: [
      { phase: "PharmD", time: "6 yrs", action: "Doctor of Pharmacy at KNUST College of Health Sciences, Legon, or UHAS." },
      { phase: "Clinical Rotations", time: "Yr 5–6", action: "Complete rotations across hospital, community, and industrial pharmacy settings." },
      { phase: "Licensure", time: "Final yr", action: "Pass the Ghana Pharmacy Council Professional Qualifying Examination." },
      { phase: "Career Launch", time: "Post-housemanship", action: "mPharma and Ernest Chemists are actively expanding. Apply directly to their HR." },
    ],
    certifications: [
      { name: "GPC Pharmacist Licence", provider: "Ghana Pharmacy Council", difficulty: "Hard" },
      { name: "Clinical Pharmacy Certificate", provider: "ASHP", difficulty: "Hard" },
      { name: "Supply Chain Management", provider: "Coursera", difficulty: "Intermediate" },
    ],
    resources: [
      { title: "British National Formulary (BNF)", author: "BNF / NICE", type: "Reference", link: "#", desc: "The global authority on the selection and use of medicines." },
      { title: "Pharmacotherapy: A Pathophysiologic Approach", author: "DiPiro et al.", type: "Textbook", link: "#", desc: "The definitive clinical pharmacy textbook for all PharmD students." },
      { title: "Medscape", author: "WebMD Health", type: "App", link: "#", desc: "Essential app for drug interactions and clinical guidelines." },
    ],
    mentors: [
      { name: "Pharm. Dr. Kwame Sarpong", role: "Industrial Pharmacist", company: "Ernest Chemists", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", bio: "Expert in local drug manufacturing and quality assurance systems.", linkedin: "#", email: "#" },
      { name: "Pharm. Elsie Quaye", role: "Community Pharmacist", company: "Lifespan Pharmacy", image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face", bio: "Passionate about patient counselling and medication accessibility in communities.", linkedin: "#", email: "#" },
    ],
    advice: "Pharmacy is not just about dispensing pills. You are the most accessible healthcare provider in the community. Build trust with every single patient you serve.",
  },

  {
    id: "d5",
    title: "Agribusiness Manager",
    programme: "BSc Agribusiness",
    category: "agri",
    type: "degree",
    matchScore: 84,
    salary: "GH₵ 5k – 15k",
    salaryMin: 5000,
    salaryMax: 15000,
    growth: "Very High (+22%)",
    growthPct: 22,
    description: "Manage Ghana's most important industry with business intelligence. Handle supply chains, export logistics, and farm profitability at scale. Agriculture is a multi-billion cedi industry.",
    reason: "Business-minded individuals who understand nature and logistics have an almost unfair advantage in agribusiness.",
    skills: ["Supply Chain", "Export Logistics", "Agri-Finance", "Data Analysis"],
    topEmployers: [
      { name: "Blue Skies Ghana", type: "Food Export", website: "https://blueskies.com", desc: "Major exporter of fresh-cut fruit to European supermarkets." },
      { name: "COCOBOD", type: "Government", website: "https://cocobod.gh", desc: "The regulator of Ghana's US$2bn cocoa industry." },
      { name: "Farmerline", type: "AgriTech", website: "https://farmerline.co", desc: "Connecting farmers to markets, finance, and digital services." },
      { name: "Trotro Tractor", type: "AgriTech", website: "https://trotrotractor.com", desc: "Uber for tractors — mechanising smallholder farming at scale." },
    ],
    detailedRoadmap: [
      { phase: "Degree", time: "Yr 1–4", action: "BSc Agribusiness at KNUST or Legon. Minor in Economics for the full toolkit." },
      { phase: "Field Internship", time: "Summers", action: "Intern at a processing factory or export firm. Trace the full supply chain end to end." },
      { phase: "Tech Add-on", time: "Yr 3", action: "Learn supply chain software and basic data analysis — separates you from 90% of graduates." },
      { phase: "Career Launch", time: "Post-grad", action: "Ghana Chamber of Agribusiness is the most powerful networking gateway in the sector." },
    ],
    certifications: [
      { name: "Certified Supply Chain Professional (CSCP)", provider: "APICS", difficulty: "Hard" },
      { name: "Project Management (PMP)", provider: "PMI", difficulty: "Hard" },
      { name: "Sustainable Agriculture", provider: "Wageningen (edX)", difficulty: "Intermediate" },
    ],
    resources: [
      { title: "The Lean Farm", author: "Ben Hartman", type: "Book", link: "#", desc: "How to minimise waste and maximise farm profitability." },
      { title: "Agribusiness Management", author: "Freddie Barnard", type: "Textbook", link: "#", desc: "Core principles of managing an agribusiness operation." },
      { title: "Alliance for Green Revolution Africa", author: "AGRA", type: "Website", link: "#", desc: "Research, funding, and career opportunities in African agriculture." },
    ],
    mentors: [
      { name: "Aloysius Attah", role: "CEO", company: "Farmerline", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face", bio: "Revolutionising how smallholder farmers access finance and global markets.", linkedin: "#", email: "#" },
      { name: "Mabel Simpson", role: "Export Director", company: "Blue Skies Ghana", image: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=100&h=100&fit=crop&crop=face", bio: "Oversees export of Ghanaian fresh produce to 12 European countries.", linkedin: "#", email: "#" },
    ],
    advice: "Agriculture is not 'hoe and cutlass'. It is a multi-billion cedi industry involving logistics, finance, and technology. The money is in the value addition.",
  },

  {
    id: "d6",
    title: "Brand & Graphic Designer",
    programme: "BSc Communication Design",
    category: "creative",
    type: "degree",
    matchScore: 88,
    salary: "GH₵ 4k – 10k",
    salaryMin: 4000,
    salaryMax: 10000,
    growth: "Medium (+10%)",
    growthPct: 10,
    description: "Visual communicators who create logos, campaigns, and brand identities. Every startup in Accra needs one — and the best ones work with clients in London, Lagos, and New York.",
    reason: "Your Visual Arts background and creative instinct are in high demand as every business in Ghana moves online.",
    skills: ["Adobe Suite", "Brand Strategy", "UI/UX Design", "Motion Graphics"],
    topEmployers: [
      { name: "Ogilvy Ghana", type: "Creative Agency", website: "#", desc: "Global advertising agency. The most competitive and prestigious in Accra." },
      { name: "Innova DDB", type: "Creative Agency", website: "#", desc: "Top-tier creative agency working with MTN, Guinness, and Unilever Ghana." },
      { name: "MTN Ghana (In-house)", type: "Telecom", website: "#", desc: "Large in-house creative team producing digital-first campaigns at scale." },
      { name: "Freelance / Startups", type: "Self-Employed", website: "#", desc: "Accra's startup ecosystem creates non-stop demand for skilled brand designers." },
    ],
    detailedRoadmap: [
      { phase: "Master the Tools", time: "Month 1–3", action: "Master Adobe Illustrator, Photoshop, and Figma. Practice every single day." },
      { phase: "Build Your Portfolio", time: "Year 1", action: "Create re-brands for 5 real Ghanaian companies. Make them genuinely outstanding." },
      { phase: "Community & Visibility", time: "Ongoing", action: "Post work on Behance and join #GhDesignCommunity on X (Twitter)." },
      { phase: "Career Launch", time: "Ongoing", action: "Agencies hire from portfolios — not CVs. Your work is your application." },
    ],
    certifications: [
      { name: "Adobe Certified Professional", provider: "Adobe", difficulty: "Intermediate" },
      { name: "Google UX Design Certificate", provider: "Coursera", difficulty: "Beginner" },
      { name: "Graphic Design Specialization", provider: "CalArts / Coursera", difficulty: "Beginner" },
    ],
    resources: [
      { title: "Steal Like an Artist", author: "Austin Kleon", type: "Book", link: "#", desc: "How to find genuine inspiration without copying." },
      { title: "Thinking with Type", author: "Ellen Lupton", type: "Book", link: "#", desc: "A critical guide for designers on the art of typography." },
      { title: "Dribbble & Behance", author: "Online Platforms", type: "Website", link: "#", desc: "Study top portfolios daily. Build your eye before you build a brand." },
    ],
    mentors: [
      { name: "Benjamin K. Hagan", role: "Creative Director", company: "Ogilvy Ghana", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", bio: "Leading creative campaigns for Ghana's biggest brands for 15 years.", linkedin: "#", email: "#" },
      { name: "Aurelia Dey", role: "Brand Designer", company: "Freelance", image: "https://images.unsplash.com/photo-1551836022-deb4988cc6c0?w=100&h=100&fit=crop&crop=face", bio: "Helping Ghanaian SMEs find their visual voice. 200+ clients served.", linkedin: "#", email: "#" },
    ],
    advice: "Your portfolio is your degree. In the creative field, nobody cares about your grades — they care about what you can create. Practice every single day.",
  },

  {
    id: "d7",
    title: "Digital Marketing Manager",
    programme: "BSc Marketing / Communications",
    category: "business",
    type: "degree",
    matchScore: 85,
    salary: "GH₵ 5k – 12k",
    salaryMin: 5000,
    salaryMax: 12000,
    growth: "Medium (+15%)",
    growthPct: 15,
    description: "Drive brand growth through social media, SEO, and data analytics. Essential for every modern Ghanaian startup and the number-one skill gap in the marketing industry right now.",
    reason: "An interest in organising events and influencing people makes marketing a natural and lucrative fit.",
    skills: ["SEO", "Content Strategy", "Meta & Google Ads", "Analytics"],
    topEmployers: [
      { name: "Ogilvy Ghana", type: "Agency", website: "#", desc: "One of the top creative and marketing agencies in West Africa." },
      { name: "Jumia Ghana", type: "E-Commerce", website: "#", desc: "Africa's leading e-commerce platform — digital marketing is at its core." },
      { name: "MTN Ghana", type: "Telecom", website: "#", desc: "Largest telecom with the biggest digital marketing budget in Ghana." },
      { name: "Media General", type: "Media", website: "#", desc: "Media conglomerate with growing TV, radio, and digital presence." },
    ],
    detailedRoadmap: [
      { phase: "Foundation", time: "Yr 1–2", action: "Study Marketing or Psychology. Master consumer behaviour principles inside out." },
      { phase: "Certification", time: "Yr 3", action: "Get Google Digital Garage and HubSpot certifications — both are free and respected by employers." },
      { phase: "Mentor Link", time: "Crucial", action: "Identify a senior digital marketer on LinkedIn. Request a 15-minute career conversation." },
      { phase: "Career Launch", time: "Final yr", action: "Build a portfolio of 3 real campaigns with measurable results. Apply on LinkedIn and Jobberman." },
    ],
    certifications: [
      { name: "Google Digital Garage", provider: "Google", difficulty: "Beginner" },
      { name: "HubSpot Content Marketing", provider: "HubSpot", difficulty: "Intermediate" },
      { name: "Meta Social Media Marketing", provider: "Coursera", difficulty: "Beginner" },
    ],
    resources: [
      { title: "This Is Marketing", author: "Seth Godin", type: "Book", link: "#", desc: "A breakthrough approach to marketing philosophy. Required reading." },
      { title: "Building a StoryBrand", author: "Donald Miller", type: "Book", link: "#", desc: "Clarify your brand message so customers will actually listen." },
      { title: "Google Analytics Academy", author: "Google", type: "Course", link: "#", desc: "Free analytics training from the most widely used platform in the world." },
    ],
    mentors: [
      { name: "Edward Asare", role: "Digital Marketer", company: "UBA Ghana", image: "https://images.unsplash.com/photo-1560250097-0b93528c311a?w=100&h=100&fit=crop&crop=face", bio: "Award-winning digital marketer sharing tips on career growth in Ghana.", linkedin: "#", email: "#" },
      { name: "Ameyaw Debrah", role: "Media Entrepreneur", company: "Ameyaw Media", image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face", bio: "Pioneer in Ghanaian digital media. Built Ghana's first major celebrity blog.", linkedin: "#", email: "#" },
    ],
    advice: "Marketing is not about selling. It is about telling a story that resonates. In Ghana's growing digital economy, your authentic voice is your biggest competitive advantage.",
  },

  {
    id: "d8",
    title: "Biomedical Scientist",
    programme: "BSc Medical Laboratory Science",
    category: "health",
    type: "degree",
    matchScore: 92,
    salary: "GH₵ 6k – 15k",
    salaryMin: 6000,
    salaryMax: 15000,
    growth: "Stable (+8%)",
    growthPct: 8,
    description: "Analyse biological samples to aid medical diagnosis. A critical role in Ghana's expanding health sector — every hospital, clinic, and research institute needs skilled biomedical scientists.",
    reason: "A preference for Biology combined with a desire to help people in a precise, scientific way aligns perfectly with this role.",
    skills: ["Lab Safety", "Microbiology", "Haematology", "Quality Assurance (ISO 15189)"],
    topEmployers: [
      { name: "Noguchi Memorial Institute", type: "Research", website: "#", desc: "Ghana's leading medical research institute at the University of Ghana." },
      { name: "MDS-Lancet", type: "Diagnostics", website: "#", desc: "The largest private medical laboratory service in Ghana." },
      { name: "Nyaho Medical Centre", type: "Private Hospital", website: "#", desc: "Premium private healthcare facility with advanced diagnostic labs." },
      { name: "Korle-Bu Teaching Hospital", type: "Public Health", website: "#", desc: "Ghana's national teaching hospital and largest public healthcare facility." },
    ],
    detailedRoadmap: [
      { phase: "Degree", time: "Yr 1–4", action: "BSc Medical Laboratory Science at KNUST, Legon, or UHAS. Maintain a strong GPA." },
      { phase: "Clinical Rotations", time: "Yr 3–4", action: "Complete mandatory hospital rotations. Learn phlebotomy and all major lab departments." },
      { phase: "AHPC Licensure", time: "Post-grad", action: "Pass the Allied Health Professions Council licensing examination." },
      { phase: "Career Launch", time: "Ongoing", action: "Apply to private diagnostic labs and government postings via Ministry of Health portal." },
    ],
    certifications: [
      { name: "AHPC Licence", provider: "Allied Health Professions Council", difficulty: "Hard" },
      { name: "Good Clinical Practice (GCP)", provider: "NIH", difficulty: "Intermediate" },
      { name: "ISO 15189 Lab Quality", provider: "ISO", difficulty: "Intermediate" },
    ],
    resources: [
      { title: "Clinical Laboratory Science", author: "Mary Louise Turgeon", type: "Textbook", link: "#", desc: "Standard reference text for medical laboratory science students." },
      { title: "The Immortal Life of Henrietta Lacks", author: "Rebecca Skloot", type: "Book", link: "#", desc: "Essential reading on bio-ethics and the human side of lab science." },
      { title: "Lablogatory", author: "Online", type: "Website", link: "#", desc: "Daily insights and career advice for laboratory science professionals." },
    ],
    mentors: [
      { name: "Dr. Dougbeh Nyan", role: "Research Scientist", company: "Nyan Research", image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face", bio: "Renowned scientist and inventor of rapid diagnostic tests recognised globally.", linkedin: "#", email: "#" },
      { name: "Sarah Osei", role: "Lab Manager", company: "Synlab Ghana", image: "https://images.unsplash.com/photo-1594824476967-48c8b964273f?w=100&h=100&fit=crop&crop=face", bio: "Managing high-throughput diagnostic labs serving 500+ patients daily.", linkedin: "#", email: "#" },
    ],
    advice: "Accuracy is your watchword. In the lab, a single mistake can cost a life. Be meticulous, ethical, and always follow safety protocols without exception.",
  },

  {
    id: "d9",
    title: "Human Resource Manager",
    programme: "BSc Human Resource Management",
    category: "business",
    type: "degree",
    matchScore: 82,
    salary: "GH₵ 5k – 12k",
    salaryMin: 5000,
    salaryMax: 12000,
    growth: "Stable (+8%)",
    growthPct: 8,
    description: "Manage the most important asset of any company — its people. Handle recruitment, talent development, and employee welfare at multinational companies operating across Ghana.",
    reason: "Strong interpersonal skills and an organised mind are the two most critical traits for a successful HR leader.",
    skills: ["Talent Acquisition", "Labour Law (Ghana)", "Employee Relations", "People Analytics"],
    topEmployers: [
      { name: "Tullow Oil Ghana", type: "Energy", website: "#", desc: "Multinational with top-tier HR practices and highly competitive compensation." },
      { name: "Gold Fields Ghana", type: "Mining", website: "#", desc: "Major employer in the Western Region requiring robust HR leadership." },
      { name: "Vodafone Ghana", type: "Telecom", website: "#", desc: "Known for excellent employee engagement and training programmes." },
      { name: "Jobberman Ghana", type: "HR Technology", website: "#", desc: "Ghana's leading recruitment platform — careers within the HR tech space." },
    ],
    detailedRoadmap: [
      { phase: "Degree", time: "Yr 1–4", action: "BSc HRM or Psychology at any accredited Ghanaian university." },
      { phase: "IHRMP Membership", time: "Yr 3–4", action: "Start student membership with IHRMP (Institute of HR Management Practitioners Ghana)." },
      { phase: "Internship", time: "Summers", action: "Work in a recruitment agency or any company's admin and HR function." },
      { phase: "Career Launch", time: "Post-grad", action: "Apply for HR Assistant roles. Optimise your LinkedIn profile with your IHRMP student membership." },
    ],
    certifications: [
      { name: "IHRMP Associate Member", provider: "IHRMP Ghana", difficulty: "Intermediate" },
      { name: "PHR (Professional in HR)", provider: "HRCI", difficulty: "Hard" },
      { name: "People Analytics", provider: "Coursera", difficulty: "Intermediate" },
    ],
    resources: [
      { title: "Work Rules!", author: "Laszlo Bock", type: "Book", link: "#", desc: "Insights from inside Google's legendary People Operations team." },
      { title: "The HR Scorecard", author: "Becker, Huselid & Ulrich", type: "Book", link: "#", desc: "Linking people, strategy, and performance metrics." },
      { title: "SHRM HR Magazine", author: "SHRM", type: "Publication", link: "#", desc: "Stay updated on global labour law and emerging HR trends." },
    ],
    mentors: [
      { name: "Dr. Mrs. Ellen Hagan", role: "CEO", company: "L'AINE Services", image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=100&h=100&fit=crop&crop=face", bio: "Pioneer of HR consultancy in Ghana with over 25 years of experience.", linkedin: "#", email: "#" },
      { name: "Kojo Amissah", role: "Lead Consultant", company: "CITAM Ghana", image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face", bio: "Expert in organisational development and workforce change management.", linkedin: "#", email: "#" },
    ],
    advice: "HR is not just about hiring and firing. It is strategy. Learn how to align every person's potential with the company's vision — and you will always have a seat at the executive table.",
  },
];

export default careersData;



"use client";

import React, { useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Cpu, HeartPulse, Briefcase, Palette, Leaf, Gavel,
  TrendingUp, DollarSign, BookOpen, Search, Target,
  ArrowUpRight, Wrench, ChevronRight, Zap, Filter,
  X, SlidersHorizontal, BarChart3, Star,
} from "lucide-react";
import careersData, { CATEGORY_META } from "./CareersMock";
import type { Career, CareerCategory } from "./CareersMock";
// ─── CONSTANTS ────────────────────────────────────────────────────────────────

const INTEREST_AREAS: Array<{
  id: CareerCategory | "all";
  label: string;
  icon: React.ReactNode;
  desc: string;
}> = [
  { id: "all",        label: "All Paths",         icon: <Target size={20} />,    desc: "Browse everything" },
  { id: "tech",       label: "Technology",         icon: <Cpu size={20} />,       desc: "Code, data, cloud" },
  { id: "vocational", label: "Vocational / TVET",  icon: <Wrench size={20} />,    desc: "Skilled trades" },
  { id: "health",     label: "Health",             icon: <HeartPulse size={20} />, desc: "Medicine & science" },
  { id: "business",   label: "Business",           icon: <Briefcase size={20} />, desc: "Finance & marketing" },
  { id: "creative",   label: "Creative Arts",      icon: <Palette size={20} />,   desc: "Design & media" },
  { id: "agri",       label: "Agriculture",        icon: <Leaf size={20} />,      desc: "Agribusiness & tech" },
  { id: "law",        label: "Law & Policy",       icon: <Gavel size={20} />,     desc: "Legal & governance" },
];

const SORT_OPTIONS = [
  { id: "match",  label: "Best Match" },
  { id: "salary", label: "Highest Salary" },
  { id: "growth", label: "Fastest Growing" },
];

const MARKET_STATS = [
  { value: "47%",    label: "Of roles need TVET skills",    icon: <Wrench size={16} />,    color: "#D97706" },
  { value: "+25%",   label: "Tech sector job growth",       icon: <TrendingUp size={16} />, color: "#2563EB" },
  { value: "12,400", label: "Active job postings analysed", icon: <BarChart3 size={16} />,  color: "#7C3AED" },
  { value: "17",     label: "Career paths available",       icon: <Star size={16} />,       color: "#059669" },
];

// ─── CAREER CARD ─────────────────────────────────────────────────────────────

const CareerCard: React.FC<{ career: Career; onSelect: (career: Career) => void }> = ({ career, onSelect }) => {
  const cat = CATEGORY_META[career.category] ?? CATEGORY_META.tech;
  const growthColor = career.growthPct >= 25 ? "#059669" : career.growthPct >= 15 ? "#D97706" : "#6B7280";

  return (
    <motion.div
      layout
      initial={{ opacity: 0, scale: 0.93 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.93 }}
      transition={{ duration: 0.2 }}
      whileHover={{ y: -4 }}
      className="bg-white rounded-3xl border border-slate-200 overflow-hidden group cursor-pointer relative flex flex-col"
      style={{ boxShadow: "0 1px 4px rgba(0,0,0,0.06)" }}
      onClick={() => onSelect(career)}
    >
      {/* Coloured top accent */}
      <div className="h-1.5 w-full" style={{ background: cat.color }} />

      {/* Match badge */}
      <div className="absolute top-4 right-4">
        <span
          className="text-xs font-black px-2.5 py-1 rounded-full"
          style={{ background: cat.bg, color: cat.accent, border: `1px solid ${cat.color}22` }}
        >
          {career.matchScore}%
        </span>
      </div>

      <div className="p-5 flex flex-col flex-1">
        {/* Icon + Category */}
        <div className="flex items-center gap-2 mb-4">
          <div
            className="w-10 h-10 rounded-xl flex items-center justify-center transition-transform group-hover:scale-110 duration-300"
            style={{ background: cat.bg, color: cat.color }}
          >
            {career.type === "vocational"
              ? <Wrench size={18} />
              : career.category === "tech" ? <Cpu size={18} />
              : career.category === "health" ? <HeartPulse size={18} />
              : career.category === "agri" ? <Leaf size={18} />
              : career.category === "creative" ? <Palette size={18} />
              : <Briefcase size={18} />
            }
          </div>
          <div>
            <p className="text-[10px] font-black uppercase tracking-widest" style={{ color: cat.accent }}>
              {cat.name}
            </p>
            {career.type === "vocational" && (
              <span className="text-[9px] font-bold text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded-full">TVET</span>
            )}
          </div>
        </div>

        {/* Title + Programme */}
        <h3 className="text-base font-black text-slate-900 leading-tight mb-0.5 group-hover:text-red-600 transition-colors pr-8">
          {career.title}
        </h3>
        <p className="text-[11px] text-slate-400 font-medium mb-3">{career.programme}</p>

        {/* Description */}
        <p className="text-slate-500 text-sm leading-relaxed line-clamp-2 flex-1 mb-4">
          {career.description}
        </p>

        {/* Stats */}
        <div className="grid grid-cols-2 gap-2 mb-4">
          <div className="bg-slate-50 rounded-xl p-2.5 border border-slate-100">
            <div className="flex items-center gap-1 text-slate-400 text-[9px] font-bold uppercase mb-0.5">
              <DollarSign size={10} /> Salary
            </div>
            <p className="text-slate-800 font-black text-xs leading-tight">{career.salary}</p>
          </div>
          <div className="bg-slate-50 rounded-xl p-2.5 border border-slate-100">
            <div className="flex items-center gap-1 text-slate-400 text-[9px] font-bold uppercase mb-0.5">
              <TrendingUp size={10} /> Demand
            </div>
            <p className="font-black text-xs" style={{ color: growthColor }}>{career.growth}</p>
          </div>
        </div>

        {/* Skills */}
        <div className="flex flex-wrap gap-1.5 mb-4">
          {career.skills.slice(0, 3).map((skill) => (
            <span
              key={skill}
              className="text-[10px] font-bold text-slate-500 bg-slate-100 border border-slate-200 px-2 py-0.5 rounded-md"
            >
              {skill}
            </span>
          ))}
        </div>

        {/* CTA */}
        <button
          className="w-full py-2.5 rounded-xl font-black text-sm text-white transition-all flex items-center justify-center gap-2 group-hover:brightness-110"
          style={{ background: cat.color }}
        >
          <BookOpen size={14} /> View Roadmap
        </button>
      </div>
    </motion.div>
  );
};

// ─── CAREER DETAIL DRAWER ─────────────────────────────────────────────────────

const CareerDrawer: React.FC<{ career: Career; onClose: () => void }> = ({ career, onClose }) => {
  const cat = CATEGORY_META[career.category] ?? CATEGORY_META.tech;

  return (
    <motion.div
      initial={{ opacity: 0, x: 40 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: 40 }}
      transition={{ type: "spring", stiffness: 300, damping: 30 }}
      className="fixed right-0 top-0 h-full w-full max-w-md bg-white shadow-2xl z-40 overflow-y-auto"
      style={{ borderLeft: "1px solid #E5E7EB" }}
    >
      {/* Header */}
      <div className="sticky top-0 z-10 bg-white border-b border-slate-100 px-6 py-4 flex items-center justify-between">
        <div>
          <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{cat.name}</p>
          <h2 className="font-black text-slate-900 text-lg leading-tight">{career.title}</h2>
        </div>
        <button
          onClick={onClose}
          className="w-9 h-9 flex items-center justify-center rounded-full hover:bg-slate-100 transition-colors"
        >
          <X size={20} />
        </button>
      </div>

      {/* Hero band */}
      <div className="h-3 w-full" style={{ background: cat.color }} />

      <div className="p-6 space-y-7">
        {/* Stats */}
        <div className="grid grid-cols-3 gap-3">
          <div className="text-center p-3 rounded-2xl border border-slate-100 bg-slate-50">
            <p className="text-[9px] font-bold text-slate-400 uppercase mb-1">Match</p>
            <p className="text-xl font-black" style={{ color: cat.color }}>{career.matchScore}%</p>
          </div>
          <div className="text-center p-3 rounded-2xl border border-slate-100 bg-slate-50">
            <p className="text-[9px] font-bold text-slate-400 uppercase mb-1">Salary</p>
            <p className="text-xs font-black text-slate-800 leading-tight">{career.salary}</p>
          </div>
          <div className="text-center p-3 rounded-2xl border border-slate-100 bg-slate-50">
            <p className="text-[9px] font-bold text-slate-400 uppercase mb-1">Growth</p>
            <p className="text-xs font-black text-emerald-600 leading-tight">{career.growth}</p>
          </div>
        </div>

        {/* Description */}
        <p className="text-slate-600 leading-relaxed text-sm">{career.description}</p>

        {/* Skills */}
        <div>
          <p className="text-xs font-black text-slate-900 uppercase tracking-wider mb-3">Key Skills</p>
          <div className="flex flex-wrap gap-2">
            {career.skills.map((s) => (
              <span
                key={s}
                className="text-sm font-bold px-3 py-1 rounded-lg"
                style={{ background: cat.bg, color: cat.accent, border: `1px solid ${cat.color}22` }}
              >
                {s}
              </span>
            ))}
          </div>
        </div>

        {/* Employers */}
        <div>
          <p className="text-xs font-black text-slate-900 uppercase tracking-wider mb-3">Top Employers</p>
          <div className="flex flex-wrap gap-2">
            {career.topEmployers.map((e) => (
              <span
                key={e.name}
                className="text-xs font-bold px-3 py-1.5 rounded-xl bg-slate-100 text-slate-700 border border-slate-200"
              >
                {e.name}
              </span>
            ))}
          </div>
        </div>

        {/* Roadmap */}
        <div>
          <p className="text-xs font-black text-slate-900 uppercase tracking-wider mb-4">Your Roadmap</p>
          <div className="relative border-l-2 border-slate-200 ml-3 space-y-0">
            {career.detailedRoadmap.map((step, i) => (
              <div key={i} className={`relative pl-6 ${i < career.detailedRoadmap.length - 1 ? "pb-6" : ""}`}>
                <div
                  className="absolute -left-[7px] top-0.5 w-3 h-3 rounded-full border-2 border-white"
                  style={{ background: cat.color }}
                />
                <div className="flex flex-wrap items-baseline gap-2 mb-1">
                  <span className="text-xs font-black text-slate-900">{step.phase}</span>
                  <span
                    className="text-[10px] font-bold px-2 py-0.5 rounded-full"
                    style={{ background: cat.bg, color: cat.accent }}
                  >
                    {step.time}
                  </span>
                </div>
                <p className="text-xs text-slate-500 leading-relaxed">{step.action}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Advice */}
        <div
          className="p-5 rounded-2xl"
          style={{ background: cat.bg, borderLeft: `4px solid ${cat.color}` }}
        >
          <p className="text-xs font-black uppercase tracking-wider mb-2" style={{ color: cat.accent }}>Mentor Advice</p>
          <p className="text-sm text-slate-700 leading-relaxed italic">"{career.advice}"</p>
        </div>

        {/* Full Roadmap CTA */}
        <a
          href="#career-portal"
          className="flex items-center justify-center gap-2 w-full py-3.5 rounded-2xl font-black text-white text-sm transition-all hover:brightness-110"
          style={{ background: cat.color }}
        >
          View Full Career Profile <ChevronRight size={16} />
        </a>
      </div>
    </motion.div>
  );
};

// ─── MAIN COMPONENT ───────────────────────────────────────────────────────────

export default function Interests() {
  const [activeFilter, setActiveFilter] = useState<CareerCategory | "all">("all");
  const [sortBy, setSortBy] = useState("match");
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCareer, setSelectedCareer] = useState<Career | null>(null);
  const [typeFilter, setTypeFilter] = useState<"all" | "degree" | "vocational">("all");

  const filtered = useMemo(() => {
    let result = careersData.filter((c) => {
      const matchCat = activeFilter === "all" || c.category === activeFilter;
      const matchType = typeFilter === "all" || c.type === typeFilter;
      const q = searchQuery.toLowerCase();
      const matchSearch = !q
        || c.title.toLowerCase().includes(q)
        || c.programme.toLowerCase().includes(q)
        || c.skills.some((s) => s.toLowerCase().includes(q))
        || c.category.toLowerCase().includes(q);
      return matchCat && matchType && matchSearch;
    });

    if (sortBy === "salary") result = [...result].sort((a, b) => b.salaryMax - a.salaryMax);
    else if (sortBy === "growth") result = [...result].sort((a, b) => b.growthPct - a.growthPct);
    else result = [...result].sort((a, b) => b.matchScore - a.matchScore);

    return result;
  }, [activeFilter, sortBy, searchQuery, typeFilter]);

  const vocationCount = careersData.filter((c) => c.type === "vocational").length;
  const degreeCount = careersData.filter((c) => c.type === "degree").length;

  return (
    <div
      className="min-h-screen"
      style={{ fontFamily: "'DM Sans', 'Helvetica Neue', Arial, sans-serif", background: "#F8FAFC" }}
    >
      {/* Overlay for drawer */}
      <AnimatePresence>
        {selectedCareer && (
          <>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="fixed inset-0 z-30"
              style={{ background: "rgba(15,23,42,0.4)" }}
              onClick={() => setSelectedCareer(null)}
            />
            <CareerDrawer career={selectedCareer} onClose={() => setSelectedCareer(null)} />
          </>
        )}
      </AnimatePresence>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-10 space-y-10">

        {/* ── PAGE HEADER ── */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6">
          <div>
            <div className="flex items-center gap-2 mb-3">
              <span className="text-[10px] font-black uppercase tracking-widest text-red-600 bg-red-50 border border-red-100 px-3 py-1 rounded-full">
                Ghana Career Index 2025
              </span>
            </div>
            <h1 className="text-3xl md:text-4xl font-black text-slate-900 tracking-tight mb-2">
              Career Pathfinder
            </h1>
            <p className="text-slate-500 text-base max-w-lg leading-relaxed">
              Not sure what to do after school? Filter by interest and discover roles across university degrees and TVET vocational programmes.
            </p>
          </div>

          {/* Search */}
          <div className="relative w-full md:w-72">
            <input
              type="text"
              placeholder="Search jobs, skills, programmes…"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-10 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-sm focus:outline-none focus:border-red-400 focus:ring-4 focus:ring-red-500/10 transition-all shadow-sm"
              style={{ fontFamily: "inherit" }}
            />
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={16} />
            {searchQuery && (
              <button
                onClick={() => setSearchQuery("")}
                className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700 transition-colors"
              >
                <X size={14} />
              </button>
            )}
          </div>
        </div>

        {/* ── MARKET STATS ── */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {MARKET_STATS.map((stat) => (
            <div key={stat.label} className="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
              <div className="flex items-center gap-2 mb-1" style={{ color: stat.color }}>
                {stat.icon}
                <span className="text-xl font-black" style={{ color: stat.color }}>{stat.value}</span>
              </div>
              <p className="text-xs text-slate-400 font-medium leading-tight">{stat.label}</p>
            </div>
          ))}
        </div>

        {/* ── VOCATIONAL SPOTLIGHT ── */}
        <div
          className="rounded-3xl p-7 text-white relative overflow-hidden flex flex-col md:flex-row items-start md:items-center justify-between gap-6"
          style={{ background: "#0F172A" }}
        >
          <div className="absolute top-0 right-0 opacity-5 pointer-events-none translate-x-8 -translate-y-4">
            <Wrench size={220} />
          </div>
          <div className="relative z-10 max-w-xl">
            <div className="flex items-center gap-2 mb-3">
              <Zap size={14} className="text-amber-400" />
              <span className="text-xs font-black text-amber-400 uppercase tracking-widest">Investor Spotlight</span>
            </div>
            <h3 className="text-xl font-black mb-2 leading-tight">
              47% of Ghana's job openings require vocational skills — not degrees.
            </h3>
            <p className="text-slate-400 text-sm leading-relaxed">
              TVET-trained workers fill critical gaps in construction, energy, manufacturing, automotive, and hospitality. {vocationCount} vocational paths available.
            </p>
          </div>
          <button
            onClick={() => setActiveFilter("vocational")}
            className="relative z-10 flex items-center gap-2 px-6 py-3 rounded-2xl font-black text-sm whitespace-nowrap transition-all hover:brightness-110 shrink-0"
            style={{ background: "#D97706", color: "#fff" }}
          >
            Explore Vocational Paths <ArrowUpRight size={16} />
          </button>
        </div>

        {/* ── FILTERS ── */}
        <div className="bg-white rounded-3xl p-5 border border-slate-200 shadow-sm space-y-4">
          <div className="flex items-center justify-between">
            <h3 className="font-black text-slate-900 text-sm flex items-center gap-2">
              <SlidersHorizontal size={16} className="text-red-600" /> Filter by Interest
            </h3>
            {activeFilter !== "all" && (
              <button
                onClick={() => setActiveFilter("all")}
                className="text-xs font-bold text-red-600 hover:text-red-700 flex items-center gap-1"
              >
                <X size={12} /> Clear
              </button>
            )}
          </div>

          {/* Category Pills */}
          <div className="flex flex-wrap gap-2">
            {INTEREST_AREAS.map((area) => {
              const isActive = activeFilter === area.id;
              const meta = area.id !== "all" ? CATEGORY_META[area.id as CareerCategory] : null;
              return (
                <button
                  key={area.id}
                  onClick={() => setActiveFilter(area.id as CareerCategory | "all")}
                  className="flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-bold transition-all"
                  style={
                    isActive && meta
                      ? { background: meta.color, color: "#fff", border: `1.5px solid ${meta.color}` }
                      : isActive && !meta
                      ? { background: "#0F172A", color: "#fff", border: "1.5px solid #0F172A" }
                      : { background: "#F8FAFC", color: "#374151", border: "1.5px solid #E5E7EB" }
                  }
                >
                  {area.icon}
                  {area.label}
                </button>
              );
            })}
          </div>

          {/* Type + Sort Row */}
          <div className="flex flex-wrap items-center gap-3 pt-1 border-t border-slate-100">
            <div className="flex items-center gap-2">
              <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Path Type:</span>
              {(["all", "degree", "vocational"] as const).map((t) => (
                <button
                  key={t}
                  onClick={() => setTypeFilter(t)}
                  className="text-xs font-bold px-3 py-1.5 rounded-lg transition-all"
                  style={
                    typeFilter === t
                      ? { background: "#0F172A", color: "#fff" }
                      : { background: "#F1F5F9", color: "#64748B" }
                  }
                >
                  {t === "all" ? "All" : t === "degree" ? `Degree (${degreeCount})` : `TVET (${vocationCount})`}
                </button>
              ))}
            </div>

            <div className="flex items-center gap-2 ml-auto">
              <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Sort:</span>
              <select
                value={sortBy}
                onChange={(e) => setSortBy(e.target.value)}
                className="text-xs font-bold px-3 py-1.5 rounded-lg bg-slate-100 text-slate-700 border-0 outline-none cursor-pointer"
                style={{ fontFamily: "inherit" }}
              >
                {SORT_OPTIONS.map((opt) => (
                  <option key={opt.id} value={opt.id}>{opt.label}</option>
                ))}
              </select>
            </div>
          </div>
        </div>

        {/* ── RESULTS HEADER ── */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <h3 className="text-lg font-black text-slate-900">Recommended Careers</h3>
            <span
              className="text-xs font-black px-3 py-1 rounded-full"
              style={{ background: "#ECFDF5", color: "#059669", border: "1px solid #D1FAE5" }}
            >
              {filtered.length} matches
            </span>
          </div>
        </div>

        {/* ── CAREER GRID ── */}
        <motion.div layout className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
          <AnimatePresence>
            {filtered.map((career) => (
              <CareerCard key={career.id} career={career} onSelect={setSelectedCareer} />
            ))}
          </AnimatePresence>
        </motion.div>

        {filtered.length === 0 && (
          <div className="text-center py-20 bg-white rounded-3xl border border-slate-200">
            <div className="text-5xl mb-4">🔍</div>
            <h3 className="font-black text-slate-900 text-xl mb-2">No matches found</h3>
            <p className="text-slate-400 text-sm mb-6">Try a different search term or clear the filters.</p>
            <button
              onClick={() => { setSearchQuery(""); setActiveFilter("all"); setTypeFilter("all"); }}
              className="px-6 py-3 bg-slate-900 text-white rounded-xl font-bold text-sm hover:bg-slate-800 transition-colors"
            >
              Reset Filters
            </button>
          </div>
        )}

        {/* ── MARKET REPORT BANNER ── */}
        <div
          className="rounded-3xl p-8 text-white relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-6"
          style={{ background: "linear-gradient(135deg, #7C3AED 0%, #1E40AF 100%)" }}
        >
          <div className="absolute top-0 right-0 opacity-10 pointer-events-none">
            <TrendingUp size={200} />
          </div>
          <div className="relative z-10 max-w-xl">
            <h3 className="text-2xl font-black mb-2">Ghana Job Market Report 2025</h3>
            <p className="text-indigo-100 leading-relaxed text-sm">
              Technology and Vocational sectors are seeing the highest graduate recruitment growth. TVET graduates earn 40% more than non-certified peers within 3 years.
            </p>
          </div>
          <button className="relative z-10 bg-white text-indigo-700 px-6 py-3 rounded-2xl font-black text-sm shadow-lg hover:bg-indigo-50 transition-colors flex items-center gap-2 whitespace-nowrap shrink-0">
            Download Report <ArrowUpRight size={16} />
          </button>
        </div>

      </div>
    </div>
  );
}


"use client";

import React, { useState, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import {
  Cpu, HeartPulse, Briefcase, Palette, Leaf,
  TrendingUp, DollarSign, Search, Wrench, X,
  ChevronRight, Award, Map, Building2, Book,
  Users, Zap, BarChart3, Filter, Star, ArrowRight,
  CheckCircle, Clock, Shield,
} from "lucide-react";
import careersData, { CATEGORY_META } from "./CareersMock";
import type { Career, CareerCategory } from "./CareersMock";
// ─── TYPES ────────────────────────────────────────────────────────────────────

type FilterState = {
  category: CareerCategory | "all";
  type: "all" | "degree" | "vocational";
  query: string;
};

// ─── HELPERS ─────────────────────────────────────────────────────────────────

const getCategoryIcon = (cat: string, size = 16) => {
  const props = { size };
  switch (cat) {
    case "tech":       return <Cpu {...props} />;
    case "health":     return <HeartPulse {...props} />;
    case "business":   return <Briefcase {...props} />;
    case "creative":   return <Palette {...props} />;
    case "vocational": return <Wrench {...props} />;
    case "agri":       return <Leaf {...props} />;
    default:           return <Briefcase {...props} />;
  }
};

// ─── MATCH RING ───────────────────────────────────────────────────────────────

const MatchRing: React.FC<{ score: number; color: string }> = ({ score, color }) => {
  const r = 22;
  const circ = 2 * Math.PI * r;
  const dash = (score / 100) * circ;

  return (
    <div className="relative w-14 h-14 shrink-0">
      <svg width="56" height="56" viewBox="0 0 56 56" className="-rotate-90">
        <circle cx="28" cy="28" r={r} fill="none" stroke="#F1F5F9" strokeWidth="4" />
        <circle
          cx="28" cy="28" r={r} fill="none"
          stroke={color} strokeWidth="4"
          strokeDasharray={`${dash} ${circ}`}
          strokeLinecap="round"
        />
      </svg>
      <div className="absolute inset-0 flex flex-col items-center justify-center">
        <span className="text-xs font-black leading-none" style={{ color }}>{score}</span>
        <span className="text-[8px] text-slate-400 font-bold leading-none">%</span>
      </div>
    </div>
  );
};

// ─── SALARY BAR ───────────────────────────────────────────────────────────────

const SalaryBar: React.FC<{ min: number; max: number; color: string }> = ({ min, max, color }) => {
  const globalMax = 20000;
  const minPct = (min / globalMax) * 100;
  const maxPct = (max / globalMax) * 100;

  return (
    <div className="space-y-1">
      <div className="flex justify-between text-[10px] font-bold text-slate-400">
        <span>GH₵ {(min / 1000).toFixed(1)}k</span>
        <span>GH₵ {(max / 1000).toFixed(1)}k</span>
      </div>
      <div className="h-1.5 bg-slate-100 rounded-full relative overflow-hidden">
        <div
          className="absolute top-0 h-full rounded-full"
          style={{ left: `${minPct}%`, width: `${maxPct - minPct}%`, background: color }}
        />
      </div>
    </div>
  );
};

// ─── COMPACT CAREER CARD ─────────────────────────────────────────────────────

const CompactCard: React.FC<{
  career: Career;
  selected: boolean;
  onClick: () => void;
}> = ({ career, selected, onClick }) => {
  const cat = CATEGORY_META[career.category] ?? CATEGORY_META.tech;

  return (
    <motion.button
      layout
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.18 }}
      whileHover={{ y: -2 }}
      onClick={onClick}
      className="w-full text-left bg-white rounded-2xl border transition-all overflow-hidden group"
      style={{
        borderColor: selected ? cat.color : "#E5E7EB",
        boxShadow: selected ? `0 0 0 3px ${cat.color}22` : "0 1px 3px rgba(0,0,0,0.06)",
      }}
    >
      {/* Top accent */}
      <div className="h-1 w-full transition-all" style={{ background: selected ? cat.color : "#E5E7EB" }} />

      <div className="p-4">
        <div className="flex items-start gap-3 mb-3">
          <div
            className="w-9 h-9 rounded-xl flex items-center justify-center shrink-0 transition-transform group-hover:scale-110"
            style={{ background: cat.bg, color: cat.color }}
          >
            {getCategoryIcon(career.category)}
          </div>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-1.5 flex-wrap mb-0.5">
              <h3
                className="font-black text-sm leading-tight transition-colors truncate"
                style={{ color: selected ? cat.color : "#0F172A" }}
              >
                {career.title}
              </h3>
            </div>
            <p className="text-[10px] text-slate-400 font-medium truncate">{career.programme}</p>
          </div>
          <MatchRing score={career.matchScore} color={cat.color} />
        </div>

        {career.type === "vocational" && (
          <div className="flex items-center gap-1 mb-2">
            <span className="inline-flex items-center gap-1 text-[10px] font-black text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full border border-amber-100">
              <Wrench size={8} /> TVET Path
            </span>
          </div>
        )}

        <SalaryBar min={career.salaryMin} max={career.salaryMax} color={cat.color} />

        <div className="flex items-center justify-between mt-3">
          <div className="flex flex-wrap gap-1">
            {career.skills.slice(0, 2).map((s) => (
              <span key={s} className="text-[9px] font-bold bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded-md">
                {s}
              </span>
            ))}
          </div>
          <span className="text-[10px] font-bold" style={{ color: career.growthPct >= 20 ? "#059669" : "#6B7280" }}>
            {career.growth}
          </span>
        </div>
      </div>
    </motion.button>
  );
};

// ─── DETAIL PANEL ─────────────────────────────────────────────────────────────

const DetailPanel: React.FC<{ career: Career; onClose: () => void }> = ({ career, onClose }) => {
  const cat = CATEGORY_META[career.category] ?? CATEGORY_META.tech;

  return (
    <div className="bg-white rounded-3xl border border-slate-200 overflow-hidden flex flex-col h-full shadow-xl">
      {/* Header */}
      <div className="p-6 relative overflow-hidden" style={{ background: cat.color }}>
        <div
          className="absolute inset-0 opacity-10"
          style={{ backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px)", backgroundSize: "20px 20px" }}
        />
        <button
          onClick={onClose}
          className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/30 transition-colors text-white z-10"
        >
          <X size={16} />
        </button>

        <div className="relative z-10">
          <div className="flex items-center gap-2 mb-3 flex-wrap">
            <span className="text-xs font-black text-white/80 uppercase tracking-widest">{cat.name}</span>
            {career.type === "vocational" && (
              <span className="inline-flex items-center gap-1 text-[10px] font-black bg-amber-400/30 text-amber-100 px-2 py-0.5 rounded-full border border-amber-300/30">
                <Wrench size={9} /> TVET
              </span>
            )}
          </div>
          <h2 className="text-2xl font-black text-white leading-tight mb-1">{career.title}</h2>
          <p className="text-white/70 text-xs font-medium">{career.programme}</p>

          <div className="flex flex-wrap gap-2 mt-4">
            {[
              { icon: <CheckCircle size={12} />, text: `${career.matchScore}% match` },
              { icon: <DollarSign size={12} />, text: career.salary },
              { icon: <TrendingUp size={12} />, text: career.growth },
            ].map((stat, i) => (
              <div key={i} className="flex items-center gap-1.5 bg-white/15 backdrop-blur-sm text-white text-xs font-bold px-3 py-1.5 rounded-xl border border-white/20">
                {stat.icon} {stat.text}
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Scrollable body */}
      <div className="flex-1 overflow-y-auto p-6 space-y-6">
        <p className="text-slate-600 text-sm leading-relaxed">{career.description}</p>

        {/* Skills */}
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2">Key Skills</p>
          <div className="flex flex-wrap gap-2">
            {career.skills.map((s) => (
              <span
                key={s}
                className="text-xs font-bold px-3 py-1 rounded-lg"
                style={{ background: cat.bg, color: cat.accent, border: `1px solid ${cat.color}22` }}
              >
                {s}
              </span>
            ))}
          </div>
        </div>

        {/* Employers */}
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-1.5">
            <Building2 size={12} /> Top Employers
          </p>
          <div className="grid grid-cols-2 gap-2">
            {career.topEmployers.slice(0, 4).map((emp) => (
              <div key={emp.name} className="flex items-center gap-2 p-2 rounded-xl bg-slate-50 border border-slate-100">
                <div className="w-7 h-7 rounded-lg bg-slate-200 flex items-center justify-center text-xs font-black text-slate-600 shrink-0">
                  {emp.name.charAt(0)}
                </div>
                <div className="min-w-0">
                  <p className="text-xs font-bold text-slate-800 truncate">{emp.name}</p>
                  <p className="text-[9px] text-slate-400">{emp.type}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Roadmap */}
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-3 flex items-center gap-1.5">
            <Map size={12} /> Roadmap
          </p>
          <div className="relative border-l-2 border-slate-100 ml-3 space-y-0">
            {career.detailedRoadmap.map((step, i) => (
              <div key={i} className={`relative pl-5 ${i < career.detailedRoadmap.length - 1 ? "pb-5" : ""}`}>
                <div
                  className="absolute -left-[6px] top-1 w-3 h-3 rounded-full border-2 border-white"
                  style={{ background: cat.color }}
                />
                <div className="flex flex-wrap items-baseline gap-1.5 mb-0.5">
                  <span className="text-xs font-black text-slate-900">{step.phase}</span>
                  <span
                    className="text-[9px] font-bold px-1.5 py-0.5 rounded-full"
                    style={{ background: cat.bg, color: cat.accent }}
                  >
                    {step.time}
                  </span>
                </div>
                <p className="text-[11px] text-slate-500 leading-relaxed">{step.action}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Certifications */}
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-1.5">
            <Award size={12} /> Certifications
          </p>
          <div className="space-y-2">
            {career.certifications.map((cert) => (
              <div key={cert.name} className="flex items-center gap-3 p-2.5 rounded-xl border border-slate-100 bg-slate-50">
                <Award size={16} className="text-orange-400 shrink-0" />
                <div>
                  <p className="text-xs font-bold text-slate-800 leading-tight">{cert.name}</p>
                  <p className="text-[9px] text-slate-400">{cert.provider} · {cert.difficulty}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Resources */}
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-1.5">
            <Book size={12} /> Essential Reading
          </p>
          <div className="space-y-2">
            {career.resources.map((res) => (
              <div key={res.title} className="flex items-center gap-3 p-2.5 rounded-xl border border-slate-100 bg-slate-50">
                <div className="w-7 h-7 rounded-lg bg-emerald-100 text-emerald-600 flex items-center justify-center shrink-0">
                  <Book size={12} />
                </div>
                <div className="min-w-0">
                  <p className="text-xs font-bold text-slate-800 truncate">{res.title}</p>
                  <p className="text-[9px] text-slate-400">{res.author} · {res.type}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Mentors */}
        <div>
          <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 flex items-center gap-1.5">
            <Users size={12} /> Mentors
          </p>
          <div className="space-y-2">
            {career.mentors.map((m) => (
              <div key={m.name} className="flex items-center gap-3 p-2.5 rounded-xl border border-slate-100 bg-slate-50">
                <img src={m.image} alt={m.name} className="w-9 h-9 rounded-full object-cover ring-2 ring-white shrink-0" />
                <div className="flex-1 min-w-0">
                  <p className="text-xs font-bold text-slate-800 truncate">{m.name}</p>
                  <p className="text-[9px] text-slate-400 truncate">{m.role} · {m.company}</p>
                </div>
                <span
                  className="text-[9px] font-black px-2 py-1 rounded-lg shrink-0"
                  style={{ background: cat.bg, color: cat.accent }}
                >
                  Connect
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Advice */}
        <div
          className="p-4 rounded-2xl"
          style={{ background: cat.bg, borderLeft: `3px solid ${cat.color}` }}
        >
          <p className="text-[10px] font-black uppercase tracking-widest mb-2" style={{ color: cat.accent }}>
            Mentor Advice
          </p>
          <p className="text-xs text-slate-700 leading-relaxed italic">"{career.advice}"</p>
        </div>
      </div>
    </div>
  );
};

// ─── MAIN COMPONENT ───────────────────────────────────────────────────────────

export default function Recommendations() {
  const [filters, setFilters] = useState<FilterState>({
    category: "all",
    type: "all",
    query: "",
  });
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [sortBy, setSortBy] = useState<"match" | "salary" | "growth">("match");

  const selectedCareer = useMemo(
    () => careersData.find((c) => c.id === selectedId) ?? null,
    [selectedId]
  );

  const filtered = useMemo(() => {
    let result = careersData.filter((c) => {
      if (filters.category !== "all" && c.category !== filters.category) return false;
      if (filters.type !== "all" && c.type !== filters.type) return false;
      const q = filters.query.toLowerCase();
      if (q) {
        return (
          c.title.toLowerCase().includes(q) ||
          c.programme.toLowerCase().includes(q) ||
          c.skills.some((s) => s.toLowerCase().includes(q))
        );
      }
      return true;
    });

    if (sortBy === "salary") result = [...result].sort((a, b) => b.salaryMax - a.salaryMax);
    else if (sortBy === "growth") result = [...result].sort((a, b) => b.growthPct - a.growthPct);
    else result = [...result].sort((a, b) => b.matchScore - a.matchScore);

    return result;
  }, [filters, sortBy]);

  const topMatch = useMemo(() => filtered[0] ?? null, [filtered]);

  const CATEGORY_FILTERS: Array<{ id: CareerCategory | "all"; label: string }> = [
    { id: "all",        label: "All" },
    { id: "tech",       label: "Tech" },
    { id: "vocational", label: "Vocational" },
    { id: "health",     label: "Health" },
    { id: "business",   label: "Business" },
    { id: "creative",   label: "Creative" },
    { id: "agri",       label: "Agriculture" },
  ];

  return (
    <div className="min-h-screen bg-slate-50/40 p-4 md:p-6" style={{ fontFamily: "'DM Sans', 'Helvetica Neue', Arial, sans-serif" }}>

      {/* ── Header ── */}
      <div className="mb-6">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4">
          <div>
            <h2 className="text-2xl font-black text-slate-900 mb-1 flex items-center gap-2">
              Career Recommendations
              <span className="text-xs font-black bg-emerald-100 text-emerald-700 px-2.5 py-1 rounded-full border border-emerald-200">
                {filtered.length} paths
              </span>
            </h2>
            <p className="text-slate-500 text-sm">Curated for Ghana's job market — degree and vocational pathways.</p>
          </div>

          {/* Top match highlight */}
          {topMatch && (
            <button
              onClick={() => setSelectedId(topMatch.id)}
              className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 bg-white shadow-sm hover:border-slate-400 transition-all text-sm font-bold text-slate-700 shrink-0"
            >
              <Star size={14} className="text-amber-500 fill-current" />
              Top Match: {topMatch.title}
              <ChevronRight size={14} />
            </button>
          )}
        </div>
      </div>

      {/* ── Summary Stats ── */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
        {[
          { label: "Total paths",        value: careersData.length,                                                    color: "#2563EB", icon: <BarChart3 size={16} /> },
          { label: "TVET / Vocational",  value: careersData.filter((c) => c.type === "vocational").length,             color: "#D97706", icon: <Wrench size={16} /> },
          { label: "Degree required",    value: careersData.filter((c) => c.type === "degree").length,                 color: "#7C3AED", icon: <Award size={16} /> },
          { label: "Avg salary ceiling", value: `GH₵ ${Math.round(careersData.reduce((a, c) => a + c.salaryMax, 0) / careersData.length / 1000)}k`, color: "#059669", icon: <DollarSign size={16} /> },
        ].map((stat) => (
          <div key={stat.label} className="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm">
            <div className="flex items-center gap-2 mb-1" style={{ color: stat.color }}>
              {stat.icon}
            </div>
            <p className="text-xl font-black text-slate-900">{stat.value}</p>
            <p className="text-[11px] text-slate-400 font-medium leading-tight">{stat.label}</p>
          </div>
        ))}
      </div>

      {/* ── Controls ── */}
      <div className="bg-white rounded-2xl border border-slate-200 p-4 mb-5 space-y-3 shadow-sm">
        {/* Search */}
        <div className="relative">
          <input
            type="text"
            placeholder="Search by title, skill, or programme…"
            value={filters.query}
            onChange={(e) => setFilters((f) => ({ ...f, query: e.target.value }))}
            className="w-full pl-9 pr-4 py-2.5 text-sm border border-slate-200 rounded-xl focus:outline-none focus:border-red-400 focus:ring-2 focus:ring-red-500/10 transition-all bg-slate-50"
            style={{ fontFamily: "inherit" }}
          />
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" size={15} />
          {filters.query && (
            <button
              onClick={() => setFilters((f) => ({ ...f, query: "" }))}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700"
            >
              <X size={13} />
            </button>
          )}
        </div>

        {/* Category pills */}
        <div className="flex flex-wrap gap-2">
          {CATEGORY_FILTERS.map((f) => {
            const meta = f.id !== "all" ? CATEGORY_META[f.id as CareerCategory] : null;
            const isActive = filters.category === f.id;
            return (
              <button
                key={f.id}
                onClick={() => setFilters((prev) => ({ ...prev, category: f.id as CareerCategory | "all" }))}
                className="px-3 py-1.5 rounded-xl text-xs font-bold transition-all"
                style={
                  isActive && meta
                    ? { background: meta.color, color: "#fff" }
                    : isActive
                    ? { background: "#0F172A", color: "#fff" }
                    : { background: "#F1F5F9", color: "#475569" }
                }
              >
                {f.label}
              </button>
            );
          })}
        </div>

        {/* Type + Sort */}
        <div className="flex flex-wrap items-center gap-3 pt-1 border-t border-slate-100">
          <div className="flex items-center gap-2">
            <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Path:</span>
            {(["all", "degree", "vocational"] as const).map((t) => (
              <button
                key={t}
                onClick={() => setFilters((f) => ({ ...f, type: t }))}
                className="text-[11px] font-bold px-2.5 py-1 rounded-lg transition-all"
                style={
                  filters.type === t
                    ? { background: "#0F172A", color: "#fff" }
                    : { background: "#F1F5F9", color: "#64748B" }
                }
              >
                {t === "all" ? "All" : t.charAt(0).toUpperCase() + t.slice(1)}
              </button>
            ))}
          </div>
          <div className="flex items-center gap-2 ml-auto">
            <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Sort:</span>
            {(["match", "salary", "growth"] as const).map((s) => (
              <button
                key={s}
                onClick={() => setSortBy(s)}
                className="text-[11px] font-bold px-2.5 py-1 rounded-lg transition-all"
                style={
                  sortBy === s
                    ? { background: "#0F172A", color: "#fff" }
                    : { background: "#F1F5F9", color: "#64748B" }
                }
              >
                {s === "match" ? "Best Match" : s === "salary" ? "Salary" : "Growth"}
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* ── VOCATIONAL CTA (shown when all or vocational selected) ── */}
      {(filters.category === "all" || filters.category === "vocational") && !filters.query && (
        <div
          className="rounded-2xl p-5 flex items-center justify-between gap-4 mb-5"
          style={{ background: "#0F172A" }}
        >
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-amber-400/20 flex items-center justify-center text-amber-400 shrink-0">
              <Wrench size={20} />
            </div>
            <div>
              <p className="text-white font-black text-sm">47% of jobs in Ghana need vocational skills</p>
              <p className="text-slate-400 text-xs">TVET earners outpace non-certified peers within 3 years</p>
            </div>
          </div>
          <button
            onClick={() => setFilters((f) => ({ ...f, type: "vocational", category: "all" }))}
            className="shrink-0 flex items-center gap-1.5 text-xs font-black px-4 py-2 rounded-xl text-slate-900 transition-all hover:brightness-110"
            style={{ background: "#F59E0B" }}
          >
            Filter TVET <ArrowRight size={13} />
          </button>
        </div>
      )}

      {/* ── Main Split Layout ── */}
      <div className={`grid gap-5 ${selectedCareer ? "grid-cols-1 lg:grid-cols-[1fr_380px]" : "grid-cols-1"}`}>
        {/* Card grid */}
        <div>
          <motion.div
            layout
            className="grid gap-3"
            style={{
              gridTemplateColumns: selectedCareer
                ? "repeat(auto-fill, minmax(240px, 1fr))"
                : "repeat(auto-fill, minmax(280px, 1fr))",
            }}
          >
            <AnimatePresence>
              {filtered.map((career) => (
                <CompactCard
                  key={career.id}
                  career={career}
                  selected={selectedId === career.id}
                  onClick={() => setSelectedId(selectedId === career.id ? null : career.id)}
                />
              ))}
            </AnimatePresence>
          </motion.div>

          {filtered.length === 0 && (
            <div className="text-center py-16 bg-white rounded-2xl border border-slate-200">
              <div className="text-4xl mb-3">🔍</div>
              <h3 className="font-black text-slate-900 text-lg mb-1">No results</h3>
              <p className="text-slate-400 text-sm mb-5">Try clearing your search or changing filters.</p>
              <button
                onClick={() => setFilters({ category: "all", type: "all", query: "" })}
                className="px-5 py-2.5 bg-slate-900 text-white rounded-xl font-bold text-sm hover:bg-slate-800 transition-colors"
              >
                Reset All Filters
              </button>
            </div>
          )}
        </div>

        {/* Detail panel */}
        <AnimatePresence>
          {selectedCareer && (
            <motion.div
              key={selectedCareer.id}
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: 20 }}
              transition={{ type: "spring", stiffness: 280, damping: 28 }}
              className="lg:sticky lg:top-4"
              style={{ maxHeight: "calc(100vh - 32px)" }}
            >
              <DetailPanel career={selectedCareer} onClose={() => setSelectedId(null)} />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
}