@extends('layouts.landing')

@section('title', 'DaisyRisk - Global Supply Chain Risk Intelligence')

@push('styles')
<style>
    :root {
        /* DaisyRisk Theme Colors */
        --pur: #F8B84E;
        --tx: #2C3E50;
        --tx2: #6B7280;
        --tx3: #9CA3AF;
        --bg: #FFFFFF;
        --bg2: #FFFEF9;
        --bg3: #FEF7E0;
        --sf: #FFFFFF;
        --bd: #E8E5D8;
        --bd2: #E8E5D8;
        --grad: linear-gradient(135deg, #F4D03F 0%, #F8B84E 100%);
    }
    
    /* Custom DaisyRisk styling overrides */
    .logo-i {
        background: var(--grad);
        color: var(--tx);
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    
    .gt {
        background: linear-gradient(135deg, #F4D03F 0%, #F8B84E 50%, #7FB069 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    
    .hbadge {
        background: rgba(254, 247, 224, 0.8);
        border: 1px solid rgba(248, 184, 78, 0.2);
        color: #F8B84E;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }
    
    .bdot {
        width: 8px;
        height: 8px;
        background: #7FB069;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
        box-shadow: 0 0 8px #7FB069;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.6; }
        100% { opacity: 1; }
    }
    
    /* Feature Cards */
    .feature-card {
        background: var(--sf);
        border: 1px solid var(--bd);
        border-radius: 18px;
        padding: 24px;
        height: 100%;
        transition: all 0.3s ease;
    }
    
    .feature-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }
    
    .feature-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        font-size: 1.2rem;
    }
    
    .social-icon-link {
        transition: all 0.3s ease;
    }
    
    .social-icon-link:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(248,184,78,0.25);
        cursor: pointer;
    }
</style>
@endpush

@section('content')
<!-- Success Notification -->
@if(session('contact_success'))
<div class="position-fixed top-0 end-0 p-3" style="z-index:11000">
    <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header" style="background:var(--bg3);border-color:var(--bd)">
            <div class="logo-i me-2" style="width:24px;height:24px;font-size:0.8rem">🌼</div>
            <strong class="me-auto">DaisyRisk</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body" style="background:var(--sf)">
            {{ session('success') }}
        </div>
    </div>
</div>
@endif

<!-- ======================== LANDING PAGE ======================== -->
<div id="landing">

    
    <!-- HERO SECTION -->
    <section id="hero">
        <div class="aur aur-a" style="top:-80px;left:-120px"></div>
        <div class="aur aur-b" style="top:180px;right:-180px"></div>
        <div class="aur aur-a" style="bottom:-80px;left:45%;transform:translateX(-50%);opacity:.4"></div>
        <div class="container position-relative" style="z-index:2">
            <div class="text-center">
                <div class="afu" style="animation-delay:.05s">
                    <span class="hbadge">
                        <span class="bdot"></span>🌍 Real-time Supply Chain Risk Intelligence
                    </span>
                </div>
                <h1 class="h1 afu" style="animation-delay:.12s">Pantau Risiko Global<br>dengan <span class="gt">Kecerdasan AI</span></h1>
                <p class="mx-auto afu" style="max-width:580px;font-size:clamp(.95rem,1.8vw,1.2rem);color:var(--tx2);margin-bottom:36px;animation-delay:.2s">
                    Lacak risiko rantai pasok di seluruh negara dan pelabuhan dengan data real-time, pemantauan cuaca, dan skor risiko cerdas – semua dalam satu platform.
                </p>
                <div class="d-flex align-items-center justify-content-center gap-3 flex-wrap afu" style="animation-delay:.28s">
                    <button class="bgrd btn px-4 py-3 fs-6" data-bs-toggle="offcanvas" data-bs-target="#lofc" onclick="switchTab('signup')">
                        🚀 Mulai Gratis Sekarang
                    </button>
                    <a href="{{ route('login') }}" class="boc btn px-4 py-3 fs-6">
                        <i class="fa-solid fa-gauge-high me-2" style="color:var(--pur)"></i>Lihat Dashboard
                    </a>
                </div>
                <div class="mt-5 afu" style="animation-delay:.4s">
                    <p style="font-size:.71rem;color:var(--tx3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">🌼 Dipercaya oleh profesional supply chain</p>
                    <div class="d-flex align-items-center justify-content-center gap-4 flex-wrap">
                        <span class="tlog">Logistik</span>
                        <span class="tlog">Manufaktur</span>
                        <span class="tlog">Retail</span>
                        <span class="tlog">Transportasi</span>
                    </div>
                </div>
            </div>
            
            <!-- Dashboard Preview -->
            <div class="row justify-content-center mt-5">
                <div class="col-lg-11 adi">
                    <div class="dwrap">
                        <div class="dtbar">
                            <span class="dd" style="background:#ff5f57"></span>
                            <span class="dd" style="background:#ffbd2e"></span>
                            <span class="dd" style="background:#28c840"></span>
                            <span class="ms-auto me-auto" style="font-size:.76rem;color:var(--tx3)">🌼 DaisyRisk Dashboard - Global Supply Chain</span>
                        </div>
                        <div class="dgrid">
                            <div class="dside">
                                <div style="font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tx3);padding:0 10px 10px;font-weight:700">📊 Ringkasan</div>
                                <button class="dsi on"><i class="fa-solid fa-gauge-high"></i> Dashboard</button>
                                <button class="dsi"><i class="fa-solid fa-earth-americas"></i> Negara</button>
                                <button class="dsi"><i class="fa-solid fa-ship"></i> Pelabuhan</button>
                                <button class="dsi"><i class="fa-solid fa-cloud-sun"></i> Cuaca</button>
                                <button class="dsi"><i class="fa-solid fa-chart-line"></i> Analitik Risiko</button>
                            </div>
                            <div class="p-3">
                                <div class="row g-2 mb-3">
                                    <div class="col-6 col-sm-3">
                                        <div class="stpill">
                                            <div style="font-size:1.4rem;font-weight:700" class="gt">145</div>
                                            <div style="font-size:.67rem;color:var(--tx3)">Negara Dipantau</div>
                                            <div style="font-size:.67rem;color:#7FB069;font-weight:600"><i class="fa-solid fa-caret-up me-1"></i>Real-time</div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-3">
                                        <div class="stpill">
                                            <div style="font-size:1.4rem;font-weight:700">1,248</div>
                                            <div style="font-size:.67rem;color:var(--tx3)">Pelabuhan Aktif</div>
                                            <div style="font-size:.67rem;color:#7FB069;font-weight:600"><i class="fa-solid fa-caret-up me-1"></i>Data Live</div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-3">
                                        <div class="stpill">
                                            <div style="font-size:1.4rem;font-weight:700">24/7</div>
                                            <div style="font-size:.67rem;color:var(--tx3)">Pemantauan</div>
                                            <div style="font-size:.67rem;color:#F8B84E;font-weight:600"><i class="fa-solid fa-clock me-1"></i>Selalu Aktif</div>
                                        </div>
                                    </div>
                                    <div class="col-6 col-sm-3">
                                        <div class="stpill">
                                            <div style="font-size:1.4rem;font-weight:700">98%</div>
                                            <div style="font-size:.67rem;color:var(--tx3)">Akurasi</div>
                                            <div style="font-size:.67rem;color:#7FB069;font-weight:600"><i class="fa-solid fa-check me-1"></i>Terverifikasi</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- FEATURES SECTION -->
    <section id="features" class="sp" style="background:var(--bg2)">
        <div class="container">
            <div class="text-center mb-5 rv">
                <span class="slbl">Fitur Unggulan</span>
                <h2 class="stitle">Semua yang Anda butuhkan untuk <span class="gt">mengelola risiko global</span></h2>
                <p class="ssub mx-auto">Pantau dan analisis risiko rantai pasok dengan teknologi AI terdepan</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4 rv">
                    <div class="feature-card">
                        <div class="feature-icon" style="background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.2)">
                            <i class="fa-solid fa-globe" style="color:#34d399"></i>
                        </div>
                        <h3 class="fw-semibold fs-5 mb-2">Pemantauan Global</h3>
                        <p style="font-size:.875rem;color:var(--tx2)">Monitor risiko di 145+ negara dengan data real-time dari berbagai sumber terpercaya</p>
                        <span class="ftag">Real-time data</span>
                    </div>
                </div>
                <div class="col-md-4 rv" style="transition-delay:.05s">
                    <div class="feature-card">
                        <div class="feature-icon" style="background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.2)">
                            <i class="fa-solid fa-ship" style="color:#60a5fa"></i>
                        </div>
                        <h3 class="fw-semibold fs-5 mb-2">Tracking Pelabuhan</h3>
                        <p style="font-size:.875rem;color:var(--tx2)">Pantau aktivitas dan status 1,200+ pelabuhan utama di seluruh dunia</p>
                        <span class="ftag">1,200+ ports</span>
                    </div>
                </div>
                <div class="col-md-4 rv" style="transition-delay:.1s">
                    <div class="feature-card">
                        <div class="feature-icon" style="background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.2)">
                            <i class="fa-solid fa-cloud-sun" style="color:#fbbf24"></i>
                        </div>
                        <h3 class="fw-semibold fs-5 mb-2">Prediksi Cuaca</h3>
                        <p style="font-size:.875rem;color:var(--tx2)">Analisis dampak cuaca ekstrem terhadap jalur distribusi dan operasional</p>
                        <span class="ftag">Weather AI</span>
                    </div>
                </div>
                <div class="col-md-4 rv" style="transition-delay:.15s">
                    <div class="feature-card">
                        <div class="feature-icon" style="background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2)">
                            <i class="fa-solid fa-chart-line" style="color:#a78bfa"></i>
                        </div>
                        <h3 class="fw-semibold fs-5 mb-2">Skor Risiko AI</h3>
                        <p style="font-size:.875rem;color:var(--tx2)">Algoritma machine learning untuk scoring risiko otomatis berdasarkan berbagai parameter</p>
                        <span class="ftag">AI Powered</span>
                    </div>
                </div>
                <div class="col-md-4 rv" style="transition-delay:.2s">
                    <div class="feature-card">
                        <div class="feature-icon" style="background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.2)">
                            <i class="fa-solid fa-triangle-exclamation" style="color:#f87171"></i>
                        </div>
                        <h3 class="fw-semibold fs-5 mb-2">Alert Real-time</h3>
                        <p style="font-size:.875rem;color:var(--tx2)">Notifikasi instant untuk perubahan kondisi kritikal yang mempengaruhi supply chain</p>
                        <span class="ftag">Instant alerts</span>
                    </div>
                </div>
                <div class="col-md-4 rv" style="transition-delay:.25s">
                    <div class="feature-card">
                        <div class="feature-icon" style="background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2)">
                            <i class="fa-solid fa-chart-pie" style="color:#22c55e"></i>
                        </div>
                        <h3 class="fw-semibold fs-5 mb-2">Dashboard Analytics</h3>
                        <p style="font-size:.875rem;color:var(--tx2)">Visualisasi data komprehensif dengan insight actionable untuk decision making</p>
                        <span class="ftag">Advanced analytics</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- CONTACT SECTION -->
    <section id="contact" class="sp">
        <div class="container">
            <div class="text-center mb-5 rv">
                <span class="slbl">Hubungi Kami</span>
                <h2 class="stitle">Ada pertanyaan? <span class="gt">Kami siap membantu</span></h2>
                <p class="ssub mx-auto">Tim support kami siap membantu Anda 24/7</p>
            </div>
            <div class="row g-5">
                <div class="col-lg-6 rv">
                    <div class="feature-card">
                        <h3 class="fw-semibold mb-4">Kirim Pesan</h3>
                        <form action="{{ route('landing.contact.store') }}" method="POST">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Nama</label>
                                    <input type="text" class="form-control" name="name" required 
                                           style="border-radius:12px;border:1px solid var(--bd);padding:12px 16px" 
                                           placeholder="Nama lengkap Anda" value="{{ old('name') }}">
                                    @error('name')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Email</label>
                                    <input type="email" class="form-control" name="email" required 
                                           style="border-radius:12px;border:1px solid var(--bd);padding:12px 16px" 
                                           placeholder="email@perusahaan.com" value="{{ old('email') }}">
                                    @error('email')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Perusahaan (Opsional)</label>
                                    <input type="text" class="form-control" name="company" 
                                           style="border-radius:12px;border:1px solid var(--bd);padding:12px 16px" 
                                           placeholder="Nama perusahaan" value="{{ old('company') }}">
                                    @error('company')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-semibold">Kategori</label>
                                    <select class="form-select" name="category" required 
                                            style="border-radius:12px;border:1px solid var(--bd);padding:12px 16px">
                                        <option value="">Pilih kategori</option>
                                        <option value="platform" {{ old('category') == 'platform' ? 'selected' : '' }}>Platform & Fitur</option>
                                        <option value="api" {{ old('category') == 'api' ? 'selected' : '' }}>API & Integrasi</option>
                                        <option value="data" {{ old('category') == 'data' ? 'selected' : '' }}>Data & Analytics</option>
                                        <option value="kerjasama" {{ old('category') == 'kerjasama' ? 'selected' : '' }}>Kerjasama Bisnis</option>
                                        <option value="bug" {{ old('category') == 'bug' ? 'selected' : '' }}>Bug Report</option>
                                        <option value="saran" {{ old('category') == 'saran' ? 'selected' : '' }}>Saran & Feedback</option>
                                        <option value="lainnya" {{ old('category') == 'lainnya' ? 'selected' : '' }}>Lainnya</option>
                                    </select>
                                    @error('category')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Subjek</label>
                                    <input type="text" class="form-control" name="subject" required 
                                           style="border-radius:12px;border:1px solid var(--bd);padding:12px 16px" 
                                           placeholder="Topik pesan Anda" value="{{ old('subject') }}">
                                    @error('subject')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                                <div class="col-12">
                                    <label class="form-label fw-semibold">Pesan</label>
                                    <textarea class="form-control" name="message" rows="5" required 
                                              style="border-radius:12px;border:1px solid var(--bd);padding:12px 16px" 
                                              placeholder="Ceritakan kebutuhan atau pertanyaan Anda...">{{ old('message') }}</textarea>
                                    @error('message')<small class="text-danger">{{ $message }}</small>@enderror
                                </div>
                                <div class="col-12">
                                    <button type="submit" class="bgrd btn px-4 py-3" style="border-radius:12px">
                                        <i class="fa-solid fa-paper-plane me-2"></i>Kirim Pesan
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-6 rv" style="transition-delay:.1s">
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="feature-card">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="feature-icon" style="background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.2);width:48px;height:48px;margin-bottom:0">
                                        <i class="fa-solid fa-envelope" style="color:#60a5fa;font-size:1rem"></i>
                                    </div>
                                    <div>
                                        <h5 class="fw-semibold mb-2">Email</h5>
                                        <p style="color:var(--tx2);margin:0">admin@daisyrisk.com</p>
                                        <p style="color:var(--tx3);font-size:.875rem;margin:0">Respon dalam 2-4 jam</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="feature-card">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="feature-icon" style="background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.2);width:48px;height:48px;margin-bottom:0">
                                        <i class="fa-solid fa-phone" style="color:#22c55e;font-size:1rem"></i>
                                    </div>
                                    <div>
                                        <h5 class="fw-semibold mb-2">Telepon</h5>
                                        <p style="color:var(--tx2);margin:0">+62 821 7450 5204</p>
                                        <p style="color:var(--tx3);font-size:.875rem;margin:0">Senin - Jumat, 09:00 - 18:00 WIB</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="feature-card">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="feature-icon" style="background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.2);width:48px;height:48px;margin-bottom:0">
                                        <i class="fa-solid fa-comments" style="color:#fbbf24;font-size:1rem"></i>
                                    </div>
                                    <div>
                                        <h5 class="fw-semibold mb-2">Live Chat</h5>
                                        <p style="color:var(--tx2);margin:0">Chat langsung dengan tim support</p>
                                        <p style="color:var(--tx3);font-size:.875rem;margin:0">24/7 tersedia</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <a href="https://www.google.com/maps/search/?api=1&query=Universitas+Malikussaleh+Kampus+Reuleut" target="_blank" rel="noopener noreferrer" class="feature-card" style="display:block; text-decoration:none; color:inherit; cursor:pointer;">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="feature-icon" style="background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.2);width:48px;height:48px;margin-bottom:0">
                                        <i class="fa-solid fa-map-marker-alt" style="color:#a78bfa;font-size:1rem"></i>
                                    </div>
                                    <div>
                                        <h5 class="fw-semibold mb-2" style="color:var(--tx);">Alamat</h5>
                                        <p style="color:var(--tx2);margin:0">
                                            Universitas Malikussaleh<br>
                                            Kampus Reuleut<br>
                                            Jl. Medan–Banda Aceh, Reuleut Timur<br>
                                            Kecamatan Muara Batu<br>
                                            Kabupaten Aceh Utara<br>
                                            Aceh 24355
                                        </p>
                                        <p style="color:var(--tx3);font-size:.875rem;margin-top:4px;margin-bottom:0;">Indonesia</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- FOOTER -->
    <footer id="footer" class="sp" style="background:var(--bg3);margin-top:120px">
        <div class="container">
            <div class="row g-5 mb-5">
                <div class="col-lg-4">
                    <a class="d-flex align-items-center gap-2 mb-3" href="{{ route('welcome') }}" style="font-size:1.15rem;font-weight:700;color:var(--tx);text-decoration:none">
                        <div class="logo-i" style="font-size:1.2rem">🌼</div>
                        Daisy<span style="color:#F8B84E">Risk</span>
                    </a>
                    <p style="font-size:.875rem;color:var(--tx3);line-height:1.65;max-width:280px">Platform intelijen risiko rantai pasok real-time untuk operasi global yang lebih aman dan efisien.</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="https://www.instagram.com/denaafrilll_?igsh=cDBlOWpjdHJnaWxr" target="_blank" rel="noopener noreferrer" class="social-icon-link d-flex align-items-center justify-content-center" style="width:38px;height:38px;background:rgba(248,184,78,0.1);border:1px solid rgba(248,184,78,0.2);border-radius:10px;color:var(--pur);text-decoration:none">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                        <a href="https://github.com/denaaprillll" target="_blank" rel="noopener noreferrer" class="social-icon-link d-flex align-items-center justify-content-center" style="width:38px;height:38px;background:rgba(248,184,78,0.1);border:1px solid rgba(248,184,78,0.2);border-radius:10px;color:var(--pur);text-decoration:none">
                            <i class="fa-brands fa-github"></i>
                        </a>
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <h5 style="color:var(--tx);margin-bottom:20px">Produk</h5>
                    <div class="d-flex flex-column gap-2">
                        <a href="#features" onclick="smoothScrollTo('features', event)" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Fitur</a>
                        <a href="{{ route('user.dashboard') }}" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Dashboard</a>
                        <a href="{{ route('landing.countries') }}" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Negara</a>
                        <a href="{{ route('landing.ports') }}" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Pelabuhan</a>
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <h5 style="color:var(--tx);margin-bottom:20px">Perusahaan</h5>
                    <div class="d-flex flex-column gap-2">
                        <a href="{{ route('landing.about') }}" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Tentang Kami</a>
                        <a href="#contact" onclick="smoothScrollTo('contact', event)" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Kontak</a>
                        <a href="#" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Karir</a>
                        <a href="#" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Blog</a>
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <h5 style="color:var(--tx);margin-bottom:20px">Support</h5>
                    <div class="d-flex flex-column gap-2">
                        <a href="#" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Dokumentasi</a>
                        <a href="#contact" onclick="smoothScrollTo('contact', event)" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Bantuan</a>
                        <a href="#" style="color:var(--tx3);text-decoration:none;font-size:.875rem">FAQ</a>
                        <a href="#" style="color:var(--tx3);text-decoration:none;font-size:.875rem">API</a>
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <h5 style="color:var(--tx);margin-bottom:20px">Akun</h5>
                    <div class="d-flex flex-column gap-2">
                        <a href="{{ route('login') }}" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Masuk</a>
                        <a href="{{ route('register') }}" style="color:var(--tx3);text-decoration:none;font-size:.875rem">Daftar</a>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 pt-4" style="border-top:1px solid var(--bd)">
                <p style="font-size:.8rem;color:var(--tx3);margin:0">© {{ date('Y') }} Dena April - Global Supply Chain Risk Intelligence. Semua hak dilindungi.</p>
                <div class="d-flex gap-3">
                    <a href="#" style="font-size:.8rem;color:var(--tx3);text-decoration:none">Kebijakan Privasi</a>
                    <a href="#" style="font-size:.8rem;color:var(--tx3);text-decoration:none">Syarat Layanan</a>
                </div>
            </div>
        </div>
    </footer>
</div>
@endsection
@push('scripts')
<script>
// Global functions for template

function smoothScrollTo(id, event) {
    if (event) {
        event.preventDefault();
    }
    const target = document.getElementById(id);
    if (!target) return;
    const navbarHeight = document.getElementById('nbar').offsetHeight || 72;
    const top = target.getBoundingClientRect().top + window.pageYOffset - navbarHeight - 16;
    window.scrollTo({ top: top, behavior: 'smooth' });
}

// Initialize AOS if available
document.addEventListener('DOMContentLoaded', function() {
    if (typeof AOS !== 'undefined') {
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true,
            mirror: false
        });
    }
});
</script>
@endpush