import type { Metadata } from "next";
import Link from "next/link";
import { Globe, Calendar, GraduationCap, ChevronLeft, Lock, CheckCircle } from "lucide-react";

export const metadata: Metadata = { title: "Scholarship Detail" };

export default function ScholarshipDetailPage({ params }: { params: { id: string } }) {
  return (
    <div className="min-h-screen bg-neutral-50">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 py-10">
        <Link href="/scholarships" className="flex items-center gap-1.5 text-sm text-neutral-500 hover:text-navy-700 mb-8">
          <ChevronLeft size={15} /> Back to Scholarships
        </Link>

        <div className="bg-white rounded-2xl border border-neutral-200 overflow-hidden">
          <div className="bg-navy-700 p-8">
            <div className="flex items-start justify-between mb-4">
              <div className="text-4xl">🇬🇧</div>
              <span className="text-xs font-medium text-gold-400 bg-gold-500/20 px-3 py-1 rounded-full border border-gold-500/30">Masters</span>
            </div>
            <h1 className="text-2xl md:text-3xl font-bold text-white mb-2">Chevening Scholarships 2026/27</h1>
            <p className="text-navy-300">UK Government · United Kingdom</p>
          </div>

          <div className="p-8">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
              {[
                { label: "Funding", value: "Full Funding", icon: GraduationCap },
                { label: "Country", value: "United Kingdom", icon: Globe },
                { label: "Deadline", value: "Nov 4, 2026", icon: Calendar },
                { label: "Level", value: "Masters", icon: GraduationCap },
              ].map(({ label, value, icon: Icon }) => (
                <div key={label} className="bg-neutral-50 rounded-xl p-4 text-center border border-neutral-200">
                  <Icon size={18} className="text-navy-700 mx-auto mb-2" />
                  <div className="text-xs text-neutral-400 mb-1">{label}</div>
                  <div className="text-sm font-semibold text-navy-800">{value}</div>
                </div>
              ))}
            </div>

            <div className="bg-gold-50 border border-gold-200 rounded-xl p-6 mb-8">
              <div className="flex items-center gap-2 text-gold-700 font-semibold mb-2">
                <Lock size={16} /> Full details require a subscription
              </div>
              <p className="text-sm text-neutral-600 mb-4">Subscribe to view eligibility, required documents, application steps, and the direct application link.</p>
              <Link href="/register?plan=basic" className="inline-flex items-center gap-2 px-5 py-2.5 bg-gold-500 text-white text-sm font-semibold rounded-lg hover:bg-gold-600 transition-colors">
                Subscribe from $29/month
              </Link>
            </div>

            <div className="relative">
              <div className="blur-sm pointer-events-none space-y-4">
                <h2 className="text-xl font-bold text-navy-800">About the Scholarship</h2>
                <p className="text-neutral-600 leading-relaxed">Chevening is the UK government international awards programme, funded by the FCDO and partner organisations. It offers full funding for a one-year Masters degree at any UK university.</p>
                <h2 className="text-xl font-bold text-navy-800">Eligibility Requirements</h2>
                <ul className="space-y-2">
                  {["Be a citizen of a Chevening-eligible country", "Have an undergraduate degree equivalent to a UK 2:1", "Have at least 2 years work experience", "Return to your home country for at least 2 years after your scholarship"].map(r => (
                    <li key={r} className="flex items-start gap-2"><CheckCircle size={16} className="text-emerald-500 mt-0.5 shrink-0" /><span className="text-neutral-600 text-sm">{r}</span></li>
                  ))}
                </ul>
              </div>
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="bg-white border border-neutral-200 shadow-lg rounded-xl p-5 text-center max-w-xs">
                  <Lock size={24} className="text-gold-500 mx-auto mb-2" />
                  <p className="text-sm font-medium text-neutral-800">Subscribe to unlock full details</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}