@extends('layouts.public')

@section('title', 'Açık Pozisyonlar')
@section('description', 'Markamama\'da kariyer fırsatları. Açık pozisyonlarımızı inceleyin ve başvurun.')
@section('canonical', route('home'))
@section('og_title', 'Markamama Kariyer — Açık Pozisyonlar')
@section('og_description', 'Markamama\'da kariyer fırsatları. Açık pozisyonlarımızı inceleyin ve başvurun.')

@section('content')

@php
    $heroTitle      = \App\Models\SiteSetting::get('site_title', 'Markamama') . ' Ailesine Katılın';
    $bannerEnabled  = \App\Models\SiteSetting::isEnabled('banner_enabled');
    $bannerTitle    = \App\Models\SiteSetting::get('banner_title');
    $bannerSubtitle = \App\Models\SiteSetting::get('banner_subtitle');
    $bannerBtnText  = \App\Models\SiteSetting::get('banner_button_text', 'Pozisyonları Gör');
    $bannerBtnUrl   = \App\Models\SiteSetting::get('banner_button_url', '#ilanlar');
    $bannerBgColor  = \App\Models\SiteSetting::get('banner_bg_color', '#ff7b00');
@endphp

{{-- ═══════════════════════════════════════════
     HERO
═══════════════════════════════════════════ --}}
<section class="relative overflow-hidden" style="background: linear-gradient(135deg, #ff7b00 0%, #e06000 60%, #c45200 100%);">

    {{-- Dekoratif daireler --}}
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
        <div class="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-10" style="background: rgba(255,255,255,0.3);"></div>
        <div class="absolute top-1/2 -left-16 w-64 h-64 rounded-full opacity-10" style="background: rgba(255,255,255,0.2);"></div>
        <div class="absolute -bottom-12 right-1/3 w-48 h-48 rounded-full opacity-10" style="background: rgba(255,255,255,0.15);"></div>
    </div>

    <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-14 pb-20 sm:pt-20 sm:pb-28 text-center">

        {{-- Üst rozet --}}
        <div class="inline-flex items-center gap-2 bg-white/15 backdrop-blur-sm text-white text-xs font-semibold px-4 py-1.5 rounded-full mb-6 border border-white/20">
            <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
            Aktif İşe Alım Süreci
        </div>

        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-5 leading-tight tracking-tight">
            {{ $heroTitle }}
        </h1>
        <p class="text-base sm:text-lg md:text-xl text-orange-100 max-w-2xl mx-auto mb-10 leading-relaxed">
            Türkiye'nin sevilen pet shop markasında kariyer yapın. Tutkulu, dinamik ve büyüyen ekibimizin bir parçası olun.
        </p>

        {{-- Departman chip'leri --}}
        @if($activeDepartments->isNotEmpty())
        <div class="flex flex-wrap justify-center gap-2 mb-8 max-w-3xl mx-auto">
            @foreach($activeDepartments->take(6) as $dept)
            <a href="{{ route('department.show', $dept->slug) }}"
               class="inline-flex items-center gap-1.5 bg-white/15 backdrop-blur-sm border border-white/25 text-white text-xs font-semibold px-4 py-2 rounded-full hover:bg-white/25 transition-all duration-200">
                {{ $dept->name }}
            </a>
            @endforeach
            @if($activeDepartments->count() > 6)
            <a href="#departmanlar"
               class="inline-flex items-center gap-1 bg-white/10 border border-white/20 text-white/80 text-xs px-3 py-2 rounded-full hover:bg-white/20 transition-all">
                +{{ $activeDepartments->count() - 6 }} daha
            </a>
            @endif
        </div>
        @endif

        {{-- CTA Butonu --}}
        <div class="mb-10">
            <a href="#ilanlar"
               class="inline-flex items-center gap-2 bg-white text-orange-600 font-bold px-8 py-4 rounded-2xl hover:bg-orange-50 transition-all duration-200 shadow-2xl text-sm">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                Açık Pozisyonları Gör
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </a>
        </div>

        {{-- İstatistik kutucukları --}}
        <div class="flex flex-wrap justify-center gap-3 sm:gap-4">
            <div class="flex items-center gap-2.5 bg-white/15 backdrop-blur-sm border border-white/20 text-white px-4 py-2.5 rounded-xl">
                <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd"/><path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"/></svg>
                </div>
                <div class="text-left">
                    <div class="text-lg font-bold leading-none">{{ $jobs->count() }}</div>
                    <div class="text-xs text-orange-200 mt-0.5">Açık Pozisyon</div>
                </div>
            </div>
            <div class="flex items-center gap-2.5 bg-white/15 backdrop-blur-sm border border-white/20 text-white px-4 py-2.5 rounded-xl">
                <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"/></svg>
                </div>
                <div class="text-left">
                    <div class="text-lg font-bold leading-none">{{ $activeDepartments->count() }}</div>
                    <div class="text-xs text-orange-200 mt-0.5">Departman</div>
                </div>
            </div>
            <div class="flex items-center gap-2.5 bg-white/15 backdrop-blur-sm border border-white/20 text-white px-4 py-2.5 rounded-xl">
                <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"/></svg>
                </div>
                <div class="text-left">
                    <div class="text-sm font-bold leading-none">Pet Dostu</div>
                    <div class="text-xs text-orange-200 mt-0.5">Çalışma Ortamı</div>
                </div>
            </div>
            <div class="flex items-center gap-2.5 bg-white/15 backdrop-blur-sm border border-white/20 text-white px-4 py-2.5 rounded-xl">
                <div class="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                </div>
                <div class="text-left">
                    <div class="text-sm font-bold leading-none">Kariyer</div>
                    <div class="text-xs text-orange-200 mt-0.5">Gelişim İmkânı</div>
                </div>
            </div>
        </div>
    </div>

    {{-- Dalgalı alt kenar --}}
    <div class="hero-wave absolute bottom-0 left-0 right-0" aria-hidden="true">
        <svg viewBox="0 0 1440 48" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" style="display:block;width:100%;height:48px;">
            <path d="M0 48L60 42.7C120 37.3 240 26.7 360 24C480 21.3 600 26.7 720 29.3C840 32 960 32 1080 29.3C1200 26.7 1320 21.3 1380 18.7L1440 16V48H1380C1320 48 1200 48 1080 48C960 48 840 48 720 48C600 48 480 48 360 48C240 48 120 48 60 48H0Z" fill="#f9fafb"/>
        </svg>
    </div>
</section>

{{-- ═══════════════════════════════════════════
     BANNER (admin panelinden yönetilir)
═══════════════════════════════════════════ --}}
@if($bannerEnabled && $bannerTitle)
<section style="background-color: {{ $bannerBgColor }};" class="text-white py-5 sm:py-6">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-center sm:text-left">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L8.763 6H5a3 3 0 000 6h.28l1.771 5.316A1 1 0 008 18h1a1 1 0 001-1v-4.382l6.553 3.276A1 1 0 0018 15V3z" clip-rule="evenodd"/></svg>
            </div>
            <div>
                <h2 class="text-base sm:text-lg font-bold">{{ $bannerTitle }}</h2>
                @if($bannerSubtitle)
                <p class="text-white/80 text-xs sm:text-sm mt-0.5">{{ $bannerSubtitle }}</p>
                @endif
            </div>
        </div>
        @if($bannerBtnText)
        <a href="{{ $bannerBtnUrl }}"
           class="flex-shrink-0 bg-white text-gray-800 font-semibold px-5 py-2 rounded-xl hover:bg-gray-100 transition-colors text-sm shadow">
            {{ $bannerBtnText }} →
        </a>
        @endif
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════
     FİLTRE ÇUBUĞU
═══════════════════════════════════════════ --}}
<div id="ilanlar" class="bg-white border-y border-gray-200 shadow-sm">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-4">

        {{-- Başlık + Mobil toggle --}}
        <div class="flex items-center justify-between mb-3 sm:mb-0">
            <div class="flex items-center gap-2">
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
                <span class="text-sm font-semibold text-gray-700">
                    Filtrele
                    @if(request()->hasAny(['search', 'department', 'location', 'employment_type']))
                    <span class="ml-1 inline-flex items-center justify-center w-5 h-5 bg-primary text-white text-xs rounded-full font-bold">
                        {{ collect(['search', 'department', 'location', 'employment_type'])->filter(fn($k) => request($k))->count() }}
                    </span>
                    @endif
                </span>
            </div>
            <button id="filterToggleBtn" type="button"
                    class="sm:hidden flex items-center gap-1.5 text-xs text-gray-500 bg-gray-100 px-3 py-1.5 rounded-lg hover:bg-gray-200 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="M19 9l-7 7-7-7"/></svg>
                Göster
            </button>
        </div>

        {{-- Aktif filtre uyarısı --}}
        @if(request()->hasAny(['department', 'location', 'employment_type']))
        <div class="flex items-center gap-2 bg-orange-50 border border-orange-200 rounded-xl px-4 py-2.5 mb-3 text-sm text-orange-700 font-medium">
            <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
            <span>Filtre aktif:
                @if(request('department'))<strong>{{ request('department') }}</strong>@endif
                @if(request('location')) · <strong>{{ request('location') }}</strong>@endif
                @if(request('employment_type')) · <strong>{{ request('employment_type') }}</strong>@endif
            </span>
            <a href="{{ route('home') }}" class="ml-auto flex items-center gap-1 text-orange-600 hover:text-orange-800 font-semibold text-xs cursor-pointer">
                <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="M6 18L18 6M6 6l12 12"/></svg>
                Temizle
            </a>
        </div>
        @endif

        <form method="GET" action="{{ route('home') }}" id="filterForm">
            @if(request('search'))
            <input type="hidden" name="search" value="{{ request('search') }}">
            @endif

            <div id="filterPanel" class="hidden sm:flex flex-wrap gap-3 items-end sm:mt-3">
                @if($departments->isNotEmpty())
                <div class="flex-1 min-w-[150px]">
                    <label class="block text-xs font-semibold mb-1.5 uppercase tracking-wide {{ request('department') ? 'text-orange-600' : 'text-gray-500' }}">
                        Departman
                        @if(request('department'))<span class="ml-1 text-orange-500">●</span>@endif
                    </label>
                    <select name="department" id="filterDepartment"
                            class="w-full rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent shadow-sm cursor-pointer
                                   {{ request('department') ? 'border-2 border-orange-400 bg-orange-50 text-orange-800 font-semibold' : 'border border-gray-200 bg-white text-gray-700' }}">
                        <option value="">Tüm Departmanlar</option>
                        @foreach($departments as $dept)
                            <option value="{{ $dept }}" {{ request('department') == $dept ? 'selected' : '' }}>{{ $dept }}</option>
                        @endforeach
                    </select>
                </div>
                @endif

                @if($locations->isNotEmpty())
                <div class="flex-1 min-w-[150px]">
                    <label class="block text-xs font-semibold mb-1.5 uppercase tracking-wide {{ request('location') ? 'text-orange-600' : 'text-gray-500' }}">
                        Lokasyon
                        @if(request('location'))<span class="ml-1 text-orange-500">●</span>@endif
                    </label>
                    <select name="location" id="filterLocation"
                            class="w-full rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent shadow-sm cursor-pointer
                                   {{ request('location') ? 'border-2 border-orange-400 bg-orange-50 text-orange-800 font-semibold' : 'border border-gray-200 bg-white text-gray-700' }}">
                        <option value="">Tüm Lokasyonlar</option>
                        @foreach($locations as $loc)
                            <option value="{{ $loc }}" {{ request('location') == $loc ? 'selected' : '' }}>{{ $loc }}</option>
                        @endforeach
                    </select>
                </div>
                @endif

                @if($employmentTypes->isNotEmpty())
                <div class="flex-1 min-w-[150px]">
                    <label class="block text-xs font-semibold mb-1.5 uppercase tracking-wide {{ request('employment_type') ? 'text-orange-600' : 'text-gray-500' }}">
                        Çalışma Şekli
                        @if(request('employment_type'))<span class="ml-1 text-orange-500">●</span>@endif
                    </label>
                    <select name="employment_type" id="filterEmploymentType"
                            class="w-full rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-orange-400 focus:border-transparent shadow-sm cursor-pointer
                                   {{ request('employment_type') ? 'border-2 border-orange-400 bg-orange-50 text-orange-800 font-semibold' : 'border border-gray-200 bg-white text-gray-700' }}">
                        <option value="">Tüm Türler</option>
                        @foreach($employmentTypes as $type)
                            <option value="{{ $type }}" {{ request('employment_type') == $type ? 'selected' : '' }}>{{ $type }}</option>
                        @endforeach
                    </select>
                </div>
                @endif

                <div class="flex items-end gap-2">
                    <button type="submit"
                            class="bg-primary text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:bg-orange-600 transition-colors shadow-sm cursor-pointer">
                        Uygula
                    </button>
                    @if(request()->hasAny(['department', 'location', 'employment_type', 'search']))
                    <a href="{{ route('home') }}"
                       class="inline-flex items-center gap-1 text-gray-400 hover:text-gray-600 text-sm py-2.5 px-2 hover:bg-gray-100 rounded-xl transition-colors cursor-pointer">
                        <svg class="w-4 h-4" 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>
                        Temizle
                    </a>
                    @endif
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ═══════════════════════════════════════════
     İLAN LİSTESİ
═══════════════════════════════════════════ --}}
<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">

    {{-- Sonuç başlığı --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            @if(request('search'))
            <p class="text-sm text-gray-500">
                "<strong class="text-gray-800">{{ request('search') }}</strong>" için
                <strong class="text-gray-800">{{ $jobs->count() }}</strong> sonuç
            </p>
            @elseif($jobs->isNotEmpty())
            <p class="text-sm text-gray-500">
                <strong class="text-gray-800">{{ $jobs->count() }}</strong> açık pozisyon bulundu
            </p>
            @endif
        </div>
        @if(request('search'))
        <a href="{{ route('home') }}" class="text-xs text-primary hover:underline flex items-center gap-1">
            <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="M6 18L18 6M6 6l12 12"/></svg>
            Aramayı temizle
        </a>
        @endif
    </div>

    @if($jobs->isEmpty())
    {{-- Boş durum --}}
    <div class="text-center py-16 sm:py-24">
        <div class="w-24 h-24 bg-orange-50 rounded-full flex items-center justify-center mx-auto mb-5">
            <svg class="w-12 h-12 text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
            </svg>
        </div>
        <h3 class="text-xl font-bold text-gray-700 mb-2">
            @if(request()->hasAny(['search', 'department', 'location', 'employment_type']))
                Arama kriterlerinize uygun pozisyon bulunamadı
            @else
                Şu an açık pozisyon bulunmuyor
            @endif
        </h3>
        <p class="text-gray-400 text-sm mb-8 max-w-sm mx-auto">Yeni pozisyonlar için takipte kalın veya filtreleri değiştirmeyi deneyin.</p>
        @if(request()->hasAny(['search', 'department', 'location', 'employment_type']))
        <a href="{{ route('home') }}" class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-xl text-sm font-semibold hover:bg-orange-600 transition-colors shadow-md">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
            Tüm Pozisyonları Gör
        </a>
        @endif
    </div>
    @else
    {{-- İlan grid --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6">
        @foreach($jobs as $job)
        <article class="job-card bg-white rounded-2xl border border-gray-200 flex flex-col relative shadow-md hover:border-orange-400 hover:shadow-lg transition-all duration-200">

            <div class="p-5 sm:p-6 flex-1">
                {{-- Üst satır: departman rozeti + tarih --}}
                <div class="flex items-start justify-between gap-2 mb-3">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="inline-block bg-orange-50 text-primary text-xs font-bold px-2.5 py-1 rounded-lg border border-orange-100">
                            {{ $job->department }}
                        </span>
                        @if($job->is_featured)
                        <span class="inline-flex items-center gap-1 bg-amber-50 text-amber-600 text-xs font-bold px-2 py-1 rounded-lg border border-amber-100">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                            Öne Çıkan
                        </span>
                        @endif
                    </div>
                    @if($job->closes_at)
                    <span class="text-xs text-gray-400 flex-shrink-0 whitespace-nowrap bg-gray-50 px-2 py-1 rounded-lg">
                        {{ $job->closes_at->format('d.m.Y') }}
                    </span>
                    @endif
                </div>

                {{-- Başlık --}}
                <h2 class="text-base sm:text-lg font-bold text-gray-900 mb-3 leading-snug line-clamp-2">{{ $job->title }}</h2>

                {{-- Meta bilgiler --}}
                <div class="flex flex-wrap gap-x-4 gap-y-1.5 text-xs text-gray-500 mb-4">
                    <span class="flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5 text-gray-400 flex-shrink-0" 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>
                        {{ $job->location }}
                    </span>
                    <span class="flex items-center gap-1.5">
                        <svg class="w-3.5 h-3.5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        {{ $job->employment_type }}
                    </span>
                    @if($job->salary_range)
                    <span class="flex items-center gap-1.5 text-green-600 font-medium">
                        <svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        {{ $job->salary_range }}
                    </span>
                    @endif
                </div>

                {{-- Açıklama önizleme --}}
                <p class="text-sm text-gray-500 line-clamp-2 leading-relaxed">
                    {{ Str::limit(strip_tags($job->description), 110) }}
                </p>
            </div>

            {{-- Alt buton --}}
            <div class="px-5 sm:px-6 pb-5 sm:pb-6">
                <a href="{{ route('job.show', $job->slug) }}"
                   class="group flex items-center justify-center gap-2 w-full bg-primary text-white py-3 rounded-xl font-semibold text-sm hover:bg-orange-600 transition-all duration-200">
                    Detayları Gör & Başvur
                    <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
        </article>
        @endforeach
    </div>
    @endif
</section>

{{-- ═══════════════════════════════════════════
     DEPARTMANLAR
═══════════════════════════════════════════ --}}
@if($activeDepartments->isNotEmpty())
<section id="departmanlar" class="bg-white py-14 sm:py-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-10">
            <p class="text-primary text-xs font-bold uppercase tracking-widest mb-2">Ekibimiz</p>
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-3">Departmanlarımız</h2>
            <p class="text-gray-500 text-sm sm:text-base max-w-xl mx-auto">Hangi alanda çalışmak istediğinizi seçin ve o departmana ait açık pozisyonları görün.</p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            @foreach($activeDepartments as $dept)
            @php
                $deptJobCount = $jobCountByDept->get($dept->name, 0);
            @endphp
            <a href="{{ route('department.show', $dept->slug) }}"
               class="group dept-card bg-white rounded-2xl border border-gray-100 shadow-sm hover:border-primary hover:shadow-lg transition-all duration-200 p-6 flex flex-col gap-4">
                <div class="flex items-start justify-between gap-3">
                    <div class="dept-icon w-12 h-12 bg-orange-50 rounded-xl flex items-center justify-center flex-shrink-0 transition-colors duration-200">
                        <svg class="w-6 h-6 text-primary transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                    </div>
                    @if($deptJobCount > 0)
                    <span class="inline-flex items-center gap-1 bg-orange-50 text-primary text-xs font-bold px-2.5 py-1 rounded-full border border-orange-100 flex-shrink-0">
                        {{ $deptJobCount }} açık pozisyon
                    </span>
                    @else
                    @endif
                </div>
                <div class="flex-1">
                    <h3 class="font-bold text-gray-800 group-hover:text-primary transition-colors text-base mb-1">{{ $dept->name }}</h3>
                    @if($dept->description)
                    <p class="text-sm text-gray-500 line-clamp-2 leading-relaxed">{{ $dept->description }}</p>
                    @endif
                </div>
                <div class="flex items-center gap-1.5 text-xs font-semibold text-primary group-hover:gap-2.5 transition-all duration-200">
                    Detayları Gör
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════
     BOTTOMLINE DEKORASYON
═══════════════════════════════════════════ --}}
<div class="w-full overflow-hidden" style="background-color:#f9fafb; margin-bottom:0; line-height:0;" aria-hidden="true">
    <img src="{{ asset('images/bottomlinee.png') }}" alt="" style="width:100%; height:auto; display:block; margin:0; padding:0;">
</div>

{{-- Filtre JS --}}
<script nonce="{{ app('csp-nonce') }}">
(function() {
    var btn   = document.getElementById('filterToggleBtn');
    var panel = document.getElementById('filterPanel');
    if (!btn || !panel) return;

    var hasFilter = {{ request()->hasAny(['department', 'location', 'employment_type', 'search']) ? 'true' : 'false' }};
    if (hasFilter && window.innerWidth < 640) {
        panel.classList.remove('hidden');
        panel.classList.add('flex', 'flex-col');
    }

    btn.addEventListener('click', function() {
        var isHidden = panel.classList.contains('hidden');
        panel.classList.toggle('hidden', !isHidden);
        if (isHidden) {
            panel.classList.add('flex', 'flex-col');
            btn.querySelector('svg').style.transform = 'rotate(180deg)';
            btn.querySelector('span') && (btn.querySelector('span').textContent = 'Gizle');
        } else {
            panel.classList.remove('flex', 'flex-col');
            btn.querySelector('svg').style.transform = '';
            btn.querySelector('span') && (btn.querySelector('span').textContent = 'Göster');
        }
    });

    // Filtre select'leri — otomatik form gönder
    ['filterDepartment', 'filterLocation', 'filterEmploymentType'].forEach(function(id) {
        var sel = document.getElementById(id);
        if (sel) {
            sel.addEventListener('change', function() {
                document.getElementById('filterForm').submit();
            });
        }
    });
})();
</script>

@endsection