<?php
require_once 'includes/header-siswa.php';
?>

<!-- Hero Section -->
<section class="relative py-32 overflow-hidden flex items-center min-h-[600px]">
    <!-- Background Image with Overlay -->
    <div class="absolute inset-0 z-0">
        <img src="<?= baseUrl('header.webp') ?>" alt="Header SMAN 1 Barumun" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-r from-primary/95 to-primary-dark/80"></div>
    </div>
    
    <div class="container mx-auto px-6 text-center relative z-10">
        <span class="inline-block px-4 py-2 bg-white/10 rounded-full text-accent font-bold text-xs uppercase tracking-widest mb-6 backdrop-blur-sm border border-white/10">Peduli Kesehatan Mental Siswa</span>
        <h1 class="text-5xl md:text-7xl font-extrabold text-white mb-8 leading-tight">Masa Depanmu Dimulai dari <br><span class="text-accent underline decoration-white/20 underline-offset-8">Pikiran yang Sehat</span></h1>
        <p class="text-xl md:text-2xl text-primary-light max-w-3xl mx-auto mb-12 font-medium leading-relaxed opacity-90">
            Sistem Pakar Kesehatan Mental SMAN 1 Barumun hadir untuk membantu siswa kelas XII mendeteksi dini kondisi psikologis demi kesuksesan akademik dan personal.
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-6">
            <a href="diagnosa.php" class="btn-accent px-12 py-5 text-lg font-bold">Mulai Diagnosa Sekarang</a>
            <a href="#about" class="px-12 py-5 text-lg font-bold bg-white/10 hover:bg-white/20 text-white rounded-xl transition-all border border-white/20 backdrop-blur-sm">Pelajari Lebih Lanjut</a>
        </div>
    </div>
</section>

<!-- Features / Info -->
<section id="about" class="py-24">
    <div class="container mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
            <div class="card p-10 border-none shadow-xl hover:-translate-y-2 transition-transform">
                <div class="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mb-8">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                </div>
                <h3 class="text-2xl font-bold text-slate-800 mb-4">Metode Akurat</h3>
                <p class="text-slate-600 leading-relaxed font-medium">Menggunakan metode <span class="text-primary font-bold">Certainty Factor</span> (CF) untuk memberikan hasil tingkat keyakinan yang akurat berdasarkan gejala yang dirasakan.</p>
            </div>
            
            <div class="card p-10 border-none shadow-xl hover:-translate-y-2 transition-transform">
                <div class="w-16 h-16 bg-accent/10 rounded-2xl flex items-center justify-center text-accent-dark mb-8">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                </div>
                <h3 class="text-2xl font-bold text-slate-800 mb-4">Privasi Terjamin</h3>
                <p class="text-slate-600 leading-relaxed font-medium">Data hasil diagnosa hanya dapat diakses oleh Anda dan pihak bimbingan konseling sekolah yang berwenang membantu Anda.</p>
            </div>
            
            <div class="card p-10 border-none shadow-xl hover:-translate-y-2 transition-transform">
                <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center text-green-600 mb-8">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <h3 class="text-2xl font-bold text-slate-800 mb-4">Solusi Cepat</h3>
                <p class="text-slate-600 leading-relaxed font-medium">Dapatkan gambaran kondisi mental Anda dalam hitungan menit dan rekomendasi awal untuk langkah selanjutnya.</p>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="py-24 bg-slate-100">
    <div class="container mx-auto px-6">
        <div class="bg-primary rounded-3xl p-12 md:p-20 flex flex-col md:flex-row items-center justify-between gap-12 overflow-hidden relative">
            <div class="relative z-10 max-w-xl">
                <h2 class="text-3xl md:text-5xl font-extrabold text-white mb-6">Siap Menjaga Kesehatan Mental Anda?</h2>
                <p class="text-primary-light text-lg font-medium opacity-80">Jangan menunda jika Anda merasa terbebani. Deteksi dini adalah langkah awal menuju kebahagiaan.</p>
            </div>
            <div class="relative z-10">
                <a href="diagnosa.php" class="btn-accent px-10 py-5 text-lg font-bold whitespace-nowrap">Mulai Diagnosa Sekarang</a>
            </div>
            <!-- Decorative circle -->
            <div class="absolute -top-24 -right-24 w-64 h-64 bg-accent/20 rounded-full blur-3xl"></div>
        </div>
    </div>
</section>

<?php require_once 'includes/footer-siswa.php'; ?>
