@extends('layouts.app')

@section('title', 'ایران استخدام | آخرین آگهی‌های استخدامی')

@section('body')
<div class="min-h-screen flex flex-col bg-brand-50/30">

    {{-- ============ هدر (لوگو + منوی اصلی سایت) ============ --}}
    <header class="sticky top-0 z-40 bg-header text-white shadow-md shadow-black/20">
        <div class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between gap-4">

            {{-- لوگو --}}
            <a href="https://iranestekhdam.ir" target="_blank" rel="noopener" class="shrink-0">
                <img src="{{ asset('images/logo-iranestekhdam.webp') }}" alt="ایران استخدام" class="h-9 w-auto">
            </a>

            {{-- منوی اصلی - دسکتاپ --}}
            <nav class="hidden md:flex items-center gap-1 text-sm font-medium">
                <a href="https://iranestekhdam.ir/#governmental" target="_blank" rel="noopener" class="px-3 py-2 rounded-lg hover:bg-white/15 transition-colors">آزمون استخدامی</a>
                <a href="https://iranestekhdam.ir/#vips"         target="_blank" rel="noopener" class="px-3 py-2 rounded-lg hover:bg-white/15 transition-colors">استخدام خصوصی</a>
                <a href="https://iranestekhdam.ir/#companies"    target="_blank" rel="noopener" class="px-3 py-2 rounded-lg hover:bg-white/15 transition-colors">شرکت‌های برتر</a>
                <a href="https://iranestekhdam.ir/#news"         target="_blank" rel="noopener" class="px-3 py-2 rounded-lg hover:bg-white/15 transition-colors">اخبار مهم</a>
            </nav>

            {{-- کانال اینستاگرام + همبرگری موبایل --}}
            <div class="flex items-center gap-2">
                <a href="https://instagram.com/" target="_blank" rel="noopener"
                   class="hidden sm:inline-flex items-center gap-1.5 text-sm font-semibold px-4 py-2 rounded-xl bg-white text-brand-700 hover:bg-brand-50 transition-colors">
                    کانال اینستاگرام
                </a>

                {{-- منوی موبایل با <details> (بدون JS) --}}
                <details class="md:hidden relative">
                    <summary class="list-none cursor-pointer w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white/15 transition-colors">
                        <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="M4 6h16M4 12h16M4 18h16"/></svg>
                    </summary>
                    <div class="absolute left-0 mt-2 w-56 bg-white text-slate-700 rounded-2xl shadow-xl border border-slate-100 p-2 flex flex-col text-sm font-medium z-50">
                        <a href="https://iranestekhdam.ir/#governmental" target="_blank" rel="noopener" class="px-3 py-2.5 rounded-lg hover:bg-brand-50 hover:text-brand-700 transition-colors">آزمون استخدامی</a>
                        <a href="https://iranestekhdam.ir/#vips"         target="_blank" rel="noopener" class="px-3 py-2.5 rounded-lg hover:bg-brand-50 hover:text-brand-700 transition-colors">استخدام خصوصی</a>
                        <a href="https://iranestekhdam.ir/#companies"    target="_blank" rel="noopener" class="px-3 py-2.5 rounded-lg hover:bg-brand-50 hover:text-brand-700 transition-colors">شرکت‌های برتر</a>
                        <a href="https://iranestekhdam.ir/#news"         target="_blank" rel="noopener" class="px-3 py-2.5 rounded-lg hover:bg-brand-50 hover:text-brand-700 transition-colors">اخبار مهم</a>
                        <a href="https://instagram.com/" target="_blank" rel="noopener" class="px-3 py-2.5 rounded-lg bg-brand text-white text-center mt-1">کانال اینستاگرام</a>
                    </div>
                </details>
            </div>
        </div>
    </header>

    {{-- ============ نوار راهنمای کوتاه ============ --}}
    <div class="bg-gradient-to-l from-brand-50 to-white border-b border-brand-100">
        <div class="max-w-6xl mx-auto px-4 py-5 flex items-center gap-2">
            <span class="text-base">👇</span>
            <p class="text-sm font-medium text-brand-800">روی آگهی موردنظرت بزن تا متن کامل آن باز شود</p>
        </div>
    </div>

    {{-- ============ گرید گالری ============ --}}
    <main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8">
        @if($ads->isEmpty())
            <div class="text-center py-24 text-slate-400">
                <p class="text-lg">فعلاً آگهی‌ای برای نمایش وجود ندارد.</p>
            </div>
        @else
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-5">
                @foreach($ads as $ad)
                    <a href="{{ $ad->link ?: '#' }}" @if($ad->link) target="_blank" rel="noopener" @endif
                       class="group relative flex flex-col rounded-2xl overflow-hidden bg-white border border-slate-200 hover:border-brand-100 hover:shadow-2xl hover:shadow-brand/15 transition-all duration-300 hover:-translate-y-1.5">
                        <div class="relative aspect-[4/5] w-full overflow-hidden bg-white">
                            <img src="{{ $ad->image_url }}" alt="{{ $ad->title }}" loading="lazy"
                                 class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105">
                        </div>
                        <div class="p-3 flex flex-col gap-2 flex-1">
                            <h3 class="block w-full flex-1 text-sm font-semibold leading-6 text-slate-800 line-clamp-2"
                                style="text-align:center;">{{ $ad->title }}</h3>
                            {{-- دکمه اصلی --}}
                            <span class="inline-flex items-center justify-center w-full text-xs font-bold py-2 rounded-xl border transition-colors duration-200
                                         bg-brand border-brand text-white
                                         hover:bg-brand-700 hover:border-brand-700
                                         group-hover:bg-brand-700 group-hover:border-brand-700">
                                {{ $ad->button_text ?: 'مشاهده آگهی' }}
                            </span>
                            {{-- دکمه دوم (فقط اگه پر باشه نمایش داده می‌شه) --}}
                            @if($ad->second_link && $ad->second_button_text)
                                <a href="{{ $ad->second_link }}" target="_blank" rel="noopener"
                                   class="inline-flex items-center justify-center w-full text-xs font-bold py-2 rounded-xl bg-brand text-white hover:bg-brand-700 transition-colors duration-200"
                                   onclick="event.stopPropagation();">
                                    {{ $ad->second_button_text }}
                                </a>
                            @endif
                        </div>
                    </a>
                @endforeach
            </div>
        @endif
    </main>

    {{-- ============ فوتر ============ --}}
    <footer class="border-t border-brand-100 bg-white/50">
        <div class="max-w-6xl mx-auto px-4 py-6 text-center text-xs text-slate-400">
            © ایران استخدام — تمامی حقوق محفوظ است.
        </div>
    </footer>

</div>
@endsection