import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import {
  ArrowRight, ShoppingBag, BookOpen, GraduationCap, Briefcase,
  Users, Globe, CheckCircle, Star, MapPin, Clock,
  Building2, FileText, Shield, Award, TrendingUp,
  Calendar, Lock, Zap, Plane, BadgeCheck,
} from "lucide-react";
import HeroSlider from "@/components/home/HeroSlider";
import { db } from "@/lib/db";

export const metadata: Metadata = { title: "KC Group – Your Global Partner" };

// ─── Fallback static data ─────────────────────────────────────────────────────

const defaultStats = [
  { label: "Live Jobs", value: "2,400+", icon: Briefcase, color: "text-blue-600 bg-blue-50" },
  { label: "Scholarships", value: "500+", icon: GraduationCap, color: "text-purple-600 bg-purple-50" },
  { label: "Members", value: "12,000+", icon: Users, color: "text-emerald-600 bg-emerald-50" },
  { label: "Countries", value: "45+", icon: Globe, color: "text-amber-600 bg-amber-50" },
];

const mainServices = [
  { icon: ShoppingBag, label: "Online Shop", href: "/shop", image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=700&q=80", desc: "Quality products, fast delivery.", badge: "5,000+ Products" },
  { icon: BookOpen, label: "KC Journal", href: "/journal", image: "https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=700&q=80", desc: "Expert insights, career guides & academic articles.", badge: "1,200+ Articles" },
  { icon: Briefcase, label: "Jobs Portal", href: "/jobs", image: "https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=700&q=80", desc: "Connect with 380+ companies actively hiring now.", badge: "2,400 Live Jobs" },
  { icon: Plane, label: "Tours & Travel", href: "/tours", image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=700&q=80", desc: "Curated travel packages to 50+ dream destinations.", badge: "Award-Winning" },
  { icon: GraduationCap, label: "Scholarships", href: "/scholarships", image: "https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=700&q=80", desc: "500+ fully-funded scholarships across 45 countries.", badge: "$2M+ Secured" },
  { icon: Users, label: "Education", href: "/services/education", image: "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=700&q=80", desc: "Professional courses, certifications & study abroad.", badge: "Accredited" },
];

const supportServices = [
  { icon: Building2, label: "HR Services", href: "/services/hr", desc: "Payroll, recruitment & HR consulting" },
  { icon: Globe, label: "Visa Assistance", href: "/visa", desc: "Student, work & tourist visas worldwide" },
  { icon: Plane, label: "Flight Tickets", href: "/tickets", desc: "Best-price air tickets, zero hidden fees" },
];

const fallbackJournalPosts = [
  { id: "1", slug: "mastering-job-hunt", title: "Mastering the Job Hunt: A Complete 2026 Guide", category: "Career", readTime: "8 min", date: "May 28", image: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=400&q=80", locked: true },
  { id: "2", slug: "scholarship-tips", title: "10 Tips to Win International Scholarships This Year", category: "Education", readTime: "6 min", date: "May 25", image: "https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=400&q=80", locked: true },
  { id: "3", slug: "business-ideas-2026", title: "Top 10 Online Business Ideas for 2026", category: "Business", readTime: "5 min", date: "May 20", image: "https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?w=400&q=80", locked: false },
];

const fallbackScholarships = [
  { id: "1", title: "Chevening Scholarships 2026/27", provider: "UK Government", country: "United Kingdom", flag: "🇬🇧", amount: "Full Funding", deadline: "Nov 4, 2026", category: "Masters" },
  { id: "2", title: "DAAD Scholarships for Development", provider: "DAAD Germany", country: "Germany", flag: "🇩🇪", amount: "Full + Allowance", deadline: "Oct 15, 2026", category: "Masters/PhD" },
  { id: "3", title: "Fulbright Foreign Student Program", provider: "U.S. State Dept.", country: "United States", flag: "🇺🇸", amount: "Full Tuition + Living", deadline: "Sep 30, 2026", category: "Masters/PhD" },
  { id: "4", title: "Australia Awards Scholarships", provider: "Australian Government", country: "Australia", flag: "🇦🇺", amount: "Full Funding", deadline: "Apr 30, 2027", category: "Masters" },
];

const fallbackProducts = [
  { id: "1", slug: "#", name: "Premium Wireless Headphones", price: "$289", category: "Electronics", rating: 4.8, image: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&q=80" },
  { id: "2", slug: "#", name: "Leather Laptop Backpack", price: "$199", category: "Accessories", rating: 4.9, image: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?w=400&q=80" },
  { id: "3", slug: "#", name: "Ergonomic Office Chair", price: "$549", category: "Furniture", rating: 4.7, image: "https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=400&q=80" },
  { id: "4", slug: "#", name: "Smart Running Shoes", price: "$379", category: "Sports", rating: 4.6, image: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=400&q=80" },
];

const fallbackJobs = [
  { id: "1", title: "Senior Software Engineer", company: "TechCorp", location: "Kuala Lumpur", salary: "$8,000–12,000", posted: "2h ago", logo: "TC" },
  { id: "2", title: "Digital Marketing Manager", company: "Brandly Asia", location: "Petaling Jaya", salary: "$6,000–9,000", posted: "5h ago", logo: "BA" },
  { id: "3", title: "UI/UX Designer", company: "DesignHub", location: "Remote", salary: "$5,000–7,500", posted: "1d ago", logo: "DH" },
  { id: "4", title: "Financial Analyst", company: "Capital Group MY", location: "KLCC", salary: "$7,000–10,000", posted: "1d ago", logo: "CG" },
  { id: "5", title: "HR Business Partner", company: "PeopleFirst", location: "Shah Alam", salary: "$5,500–8,000", posted: "2d ago", logo: "PF" },
];

const fallbackTours = [
  { id: "1", name: "Bali Bliss – 5D4N", country: "Indonesia", price: "$2,899", originalPrice: "$3,499", rating: 4.9, reviews: 128, duration: "5D 4N", image: "https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=700&q=80", highlights: ["All-Inclusive", "4★ Resort", "Island Hopping"] },
  { id: "2", name: "Istanbul & Cappadocia – 7D6N", country: "Turkey", price: "$5,299", originalPrice: "$6,100", rating: 4.8, reviews: 94, duration: "7D 6N", image: "https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?w=700&q=80", highlights: ["Hot Air Balloon", "Grand Bazaar", "Bosphorus Cruise"] },
  { id: "3", name: "Japan Sakura Tour – 8D7N", country: "Japan", price: "$6,899", originalPrice: "$7,800", rating: 5.0, reviews: 76, duration: "8D 7N", image: "https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=700&q=80", highlights: ["Cherry Blossom", "Bullet Train", "Mount Fuji"] },
];

const plans = [
  { name: "Free", price: "$0", period: "forever", features: ["Browse shop & buy products", "View job listings", "View scholarship listings", "Basic company info"], cta: "Get Started Free", href: "/register", highlight: false },
  { name: "Basic", price: "$29", period: "per month", features: ["Everything in Free", "Read all journal posts", "Write & publish journals", "Full scholarship details"], cta: "Start Basic", href: "/register?plan=basic", highlight: true },
  { name: "Job Seeker", price: "$49", period: "per month", features: ["Everything in Basic", "Apply for jobs", "Upload & manage resume", "Job seeker profile"], cta: "Start Job Seeker", href: "/register?plan=job_seeker", highlight: false },
];

const categoryColors: Record<string, string> = {
  Career: "bg-blue-50 text-blue-700",
  Education: "bg-emerald-50 text-emerald-700",
  Business: "bg-amber-50 text-amber-700",
};

// ─── Country flag helpers ─────────────────────────────────────────────────────

const COUNTRY_FLAGS: Record<string, string> = {
  "United Kingdom": "🇬🇧", "UK": "🇬🇧",
  "United States": "🇺🇸", "USA": "🇺🇸",
  "Australia": "🇦🇺",
  "Germany": "🇩🇪",
  "Japan": "🇯🇵",
  "Canada": "🇨🇦",
  "France": "🇫🇷",
  "Netherlands": "🇳🇱",
  "Malaysia": "🇲🇾",
  "Singapore": "🇸🇬",
  "Korea": "🇰🇷", "South Korea": "🇰🇷",
  "Europe": "🇪🇺",
};

function getFlag(country: string | null | undefined): string {
  if (!country) return "🌍";
  return COUNTRY_FLAGS[country] ?? "🌍";
}

// ─── Page ─────────────────────────────────────────────────────────────────────

export default async function HomePage() {
  // Fetch all dynamic data in parallel
  const [heroSlides, dbProducts, dbJournals, dbScholarships, dbJobs, dbTours, userCount, jobCount, scholarshipCount] = await Promise.all([
    db.heroSlide.findMany({ where: { isActive: true }, orderBy: { sortOrder: "asc" }, take: 8 }),
    db.product.findMany({ where: { isActive: true }, include: { images: { where: { isPrimary: true }, take: 1 }, category: true }, orderBy: [{ isFeatured: "desc" }, { createdAt: "desc" }], take: 4 }),
    db.journal.findMany({ where: { status: "published" }, include: { category: true }, orderBy: { publishedAt: "desc" }, take: 3 }),
    db.scholarship.findMany({ where: { isActive: true }, orderBy: { createdAt: "desc" }, take: 4 }),
    db.job.findMany({ where: { isActive: true }, orderBy: [{ postedAt: "desc" }, { createdAt: "desc" }], take: 5 }),
    db.tourPackage.findMany({ where: { isActive: true, isFeatured: true }, include: { images: { where: { isPrimary: true }, take: 1 } }, orderBy: { createdAt: "desc" }, take: 3 }),
    db.user.count(),
    db.job.count({ where: { isActive: true } }),
    db.scholarship.count({ where: { isActive: true } }),
  ]);

  // Hero slides
  const slides = heroSlides.map((s) => ({
    id: s.id,
    imageUrl: s.imageUrl,
    badge: s.badge ?? "KC Group",
    badgeIcon: s.badgeIcon ?? "jobs",
    title: s.title ?? "Discover",
    highlight: s.highlight ?? "Opportunities",
    description: s.description ?? "",
    ctaLabel: s.ctaLabel ?? "Get Started",
    ctaHref: s.ctaHref ?? "/register",
    ctaSecondLabel: s.ctaSecondLabel ?? "Learn More",
    ctaSecondHref: s.ctaSecondHref ?? "/about",
  }));

  // Stats (real counts with formatted display)
  const stats = [
    { label: "Live Jobs", value: jobCount > 0 ? `${jobCount.toLocaleString()}+` : "2,400+", icon: Briefcase, color: "text-blue-600 bg-blue-50" },
    { label: "Scholarships", value: scholarshipCount > 0 ? `${scholarshipCount.toLocaleString()}+` : "500+", icon: GraduationCap, color: "text-purple-600 bg-purple-50" },
    { label: "Members", value: userCount > 0 ? `${userCount.toLocaleString()}+` : "12,000+", icon: Users, color: "text-emerald-600 bg-emerald-50" },
    { label: "Countries", value: "45+", icon: Globe, color: "text-amber-600 bg-amber-50" },
  ];

  // Products
  const products = dbProducts.length > 0
    ? dbProducts.map((p) => ({
        id: p.id,
        slug: p.slug,
        name: p.name,
        price: `$${Number(p.price).toFixed(2)}`,
        category: p.category?.name ?? "Product",
        rating: 4.8,
        image: p.images[0]?.url ?? "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&q=80",
      }))
    : fallbackProducts;

  // Journals
  const journalPosts = dbJournals.length > 0
    ? dbJournals.map((j) => ({
        id: j.id,
        slug: j.slug,
        title: j.title,
        category: j.category?.name ?? "General",
        readTime: "5 min",
        date: j.publishedAt ? new Date(j.publishedAt).toLocaleDateString("en-US", { month: "short", day: "numeric" }) : "",
        image: j.coverImage ?? "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=400&q=80",
        locked: false,
      }))
    : fallbackJournalPosts;

  // Scholarships
  const scholarships = dbScholarships.length > 0
    ? dbScholarships.map((s) => ({
        id: s.id,
        title: s.title,
        provider: s.provider ?? "",
        country: s.country ?? "",
        flag: getFlag(s.country),
        amount: s.amount ?? "Full Funding",
        deadline: s.deadline ? new Date(s.deadline).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "",
        category: "Scholarship",
      }))
    : fallbackScholarships;

  // Jobs
  const recentJobs = dbJobs.length > 0
    ? dbJobs.map((j) => ({
        id: j.id,
        title: j.title,
        company: j.company ?? "Company",
        location: j.location ?? "Remote",
        salary: j.salary ?? "",
        posted: j.postedAt ? new Date(j.postedAt).toLocaleDateString("en-US", { month: "short", day: "numeric" }) : "Recently",
        logo: (j.company ?? "XX").slice(0, 2).toUpperCase(),
      }))
    : fallbackJobs;

  // Tours
  const tours = dbTours.length > 0
    ? dbTours.map((t) => ({
        id: t.id,
        name: t.title,
        country: t.destination ?? "International",
        price: `$${Number(t.pricePerPax).toLocaleString()}`,
        originalPrice: "",
        rating: 4.9,
        reviews: 0,
        duration: t.duration ?? "Flexible",
        image: t.images[0]?.url ?? "https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=700&q=80",
        highlights: [] as string[],
      }))
    : fallbackTours;

  return (
    <>
      <HeroSlider slides={slides} />

      {/* ── Stats Bar ── */}
      <section className="bg-white border-b border-neutral-100 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-neutral-100">
            {stats.map(({ label, value, icon: Icon, color }) => (
              <div key={label} className="flex items-center gap-4 py-6 px-6">
                <div className={`w-11 h-11 rounded-xl flex items-center justify-center shrink-0 ${color}`}>
                  <Icon size={20} />
                </div>
                <div>
                  <div className="text-2xl font-black text-navy-900">{value}</div>
                  <div className="text-xs text-neutral-500">{label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── All Services ── */}
      <section className="py-20 bg-neutral-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">One Platform</span>
            <h2 className="text-4xl font-black text-navy-900 mt-2">Everything Under One Roof</h2>
            <p className="mt-3 text-neutral-500 max-w-xl mx-auto">From career tools to travel packages — KC Group is Malaysia's most complete lifestyle and opportunity platform.</p>
          </div>

          {/* 3x2 Main Services Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5 mb-6">
            {mainServices.map((s) => (
              <Link key={s.label} href={s.href} className="group relative rounded-2xl overflow-hidden h-64 shadow-sm hover:shadow-xl transition-all">
                <Image src={s.image} alt={s.label} fill className="object-cover group-hover:scale-105 transition-transform duration-500" />
                <div className="absolute inset-0 bg-gradient-to-t from-navy-950/90 via-navy-900/40 to-transparent" />
                <div className="absolute inset-0 p-5 flex flex-col justify-between">
                  <div className="flex items-start justify-between">
                    <div className="w-10 h-10 rounded-xl bg-white/15 backdrop-blur-sm border border-white/20 flex items-center justify-center">
                      <s.icon size={18} className="text-white" />
                    </div>
                    <span className="text-[10px] font-bold bg-gold-400/90 text-navy-900 px-2.5 py-1 rounded-full">{s.badge}</span>
                  </div>
                  <div>
                    <h3 className="font-bold text-white text-xl mb-1 group-hover:text-gold-300 transition-colors">{s.label}</h3>
                    <p className="text-white/70 text-xs leading-relaxed mb-3">{s.desc}</p>
                    <span className="inline-flex items-center gap-1.5 text-xs font-semibold text-gold-300 group-hover:gap-2.5 transition-all">
                      Explore <ArrowRight size={12} />
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>

          {/* Support Services Strip */}
          <div className="grid sm:grid-cols-3 gap-4">
            {supportServices.map((s) => (
              <Link key={s.label} href={s.href} className="group bg-white border border-neutral-200 hover:border-navy-300 rounded-xl px-5 py-4 flex items-center gap-4 hover:shadow-md transition-all">
                <div className="w-10 h-10 rounded-lg bg-navy-50 flex items-center justify-center shrink-0">
                  <s.icon size={18} className="text-navy-600" />
                </div>
                <div className="min-w-0">
                  <div className="font-semibold text-navy-800 text-sm">{s.label}</div>
                  <div className="text-xs text-neutral-400 truncate">{s.desc}</div>
                </div>
                <ArrowRight size={14} className="text-neutral-300 group-hover:text-navy-700 shrink-0 ml-auto transition-colors" />
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ── About Section ── */}
      <section className="py-20 bg-white overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            {/* Left — Image & floating cards */}
            <div className="relative">
              <div className="relative rounded-3xl overflow-hidden aspect-[4/3] shadow-2xl">
                <Image src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=900&q=80" alt="KC Group Team" fill className="object-cover" />
                <div className="absolute inset-0 bg-gradient-to-br from-navy-900/20 to-transparent" />
              </div>
              {/* Floating stat cards */}
              <div className="absolute -bottom-6 -left-6 bg-white rounded-2xl shadow-xl border border-neutral-100 px-5 py-4 flex items-center gap-3">
                <div className="w-10 h-10 bg-emerald-50 rounded-xl flex items-center justify-center">
                  <TrendingUp size={18} className="text-emerald-600" />
                </div>
                <div>
                  <div className="text-lg font-black text-navy-900">10 Years</div>
                  <div className="text-xs text-neutral-500">Serving Malaysians</div>
                </div>
              </div>
              <div className="absolute -top-6 -right-6 bg-navy-800 rounded-2xl shadow-xl px-5 py-4 flex items-center gap-3">
                <div className="w-10 h-10 bg-gold-400/20 rounded-xl flex items-center justify-center">
                  <Award size={18} className="text-gold-400" />
                </div>
                <div>
                  <div className="text-lg font-black text-white">50+</div>
                  <div className="text-xs text-navy-300">Industry Awards</div>
                </div>
              </div>
            </div>

            {/* Right — Content */}
            <div>
              <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">About KC Group</span>
              <h2 className="text-4xl font-black text-navy-900 mt-3 mb-5 leading-tight">
                Empowering Malaysians<br />to Reach Their Potential
              </h2>
              <p className="text-neutral-600 leading-relaxed mb-6">
                Founded in 2016, KC Group began as a recruitment agency and has since evolved into Malaysia's most comprehensive digital services platform — connecting talent with opportunity, students with education, and travellers with the world.
              </p>
              <p className="text-neutral-600 leading-relaxed mb-8">
                With over 12,000 active members and a growing network of 380+ employer partners, we pride ourselves on delivering real impact through innovation, integrity, and an unwavering commitment to our community.
              </p>
              <div className="grid grid-cols-2 gap-4 mb-8">
                {[
                  { icon: Shield, label: "Trusted & Secure", desc: "SSL-protected, PDPA compliant" },
                  { icon: Zap, label: "Always Improving", desc: "New features every month" },
                  { icon: Users, label: "Community First", desc: "12,000+ active members" },
                  { icon: BadgeCheck, label: "Verified Partners", desc: "380+ employer network" },
                ].map(({ icon: Icon, label, desc }) => (
                  <div key={label} className="flex items-start gap-3">
                    <div className="w-9 h-9 bg-navy-50 rounded-lg flex items-center justify-center shrink-0 mt-0.5">
                      <Icon size={16} className="text-navy-600" />
                    </div>
                    <div>
                      <div className="font-semibold text-navy-800 text-sm">{label}</div>
                      <div className="text-xs text-neutral-400">{desc}</div>
                    </div>
                  </div>
                ))}
              </div>
              <div className="flex items-center gap-4">
                <Link href="/register" className="inline-flex items-center gap-2 bg-navy-800 hover:bg-navy-900 text-white font-semibold px-7 py-3.5 rounded-full transition-colors text-sm">
                  Join Free Today <ArrowRight size={15} />
                </Link>
                <Link href="/about" className="text-sm font-semibold text-navy-600 hover:text-navy-800 flex items-center gap-1.5 transition-colors">
                  Learn More <ArrowRight size={13} />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── Journal + Scholarships (side by side) ── */}
      <section className="py-20 bg-neutral-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-2 gap-8">

            {/* Journal Column */}
            <div>
              <div className="flex items-end justify-between mb-6">
                <div>
                  <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Latest Posts</span>
                  <h2 className="text-2xl font-black text-navy-900 mt-1">From the Journal</h2>
                </div>
                <Link href="/journal" className="text-sm font-semibold text-navy-600 hover:text-navy-800 flex items-center gap-1">
                  View All <ArrowRight size={13} />
                </Link>
              </div>
              <div className="space-y-4">
                {journalPosts.map((post) => (
                  <Link key={post.id} href={`/journal/${post.slug}`} className="group flex gap-4 bg-white rounded-2xl border border-neutral-200 p-4 hover:border-navy-300 hover:shadow-md transition-all">
                    <div className="relative w-20 h-20 rounded-xl overflow-hidden shrink-0">
                      <Image src={post.image} alt={post.title} fill className="object-cover group-hover:scale-105 transition-transform duration-300" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 mb-1.5">
                        <span className={`text-[10px] font-semibold px-2 py-0.5 rounded-full ${categoryColors[post.category] || "bg-neutral-100 text-neutral-600"}`}>{post.category}</span>
                        {post.locked && <Lock size={10} className="text-neutral-400" />}
                      </div>
                      <h3 className="font-semibold text-navy-800 text-sm leading-snug line-clamp-2 group-hover:text-navy-600 transition-colors">{post.title}</h3>
                      <div className="flex items-center gap-3 mt-2 text-[11px] text-neutral-400">
                        <span className="flex items-center gap-1"><Clock size={10} /> {post.readTime}</span>
                        <span>{post.date}</span>
                      </div>
                    </div>
                  </Link>
                ))}
                <Link href="/journal" className="block w-full text-center py-3 border-2 border-dashed border-neutral-200 hover:border-navy-300 rounded-2xl text-sm font-semibold text-neutral-500 hover:text-navy-700 transition-colors">
                  Browse All Articles →
                </Link>
              </div>
            </div>

            {/* Scholarships Column */}
            <div>
              <div className="flex items-end justify-between mb-6">
                <div>
                  <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Global Opportunities</span>
                  <h2 className="text-2xl font-black text-navy-900 mt-1">Scholarship Highlights</h2>
                </div>
                <Link href="/scholarships" className="text-sm font-semibold text-navy-600 hover:text-navy-800 flex items-center gap-1">
                  View All <ArrowRight size={13} />
                </Link>
              </div>
              <div className="space-y-3">
                {scholarships.map((s) => (
                  <Link key={s.id} href={`/scholarships/${s.id}`} className="group bg-white rounded-2xl border border-neutral-200 p-4 flex items-center gap-4 hover:border-navy-300 hover:shadow-md transition-all">
                    <div className="text-3xl shrink-0">{s.flag}</div>
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-1.5 mb-1">
                        <span className="text-[10px] font-semibold bg-navy-50 text-navy-600 px-2 py-0.5 rounded-full">{s.category}</span>
                      </div>
                      <h3 className="font-semibold text-navy-800 text-sm leading-snug truncate group-hover:text-navy-600 transition-colors">{s.title}</h3>
                      <p className="text-xs text-neutral-400 mt-0.5">{s.provider}</p>
                    </div>
                    <div className="shrink-0 text-right">
                      <div className="text-xs font-bold text-emerald-600">{s.amount}</div>
                      <div className="text-[10px] text-neutral-400 mt-1 flex items-center gap-1 justify-end"><Calendar size={9} />{s.deadline}</div>
                    </div>
                    <ArrowRight size={14} className="text-neutral-300 group-hover:text-navy-600 shrink-0 transition-colors" />
                  </Link>
                ))}
                <Link href="/scholarships" className="block w-full text-center py-3 border-2 border-dashed border-neutral-200 hover:border-navy-300 rounded-2xl text-sm font-semibold text-neutral-500 hover:text-navy-700 transition-colors">
                  Browse 500+ Scholarships →
                </Link>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* ── Shop Products ── */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-end justify-between mb-10">
            <div>
              <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">KC Shop</span>
              <h2 className="text-3xl font-black text-navy-900 mt-1">Popular Products</h2>
              <p className="text-neutral-500 text-sm mt-1">Hand-picked products our members love.</p>
            </div>
            <Link href="/shop" className="hidden sm:inline-flex items-center gap-2 bg-navy-800 hover:bg-navy-900 text-white text-sm font-semibold px-6 py-2.5 rounded-full transition-colors">
              <ShoppingBag size={14} /> Visit Shop
            </Link>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-5">
            {products.map((p) => (
              <Link key={p.id} href={p.slug !== "#" ? `/shop/${p.slug}` : "/shop"} className="group bg-white rounded-2xl border border-neutral-200 hover:border-navy-300 hover:shadow-lg transition-all overflow-hidden">
                <div className="relative h-48 overflow-hidden bg-neutral-50">
                  <Image src={p.image} alt={p.name} fill className="object-cover group-hover:scale-105 transition-transform duration-500" />
                </div>
                <div className="p-4">
                  <span className="text-[10px] font-semibold text-navy-600 bg-navy-50 px-2 py-0.5 rounded-full">{p.category}</span>
                  <h3 className="font-semibold text-navy-800 text-sm mt-2 leading-snug line-clamp-2">{p.name}</h3>
                  <div className="flex items-center justify-between mt-3">
                    <span className="font-black text-navy-900">{p.price}</span>
                    <div className="flex items-center gap-1 text-amber-400 text-xs">
                      <Star size={11} fill="currentColor" /> {p.rating}
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
          <div className="mt-8 text-center sm:hidden">
            <Link href="/shop" className="inline-flex items-center gap-2 bg-navy-800 text-white text-sm font-semibold px-7 py-3 rounded-full">
              <ShoppingBag size={14} /> Visit Shop
            </Link>
          </div>
        </div>
      </section>

      {/* ── Recent Jobs + Resume CTA ── */}
      <section className="py-20 bg-neutral-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid lg:grid-cols-5 gap-8">

            {/* Jobs List */}
            <div className="lg:col-span-3">
              <div className="flex items-end justify-between mb-6">
                <div>
                  <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Hiring Now</span>
                  <h2 className="text-2xl font-black text-navy-900 mt-1">Recent Job Postings</h2>
                </div>
                <Link href="/jobs" className="text-sm font-semibold text-navy-600 hover:text-navy-800 flex items-center gap-1">
                  All Jobs <ArrowRight size={13} />
                </Link>
              </div>
              <div className="space-y-3">
                {recentJobs.map((job) => (
                  <Link key={job.id} href="/jobs" className="group flex items-center gap-4 bg-white rounded-xl border border-neutral-200 p-4 hover:border-navy-300 hover:shadow-md transition-all">
                    <div className="w-11 h-11 rounded-xl bg-navy-700 text-white font-black text-xs flex items-center justify-center shrink-0">
                      {job.logo}
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className="font-semibold text-navy-800 text-sm group-hover:text-navy-600 transition-colors">{job.title}</h3>
                      <div className="flex items-center gap-3 text-xs text-neutral-400 mt-0.5">
                        <span className="flex items-center gap-1"><Building2 size={10} /> {job.company}</span>
                        <span className="flex items-center gap-1"><MapPin size={10} /> {job.location}</span>
                      </div>
                    </div>
                    <div className="shrink-0 text-right hidden sm:block">
                      <div className="text-xs font-semibold text-emerald-600">{job.salary}</div>
                      <div className="text-[10px] text-neutral-400 mt-0.5">{job.posted}</div>
                    </div>
                  </Link>
                ))}
                <Link href="/jobs" className="block w-full text-center py-3 border-2 border-dashed border-neutral-200 hover:border-navy-300 rounded-xl text-sm font-semibold text-neutral-500 hover:text-navy-700 transition-colors">
                  Browse 2,400+ Jobs →
                </Link>
              </div>
            </div>

            {/* Resume CTA */}
            <div className="lg:col-span-2">
              <div className="h-full relative rounded-3xl overflow-hidden min-h-[400px]">
                <Image src="https://images.unsplash.com/photo-1531482615713-2afd69097998?w=700&q=80" alt="Build your resume" fill className="object-cover" />
                <div className="absolute inset-0 bg-gradient-to-t from-navy-950/95 via-navy-900/70 to-navy-800/30" />
                <div className="absolute inset-0 p-8 flex flex-col justify-end">
                  <div className="inline-flex items-center gap-2 bg-gold-400/20 border border-gold-400/40 text-gold-300 text-xs font-semibold px-3 py-1.5 rounded-full mb-4 w-fit">
                    <FileText size={12} /> Career Tools
                  </div>
                  <h3 className="text-2xl font-black text-white mb-3">Build a Winning Resume in Minutes</h3>
                  <p className="text-navy-200 text-sm leading-relaxed mb-6">Use our AI-powered resume builder. Choose from 20+ professional templates and stand out from the crowd.</p>
                  <div className="space-y-2 mb-6">
                    {["20+ Professional Templates", "ATS-Optimised Format", "Download as PDF instantly"].map((f) => (
                      <div key={f} className="flex items-center gap-2 text-sm text-navy-100">
                        <CheckCircle size={13} className="text-gold-400 shrink-0" /> {f}
                      </div>
                    ))}
                  </div>
                  <Link href="/register?plan=job_seeker" className="inline-flex items-center justify-center gap-2 bg-gold-400 hover:bg-gold-300 text-navy-900 font-bold px-6 py-3 rounded-xl transition-colors text-sm">
                    Build My Resume <ArrowRight size={15} />
                  </Link>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* ── Featured Tours ── */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-end justify-between mb-10">
            <div>
              <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Tours & Travel</span>
              <h2 className="text-3xl font-black text-navy-900 mt-1">Featured Tour Packages</h2>
              <p className="text-neutral-500 text-sm mt-1">Handcrafted itineraries for unforgettable journeys.</p>
            </div>
            <Link href="/tours" className="hidden sm:inline-flex items-center gap-2 border-2 border-navy-800 text-navy-800 hover:bg-navy-800 hover:text-white text-sm font-semibold px-6 py-2.5 rounded-full transition-colors">
              All Packages <ArrowRight size={14} />
            </Link>
          </div>
          <div className="grid md:grid-cols-3 gap-6">
            {tours.map((t) => (
              <Link key={t.id} href={`/tours/${t.id}`} className="group bg-white rounded-2xl border border-neutral-200 hover:border-navy-300 hover:shadow-xl transition-all overflow-hidden flex flex-col">
                <div className="relative h-52 overflow-hidden">
                  <Image src={t.image} alt={t.name} fill className="object-cover group-hover:scale-105 transition-transform duration-500" />
                  <div className="absolute inset-0 bg-gradient-to-t from-navy-900/70 to-transparent" />
                  <div className="absolute bottom-3 left-3 flex gap-1.5">
                    {t.highlights.map((h) => (
                      <span key={h} className="text-[10px] font-semibold bg-white/20 backdrop-blur-sm text-white border border-white/30 px-2 py-0.5 rounded-full">{h}</span>
                    ))}
                  </div>
                  <div className="absolute top-3 right-3 bg-white/15 backdrop-blur-sm border border-white/20 rounded-lg px-2.5 py-1.5 text-center">
                    <div className="text-white font-black text-sm">{t.duration}</div>
                  </div>
                </div>
                <div className="p-5 flex flex-col flex-1">
                  <div className="flex items-center gap-1 text-xs text-neutral-400 mb-2">
                    <MapPin size={11} /> {t.country}
                    <span className="ml-auto flex items-center gap-1 font-semibold text-amber-400">
                      <Star size={11} fill="currentColor" /> {t.rating} <span className="text-neutral-400 font-normal">({t.reviews})</span>
                    </span>
                  </div>
                  <h3 className="font-bold text-navy-900 text-lg group-hover:text-navy-600 transition-colors">{t.name}</h3>
                  <div className="mt-auto pt-4 border-t border-neutral-100 flex items-center justify-between">
                    <div>
                      <div className="text-xs text-neutral-400 line-through">{t.originalPrice}</div>
                      <div className="text-xl font-black text-navy-900">{t.price} <span className="text-xs font-normal text-neutral-400">/ pax</span></div>
                    </div>
                    <span className="text-sm font-semibold text-navy-600 flex items-center gap-1 group-hover:gap-2 transition-all">
                      Book Now <ArrowRight size={13} />
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      {/* ── Pricing ── */}
      <section className="py-20 bg-neutral-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Membership</span>
            <h2 className="text-3xl font-black text-navy-900 mt-2">Simple, Transparent Pricing</h2>
            <p className="mt-3 text-neutral-500 max-w-lg mx-auto">Choose the plan that fits your needs. Upgrade or cancel anytime.</p>
          </div>
          <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
            {plans.map((plan) => (
              <div key={plan.name} className={`rounded-2xl p-7 border-2 relative ${plan.highlight ? "border-navy-700 bg-navy-700 shadow-2xl scale-105" : "border-neutral-200 bg-white"}`}>
                {plan.highlight && (
                  <div className="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gold-400 text-navy-900 text-xs font-black px-4 py-1 rounded-full tracking-wider">MOST POPULAR</div>
                )}
                <div className={`text-xs font-bold uppercase tracking-widest mb-3 ${plan.highlight ? "text-gold-400" : "text-neutral-500"}`}>{plan.name}</div>
                <div className="flex items-end gap-1 mb-5">
                  <span className={`text-4xl font-black ${plan.highlight ? "text-white" : "text-navy-900"}`}>{plan.price}</span>
                  <span className={`text-sm mb-1.5 ${plan.highlight ? "text-navy-300" : "text-neutral-400"}`}>/{plan.period}</span>
                </div>
                <ul className="space-y-3 mb-7">
                  {plan.features.map((f) => (
                    <li key={f} className="flex items-start gap-2.5 text-sm">
                      <CheckCircle size={15} className={`shrink-0 mt-0.5 ${plan.highlight ? "text-gold-400" : "text-emerald-500"}`} />
                      <span className={plan.highlight ? "text-navy-100" : "text-neutral-600"}>{f}</span>
                    </li>
                  ))}
                </ul>
                <Link href={plan.href} className={`block text-center py-3 rounded-xl text-sm font-bold transition-colors ${plan.highlight ? "bg-gold-400 hover:bg-gold-300 text-navy-900" : "border-2 border-navy-700 text-navy-700 hover:bg-navy-700 hover:text-white"}`}>
                  {plan.cta}
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── CTA Banner ── */}
      <section className="relative py-24 overflow-hidden">
        <div className="absolute inset-0">
          <Image src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=1600&q=80" alt="Join KC Group" fill className="object-cover" />
          <div className="absolute inset-0 bg-navy-900/88" />
        </div>
        <div className="relative max-w-3xl mx-auto px-4 text-center">
          <span className="inline-flex items-center gap-2 bg-gold-400/20 border border-gold-400/40 text-gold-300 text-xs font-semibold px-3 py-1.5 rounded-full mb-6">
            <Zap size={12} /> Join 12,000+ Members Today
          </span>
          <h2 className="text-4xl md:text-5xl font-black text-white mb-5 leading-tight">
            Your Next Big Opportunity<br />Starts Right Here
          </h2>
          <p className="text-navy-200 text-lg mb-10 max-w-xl mx-auto">
            Sign up free and unlock access to jobs, scholarships, journal articles, travel deals and so much more.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link href="/register" className="inline-flex items-center gap-2 bg-gold-400 hover:bg-gold-300 text-navy-900 font-bold px-8 py-4 rounded-full text-sm transition-colors shadow-lg">
              Create Free Account <ArrowRight size={16} />
            </Link>
            <Link href="/about" className="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 border border-white/20 text-white font-semibold px-8 py-4 rounded-full text-sm transition-colors">
              Learn More About Us
            </Link>
          </div>
          <div className="mt-8 flex items-center justify-center gap-6 text-navy-300 text-xs">
            <span className="flex items-center gap-1.5"><CheckCircle size={13} className="text-emerald-400" /> No credit card required</span>
            <span className="flex items-center gap-1.5"><CheckCircle size={13} className="text-emerald-400" /> Free forever plan</span>
            <span className="flex items-center gap-1.5"><CheckCircle size={13} className="text-emerald-400" /> Cancel anytime</span>
          </div>
        </div>
      </section>
    </>
  );
}
