import Link from "next/link";
import { getProjectConfig } from "@/config/project-config";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { GraduationCap, Megaphone, ScrollText, ArrowRight, LayoutDashboard, BookOpen } from "lucide-react";

export default async function Home() {
  const config = await getProjectConfig();

  return (
    <>
      {/* Hero Section */}
      <section className="from-primary-50 relative overflow-hidden bg-gradient-to-br via-white to-blue-50 py-24 sm:py-32">
        <div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80">
          <div className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" />
        </div>
        <div className="container mx-auto px-4 text-center sm:px-6 lg:px-8">
          <Badge variant="outline" className="mb-4 bg-white/50 backdrop-blur">
            Sistem Informasi Sekolah Digital
          </Badge>
          <h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl">
            Platform Pendidikan Terpadu <br className="hidden sm:block" />
            <span className="text-primary">{config.schoolName}</span>
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-lg text-slate-600">
            {config.description}. Mengelola data akademik, administrasi, dan pembelajaran dalam satu sistem yang
            terintegrasi.
          </p>
          <div className="mt-10 flex justify-center gap-4">
            <Link href="/auth/login">
              <Button size="lg" className="shadow-primary/25 px-8 shadow-lg">
                Akses Dashboard <ArrowRight className="ml-2 h-4 w-4" />
              </Button>
            </Link>
            <Link href="#features">
              <Button variant="outline" size="lg">
                Pelajari Lebih Lanjut
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Features / Quick Access */}
      <section id="features" className="container mx-auto px-4 py-20 sm:px-6 lg:px-8">
        <div className="mb-16 text-center">
          <h2 className="text-3xl font-bold tracking-tight text-slate-900">Layanan Publik</h2>
          <p className="mt-4 text-lg text-slate-600">Akses cepat informasi dan layanan sekolah tanpa perlu login.</p>
        </div>

        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
          {/* Feature 1: SKL / Kelulusan */}
          <Card className="hover:border-primary/50 group transition-all hover:shadow-md">
            <CardHeader>
              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600 transition-colors group-hover:bg-emerald-600 group-hover:text-white">
                <GraduationCap className="h-6 w-6" />
              </div>
              <CardTitle>Cek Kelulusan (SKL)</CardTitle>
              <CardDescription>Verifikasi dan unduh Surat Keterangan Lulus siswa secara online.</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/skl" className="text-primary inline-flex items-center font-medium hover:underline">
                Cek Data <ArrowRight className="ml-1 h-3 w-3" />
              </Link>
            </CardContent>
          </Card>

          {/* Feature 2: Pengumuman */}
          <Card className="hover:border-primary/50 group transition-all hover:shadow-md">
            <CardHeader>
              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-amber-100 text-amber-600 transition-colors group-hover:bg-amber-600 group-hover:text-white">
                <Megaphone className="h-6 w-6" />
              </div>
              <CardTitle>Pengumuman Sekolah</CardTitle>
              <CardDescription>Informasi terbaru mengenai kegiatan akademik dan jadwal sekolah.</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/pengumuman" className="text-primary inline-flex items-center font-medium hover:underline">
                Lihat Info <ArrowRight className="ml-1 h-3 w-3" />
              </Link>
            </CardContent>
          </Card>

          {/* Feature 3: PPDB / Info */}
          <Card className="hover:border-primary/50 group transition-all hover:shadow-md">
            <CardHeader>
              <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 text-blue-600 transition-colors group-hover:bg-blue-600 group-hover:text-white">
                <ScrollText className="h-6 w-6" />
              </div>
              <CardTitle>Arsip & Dokumen</CardTitle>
              <CardDescription>Akses dokumen publik, kalender akademik, dan panduan siswa.</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href="/dokumen" className="text-primary inline-flex items-center font-medium hover:underline">
                Buka Arsip <ArrowRight className="ml-1 h-3 w-3" />
              </Link>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Info Grid */}
      <section className="bg-slate-50 py-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 items-center gap-12 md:grid-cols-2">
            <div>
              <h2 className="mb-6 text-3xl font-bold">Sistem Akademik Terintegrasi</h2>
              <div className="space-y-4">
                <div className="flex gap-4">
                  <div className="h-fit rounded bg-white p-2 shadow-sm">
                    <BookOpen className="text-primary h-6 w-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold">Manajemen Kurikulum</h3>
                    <p className="text-slate-600">
                      Pengelolaan mata pelajaran, jadwal, dan penilaian yang terstruktur.
                    </p>
                  </div>
                </div>
                <div className="flex gap-4">
                  <div className="h-fit rounded bg-white p-2 shadow-sm">
                    <LayoutDashboard className="text-primary h-6 w-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold">Dashboard Guru & Siswa</h3>
                    <p className="text-slate-600">Akses personal untuk melihat nilai, absensi, dan materi pelajaran.</p>
                  </div>
                </div>
              </div>
            </div>
            <div className="relative h-64 w-full overflow-hidden rounded-2xl border bg-white shadow-2xl md:h-96">
              {/* Placeholder for actual dashboard screenshot */}
              <div className="from-primary/10 absolute inset-0 flex items-center justify-center bg-gradient-to-tr to-blue-500/10">
                <span className="font-medium text-slate-400">Dashboard Preview Area</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}