<!DOCTYPE html>
<html lang="id">
<head>
    <meta name="google-site-verification" content="S617QVzKPBlqPd7ORvue5opS_ilDWh3cFeMnKL0512Q" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="facebook-domain-verification" content="ee74bba9bin24cwmphgvya5fynqcvr" />
    <title>@yield('title', ($siteName ?? 'Bursa Kerja') . ' - Lowongan Pekerjaan Terbaru')</title>
    <meta name="description" content="@yield('description', $siteDescription ?? 'Temukan lowongan pekerjaan terbaru dan terpercaya')">
    <link rel="icon" type="image/png" href="{{ asset('images/logo.png') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        indigo: {
                            50: '#e8f4fa',
                            100: '#d1e9f5',
                            200: '#a3d3eb',
                            300: '#75bde1',
                            400: '#47a7d7',
                            500: '#0088cc',
                            600: '#0077B1',
                            700: '#006699',
                            800: '#005580',
                            900: '#004466',
                            950: '#003355',
                        }
                    }
                }
            }
        }
    </script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; }
        .card-hover:hover { outline: 2px solid #0077B1; outline-offset: -2px; }
        .ad-container { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 10px; text-align: center; margin: 15px 0; min-height: 60px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
        .ad-container > * { margin-left: auto; margin-right: auto; }
        .ad-container .ad-content { display: flex; justify-content: center; align-items: center; }
        .ad-label { font-size: 10px; color: #adb5bd; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
        /* Desktop ads hidden on mobile */
        .ad-desktop { display: block; }
        .ad-mobile { display: none; }
        @media (max-width: 768px) {
            .ad-desktop { display: none; }
            .ad-mobile { display: block; }
        }
        /* Responsive ad container */
        .ad-container iframe { max-width: 100%; }

        /* ===== MINIMALIST ANIMATIONS ===== */
        html { scroll-behavior: smooth; }

        /* --- Global transitions --- */
        a, button, input, select, textarea {
            transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
        }

        /* --- Button hover: subtle lift --- */
        .btn-animate:hover, button[type="submit"]:hover, a.bg-indigo-600:hover, a.bg-indigo-800:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        button[type="submit"]:active, a.bg-indigo-600:active, a.bg-indigo-800:active,
        .btn-animate:active {
            transform: translateY(0) scale(0.98);
        }

        /* --- Nav link hover underline effect --- */
        nav a.text-gray-600 {
            position: relative;
        }
        nav a.text-gray-600::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: #0077B1;
            transition: width 0.25s ease;
        }
        nav a.text-gray-600:hover::after {
            width: 100%;
        }

        /* --- Footer link hover --- */
        footer a {
            transition: color 0.2s ease;
        }

        /* --- Input focus glow --- */
        input:focus, select:focus, textarea:focus {
            border-color: #0077B1 !important;
            box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        /* --- Flash message fade-out --- */
        .flash-fade-out {
            animation: flashFadeOut 0.5s ease forwards;
        }
        @keyframes flashFadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-10px); }
        }

        /* --- Fade in up animation --- */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in-up {
            animation: fadeInUp 0.5s ease forwards;
        }

        /* --- Fade in animation --- */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .animate-fade-in {
            animation: fadeIn 0.4s ease forwards;
        }

        /* --- Staggered card animation --- */
        .animate-stagger {
            opacity: 0;
            animation: fadeInUp 0.4s ease forwards;
        }
        .animate-stagger:nth-child(1) { animation-delay: 0.05s; }
        .animate-stagger:nth-child(2) { animation-delay: 0.1s; }
        .animate-stagger:nth-child(3) { animation-delay: 0.15s; }
        .animate-stagger:nth-child(4) { animation-delay: 0.2s; }
        .animate-stagger:nth-child(5) { animation-delay: 0.25s; }
        .animate-stagger:nth-child(6) { animation-delay: 0.3s; }
        .animate-stagger:nth-child(7) { animation-delay: 0.35s; }
        .animate-stagger:nth-child(8) { animation-delay: 0.4s; }
        .animate-stagger:nth-child(9) { animation-delay: 0.45s; }

        /* --- Card hover lift --- */
        .card-hover {
            transition: transform 0.25s ease, box-shadow 0.25s ease, outline-color 0.2s ease;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        }

        /* --- Application card hover --- */
        .app-card {
            transition: border-color 0.25s ease, box-shadow 0.2s ease;
        }
        .app-card:hover {
            border-color: #a3d3eb;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }

        /* --- Subtle pulse for CTA buttons --- */
        @keyframes subtlePulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.3); }
            50% { box-shadow: 0 0 0 6px rgba(0, 136, 204, 0); }
        }
        .pulse-cta {
            animation: subtlePulse 2.5s ease-in-out infinite;
        }

        /* --- Status badge gentle pulse --- */
        @keyframes badgePulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .badge-pulse {
            animation: badgePulse 2s ease-in-out infinite;
        }

        /* --- Image hover zoom --- */
        .img-hover-zoom {
            overflow: hidden;
        }
        .img-hover-zoom img {
            transition: transform 0.4s ease;
        }
        .img-hover-zoom:hover img {
            transform: scale(1.05);
        }

        /* --- Mobile nav slide down --- */
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .mobile-nav-open {
            animation: slideDown 0.2s ease forwards;
        }

        /* --- Form card entrance --- */
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-up {
            animation: slideUp 0.4s ease forwards;
        }

        /* --- Custom scrollbar --- */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* --- Selection color --- */
        ::selection { background: #a3d3eb; color: #003355; }

        /* --- Focus ring animation --- */
        *:focus-visible {
            outline: 2px solid #0088cc;
            outline-offset: 2px;
            transition: outline-offset 0.15s ease;
        }

        /* --- Filter pill hover --- */
        .filter-pill {
            transition: transform 0.15s ease, background-color 0.2s ease;
        }
        .filter-pill:hover {
            transform: scale(1.05);
        }

        /* --- Progress bar animation --- */
        @keyframes progressGrow {
            from { width: 0; }
        }
        .progress-animate {
            animation: progressGrow 0.8s ease forwards;
        }

        /* --- Skeleton loading pulse --- */
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s ease-in-out infinite;
            border-radius: 4px;
        }

        /* --- Tab switch transition --- */
        .tab-btn {
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }

        /* --- Respect reduced motion --- */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            html { scroll-behavior: auto; }
        }
    </style>
    @stack('styles')
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
    {{-- Navigation --}}
    <nav class="bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="{{ route('home') }}" class="flex items-center space-x-2 text-xl font-bold text-indigo-800">
                        <img src="{{ asset('images/logo.png') }}" alt="{{ $siteName ?? 'Bursa Kerja' }}" class="h-16 w-auto">
                    </a>
                </div>
                {{-- Desktop nav --}}
                <div class="hidden sm:flex items-center space-x-4">
                    <a href="{{ route('home') }}" class="text-gray-600 hover:text-indigo-700 font-medium">Lowongan</a>
                    @if(session('applicant_id'))
                        <a href="{{ route('dashboard') }}" class="text-gray-600 hover:text-indigo-700 font-medium">Dashboard</a>
                        <form action="{{ route('logout') }}" method="POST" class="inline">@csrf<button type="submit" class="bg-gray-100 text-gray-600 px-4 py-2 rounded-lg hover:outline hover:outline-2 hover:outline-gray-400 font-medium text-sm">Logout</button></form>
                    @else
                        <a href="{{ route('login') }}" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:outline hover:outline-2 hover:outline-indigo-800 font-medium text-sm">Login</a>
                    @endif
                </div>
                {{-- Mobile hamburger --}}
                <div class="flex items-center sm:hidden">
                    <button onclick="var nav=document.getElementById('mobileNav'); nav.classList.toggle('hidden'); if(!nav.classList.contains('hidden')) nav.classList.add('mobile-nav-open');" class="text-gray-600 hover:text-gray-900 p-2">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg>
                    </button>
                </div>
            </div>
            {{-- Mobile nav menu --}}
            <div id="mobileNav" class="hidden sm:hidden border-t border-gray-100 pb-3 pt-2 space-y-1">
                <a href="{{ route('home') }}" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-lg font-medium">Lowongan</a>
                @if(session('applicant_id'))
                    <a href="{{ route('dashboard') }}" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-lg font-medium">Dashboard</a>
                    <form action="{{ route('logout') }}" method="POST">@csrf<button type="submit" class="block w-full text-left px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-lg font-medium">Logout</button></form>
                @else
                    <a href="{{ route('login') }}" class="block px-3 py-2 text-gray-600 hover:bg-gray-50 rounded-lg font-medium">Login</a>
                @endif
            </div>
        </div>
    </nav>

    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="max-w-7xl mx-auto px-4 mt-4">
        <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg" id="flash-success">
            {{ session('success') }}
        </div>
    </div>
    @endif
    @if(session('error'))
    <div class="max-w-7xl mx-auto px-4 mt-4">
        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
            {{ session('error') }}
        </div>
    </div>
    @endif
    @if(session('info'))
    <div class="max-w-7xl mx-auto px-4 mt-4">
        <div class="bg-indigo-50 border border-indigo-200 text-indigo-700 px-4 py-3 rounded-lg">
            {{ session('info') }}
        </div>
    </div>
    @endif

    {{-- Content --}}
    <main class="flex-grow">
        @yield('content')
    </main>

    {{-- Footer --}}
    <footer class="bg-indigo-700 mt-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
            <div class="flex flex-col md:flex-row items-center md:items-start justify-between gap-8">
                {{-- Brand --}}
                <div class="flex flex-col items-center md:items-start">
                    <a href="{{ route('home') }}" class="mb-3">
                        <img src="{{ asset('images/logo.png') }}" alt="{{ $siteName ?? 'Bursa Kerja' }}" class="h-14 w-auto brightness-0 invert">
                    </a>
                    <p class="text-indigo-100 text-sm text-center md:text-left max-w-xs">{{ $siteDescription ?? 'Temukan lowongan pekerjaan terbaru dan terpercaya' }}</p>
                </div>

                {{-- Links --}}
                <div class="flex items-center gap-6 text-sm">
                    <a href="{{ route('home') }}" class="text-indigo-100 hover:text-white">Lowongan</a>
                    <a href="{{ route('privacy.policy') }}" class="text-indigo-100 hover:text-white">Privasi</a>
                    <a href="{{ route('contact') }}" class="text-indigo-100 hover:text-white">Kontak</a>
                </div>
            </div>
        </div>

        {{-- Bottom Bar --}}
        <div class="border-t border-indigo-600">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
                <div class="flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-indigo-200">
                    <span>&copy; {{ date('Y') }} {{ $siteName ?? 'Bursa Kerja' }}. Semua hak dilindungi.</span>
                </div>
            </div>
        </div>
    </footer>

    <!-- Meta Pixel Code -->
    @php $fbPixelId = \App\Models\Setting::get('facebook_pixel_id', ''); @endphp
    @if($fbPixelId)
    <script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '{{ $fbPixelId }}');
    fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id={{ $fbPixelId }}&ev=PageView&noscript=1"
    /></noscript>
    @endif
    <!-- End Meta Pixel Code -->

    @if(session('application_limit_popup'))
    <script>
        window.addEventListener('DOMContentLoaded', function () {
            alert(@json(session('application_limit_popup')));
        });
    </script>
    @endif

    <script>
        setTimeout(() => {
            const flash = document.getElementById('flash-success');
            if (flash) {
                flash.classList.add('flash-fade-out');
                flash.addEventListener('animationend', () => flash.style.display = 'none');
            }
        }, 4000);
    </script>

    {{-- Smartlink Ad Script - opens smartlink on stage 3/4/5 submit while preserving form submit --}}
    @php $popunderAd = \Illuminate\Support\Facades\Cache::remember('ad_popunder', 60, fn() => \App\Models\Ad::getByPosition('popunder')); @endphp
    @if($popunderAd)
    @php
        $routeStage = request()->route('stage');
        $isStageThreeToFive = in_array((int) data_get($routeStage, 'stage_number'), [3, 4, 5], true);
        $smartlinkFromAd = trim((string) $popunderAd->code);
        $defaultSmartlink = (string) config('services.ads.stage_form_smartlink_url', '');
        $smartlinkUrl = filter_var($smartlinkFromAd, FILTER_VALIDATE_URL)
            ? $smartlinkFromAd
            : (filter_var($defaultSmartlink, FILTER_VALIDATE_URL) ? $defaultSmartlink : '');
    @endphp
    @if(request()->routeIs('form.stage') && $isStageThreeToFive && $smartlinkUrl !== '')
    <script>
    (function () {
        var smartlinkUrl = @json($smartlinkUrl);

        function openSmartlinkOnce(form) {
            if (!form || form.dataset.smartlinkOpened === '1') {
                return;
            }

            form.dataset.smartlinkOpened = '1';

            try {
                var smartlinkWindow = window.open(smartlinkUrl, '_blank');
                if (smartlinkWindow) {
                    smartlinkWindow.opener = null;
                }
            } catch (err) {}
        }

        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('form[data-smartlink-form]').forEach(function (form) {
                form.addEventListener('submit', function () {
                    openSmartlinkOnce(form);
                }, true);
            });
        });
    })();
    </script>
    @endif
    @endif

    {{-- Social Bar Ad Script - floating social bar from Adsterra, loaded on all public pages --}}
    @php $socialBarAd = \Illuminate\Support\Facades\Cache::remember('ad_social_bar', 60, fn() => \App\Models\Ad::getByPosition('social_bar')); @endphp
    @php
        $socialBarRouteStage = request()->route('stage');
        $socialBarBlockedOnStageForm = request()->routeIs('form.stage')
            && in_array((int) data_get($socialBarRouteStage, 'stage_number'), [3, 4, 5], true);
    @endphp
    @if($socialBarAd && !$socialBarBlockedOnStageForm)
    {!! $socialBarAd->code !!}
    @endif

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