<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', config('hrms.company', 'Synergy HRM')) — @yield('subtitle', 'Powering People & Business')</title>
    <meta name="description" content="@yield('meta-description', 'The complete HR management platform. Payroll, performance, attendance, leave, and training — unified.')">

    {{-- Same CDN stack as app.blade.php for consistency --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">

    {{-- Splash-specific display fonts (Syne bold + DM Sans body) --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">

@php
    /*
     * Brand tokens — identical naming convention to app.blade.php's theme system.
     * The splash layout reads from the same config/hrms.php and config/themes.php
     * so the default brand colours stay in sync with the authenticated app.
     */
    $defaultTheme = config('themes.navy', []);
    $brandPrimary = $defaultTheme['primary'] ?? '#0e2a47';
    $brandAccent  = $defaultTheme['accent']  ?? '#163a5f';
    $brandGold    = $defaultTheme['gold']    ?? '#2cb5a0';   // teal used as brand accent on splash
    $company      = config('hrms.company', 'Synergy HRM');
    $companyCode  = config('hrms.company_code', 'HR');
@endphp

<style>
    /* ── Shared brand tokens (same var names as app.blade.php) ────────────── */
    :root {
        --brand-primary: {{ $brandPrimary }};
        --brand-accent:  {{ $brandAccent }};
        --brand-teal:    #2cb5a0;
        --brand-teal2:   #1d9080;
        --brand-teal3:   #e0f5f2;
        --brand-ink:     #0b1f35;
        --brand-muted:   #637282;
        --brand-sand:    #f7f5f0;
        --brand-border:  rgba(14,42,71,.1);
    }

    /* ── Reset & base ─────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
        font-family: 'DM Sans', sans-serif;
        background: #fff;
        color: var(--brand-ink);
        overflow-x: hidden;
        cursor: none;
    }

    /* ── Custom cursor ────────────────────────────────────────────────────── */
    .splash-cursor {
        position: fixed; pointer-events: none; z-index: 9999;
        width: 10px; height: 10px; border-radius: 50%;
        background: var(--brand-teal);
        transform: translate(-50%, -50%);
        transition: width .22s, height .22s;
    }
    .splash-cursor-ring {
        position: fixed; pointer-events: none; z-index: 9998;
        width: 36px; height: 36px; border-radius: 50%;
        border: 1.5px solid rgba(44,181,160,.5);
        transform: translate(-50%, -50%);
        transition: width .28s, height .28s, border-color .25s;
    }

    /* ── Splash nav ───────────────────────────────────────────────────────── */
    .splash-nav {
        position: fixed; top: 0; left: 0; right: 0; z-index: 500;
        display: flex; align-items: center; justify-content: space-between;
        padding: 1.4rem 5vw;
        transition: background .35s, backdrop-filter .35s, padding .3s, box-shadow .35s;
    }
    .splash-nav.stuck {
        background: rgba(11,31,53,.94);
        backdrop-filter: blur(18px);
        padding: 1rem 5vw;
        box-shadow: 0 4px 30px rgba(0,0,0,.22);
    }
    .splash-brand {
        display: flex; align-items: center; gap: .7rem;
        text-decoration: none;
    }
    .splash-brand-gem {
        width: 36px; height: 36px; border-radius: 9px;
        background: linear-gradient(135deg, var(--brand-teal), var(--brand-primary));
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 14px rgba(44,181,160,.4);
        font-family: 'Syne', sans-serif; font-weight: 800;
        font-size: .82rem; color: #fff; letter-spacing: -.01em;
    }
    .splash-brand-name {
        font-family: 'Syne', sans-serif; font-weight: 800;
        font-size: 1.05rem; color: #fff; letter-spacing: -.01em;
    }
    .splash-brand-name em { color: var(--brand-teal); font-style: normal; }
    .splash-nav-links {
        display: flex; align-items: center; gap: 2.5rem; list-style: none;
    }
    .splash-nav-links a {
        color: rgba(255,255,255,.65); font-size: .82rem; font-weight: 500;
        text-decoration: none; letter-spacing: .04em; text-transform: uppercase;
        transition: color .2s;
    }
    .splash-nav-links a:hover { color: var(--brand-teal); }
    .splash-nav-cta {
        background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal2));
        color: #fff !important; padding: .48rem 1.35rem; border-radius: 6px;
        box-shadow: 0 4px 16px rgba(44,181,160,.35);
        transition: all .25s !important;
    }
    .splash-nav-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(44,181,160,.5) !important;
    }

    /* ── Page wrapper ─────────────────────────────────────────────────────── */
    .splash-body { min-height: 100vh; }

    /* ── Shared section primitives ────────────────────────────────────────── */
    .s-label {
        font-size: .7rem; font-weight: 700; letter-spacing: .28em;
        text-transform: uppercase; color: var(--brand-teal); margin-bottom: .6rem;
    }
    .s-h2 {
        font-family: 'Syne', sans-serif; font-weight: 800;
        font-size: clamp(2rem, 4vw, 3.4rem);
        color: var(--brand-ink); line-height: 1.05; letter-spacing: -.025em;
        margin-bottom: .75rem;
    }
    .s-h2 em { font-style: normal; color: var(--brand-teal); }
    .s-desc {
        font-size: 1rem; color: var(--brand-muted);
        line-height: 1.75; max-width: 520px;
        margin-bottom: 3.5rem; font-weight: 300;
    }

    /* ── Scroll reveal (same pattern as app dashboards) ──────────────────── */
    .r { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
    .r.on { opacity: 1; transform: translateY(0); }
    .r1 { transition-delay: .08s; } .r2 { transition-delay: .16s; }
    .r3 { transition-delay: .24s; } .r4 { transition-delay: .32s; }
    .r5 { transition-delay: .40s; } .r6 { transition-delay: .48s; }

    /* ── Buttons ──────────────────────────────────────────────────────────── */
    .btn-splash-primary {
        display: inline-flex; align-items: center; gap: .6rem;
        background: linear-gradient(135deg, var(--brand-teal), var(--brand-teal2));
        color: #fff; font-family: 'Syne', sans-serif; font-weight: 700;
        font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
        padding: .85rem 2.2rem; border-radius: 6px;
        text-decoration: none; border: none; cursor: pointer;
        box-shadow: 0 8px 28px rgba(44,181,160,.38);
        transition: all .25s;
    }
    .btn-splash-primary:hover, .btn-splash-primary:focus {
        transform: translateY(-3px); color: #fff;
        box-shadow: 0 16px 40px rgba(44,181,160,.52);
    }
    .btn-splash-ghost {
        display: inline-flex; align-items: center; gap: .6rem;
        background: transparent; color: rgba(255,255,255,.8);
        font-family: 'Syne', sans-serif; font-weight: 700;
        font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
        padding: .85rem 2.2rem; border-radius: 6px;
        text-decoration: none; border: 1.5px solid rgba(255,255,255,.25);
        cursor: pointer; transition: all .25s;
    }
    .btn-splash-ghost:hover {
        background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.55);
        color: #fff; transform: translateY(-2px);
    }

    /* ── Footer ───────────────────────────────────────────────────────────── */
    .splash-footer {
        background: linear-gradient(135deg, var(--brand-ink) 0%, #06172a 100%);
        padding: 2.5rem 5vw;
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 1rem;
    }
    .splash-footer-brand {
        font-family: 'Syne', sans-serif; font-weight: 800;
        font-size: 1.1rem; color: #fff;
    }
    .splash-footer-brand span { color: var(--brand-teal); }
    .splash-footer-links { display: flex; gap: 2rem; list-style: none; }
    .splash-footer-links a {
        font-size: .75rem; color: rgba(255,255,255,.4);
        text-decoration: none; font-weight: 500; letter-spacing: .04em;
        transition: color .2s;
    }
    .splash-footer-links a:hover { color: var(--brand-teal); }
    .splash-footer-copy { font-size: .72rem; color: rgba(255,255,255,.25); }

    /* ── Mobile ───────────────────────────────────────────────────────────── */
    @media (max-width: 768px) {
        .splash-nav-links { display: none; }
        .splash-footer { flex-direction: column; align-items: flex-start; }
    }
</style>

@stack('styles')
</head>
<body>

{{-- Custom cursor (same micro-interaction as the standalone splash) --}}
<div class="splash-cursor"  id="splashCursor"></div>
<div class="splash-cursor-ring" id="splashCursorRing"></div>

{{-- ── Navigation ────────────────────────────────────────────────────────── --}}
<nav class="splash-nav" id="splashNav">
    <a href="{{ route('welcome') }}" class="splash-brand">
        <div class="splash-brand-gem">
            {{ strtoupper(substr($companyCode, 0, 2)) }}
        </div>
        <span class="splash-brand-name">
            {{ strtoupper($company) }}
        </span>
    </a>
    <ul class="splash-nav-links">
        @yield('nav-links',
            '<li><a href="#features">Features</a></li>
             <li><a href="#roles">Roles</a></li>
             <li><a href="#contact">Contact</a></li>
             <li><a href="' . route('login') . '" class="splash-nav-cta">Sign In</a></li>')
    </ul>
</nav>

{{-- ── Page content ──────────────────────────────────────────────────────── --}}
<main class="splash-body">
    @yield('content')
</main>

{{-- ── Footer ─────────────────────────────────────────────────────────────── --}}
<footer class="splash-footer">
    <div>
        <div class="splash-footer-brand">
            {{ strtoupper($company) }}
        </div>
        <div style="font-size:.72rem;color:rgba(255,255,255,.3);margin-top:.25rem;">
            @yield('footer-tagline', 'Powering People &amp; Business')
        </div>
    </div>
    <ul class="splash-footer-links">
        @yield('footer-links',
            '<li><a href="#features">Features</a></li>
             <li><a href="#roles">Roles</a></li>
             <li><a href="#contact">Contact</a></li>
             <li><a href="' . route('login') . '">Sign In</a></li>')
    </ul>
    <div class="splash-footer-copy">&copy; {{ date('Y') }} {{ $company }}. All rights reserved.</div>
</footer>

{{-- ── Scripts (Bootstrap JS shared with app.blade.php) ─────────────────── --}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
// ── Custom cursor ──────────────────────────────────────────────────────────
(function () {
    const dot  = document.getElementById('splashCursor');
    const ring = document.getElementById('splashCursorRing');
    if (!dot || !ring) return;
    let mx = 0, my = 0, rx = 0, ry = 0;
    document.addEventListener('mousemove', e => {
        mx = e.clientX; my = e.clientY;
        dot.style.left = mx + 'px'; dot.style.top = my + 'px';
    });
    (function loop() {
        rx += (mx - rx) * .14; ry += (my - ry) * .14;
        ring.style.left = rx + 'px'; ring.style.top = ry + 'px';
        requestAnimationFrame(loop);
    })();
    document.querySelectorAll('a, button').forEach(el => {
        el.addEventListener('mouseenter', () => {
            dot.style.width = '6px'; dot.style.height = '6px';
            ring.style.width = '50px'; ring.style.height = '50px';
            ring.style.borderColor = 'rgba(44,181,160,.8)';
        });
        el.addEventListener('mouseleave', () => {
            dot.style.width = '10px'; dot.style.height = '10px';
            ring.style.width = '36px'; ring.style.height = '36px';
            ring.style.borderColor = 'rgba(44,181,160,.5)';
        });
    });
})();

// ── Sticky nav ─────────────────────────────────────────────────────────────
window.addEventListener('scroll', () => {
    document.getElementById('splashNav').classList.toggle('stuck', window.scrollY > 72);
});

// ── Scroll reveal (same IntersectionObserver as dashboard views) ───────────
(function () {
    const obs = new IntersectionObserver(entries => {
        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('on'); obs.unobserve(e.target); } });
    }, { threshold: 0.1 });
    document.querySelectorAll('.r').forEach(el => obs.observe(el));
})();
</script>

@stack('scripts')
</body>
</html>
