<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- Temel SEO --}}
    <title>@yield('title', 'Kariyer') — {{ \App\Models\SiteSetting::get('site_title', 'Markamama') }}</title>
    <meta name="description" content="@yield('description', 'Markamama kariyer fırsatları ve açık pozisyonlar')">
    <meta name="robots" content="index, follow">

    {{-- Favicon --}}
    @php $faviconPath = \App\Models\SiteSetting::get('site_favicon_path'); @endphp
    @if($faviconPath)
    <link rel="icon" type="image/x-icon" href="{{ Storage::url($faviconPath) }}">
    <link rel="shortcut icon" href="{{ Storage::url($faviconPath) }}">
    @else
    <link rel="icon" type="image/jpeg" href="{{ asset('images/markamama-M-kucuk.jpg') }}">
    <link rel="shortcut icon" href="{{ asset('images/markamama-M-kucuk.jpg') }}">
    @endif

    {{-- Canonical --}}
    <link rel="canonical" href="@yield('canonical', url()->current())">

    {{-- Open Graph --}}
    <meta property="og:type" content="@yield('og_type', 'website')">
    <meta property="og:title" content="@yield('og_title', \App\Models\SiteSetting::get('site_title', 'Markamama') . ' Kariyer')">
    <meta property="og:description" content="@yield('og_description', 'Markamama kariyer fırsatları ve açık pozisyonlar')">
    <meta property="og:url" content="@yield('canonical', url()->current())">
    <meta property="og:image" content="@yield('og_image', asset('images/og-default.png'))">
    <meta property="og:site_name" content="{{ \App\Models\SiteSetting::get('site_title', 'Markamama') }} Kariyer">
    <meta property="og:locale" content="tr_TR">

    {{-- Twitter Card --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="@yield('og_title', \App\Models\SiteSetting::get('site_title', 'Markamama') . ' Kariyer')">
    <meta name="twitter:description" content="@yield('og_description', 'Markamama kariyer fırsatları ve açık pozisyonlar')">
    <meta name="twitter:image" content="@yield('og_image', asset('images/og-default.png'))">

    {{-- JSON-LD (sayfa bazlı override için) --}}
    @yield('structured_data')

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        /* Buton olarak kullanılan linklerde underline olmasın */
        a.bg-primary, a.bg-orange-600, a.bg-gray-100, a.bg-blue-600,
        a.inline-flex, a.inline-block.bg-primary {
            text-decoration: none !important;
        }
        /* line-clamp yardımcıları */
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .line-clamp-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        /* Kart hover animasyonu */
        .job-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }
        .job-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px -6px rgba(0,0,0,0.12);
        }
        /* Hero dalgası */
        .hero-wave {
            display: block;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }
        /* Cursor düzeltmesi */
        * { cursor: default; }
        a, button, [role="button"], select,
        input[type="checkbox"], input[type="radio"],
        label, .cursor-pointer, [onclick],
        summary { cursor: pointer !important; }
        input[type="text"], input[type="email"],
        input[type="tel"], input[type="url"],
        input[type="number"], input[type="search"],
        input[type="password"], input[type="date"],
        textarea { cursor: text !important; }
        input[type="file"],
        input[type="color"],
        input[type="range"] { cursor: pointer !important; }

        /* Dept kart hover */
        .dept-card:hover .dept-icon {
            background-color: #ff7b00;
            color: white;
        }
        .dept-card:hover .dept-icon svg {
            color: white;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans antialiased">

    {{-- HEADER --}}
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">

                {{-- Logo --}}
                @php $logoPath = \App\Models\SiteSetting::get('site_logo_path'); @endphp
                <a href="{{ route('home') }}" class="flex items-center gap-2 flex-shrink-0">
                    @if($logoPath)
                    <img src="{{ Storage::url($logoPath) }}" alt="{{ \App\Models\SiteSetting::get('site_title', 'Markamama') }}" class="h-9 w-auto object-contain">
                    @else
                    <img src="{{ asset('images/markamama-M-kucuk.jpg') }}" alt="Markamama" class="h-9 w-auto object-contain">
                    @endif
                    <span class="text-gray-300 font-light text-lg hidden sm:inline">|</span>
                    <span class="text-gray-500 font-medium text-sm sm:text-base hidden sm:inline">Kariyer</span>
                </a>

                {{-- Desktop Nav --}}
                <nav class="hidden md:flex items-center space-x-1">
                    <a href="https://www.markamama.com.tr" target="_blank" rel="noopener"
                       class="ml-2 inline-flex items-center gap-1.5 bg-primary text-white text-sm font-medium px-4 py-2 rounded-lg hover:bg-orange-600 transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                        Ana Site
                    </a>
                </nav>

                {{-- Mobil hamburger --}}
                <button id="mobileMenuBtn" type="button"
                        class="md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors"
                        aria-label="Menüyü aç/kapat" aria-expanded="false">
                    <svg id="menuIconOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                    <svg id="menuIconClose" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>

        {{-- Mobil Menü --}}
        <div id="mobileMenu" class="hidden md:hidden border-t border-gray-100 bg-white shadow-lg">
            <div class="max-w-6xl mx-auto px-4 py-3 space-y-1">
                <div class="pt-1 pb-1">
                    <a href="https://www.markamama.com.tr" target="_blank" rel="noopener"
                       class="block px-3 py-2.5 rounded-lg text-sm font-medium text-white bg-primary hover:bg-orange-600 transition-colors text-center">
                        Ana Siteye Git →
                    </a>
                </div>
            </div>
        </div>
    </header>

    {{-- Flash Mesajları --}}
    @if(session('success'))
    <div class="bg-green-50 border-b border-green-200 px-4 py-3 text-center text-sm text-green-700 font-medium flex items-center justify-center gap-2">
        <svg class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
        {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="bg-red-50 border-b border-red-200 px-4 py-3 text-center text-sm text-red-700 font-medium flex items-center justify-center gap-2">
        <svg class="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
        {{ session('error') }}
    </div>
    @endif

    {{-- MAIN --}}
    <main>
        @yield('content')
    </main>

    {{-- FOOTER --}}
    @php
        $footerSettings = \App\Models\JobFormSettings::getOrCreate();
        $contactEmail   = \App\Models\SiteSetting::get('contact_email');
    @endphp
    <footer class="bg-gray-900 text-gray-300">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">

                {{-- Marka --}}
                <div class="sm:col-span-2 lg:col-span-1">
                    <div class="flex items-center gap-2 mb-3">
                        @if($logoPath)
                        <img src="{{ Storage::url($logoPath) }}" alt="{{ \App\Models\SiteSetting::get('site_title', 'Markamama') }}" class="h-8 w-auto object-contain brightness-0 invert">
                        @else
                        <img src="{{ asset('images/markamama-M-kucuk.jpg') }}" alt="Markamama" class="h-8 w-auto object-contain">
                        @endif
                        <span class="text-gray-600 text-sm font-medium">Kariyer</span>
                    </div>
                    <p class="text-sm text-gray-400 leading-relaxed">
                        Markamama ailesine katılmak için doğru adrestesiniz.
                        Açık pozisyonlarımızı inceleyin ve başvurun.
                    </p>
                    {{-- Sosyal Medya --}}
                    @if($footerSettings->social_instagram || $footerSettings->social_linkedin || $footerSettings->social_twitter || $footerSettings->social_youtube || $footerSettings->social_facebook)
                    <div class="flex items-center gap-2 mt-4">
                        @if($footerSettings->social_instagram)
                        <a href="{{ $footerSettings->social_instagram }}" target="_blank" rel="noopener"
                           class="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-primary transition-colors" aria-label="Instagram">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                        </a>
                        @endif
                        @if($footerSettings->social_linkedin)
                        <a href="{{ $footerSettings->social_linkedin }}" target="_blank" rel="noopener"
                           class="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-primary transition-colors" aria-label="LinkedIn">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        </a>
                        @endif
                        @if($footerSettings->social_twitter)
                        <a href="{{ $footerSettings->social_twitter }}" target="_blank" rel="noopener"
                           class="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-primary transition-colors" aria-label="Twitter/X">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                        </a>
                        @endif
                        @if($footerSettings->social_youtube)
                        <a href="{{ $footerSettings->social_youtube }}" target="_blank" rel="noopener"
                           class="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-primary transition-colors" aria-label="YouTube">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
                        </a>
                        @endif
                        @if($footerSettings->social_facebook)
                        <a href="{{ $footerSettings->social_facebook }}" target="_blank" rel="noopener"
                           class="w-9 h-9 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-primary transition-colors" aria-label="Facebook">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                        </a>
                        @endif
                    </div>
                    @endif
                </div>

                {{-- Hızlı Bağlantılar --}}
                <div>
                    <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wide">Hızlı Bağlantılar</h4>
                    <ul class="space-y-2.5 text-sm">
                        <li><a href="{{ route('home') }}" class="hover:text-primary transition-colors">Açık Pozisyonlar</a></li>
                        <li><a href="{{ route('home') }}#departmanlar" class="hover:text-primary transition-colors">Departmanlar</a></li>
                        <li><a href="https://www.markamama.com.tr" target="_blank" rel="noopener" class="hover:text-primary transition-colors">markamama.com.tr</a></li>
                    </ul>
                </div>

                {{-- Yasal --}}
                <div>
                    <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wide">Yasal</h4>
                    <ul class="space-y-2.5 text-sm">
                        <li><a href="{{ route('kvkk') }}" class="hover:text-primary transition-colors">KVKK Aydınlatma Metni</a></li>
                        <li><a href="{{ route('kvkk') }}" class="hover:text-primary transition-colors">Gizlilik Politikası</a></li>
                    </ul>
                </div>

                {{-- İletişim --}}
                <div>
                    <h4 class="text-white font-semibold mb-4 text-sm uppercase tracking-wide">İletişim</h4>
                    <ul class="space-y-2.5 text-sm">
                        @if($contactEmail)
                        <li>
                            <a href="mailto:{{ $contactEmail }}" class="hover:text-primary transition-colors flex items-center gap-2">
                                <svg class="w-4 h-4 flex-shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                {{ $contactEmail }}
                            </a>
                        </li>
                        @endif
                        @if($footerSettings->company_phone)
                        <li>
                            <a href="tel:{{ $footerSettings->company_phone }}" class="hover:text-primary transition-colors flex items-center gap-2">
                                <svg class="w-4 h-4 flex-shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                                {{ $footerSettings->company_phone }}
                            </a>
                        </li>
                        @endif
                        @if($footerSettings->company_address)
                        <li class="flex items-start gap-2 text-gray-400">
                            <svg class="w-4 h-4 flex-shrink-0 mt-0.5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            <span>{{ $footerSettings->company_address }}</span>
                        </li>
                        @endif
                    </ul>
                </div>

            </div>

            <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-sm text-gray-500">
                <span>© {{ date('Y') }} {{ $footerSettings->company_name ?? 'Markamama' }}. Tüm hakları saklıdır.</span>
                <a href="{{ route('kvkk') }}" class="hover:text-primary transition-colors">KVKK & Gizlilik</a>
            </div>
        </div>
    </footer>

    {{-- Mobil Menü JS --}}
    <script nonce="{{ app('csp-nonce') }}">
    (function() {
        var btn  = document.getElementById('mobileMenuBtn');
        var menu = document.getElementById('mobileMenu');
        var iconOpen  = document.getElementById('menuIconOpen');
        var iconClose = document.getElementById('menuIconClose');
        if (!btn || !menu) return;
        btn.addEventListener('click', function() {
            var isOpen = !menu.classList.contains('hidden');
            menu.classList.toggle('hidden', isOpen);
            iconOpen.classList.toggle('hidden', !isOpen);
            iconClose.classList.toggle('hidden', isOpen);
            btn.setAttribute('aria-expanded', String(!isOpen));
        });
        document.addEventListener('click', function(e) {
            if (!btn.contains(e.target) && !menu.contains(e.target)) {
                menu.classList.add('hidden');
                iconOpen.classList.remove('hidden');
                iconClose.classList.add('hidden');
                btn.setAttribute('aria-expanded', 'false');
            }
        });
    })();
    </script>

</body>
</html>