@extends('layouts.landing')

@section('content')
<div class="min-h-screen bg-sdn-gradient relative overflow-hidden flex flex-col">
    <div class="floating-shape w-64 h-64 bg-white top-10 -left-20"></div>
    <div class="floating-shape w-48 h-48 bg-purple-300 top-40 right-10"></div>
    <div class="floating-shape w-32 h-32 bg-green-300 bottom-20 left-1/4"></div>
    <div class="floating-shape w-56 h-56 bg-orange-200 -bottom-10 right-1/4"></div>

    <nav class="relative z-10 flex items-center justify-between px-6 lg:px-12 py-6">
        <div class="flex items-center gap-3">
            <x-brand-logo size="md" />
            <span class="font-extrabold text-gray-900 text-lg hidden sm:block truncate max-w-xs">{{ $schoolName }}</span>
        </div>
        <div class="flex flex-wrap items-center gap-3">
            <a href="{{ route('landing.about') }}" class="text-sm font-bold text-gray-900 hover:underline hidden sm:inline">Kenali CBT</a>
            <a href="{{ route('login') }}" class="btn-sdn-primary shadow-lg">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Masuk CBT
            </a>
        </div>
    </nav>

    <div class="relative z-10 flex-1 flex flex-col items-center justify-center text-center px-6 pb-20">
        <div class="badge-sdn mb-6">Akreditasi {{ $accreditation }} &bull; Berdiri sejak {{ $established }}</div>
        <h1 class="text-2xl sm:text-4xl md:text-6xl font-extrabold text-white leading-tight mb-6 max-w-4xl px-2">
            {{ $schoolName }}
            <span class="text-sdn-yellow drop-shadow-lg">08 Pagi</span>
        </h1>
        <p class="text-white/90 text-base sm:text-lg md:text-xl max-w-2xl mb-10 leading-relaxed px-2">
            Membangun generasi cerdas, berkarakter, dan berprestasi melalui pendidikan berkualitas di jantung Kebayoran Baru, Jakarta Selatan.
        </p>
        <div class="flex flex-wrap gap-4 justify-center">
            <a href="{{ route('landing.about') }}" class="btn-sdn-secondary shadow-lg text-lg px-8 py-3">Kenali Sistem CBT</a>
            <a href="{{ route('login') }}" class="btn-sdn-primary shadow-lg text-lg px-8 py-3">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Masuk CBT
            </a>
        </div>
    </div>

    <div class="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-4 px-6 lg:px-12 pb-12 max-w-5xl mx-auto w-full">
        <div class="card-sdn border-t-4 border-red-500 text-center py-4">
            <p class="text-3xl font-extrabold text-sdn-red">3</p>
            <p class="text-sm text-gray-600 font-semibold">Role Pengguna</p>
        </div>
        <div class="card-sdn border-t-4 border-yellow-500 text-center py-4">
            <p class="text-3xl font-extrabold text-sdn-orange">PG</p>
            <p class="text-sm text-gray-600 font-semibold">Multi Tipe Soal</p>
        </div>
        <div class="card-sdn border-t-4 border-blue-500 text-center py-4">
            <p class="text-3xl font-extrabold text-blue-500">24/7</p>
            <p class="text-sm text-gray-600 font-semibold">Ujian Online</p>
        </div>
        <div class="card-sdn border-t-4 border-green-500 text-center py-4">
            <p class="text-3xl font-extrabold text-green-500">A</p>
            <p class="text-sm text-gray-600 font-semibold">Akreditasi</p>
        </div>
    </div>
</div>
@endsection