<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SiAbsen — Sistem Absensi Digital</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
        --primary: #4f46e5; --primary-d: #3730a3; --primary-l: #eef2ff;
        --primary-m: rgba(79,70,229,.12); --violet: #7c3aed;
        --success: #059669; --warning: #d97706; --sky: #0284c7;
        --text: #0f172a; --muted: #64748b; --muted2: #94a3b8;
        --border: #e2e8f0; --bg: #f0f4ff; --white: #ffffff;
    }
    html, body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--white); color: var(--text); -webkit-font-smoothing: antialiased; }

    /* ── BG DECORATION ── */
    .bg-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
    .bg-grid {
        position: absolute; inset: 0;
        background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
        background-size: 52px 52px; opacity: .5;
    }
    .bg-orb { position: absolute; border-radius: 50%; filter: blur(100px); }
    .bg-orb-1 { width: 600px; height: 600px; top: -200px; right: -100px; background: rgba(79,70,229,.07); }
    .bg-orb-2 { width: 400px; height: 400px; bottom: 200px; left: -100px; background: rgba(124,58,237,.05); }

    /* ── NAV ── */
    nav {
        position: sticky; top: 0; z-index: 100;
        background: rgba(255,255,255,.88); backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border);
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 48px; height: 64px;
        box-shadow: 0 1px 8px rgba(0,0,0,.04);
    }
    .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
    .nav-logo {
        width: 38px; height: 38px; border-radius: 11px;
        background: linear-gradient(135deg, var(--primary), var(--violet));
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 14px var(--primary-m);
    }
    .nav-logo svg { width: 20px; height: 20px; stroke: white; }
    .nav-name { font-size: 17px; font-weight: 900; color: var(--text); letter-spacing: -.4px; }
    .nav-name span { color: var(--primary); }
    .nav-right { display: flex; align-items: center; gap: 10px; }
    .btn-nav-ghost {
        padding: 8px 18px; border-radius: 100px;
        border: 1.5px solid var(--border); background: transparent;
        color: var(--muted); font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13px; font-weight: 700; cursor: pointer;
        text-decoration: none; transition: all .15s;
    }
    .btn-nav-ghost:hover { background: var(--primary-l); color: var(--primary); border-color: rgba(79,70,229,.3); }
    .btn-nav-primary {
        padding: 8px 20px; border-radius: 100px;
        background: linear-gradient(135deg, var(--primary), var(--violet));
        color: white; font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13px; font-weight: 700; cursor: pointer;
        text-decoration: none; transition: all .15s;
        display: inline-flex; align-items: center; gap: 6px;
        box-shadow: 0 4px 14px var(--primary-m);
    }
    .btn-nav-primary:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(79,70,229,.35); }
    .btn-nav-primary svg { width: 13px; height: 13px; stroke: white; }

    /* ── PAGE ── */
    .page { position: relative; z-index: 1; }

    /* ── HERO ── */
    .hero {
        max-width: 900px; margin: 0 auto;
        padding: 96px 24px 72px;
        text-align: center;
    }
    .hero-badge {
        display: inline-flex; align-items: center; gap: 7px;
        background: var(--primary-l); color: var(--primary);
        border: 1px solid rgba(79,70,229,.2);
        border-radius: 100px; padding: 5px 16px;
        font-size: 12px; font-weight: 700; margin-bottom: 28px;
        letter-spacing: .02em;
    }
    .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: pulse 2s ease infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }

    .hero-title {
        font-size: clamp(2.2rem, 6vw, 3.8rem);
        font-weight: 900; letter-spacing: -.04em; line-height: 1.1;
        color: var(--text); margin-bottom: 20px;
    }
    .hero-title .hl { color: var(--primary); }
    .hero-sub {
        font-size: 17px; color: var(--muted); font-weight: 500;
        line-height: 1.7; max-width: 560px; margin: 0 auto 36px;
    }
    .hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
    .btn-hero {
        padding: 13px 28px; border-radius: 100px;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 15px; font-weight: 800; cursor: pointer;
        text-decoration: none; transition: all .2s;
        display: inline-flex; align-items: center; gap: 8px;
    }
    .btn-hero svg { width: 16px; height: 16px; stroke: currentColor; }
    .btn-hero-primary {
        background: linear-gradient(135deg, var(--primary), var(--violet));
        color: white; box-shadow: 0 8px 24px var(--primary-m);
    }
    .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(79,70,229,.35); }
    .btn-hero-ghost {
        background: white; color: var(--muted);
        border: 1.5px solid var(--border);
    }
    .btn-hero-ghost:hover { background: var(--primary-l); color: var(--primary); border-color: rgba(79,70,229,.3); }

    /* ── STATS STRIP ── */
    .stats-strip {
        display: flex; align-items: center; justify-content: center;
        gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
        background: var(--bg);
    }
    .stat-item {
        flex: 1; max-width: 220px;
        padding: 24px 20px; text-align: center;
        border-right: 1px solid var(--border);
        display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .stat-item:last-child { border-right: none; }
    .stat-ico {
        width: 44px; height: 44px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
    }
    .stat-ico svg { width: 20px; height: 20px; }
    .stat-ico.blue   { background: #e0f2fe; } .stat-ico.blue svg   { stroke: #0284c7; }
    .stat-ico.violet { background: var(--primary-l); } .stat-ico.violet svg { stroke: var(--primary); }
    .stat-ico.green  { background: #dcfce7; } .stat-ico.green svg  { stroke: #059669; }
    .stat-ico.orange { background: #ffedd5; } .stat-ico.orange svg { stroke: #ea580c; }
    .stat-num { font-size: 1.4rem; font-weight: 900; color: var(--text); letter-spacing: -.04em; line-height: 1; }
    .stat-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; }

    /* ── FEATURES ── */
    .features { max-width: 1100px; margin: 0 auto; padding: 80px 24px; }
    .section-label { display: block; font-size: 11px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; text-align: center; }
    .section-title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 900; color: var(--text); letter-spacing: -.04em; text-align: center; margin-bottom: 52px; }

    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .feature-card {
        background: var(--white); border: 1px solid var(--border);
        border-radius: 20px; padding: 28px 24px;
        box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
        transition: all .2s; position: relative; overflow: hidden;
    }
    .feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:20px 20px 0 0; }
    .feature-card:nth-child(1)::before { background: linear-gradient(90deg,#0284c7,#38bdf8); }
    .feature-card:nth-child(2)::before { background: linear-gradient(90deg,var(--primary),var(--violet)); }
    .feature-card:nth-child(3)::before { background: linear-gradient(90deg,var(--success),#34d399); }
    .feature-card:nth-child(4)::before { background: linear-gradient(90deg,#ea580c,#fb923c); }
    .feature-card:nth-child(5)::before { background: linear-gradient(90deg,#db2777,#f472b6); }
    .feature-card:nth-child(6)::before { background: linear-gradient(90deg,var(--warning),#fbbf24); }
    .feature-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,.09); border-color: rgba(79,70,229,.15); }

    .feature-ico {
        width: 48px; height: 48px; border-radius: 14px;
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 16px;
    }
    .feature-ico svg { width: 22px; height: 22px; }
    .fi-blue   { background: #e0f2fe; } .fi-blue   svg { stroke: #0284c7; }
    .fi-violet { background: var(--primary-l); } .fi-violet svg { stroke: var(--primary); }
    .fi-green  { background: #dcfce7; } .fi-green  svg { stroke: #059669; }
    .fi-orange { background: #ffedd5; } .fi-orange svg { stroke: #ea580c; }
    .fi-pink   { background: #fce7f3; } .fi-pink   svg { stroke: #db2777; }
    .fi-amber  { background: #fef9c3; } .fi-amber  svg { stroke: var(--warning); }

    .feature-title { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
    .feature-desc  { font-size: 13.5px; color: var(--muted); font-weight: 500; line-height: 1.65; }

    /* ── CTA SECTION ── */
    .cta-section {
        margin: 0 24px 80px;
        background: linear-gradient(135deg, #1e1b4b, #3730a3, #4f46e5);
        border-radius: 28px; padding: 64px 48px;
        text-align: center; position: relative; overflow: hidden;
        box-shadow: 0 20px 60px rgba(79,70,229,.3);
    }
    .cta-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
    .cta-orb-1 { width: 300px; height: 300px; top: -100px; right: -60px; background: rgba(139,92,246,.3); }
    .cta-orb-2 { width: 200px; height: 200px; bottom: -60px; left: -40px; background: rgba(196,181,253,.15); }
    .cta-title { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 900; color: white; letter-spacing: -.04em; margin-bottom: 12px; position: relative; }
    .cta-sub { font-size: 15px; color: rgba(255,255,255,.65); font-weight: 500; margin-bottom: 32px; position: relative; }
    .btn-cta {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 14px 32px; border-radius: 100px;
        background: white; color: var(--primary);
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 15px; font-weight: 800;
        text-decoration: none; transition: all .2s;
        box-shadow: 0 8px 24px rgba(0,0,0,.2);
        position: relative;
    }
    .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.3); }
    .btn-cta svg { width: 16px; height: 16px; stroke: var(--primary); }

    /* ── FOOTER ── */
    footer {
        border-top: 1px solid var(--border);
        padding: 24px 48px;
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 10px;
    }
    .footer-brand { display: flex; align-items: center; gap: 8px; }
    .footer-logo { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), var(--violet)); display: flex; align-items: center; justify-content: center; }
    .footer-logo svg { width: 14px; height: 14px; stroke: white; }
    .footer-name { font-size: 14px; font-weight: 800; color: var(--text); }
    .footer-name span { color: var(--primary); }
    .footer-right { font-size: 12px; color: var(--muted2); font-weight: 500; }

    /* ── RESPONSIVE ── */
    @media(max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } nav { padding: 0 24px; } }
    @media(max-width: 640px) {
        .features-grid { grid-template-columns: 1fr; }
        .stats-strip { flex-wrap: wrap; }
        .stat-item { min-width: 50%; border-bottom: 1px solid var(--border); }
        .cta-section { padding: 40px 24px; margin: 0 16px 60px; }
        footer { padding: 20px 24px; }
        .btn-nav-ghost { display: none; }
    }
    </style>
</head>
<body>

<div class="bg-wrap">
    <div class="bg-grid"></div>
    <div class="bg-orb bg-orb-1"></div>
    <div class="bg-orb bg-orb-2"></div>
</div>

<div class="page">

    {{-- NAV --}}
    <nav>
        <a href="/" class="nav-brand">
            <div class="nav-logo">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
                    <rect x="9" y="3" width="6" height="4" rx="1"/>
                    <path d="m9 12 2 2 4-4"/>
                </svg>
            </div>
            <span class="nav-name">Si<span>Absen</span></span>
        </a>
        <div class="nav-right">
            @auth
                <a href="{{ url('/dashboard') }}" class="btn-nav-primary">
                    Dashboard
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            @else
                @if(Route::has('login'))
                <a href="{{ route('login') }}" class="btn-nav-ghost">Masuk</a>
                @endif
                <a href="{{ route('login') }}" class="btn-nav-primary">
                    Mulai Sekarang
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            @endauth
        </div>
    </nav>

    {{-- HERO --}}
    <section class="hero">
        <div class="hero-badge">
            <span class="hero-badge-dot"></span>
            Sistem Absensi Digital Modern
        </div>
        <h1 class="hero-title">
            Absensi Karyawan<br>
            <span class="hl">Lebih Cerdas & Efisien</span>
        </h1>
        <p class="hero-sub">
            Kelola kehadiran, jadwal kerja, dan laporan karyawan dalam satu platform terintegrasi. Akurat, real-time, dan mudah digunakan.
        </p>
        <div class="hero-actions">
            @auth
                <a href="{{ url('/dashboard') }}" class="btn-hero btn-hero-primary">
                    Buka Dashboard
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            @else
                <a href="{{ route('login') }}" class="btn-hero btn-hero-primary">
                    Mulai Absensi 
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
                <a href="#fitur" class="btn-hero btn-hero-ghost">
                    Lihat Fitur
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
                </a>
            @endauth
        </div>
    </section>

    {{-- STATS STRIP --}}
    <div class="stats-strip">
        <div class="stat-item">
            <div class="stat-ico blue">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
            <div class="stat-num">99.9%</div>
            <div class="stat-lbl">Akurasi Data</div>
        </div>
        <div class="stat-item">
            <div class="stat-ico green">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            </div>
            <div class="stat-num">Real-time</div>
            <div class="stat-lbl">Pemantauan</div>
        </div>
        <div class="stat-item">
            <div class="stat-ico violet">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            </div>
            <div class="stat-num">GPS</div>
            <div class="stat-lbl">Verifikasi Lokasi</div>
        </div>
        <div class="stat-item">
            <div class="stat-ico orange">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
            </div>
            <div class="stat-num">Selfie</div>
            <div class="stat-lbl">Verifikasi Wajah</div>
        </div>
    </div>

    {{-- FEATURES --}}
    <section class="features" id="fitur">
        <span class="section-label">Fitur Unggulan</span>
        <h2 class="section-title">Semua yang kamu butuhkan</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-ico fi-blue">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                </div>
                <div class="feature-title">Verifikasi GPS</div>
                <div class="feature-desc">Pastikan karyawan absen dari lokasi yang benar dengan validasi koordinat GPS secara otomatis.</div>
            </div>
            <div class="feature-card">
                <div class="feature-ico fi-violet">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
                </div>
                <div class="feature-title">Selfie Otomatis</div>
                <div class="feature-desc">Foto wajah diambil langsung saat absen untuk memastikan kehadiran yang valid dan tidak bisa dimanipulasi.</div>
            </div>
            <div class="feature-card">
                <div class="feature-ico fi-green">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
                </div>
                <div class="feature-title">Laporan Real-time</div>
                <div class="feature-desc">Dashboard interaktif menampilkan rekap kehadiran, keterlambatan, dan izin secara langsung.</div>
            </div>
            <div class="feature-card">
                <div class="feature-ico fi-orange">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                </div>
                <div class="feature-title">Manajemen Jam Kerja</div>
                <div class="feature-desc">Atur jadwal shift, toleransi keterlambatan, dan jam lembur dengan konfigurasi yang fleksibel.</div>
            </div>
            <div class="feature-card">
                <div class="feature-ico fi-pink">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                </div>
                <div class="feature-title">Multi Jabatan</div>
                <div class="feature-desc">Kelola karyawan dari berbagai jabatan dan departemen dalam satu sistem yang terpusat.</div>
            </div>
            <div class="feature-card">
                <div class="feature-ico fi-amber">
                    <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                </div>
                <div class="feature-title">Rekap Bulanan</div>
                <div class="feature-desc">Generate laporan rekap kehadiran bulanan lengkap dengan export PDF langsung dari browser.</div>
            </div>
        </div>
    </section>

    {{-- CTA --}}
    <div class="cta-section">
        <div class="cta-orb cta-orb-1"></div>
        <div class="cta-orb cta-orb-2"></div>
        <div class="cta-title">Siap mulai kelola absensi<br>dengan lebih mudah?</div>
        <div class="cta-sub">Bergabung sekarang dan rasakan kemudahan absensi digital berbasis GPS & selfie.</div>
        @auth
            <a href="{{ url('/dashboard') }}" class="btn-cta">
                Buka Dashboard
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
        @else
            <a href="{{ route('login') }}" class="btn-cta">
                Mulai Sekarang
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
        @endauth
    </div>

    {{-- FOOTER --}}
    <footer>
        <div class="footer-brand">
            <div class="footer-logo">
                <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/>
                    <rect x="9" y="3" width="6" height="4" rx="1"/>
                    <path d="m9 12 2 2 4-4"/>
                </svg>
            </div>
            <span class="footer-name">Si<span>Absen</span></span>
        </div>
        <div class="footer-right">© {{ date('Y') }} SiAbsen — Built with Laravel {{ app()->version() }}</div>
    </footer>

</div>
</body>
</html>