{{--
    hero.blade.php
    Gunakan di halaman welcome/landing:
        @include('layouts.hero')
    Tampil hanya untuk tamu (guest). Bisa dibungkus @guest jika perlu.
--}}

<section class="hero-section">

    {{-- Background dekoratif --}}
    <div class="hero-blob hero-blob-1"></div>
    <div class="hero-blob hero-blob-2"></div>

    <div class="hero-container">

        {{-- Badge --}}
        <div class="hero-badge">
            <i class="fa fa-graduation-cap" style="font-size:12px;color:#1d4ed8;"></i>
            Platform LMS Resmi SMK Muhammadiyah 1 Bantul
        </div>

        {{-- Heading --}}
        <h1 class="hero-heading">
            Belajar Lebih Mudah,<br>
            <span class="hero-heading-accent">Lebih Cerdas</span>
        </h1>

        {{-- Sub-heading --}}
        <p class="hero-sub">
            Akses materi pelajaran, kerjakan tugas, dan pantau perkembangan belajarmu
            kapan saja dan di mana saja bersama guru terbaikmu.
        </p>

        {{-- CTA Buttons --}}
        <div class="hero-actions">
            <a href="{{ route('login') }}" class="btn-primary hero-btn-main">
                <i class="fa fa-sign-in-alt"></i> Masuk Sekarang
            </a>
            <a href="#fitur" class="hero-btn-ghost">
                Lihat Fitur <i class="fa fa-chevron-down" style="font-size:10px;"></i>
            </a>
        </div>

        {{-- Stats --}}
        <div class="hero-stats">
            <div class="hero-stat">
                <span class="hero-stat-num">500+</span>
                <span class="hero-stat-label">Siswa Aktif</span>
            </div>
            <div class="hero-stat-divider"></div>
            <div class="hero-stat">
                <span class="hero-stat-num">40+</span>
                <span class="hero-stat-label">Mata Pelajaran</span>
            </div>
            <div class="hero-stat-divider"></div>
            <div class="hero-stat">
                <span class="hero-stat-num">30+</span>
                <span class="hero-stat-label">Guru Pengajar</span>
            </div>
        </div>

    </div>

    {{-- Feature Cards --}}
    <div class="hero-features" id="fitur">
        <div class="hero-feature-card">
            <div class="hero-feature-icon" style="background:#eff6ff;color:#1d4ed8;">
                <i class="fa fa-book-open"></i>
            </div>
            <h3 class="hero-feature-title">Materi Lengkap</h3>
            <p class="hero-feature-desc">Akses modul, video, dan bahan ajar yang disiapkan langsung oleh guru.</p>
        </div>
        <div class="hero-feature-card">
            <div class="hero-feature-icon" style="background:#f0fdf4;color:#16a34a;">
                <i class="fa fa-tasks"></i>
            </div>
            <h3 class="hero-feature-title">Tugas & Kuis</h3>
            <p class="hero-feature-desc">Kerjakan tugas dan kuis secara online dengan umpan balik langsung.</p>
        </div>
        <div class="hero-feature-card">
            <div class="hero-feature-icon" style="background:#fefce8;color:#ca8a04;">
                <i class="fa fa-chart-line"></i>
            </div>
            <h3 class="hero-feature-title">Pantau Nilai</h3>
            <p class="hero-feature-desc">Lihat rekap nilai dan progres belajar secara real-time dan transparan.</p>
        </div>
        <div class="hero-feature-card">
            <div class="hero-feature-icon" style="background:#fdf4ff;color:#9333ea;">
                <i class="fa fa-mobile-alt"></i>
            </div>
            <h3 class="hero-feature-title">Akses di Mana Saja</h3>
            <p class="hero-feature-desc">Responsif di semua perangkat — belajar dari HP, tablet, atau laptop.</p>
        </div>
    </div>

</section>

<style>
    .hero-section {
        position: relative;
        overflow: hidden;
        padding: 72px 32px 0;
        text-align: center;
    }

    /* Blobs latar */
    .hero-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        pointer-events: none;
        z-index: 0;
        opacity: .45;
    }
    .hero-blob-1 {
        width: 500px; height: 500px;
        background: radial-gradient(circle, #bfdbfe, transparent 70%);
        top: -120px; left: -100px;
    }
    .hero-blob-2 {
        width: 400px; height: 400px;
        background: radial-gradient(circle, #e0e7ff, transparent 70%);
        top: -60px; right: -80px;
    }

    .hero-container {
        position: relative;
        z-index: 1;
        max-width: 680px;
        margin: 0 auto;
    }

    /* Badge */
    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        color: #1d4ed8;
        font-size: 12.5px;
        font-weight: 600;
        padding: 5px 14px;
        border-radius: 99px;
        margin-bottom: 24px;
        animation: fadeUp .4s ease both;
    }

    /* Heading */
    .hero-heading {
        font-size: clamp(2rem, 5vw, 3.2rem);
        font-weight: 700;
        color: #0f172a;
        line-height: 1.18;
        margin: 0 0 18px;
        animation: fadeUp .4s .08s ease both;
    }
    .hero-heading-accent {
        background: linear-gradient(135deg, #1d4ed8, #6366f1);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Sub */
    .hero-sub {
        font-size: 15.5px;
        color: #6b7280;
        line-height: 1.7;
        margin: 0 auto 32px;
        max-width: 520px;
        animation: fadeUp .4s .16s ease both;
    }

    /* Actions */
    .hero-actions {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-bottom: 40px;
        flex-wrap: wrap;
        animation: fadeUp .4s .22s ease both;
    }
    .hero-btn-main {
        font-size: 14.5px;
        padding: 12px 28px;
        gap: 8px;
    }
    .hero-btn-ghost {
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        padding: 12px 20px;
        border-radius: 10px;
        border: 1.5px solid #e5e7eb;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: white;
        transition: border-color .15s, color .15s;
    }
    .hero-btn-ghost:hover { border-color: #1d4ed8; color: #1d4ed8; }

    /* Stats */
    .hero-stats {
        display: inline-flex;
        align-items: center;
        gap: 24px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 14px 28px;
        margin-bottom: 64px;
        animation: fadeUp .4s .28s ease both;
        box-shadow: 0 2px 16px rgba(0,0,0,.04);
    }
    .hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .hero-stat-num { font-size: 20px; font-weight: 700; color: #111827; }
    .hero-stat-label { font-size: 11.5px; color: #9ca3af; }
    .hero-stat-divider { width: 1px; height: 32px; background: #e5e7eb; }

    /* Feature Cards */
    .hero-features {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        max-width: 1100px;
        margin: 0 auto;
        padding-bottom: 32px;
        position: relative;
        z-index: 1;
        animation: fadeUp .4s .34s ease both;
    }
    .hero-feature-card {
        background: white;
        border: 1px solid #f0f0f0;
        border-radius: 16px;
        padding: 24px 20px;
        text-align: left;
        transition: box-shadow .2s, transform .2s;
        box-shadow: 0 1px 8px rgba(0,0,0,.04);
    }
    .hero-feature-card:hover {
        box-shadow: 0 6px 24px rgba(0,0,0,.08);
        transform: translateY(-2px);
    }
    .hero-feature-icon {
        width: 42px; height: 42px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px;
        margin-bottom: 14px;
    }
    .hero-feature-title {
        font-size: 14px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 8px;
    }
    .hero-feature-desc {
        font-size: 13px;
        color: #6b7280;
        line-height: 1.6;
        margin: 0;
    }

    @media (max-width: 900px) {
        .hero-features { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
        .hero-section { padding: 48px 16px 0; }
        .hero-features { grid-template-columns: 1fr; }
        .hero-stats { gap: 16px; padding: 12px 20px; }
        .hero-stat-num { font-size: 17px; }
    }
</style>