import Link from "next/link";
import {
  BookOpen,
  ClipboardList,
  CheckCircle2,
  Calendar,
  Award,
  Users,
  ShieldCheck,
  Sparkles,
  ArrowRight,
  Phone,
  Mail,
  MapPin,
  GraduationCap,
  Laptop,
  Check,
} from "lucide-react";
import { Button } from "@/components/ui/button";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-white text-slate-900 flex flex-col selection:bg-blue-100 selection:text-blue-900">
      {/* NAVBAR */}
      <header className="sticky top-0 z-50 w-full border-b border-slate-200/80 bg-white/90 backdrop-blur-md">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-xl bg-blue-950 p-1 flex items-center justify-center border border-blue-800 shadow-sm">
              <img
                src="/images/logo-sman3oku.svg"
                alt="Logo SMAN 3 OKU"
                className="h-8 w-8 object-contain"
              />
            </div>
            <div>
              <span className="text-base font-extrabold tracking-tight text-slate-900">
                LMS SMAN 3 OKU
              </span>
              <p className="text-[10px] font-semibold text-blue-600 uppercase tracking-wider">
                SMA Negeri 3 OKU
              </p>
            </div>
          </div>

          <nav className="hidden md:flex items-center gap-8 text-xs font-semibold text-slate-600">
            <a href="#beranda" className="hover:text-blue-600 transition-colors">
              Beranda
            </a>
            <a href="#fitur" className="hover:text-blue-600 transition-colors">
              Fitur LMS
            </a>
            <a href="#kurikulum" className="hover:text-blue-600 transition-colors">
              Pembelajaran Digital
            </a>
            <a href="#panduan" className="hover:text-blue-600 transition-colors">
              Panduan
            </a>
            <a href="#kontak" className="hover:text-blue-600 transition-colors">
              Kontak
            </a>
          </nav>

          <div className="flex items-center gap-3">
            <Link href="/login">
              <Button size="sm" className="font-bold shadow-sm shadow-blue-500/20">
                Masuk ke LMS
                <ArrowRight className="ml-1.5 h-3.5 w-3.5" />
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* HERO SECTION */}
      <section id="beranda" className="relative overflow-hidden pt-16 pb-20 md:pt-24 md:pb-32 bg-gradient-to-b from-slate-50 via-white to-white">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-96 bg-blue-100/40 rounded-full blur-3xl -z-10 pointer-events-none" />
        
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center space-y-8">
          <div className="inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50/80 px-4 py-1.5 text-xs font-semibold text-blue-800 shadow-sm">
            <Sparkles className="h-4 w-4 text-amber-500" />
            <span>Platform Pembelajaran Digital SMAN 3 OKU</span>
          </div>

          <div className="max-w-3xl mx-auto space-y-4">
            <h1 className="text-4xl sm:text-5xl md:text-6xl font-black tracking-tight text-slate-900 leading-tight">
              Learning Management System <br />
              <span className="bg-gradient-to-r from-blue-700 via-indigo-600 to-blue-900 bg-clip-text text-transparent">
                SMAN 3 OKU
              </span>
            </h1>
            <p className="text-base sm:text-lg text-slate-600 leading-relaxed font-normal">
              Platform pembelajaran digital untuk mendukung proses belajar mengajar yang terintegrasi, efektif, dan mudah diakses bagi seluruh warga sekolah SMA Negeri 3 Ogan Komering Ulu.
            </p>
          </div>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-3 pt-2">
            <Link href="/login">
              <Button size="lg" className="w-full sm:w-auto font-bold px-8 shadow-lg shadow-blue-600/25">
                Masuk ke LMS
                <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
            <a href="#fitur">
              <Button variant="outline" size="lg" className="w-full sm:w-auto font-semibold">
                Jelajahi Fitur
              </Button>
            </a>
          </div>

          {/* School Stat Badges */}
          <div className="pt-12 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
            <div className="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm">
              <p className="text-2xl font-black text-blue-600">30+</p>
              <p className="text-xs font-medium text-slate-500 mt-0.5">Rombel Kelas</p>
            </div>
            <div className="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm">
              <p className="text-2xl font-black text-blue-600">60+</p>
              <p className="text-xs font-medium text-slate-500 mt-0.5">Guru & Pendidik</p>
            </div>
            <div className="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm">
              <p className="text-2xl font-black text-blue-600">1000+</p>
              <p className="text-xs font-medium text-slate-500 mt-0.5">Siswa Terdaftar</p>
            </div>
            <div className="p-4 rounded-2xl bg-white border border-slate-200 shadow-sm">
              <p className="text-2xl font-black text-blue-600">100%</p>
              <p className="text-xs font-medium text-slate-500 mt-0.5">Kurikulum Merdeka</p>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURES SECTION */}
      <section id="fitur" className="py-20 bg-slate-50 border-y border-slate-200/80">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-2xl mx-auto mb-16 space-y-3">
            <h2 className="text-xs font-extrabold uppercase tracking-widest text-blue-600">
              Fitur Unggulan
            </h2>
            <p className="text-3xl font-extrabold text-slate-900 tracking-tight">
              Dirancang untuk Seluruh Kebutuhan Akademik Sekolah
            </p>
            <p className="text-xs md:text-sm text-slate-500">
              Mulai dari perencanaan kurikulum, pembagian modul ajar, asesmen online, hingga pencetakan laporan kemajuan siswa.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {/* Feature 1 */}
            <div className="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-blue-400 hover:shadow-md transition-all">
              <div className="h-12 w-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center mb-4">
                <BookOpen className="h-6 w-6" />
              </div>
              <h3 className="text-base font-bold text-slate-900 mb-2">
                Modul & Materi Interaktif
              </h3>
              <p className="text-xs text-slate-500 leading-relaxed">
                Guru dapat mengunggah modul ajar, dokumen PDF, presentasi PPT, artikel, serta integrasi video pembelajaran YouTube dan Google Drive.
              </p>
            </div>

            {/* Feature 2 */}
            <div className="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-blue-400 hover:shadow-md transition-all">
              <div className="h-12 w-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center mb-4">
                <ClipboardList className="h-6 w-6" />
              </div>
              <h3 className="text-base font-bold text-slate-900 mb-2">
                Sistem Tugas & Evaluasi
              </h3>
              <p className="text-xs text-slate-500 leading-relaxed">
                Manajemen penugasan siswa dengan deadline otomatis, validasi tipe lampiran berkas, koreksi numerik, serta catatan umpan balik langsung dari guru.
              </p>
            </div>

            {/* Feature 3 */}
            <div className="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-blue-400 hover:shadow-md transition-all">
              <div className="h-12 w-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center mb-4">
                <CheckCircle2 className="h-6 w-6" />
              </div>
              <h3 className="text-base font-bold text-slate-900 mb-2">
                Asesmen CBT & Ujian Online
              </h3>
              <p className="text-xs text-slate-500 leading-relaxed">
                Engine kuis Computer-Based Test dengan timer countdown, navigasi nomor soal interaktif, ragu-ragu, acak soal & opsi, serta auto-grading objektif.
              </p>
            </div>

            {/* Feature 4 */}
            <div className="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-blue-400 hover:shadow-md transition-all">
              <div className="h-12 w-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center mb-4">
                <Award className="h-6 w-6" />
              </div>
              <h3 className="text-base font-bold text-slate-900 mb-2">
                Buku Nilai (Gradebook) Dinamis
              </h3>
              <p className="text-xs text-slate-500 leading-relaxed">
                Kalkulasi nilai akhir otomatis berdasarkan pembobotan tugas, kuis, praktik, dan asesmen sumatif yang dapat disesuaikan per mata pelajaran.
              </p>
            </div>

            {/* Feature 5 */}
            <div className="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-blue-400 hover:shadow-md transition-all">
              <div className="h-12 w-12 rounded-xl bg-cyan-50 text-cyan-600 flex items-center justify-center mb-4">
                <Users className="h-6 w-6" />
              </div>
              <h3 className="text-base font-bold text-slate-900 mb-2">
                Presensi & Monitoring Kelas
              </h3>
              <p className="text-xs text-slate-500 leading-relaxed">
                Pencatatan kehadiran siswa per pertemuan (Hadir, Sakit, Izin, Alpa) dengan rekapitulasi persentase kehadiran bulanan dan semester.
              </p>
            </div>

            {/* Feature 6 */}
            <div className="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-sm hover:border-blue-400 hover:shadow-md transition-all">
              <div className="h-12 w-12 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center mb-4">
                <Calendar className="h-6 w-6" />
              </div>
              <h3 className="text-base font-bold text-slate-900 mb-2">
                Jadwal & Kalender Akademik
              </h3>
              <p className="text-xs text-slate-500 leading-relaxed">
                Sinkronisasi jadwal mingguan dengan deteksi otomatis "Jadwal Hari Ini" di dashboard, agenda ujian, kegiatan OSIS, dan hari libur sekolah.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CURRICULUM SECTION */}
      <section id="kurikulum" className="py-20 bg-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div className="space-y-6">
              <div className="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">
                <GraduationCap className="h-4 w-4" />
                <span>Kurikulum Merdeka</span>
              </div>
              <h2 className="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
                Fleksibel Mendukung Fase E (Kelas X) & Fase F (Kelas XI - XII)
              </h2>
              <p className="text-sm text-slate-600 leading-relaxed">
                Struktur mata pelajaran dan rombel SMAN 3 OKU disesuaikan penuh dengan pembelajaran berbasis minat bakat, proyek penguatan profil pelajar Pancasila (P5), dan asesmen kompetensi minimum.
              </p>
              <div className="space-y-3">
                <div className="flex items-start gap-3">
                  <div className="h-5 w-5 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0 mt-0.5">
                    <Check className="h-3 w-3" />
                  </div>
                  <p className="text-xs text-slate-700">
                    <strong>Integrasi Wali Kelas:</strong> Pemantauan siswa yang belum mengumpulkan tugas serta grafik kehadiran secara real-time.
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <div className="h-5 w-5 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0 mt-0.5">
                    <Check className="h-3 w-3" />
                  </div>
                  <p className="text-xs text-slate-700">
                    <strong>Keamanan Akses Tingkat Tinggi:</strong> Enkripsi data, password hash, dan proteksi hak akses berbasis RBAC berlapis.
                  </p>
                </div>
                <div className="flex items-start gap-3">
                  <div className="h-5 w-5 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0 mt-0.5">
                    <Check className="h-3 w-3" />
                  </div>
                  <p className="text-xs text-slate-700">
                    <strong>Ekspor Data Lengkap:</strong> Cetak rekap nilai, presensi, dan data induk siswa dalam format Excel/CSV kapan saja.
                  </p>
                </div>
              </div>
            </div>

            {/* Visual Box */}
            <div className="p-8 rounded-3xl bg-gradient-to-br from-blue-900 to-slate-900 text-white shadow-xl relative overflow-hidden">
              <div className="space-y-4">
                <span className="text-xs font-mono uppercase text-blue-300">
                  SMAN 3 OKU Learning Environment
                </span>
                <h3 className="text-xl font-bold">
                  Pengalaman Belajar Digital yang Menyenangkan
                </h3>
                <p className="text-xs text-blue-100/80 leading-relaxed">
                  Antarmuka bersih, cepat, dan responsif dari smartphone, tablet, maupun laptop tanpa instalasi aplikasi tambahan.
                </p>

                <div className="pt-4 grid grid-cols-2 gap-3 text-xs">
                  <div className="p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/10">
                    <Laptop className="h-5 w-5 text-blue-300 mb-1" />
                    <span className="font-bold block">Mobile & Desktop</span>
                    <span className="text-[10px] text-blue-200">100% Responsif</span>
                  </div>
                  <div className="p-3 rounded-xl bg-white/10 backdrop-blur-sm border border-white/10">
                    <ShieldCheck className="h-5 w-5 text-emerald-300 mb-1" />
                    <span className="font-bold block">Aman & Terenkripsi</span>
                    <span className="text-[10px] text-blue-200">Audit Log Lengkap</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PANDUAN SECTION */}
      <section id="panduan" className="py-20 bg-slate-50 border-t border-slate-200/80">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-xl mx-auto mb-16 space-y-3">
            <h2 className="text-xs font-extrabold uppercase tracking-widest text-blue-600">
              Panduan Memulai
            </h2>
            <p className="text-3xl font-extrabold text-slate-900 tracking-tight">
              3 Langkah Mudah Menggunakan LMS
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="p-6 rounded-2xl bg-white border border-slate-200 text-center space-y-3">
              <div className="h-10 w-10 rounded-full bg-blue-600 text-white font-bold flex items-center justify-center mx-auto text-sm">
                1
              </div>
              <h4 className="text-sm font-bold text-slate-900">
                Masuk Menggunakan Akun Sekolah
              </h4>
              <p className="text-xs text-slate-500 leading-relaxed">
                Gunakan NIS untuk Siswa, NIP untuk Guru, atau Username dari administrator kurikulum beserta password terdaftar.
              </p>
            </div>

            <div className="p-6 rounded-2xl bg-white border border-slate-200 text-center space-y-3">
              <div className="h-10 w-10 rounded-full bg-blue-600 text-white font-bold flex items-center justify-center mx-auto text-sm">
                2
              </div>
              <h4 className="text-sm font-bold text-slate-900">
                Pilih Kelas & Mata Pelajaran
              </h4>
              <p className="text-xs text-slate-500 leading-relaxed">
                Akses modul pembelajaran hari ini, unduh modul materi, pelajari video instruksi, dan kerjakan tugas yang diberikan.
              </p>
            </div>

            <div className="p-6 rounded-2xl bg-white border border-slate-200 text-center space-y-3">
              <div className="h-10 w-10 rounded-full bg-blue-600 text-white font-bold flex items-center justify-center mx-auto text-sm">
                3
              </div>
              <h4 className="text-sm font-bold text-slate-900">
                Kerjakan Ujian & Pantau Nilai
              </h4>
              <p className="text-xs text-slate-500 leading-relaxed">
                Ikuti kuis CBT sesuai jadwal, submit tugas sebelum deadline, dan pantau hasil evaluasi akademik secara transparan.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER & CONTACT */}
      <footer id="kontak" className="bg-slate-950 text-slate-400 text-xs pt-16 pb-12 border-t border-slate-800">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
            <div className="space-y-3 md:col-span-2">
              <div className="flex items-center gap-3">
                <div className="h-10 w-10 rounded-xl bg-blue-900 p-1 flex items-center justify-center">
                  <img
                    src="/images/logo-sman3oku.svg"
                    alt="Logo SMAN 3 OKU"
                    className="h-8 w-8 object-contain"
                  />
                </div>
                <div>
                  <span className="text-sm font-bold text-white tracking-wide">
                    SMA NEGERI 3 OKU
                  </span>
                  <p className="text-[10px] text-blue-400">
                    Kabupaten Ogan Komering Ulu, Sumatera Selatan
                  </p>
                </div>
              </div>
              <p className="text-xs text-slate-400 max-w-sm leading-relaxed">
                Mewujudkan insan yang beriman, cerdas, berkarakter, unggul dalam ilmu pengetahuan dan teknologi digital.
              </p>
            </div>

            <div className="space-y-2">
              <h4 className="text-xs font-bold uppercase text-white tracking-wider">
                Tautan Cepat
              </h4>
              <ul className="space-y-1.5 text-xs">
                <li>
                  <Link href="/login" className="hover:text-white transition-colors">
                    Login Siswa & Guru
                  </Link>
                </li>
                <li>
                  <a href="#fitur" className="hover:text-white transition-colors">
                    Fitur Sistem LMS
                  </a>
                </li>
                <li>
                  <a href="#panduan" className="hover:text-white transition-colors">
                    Panduan Penggunaan
                  </a>
                </li>
              </ul>
            </div>

            <div className="space-y-2">
              <h4 className="text-xs font-bold uppercase text-white tracking-wider">
                Kontak Sekolah
              </h4>
              <div className="space-y-2 text-xs">
                <div className="flex items-center gap-2">
                  <MapPin className="h-4 w-4 text-blue-400 shrink-0" />
                  <span>Baturaja, Kab. Ogan Komering Ulu, Sumatera Selatan</span>
                </div>
                <div className="flex items-center gap-2">
                  <Mail className="h-4 w-4 text-blue-400 shrink-0" />
                  <span>info@sman3oku.sch.id</span>
                </div>
                <div className="flex items-center gap-2">
                  <Phone className="h-4 w-4 text-blue-400 shrink-0" />
                  <span>(0735) 320XXX</span>
                </div>
              </div>
            </div>
          </div>

          <div className="border-t border-slate-800 pt-6 flex flex-col sm:flex-row items-center justify-between text-[11px] text-slate-500">
            <p>&copy; 2026 SMAN 3 OKU. All rights reserved.</p>
            <p>Platform Pembelajaran Digital SMAN 3 OKU</p>
          </div>
        </div>
      </footer>
    </div>
  );
}