@php
  use App\Models\Setting;
  use App\Models\Category;

  // إعدادات عامة
  $siteName = Setting::getValue('site_name', 'نظام مقالاتي');
  $siteLogo = Setting::getValue('site_logo');
  $themeColor = Setting::getValue('theme_color', '#c52127');
  $fontFamily = Setting::getValue('font_family', 'Tajawal');

  // روابط الأقسام
$navCats = Category::with(['children' => function($q){
    $q->where('active', 1)->orderBy('order');
}])
->whereNull('parent_id')
->where('active', 1)
->orderBy('order')
->get();
@endphp

<header 
  x-data="{ open: false }" 
  class="bg-white/80 dark:bg-slate-800/60 backdrop-blur-md shadow-sm sticky top-0 z-50 border-b border-slate-200/30 dark:border-slate-700/40 transition">

  <div class="container flex justify-between items-center py-4">

    {{-- 🔹 شعار الموقع --}}
<a href="{{ url('/') }}" class="flex items-center gap-3">
  @if($siteLogo)
    @php
      // ✅ تنظيف المسار لتجنب التكرار
      $cleanLogo = str_replace(['//', 'storage/storage'], ['/', 'storage'], $siteLogo);

      // ✅ إذا يحتوي على 'storage/uploads' نستخدم asset()
      $logoUrl = Str::contains($cleanLogo, 'storage/')
          ? asset($cleanLogo)
          : Storage::url($cleanLogo);
    @endphp

    <img src="{{ $logoUrl }}" alt="{{ $siteName }}" class="w-10 h-10 rounded-md object-cover">
  @endif

  <span class="text-2xl font-extrabold tracking-tight"
        style="color: {{ $themeColor }}; font-family: '{{ $fontFamily }}', sans-serif;">
    {{ $siteName }}
  </span>
</a>


    {{-- 🔍 البحث (للحواسيب فقط) --}}
    <form action="{{ route('front.search') }}" method="GET" class="hidden md:flex">
      <input name="q" placeholder="ابحث..." 
             class="rounded-full px-4 py-2 border border-gray-300 dark:border-slate-700 bg-transparent focus:outline-none focus:ring-2 focus:ring-[{{ $themeColor }}]">
    </form>

    {{-- 🌐 روابط التنقل (سطح المكتب) --}}
<nav class="hidden md:flex gap-6 text-sm font-bold">
  @foreach($navCats as $cat)
  
    <div class="relative group">
      <a href="{{ route('front.category', $cat->slug) }}" 
         class="hover:text-[{{ $themeColor }}] transition">
        {{ $cat->name }}
      </a>

      {{-- لو عنده أقسام فرعية --}}
      @if($cat->children->count())
        <div class="absolute right-0 mt-2 hidden group-hover:block bg-white dark:bg-slate-800 shadow-lg rounded-xl p-3 w-48">
          @foreach($cat->children as $child)
            <a href="{{ route('front.category', $child->slug) }}"
               class="block py-1 text-gray-700 dark:text-gray-200 hover:text-[{{ $themeColor }}]">
              {{ $child->name }}
            </a>
          @endforeach
        </div>
      @endif

    </div>

  @endforeach

  <a href="{{ route('front.authors') }}" class="hover:text-[{{ $themeColor }}] transition">
    كتّابنا
  </a>
</nav>


    {{-- 📱 زر القائمة في الجوال --}}
    <button @click="open = !open" class="md:hidden text-2xl text-[{{ $themeColor }}] focus:outline-none">
      <i :class="open ? 'fa-solid fa-xmark' : 'fa-solid fa-bars'"></i>
    </button>
  </div>

  {{-- 📱 القائمة المنسدلة (للهواتف) --}}
  <div 
    x-show="open" 
    x-transition 
    class="md:hidden bg-white/95 dark:bg-slate-800/95 backdrop-blur-lg border-t border-slate-200/30 dark:border-slate-700/30">
    <div class="container py-4 space-y-3">
      @foreach($navCats as $cat)
        <a href="{{ route('front.category', $cat->slug) }}" 
           class="block text-gray-700 dark:text-gray-200 hover:text-[{{ $themeColor }}] font-semibold">
          {{ $cat->name }}
        </a>
      @endforeach
      <a href="{{ route('front.authors') }}" 
         class="block text-gray-700 dark:text-gray-200 hover:text-[{{ $themeColor }}] font-semibold">
        ✍️ كتّابنا
      </a>

      {{-- 🔍 البحث الصغير في القائمة --}}
      <form action="{{ route('front.search') }}" method="GET" class="pt-3">
        <input name="q" placeholder="ابحث..." 
               class="w-full rounded-full px-4 py-2 border border-gray-300 dark:border-slate-700 bg-transparent focus:outline-none focus:ring-2 focus:ring-[{{ $themeColor }}]">
      </form>
    </div>
  </div>
</header>