import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import {
  GraduationCap, Globe, Calendar, ArrowRight, Star,
  BookOpen, FlaskConical, Clock, Users, CheckCircle,
  Award, Landmark, Building2, FileText, Bell,
} from "lucide-react";
import ScholarshipsSlider from "@/components/scholarships/ScholarshipsSlider";

export const metadata: Metadata = { title: "Scholarships – KC Group" };

const featured = [
  {
    id: 1,
    title: "Chevening Scholarships 2026/27",
    provider: "UK Government",
    country: "United Kingdom",
    flag: "🇬🇧",
    amount: "Full Funding",
    deadline: "Nov 4, 2026",
    category: "Masters",
    image: "https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?w=800&q=80",
    description: "Chevening is the UK government's international awards programme, aimed at developing global leaders.",
    tags: ["Leadership", "Government", "Networking"],
    rating: 4.9,
    applicants: 2400,
  },
  {
    id: 2,
    title: "DAAD Scholarships for Development",
    provider: "German Academic Exchange Service",
    country: "Germany",
    flag: "🇩🇪",
    amount: "Full Funding + Allowance",
    deadline: "Oct 15, 2026",
    category: "Masters/PhD",
    image: "https://images.unsplash.com/photo-1577401239170-897942555fb3?w=800&q=80",
    description: "DAAD supports exceptionally qualified scholars from developing and emerging countries.",
    tags: ["Research", "Development", "Sciences"],
    rating: 4.8,
    applicants: 3100,
  },
  {
    id: 3,
    title: "Fulbright Foreign Student Program",
    provider: "U.S. State Department",
    country: "United States",
    flag: "🇺🇸",
    amount: "Full Tuition + Living",
    deadline: "Sep 30, 2026",
    category: "Masters/PhD",
    image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=800&q=80",
    description: "One of the most prestigious international exchange programs, fostering mutual understanding between nations.",
    tags: ["Cultural Exchange", "Research", "Prestige"],
    rating: 4.9,
    applicants: 5500,
  },
];

const countries = [
  { name: "United Kingdom", count: 42, image: "https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?w=600&q=80", flag: "🇬🇧" },
  { name: "Germany", count: 38, image: "https://images.unsplash.com/photo-1549924231-f129b911e442?w=600&q=80", flag: "🇩🇪" },
  { name: "United States", count: 67, image: "https://images.unsplash.com/photo-1454165804869-f19d39f1ed9e?w=600&q=80", flag: "🇺🇸" },
  { name: "Australia", count: 29, image: "https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?w=600&q=80", flag: "🇦🇺" },
  { name: "Japan", count: 22, image: "https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=600&q=80", flag: "🇯🇵" },
  { name: "Europe (Erasmus)", count: 55, image: "https://images.unsplash.com/photo-1534430480872-3498386e7856?w=600&q=80", flag: "🇪🇺" },
];

const levels = [
  { icon: BookOpen, label: "Undergraduate", count: 89, color: "bg-blue-50 text-blue-700 border-blue-100", dot: "bg-blue-400" },
  { icon: GraduationCap, label: "Masters", count: 214, color: "bg-navy-50 text-navy-700 border-navy-100", dot: "bg-navy-400" },
  { icon: FlaskConical, label: "PhD / Research", count: 127, color: "bg-purple-50 text-purple-700 border-purple-100", dot: "bg-purple-400" },
  { icon: Clock, label: "Short Courses", count: 63, color: "bg-amber-50 text-amber-700 border-amber-100", dot: "bg-amber-400" },
];

const steps = [
  { n: "01", title: "Discover", desc: "Browse 500+ verified scholarships filtered by country, level, and field of study.", icon: Globe },
  { n: "02", title: "Prepare", desc: "Use our document checklist, SOP guides, and expert tips to craft a winning application.", icon: FileText },
  { n: "03", title: "Apply", desc: "Submit your application directly to the provider — we'll track deadlines for you.", icon: CheckCircle },
  { n: "04", title: "Win & Fly", desc: "Accept your award, complete pre-departure briefings, and embark on your global journey.", icon: Award },
];

const allScholarships = [
  { id: 1, title: "Chevening Scholarships 2026/27", provider: "UK Government", country: "United Kingdom", flag: "🇬🇧", amount: "Full Funding", deadline: "Nov 4, 2026", category: "Masters", featured: true },
  { id: 2, title: "DAAD Scholarships for Development", provider: "DAAD", country: "Germany", flag: "🇩🇪", amount: "Full Funding + Allowance", deadline: "Oct 15, 2026", category: "Masters/PhD", featured: true },
  { id: 3, title: "Fulbright Foreign Student Program", provider: "U.S. State Department", country: "United States", flag: "🇺🇸", amount: "Full Tuition + Living", deadline: "Sep 30, 2026", category: "Masters/PhD", featured: false },
  { id: 4, title: "Australia Awards Scholarships", provider: "Australian Government", country: "Australia", flag: "🇦🇺", amount: "Full Funding", deadline: "Apr 30, 2027", category: "Masters", featured: false },
  { id: 5, title: "Erasmus Mundus Joint Masters", provider: "European Commission", country: "Europe", flag: "🇪🇺", amount: "Full Funding", deadline: "Jan 10, 2027", category: "Masters", featured: false },
  { id: 6, title: "YTL Foundation Scholarship", provider: "YTL Foundation", country: "Malaysia", flag: "🇲🇾", amount: "Full Tuition + Stipend", deadline: "Jun 30, 2026", category: "Undergraduate", featured: false },
  { id: 7, title: "MEXT Japanese Government Scholarship", provider: "Ministry of Education, Japan", country: "Japan", flag: "🇯🇵", amount: "Full Funding + Monthly Allowance", deadline: "Dec 1, 2026", category: "Masters/PhD", featured: false },
  { id: 8, title: "Commonwealth Scholarship", provider: "Commonwealth Scholarship Commission", country: "United Kingdom", flag: "🇬🇧", amount: "Full Funding", deadline: "Oct 20, 2026", category: "PhD", featured: false },
];

const testimonials = [
  { name: "Aisyah Rahman", award: "Chevening Scholar 2025", university: "University of Edinburgh", quote: "KC Group's guidance made the difference. Their application checklist and mock interviews prepared me perfectly.", avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&q=80" },
  { name: "Farhan Zulkifli", award: "DAAD Scholar 2025", university: "TU Munich", quote: "I applied to 3 scholarships through KC Group and landed my dream PhD position at TU Munich.", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&q=80" },
  { name: "Mei Lin Tan", award: "Fulbright Alumni 2024", university: "Harvard University", quote: "The personal statement coaching from the KC team was outstanding. I got into Harvard's public policy program.", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=80&q=80" },
];

const stats = [
  { value: "500+", label: "Active Scholarships", icon: Award },
  { value: "50+", label: "Destination Countries", icon: Globe },
  { value: "10k+", label: "Students Assisted", icon: Users },
  { value: "$2M+", label: "Funding Secured", icon: Landmark },
];

export default function ScholarshipsPage() {
  return (
    <div className="min-h-screen bg-neutral-50">
      <ScholarshipsSlider />

      {/* pt-28 to clear the floating search bar */}
      <div className="pt-14">

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

        {/* Featured Scholarships */}
        <section className="py-16 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">Editor&apos;s Pick</span>
                <h2 className="text-3xl font-black text-navy-900 mt-1">Featured Scholarships</h2>
                <p className="text-neutral-500 mt-1 text-sm">Hand-picked opportunities with the highest success rates for Malaysian applicants.</p>
              </div>
              <Link href="#all" className="hidden sm:flex items-center gap-1 text-sm text-navy-600 hover:text-navy-800 font-medium">
                View all <ArrowRight size={14} />
              </Link>
            </div>

            <div className="grid lg:grid-cols-3 gap-6">
              {featured.map((s) => (
                <Link key={s.id} href={`/scholarships/${s.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-44 overflow-hidden">
                    <Image src={s.image} alt={s.country} 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-4 flex gap-2">
                      {s.tags.map((t) => (
                        <span key={t} className="text-[10px] font-semibold bg-white/20 backdrop-blur-sm text-white border border-white/30 px-2 py-0.5 rounded-full">{t}</span>
                      ))}
                    </div>
                    <div className="absolute top-3 right-3 text-2xl">{s.flag}</div>
                  </div>
                  <div className="p-5 flex flex-col flex-1">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-xs font-semibold text-navy-600 bg-navy-50 px-2.5 py-1 rounded-full">{s.category}</span>
                      <div className="flex items-center gap-1 text-amber-400 text-xs font-semibold">
                        <Star size={12} fill="currentColor" /> {s.rating}
                      </div>
                    </div>
                    <h3 className="font-bold text-navy-900 text-base leading-snug mb-1 group-hover:text-navy-600 transition-colors">{s.title}</h3>
                    <p className="text-xs text-neutral-500 mb-3">{s.provider}</p>
                    <p className="text-sm text-neutral-600 leading-relaxed flex-1">{s.description}</p>
                    <div className="mt-4 pt-4 border-t border-neutral-100 flex items-center justify-between text-xs text-neutral-500">
                      <span className="flex items-center gap-1"><Calendar size={11} /> Deadline: {s.deadline}</span>
                      <span className="flex items-center gap-1 font-semibold text-emerald-600">{s.amount}</span>
                    </div>
                    <div className="mt-3 flex items-center justify-between">
                      <span className="text-[11px] text-neutral-400 flex items-center gap-1"><Users size={11} /> {s.applicants.toLocaleString()} applicants</span>
                      <span className="text-xs text-navy-600 font-semibold flex items-center gap-1 group-hover:gap-2 transition-all">Apply Now <ArrowRight size={12} /></span>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* Browse by Country */}
        <section className="py-16 bg-neutral-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-10">
              <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Explore the World</span>
              <h2 className="text-3xl font-black text-navy-900 mt-1">Browse by Country</h2>
              <p className="text-neutral-500 mt-2 text-sm max-w-lg mx-auto">Find scholarships in your dream destination — from world-class universities in the UK to cutting-edge research labs in Japan.</p>
            </div>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
              {countries.map((c) => (
                <Link key={c.name} href={`/scholarships?country=${encodeURIComponent(c.name)}`} className="group relative rounded-2xl overflow-hidden h-44 shadow-sm hover:shadow-lg transition-all">
                  <Image src={c.image} alt={c.name} fill className="object-cover group-hover:scale-110 transition-transform duration-500" />
                  <div className="absolute inset-0 bg-gradient-to-t from-navy-900/80 via-navy-900/30 to-transparent" />
                  <div className="absolute bottom-0 left-0 right-0 p-3 text-center">
                    <div className="text-2xl mb-1">{c.flag}</div>
                    <div className="text-white font-bold text-xs leading-tight">{c.name}</div>
                    <div className="text-gold-300 text-[10px] font-semibold mt-0.5">{c.count} scholarships</div>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* Browse by Level */}
        <section className="py-16 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-10">
              <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Study Level</span>
              <h2 className="text-3xl font-black text-navy-900 mt-1">Find Your Level</h2>
              <p className="text-neutral-500 mt-2 text-sm">Whether you&apos;re starting your degree or pursuing advanced research, we have the right scholarship for you.</p>
            </div>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
              {levels.map((l) => (
                <Link key={l.label} href={`/scholarships?level=${encodeURIComponent(l.label)}`} className={`group rounded-2xl border-2 p-6 hover:shadow-md transition-all ${l.color}`}>
                  <div className={`w-12 h-12 rounded-xl ${l.dot}/20 flex items-center justify-center mb-4`}>
                    <l.icon size={24} className={l.dot.replace("bg-", "text-")} />
                  </div>
                  <h3 className="font-bold text-lg mb-1">{l.label}</h3>
                  <p className="text-sm opacity-70">{l.count} scholarships available</p>
                  <div className="mt-4 flex items-center gap-1 text-xs font-semibold opacity-80 group-hover:gap-2 transition-all">
                    Browse <ArrowRight size={12} />
                  </div>
                </Link>
              ))}
            </div>
          </div>
        </section>

        {/* How to Apply */}
        <section className="py-20 bg-navy-900 relative overflow-hidden">
          <div className="absolute inset-0 opacity-5">
            <div className="absolute top-10 left-10 w-96 h-96 rounded-full bg-gold-400 blur-3xl" />
            <div className="absolute bottom-10 right-10 w-72 h-72 rounded-full bg-navy-400 blur-3xl" />
          </div>
          <div className="relative 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-400">Simple Process</span>
              <h2 className="text-3xl font-black text-white mt-2">How to Apply</h2>
              <p className="text-navy-300 mt-2 text-sm max-w-md mx-auto">Our 4-step process takes the stress out of scholarship applications — from discovery to departure.</p>
            </div>
            <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {steps.map((step, i) => (
                <div key={step.n} className="relative">
                  {i < steps.length - 1 && (
                    <div className="hidden lg:block absolute top-8 left-[calc(100%-0px)] w-full h-px bg-gradient-to-r from-gold-400/40 to-transparent z-0" />
                  )}
                  <div className="relative bg-white/5 border border-white/10 rounded-2xl p-6 text-center hover:bg-white/10 transition-colors">
                    <div className="text-5xl font-black text-white/10 absolute top-4 right-4 leading-none">{step.n}</div>
                    <div className="w-14 h-14 rounded-2xl bg-gold-400/20 border border-gold-400/30 flex items-center justify-center mx-auto mb-4">
                      <step.icon size={24} className="text-gold-400" />
                    </div>
                    <h3 className="font-bold text-white text-lg mb-2">{step.title}</h3>
                    <p className="text-navy-300 text-sm leading-relaxed">{step.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* All Scholarships Listing */}
        <section id="all" className="py-16 bg-neutral-50">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-end justify-between mb-8">
              <div>
                <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Complete Directory</span>
                <h2 className="text-3xl font-black text-navy-900 mt-1">All Scholarships</h2>
              </div>
              <div className="hidden sm:flex items-center gap-2">
                <select className="text-sm border border-neutral-200 rounded-lg px-3 py-2 bg-white focus:outline-none">
                  <option>Latest First</option>
                  <option>Deadline Soonest</option>
                  <option>Amount: High to Low</option>
                </select>
              </div>
            </div>

            <div className="space-y-3">
              {allScholarships.map((s) => (
                <Link key={s.id} href={`/scholarships/${s.id}`} className="group bg-white rounded-xl border border-neutral-200 p-5 flex items-center gap-5 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-2 mb-1">
                      <span className="text-xs font-semibold text-navy-600 bg-navy-50 px-2 py-0.5 rounded-full">{s.category}</span>
                      {s.featured && <span className="text-xs font-semibold text-gold-600 bg-gold-50 px-2 py-0.5 rounded-full">Featured</span>}
                    </div>
                    <h3 className="font-semibold text-navy-800 group-hover:text-navy-600 transition-colors">{s.title}</h3>
                    <p className="text-sm text-neutral-500 mt-0.5">{s.provider} · {s.country}</p>
                  </div>
                  <div className="shrink-0 text-right hidden sm:block">
                    <div className="text-sm font-semibold text-emerald-600">{s.amount}</div>
                    <div className="text-xs text-neutral-400 mt-1 flex items-center gap-1 justify-end">
                      <Calendar size={11} /> {s.deadline}
                    </div>
                  </div>
                  <ArrowRight size={16} className="text-neutral-300 group-hover:text-navy-700 shrink-0 transition-colors" />
                </Link>
              ))}
            </div>

            <div className="mt-8 text-center">
              <button className="inline-flex items-center gap-2 border-2 border-navy-700 text-navy-700 hover:bg-navy-700 hover:text-white font-semibold px-8 py-3 rounded-full transition-colors text-sm">
                Load More Scholarships <ArrowRight size={15} />
              </button>
            </div>
          </div>
        </section>

        {/* Testimonials */}
        <section className="py-16 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-10">
              <span className="text-xs font-semibold uppercase tracking-widest text-gold-500">Success Stories</span>
              <h2 className="text-3xl font-black text-navy-900 mt-1">Our Scholars Speak</h2>
              <p className="text-neutral-500 mt-2 text-sm">Real students, real awards, real transformations.</p>
            </div>
            <div className="grid md:grid-cols-3 gap-6">
              {testimonials.map((t) => (
                <div key={t.name} className="bg-navy-50 rounded-2xl border border-navy-100 p-6 flex flex-col">
                  <div className="flex items-center gap-1 text-amber-400 mb-4">
                    {[...Array(5)].map((_, i) => <Star key={i} size={14} fill="currentColor" />)}
                  </div>
                  <p className="text-navy-800 text-sm leading-relaxed flex-1 italic">&ldquo;{t.quote}&rdquo;</p>
                  <div className="mt-5 pt-5 border-t border-navy-200 flex items-center gap-3">
                    <div className="relative w-10 h-10 rounded-full overflow-hidden shrink-0">
                      <Image src={t.avatar} alt={t.name} fill className="object-cover" />
                    </div>
                    <div>
                      <div className="font-bold text-navy-900 text-sm">{t.name}</div>
                      <div className="text-xs text-navy-500">{t.award}</div>
                      <div className="text-xs text-navy-400">{t.university}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA — Scholarship Alerts */}
        <section className="py-20 relative overflow-hidden">
          <div className="absolute inset-0">
            <Image
              src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?w=1600&q=80"
              alt="Students"
              fill
              className="object-cover"
            />
            <div className="absolute inset-0 bg-navy-900/85" />
          </div>
          <div className="relative max-w-3xl mx-auto px-4 text-center">
            <div className="w-16 h-16 rounded-2xl bg-gold-400/20 border border-gold-400/30 flex items-center justify-center mx-auto mb-6">
              <Bell size={28} className="text-gold-400" />
            </div>
            <h2 className="text-4xl font-black text-white mb-4">Never Miss a Deadline</h2>
            <p className="text-navy-200 text-lg mb-8 max-w-xl mx-auto">Get personalised scholarship alerts delivered to your inbox — matched to your study level, field, and destination.</p>
            <div className="flex flex-col sm:flex-row gap-3 justify-center max-w-lg mx-auto">
              <input
                type="email"
                placeholder="Enter your email address"
                className="flex-1 px-5 py-3.5 rounded-full bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:border-gold-400 text-sm"
              />
              <button className="bg-gold-400 hover:bg-gold-300 text-navy-900 font-bold px-7 py-3.5 rounded-full transition-colors text-sm flex items-center justify-center gap-2">
                <Bell size={15} /> Get Alerts
              </button>
            </div>
            <p className="text-white/40 text-xs mt-4">No spam. Unsubscribe anytime. We respect your privacy.</p>
          </div>
        </section>

        {/* Bottom strip */}
        <div className="bg-gold-400">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5 flex flex-col sm:flex-row items-center justify-between gap-3">
            <div className="flex items-center gap-3 text-navy-900">
              <Building2 size={20} />
              <span className="font-semibold text-sm">Are you a university or foundation? List your scholarship with KC Group.</span>
            </div>
            <Link href="/contact" className="shrink-0 bg-navy-800 hover:bg-navy-900 text-white text-sm font-semibold px-6 py-2.5 rounded-full transition-colors flex items-center gap-2">
              Partner With Us <ArrowRight size={14} />
            </Link>
          </div>
        </div>

      </div>
    </div>
  );
}