@php
    $currentYear = date('Y');
    
    $quickServices = [
        ['icon' => '🎯', 'label' => 'Recrutement'],
        ['icon' => '🤝', 'label' => 'Team Building'],
        ['icon' => '📈', 'label' => 'Conseil RH'],
        ['icon' => '🎓', 'label' => 'Formation']
    ];

    $footerSections = [
        [
            'title' => 'Navigation',
            'links' => [
                ['label' => 'Accueil', 'path' => '/'],
                ['label' => 'À Propos', 'path' => '/about'],
                ['label' => 'Nos Services', 'path' => '/services'],
                ['label' => 'Contact', 'path' => '/contact']
            ]
        ],
        [
            'title' => 'Expertise',
            'links' => [
                ['label' => 'Chasse de têtes', 'path' => '/recrutements'],
                ['label' => 'Séminaires', 'path' => '/seminaires'],
                ['label' => 'Audit RH', 'path' => '/conseils/rh'],
                ['label' => 'GPEC', 'path' => '/conseils/rh']
            ]
        ]
    ];

    $socialLinks = [
        [
            'name' => 'LinkedIn',
            'url' => 'https://www.linkedin.com/company/thera-rh/',
            'color' => '#0077b5',
            'icon' => 'M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'
        ],
        [
            'name' => 'Facebook',
            'url' => 'https://www.facebook.com/therarh/',
            'color' => '#1877f2',
            'icon' => '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'
        ]
    ];
@endphp

<footer class="relative overflow-hidden bg-gradient-to-br from-[#141821] to-[#1a1f2e] text-white/90 font-['Plus_Jakarta_Sans',_sans-serif]"
        x-data="{ 
            showBackToTop: false,
            newsletterEmail: '',
            subscribe() {
                if(this.newsletterEmail) {
                    alert('Merci ! Votre inscription à la newsletter de Thera RH a été prise en compte.');
                    this.newsletterEmail = '';
                }
            }
        }"
        @scroll.window="showBackToTop = (window.pageYOffset > 400)">
  
  <div class="absolute top-0 left-0 w-full rotate-180 text-[#f8fafc] leading-[0]">
    <svg viewBox="0 0 1200 120" preserveAspectRatio="none" class="block w-full h-[60px]">
      <path d="M0,0 C150,100 350,0 600,50 C850,100 1050,0 1200,50 L1200,00 L0,0 Z" fill="currentColor"></path>
    </svg>
  </div>

  <div class="relative z-[2] pt-[8rem] pb-[4rem]">
    <div class="max-w-[1400px] mx-auto px-8">
      
      <div class="grid grid-cols-1 lg:grid-cols-[1.2fr_0.8fr] gap-16 mb-16 pb-12 border-b border-white/10">
        
        <div>
          <div class="flex items-baseline gap-1 mb-6">
            <span class="text-[2.5rem] font-extrabold text-white">Thera</span>
            <span class="text-[1.8rem] font-bold text-[#4ab793]">RH</span>
          </div>
          <p class="text-[1.2rem] font-semibold text-[#4ab793] mb-4 italic">"Au sommet de la performance de votre entreprise"</p>
          <p class="text-white/85 leading-relaxed max-w-[500px]">
            Cabinet spécialisé en formation, recrutement et conseil RH. 
            Nous accompagnons les entreprises dans leur développement avec des solutions sur mesure et innovantes.
          </p>
          
          <div class="flex flex-wrap gap-4 mt-8">
            @foreach($quickServices as $service)
            <div class="flex items-center gap-3 px-5 py-3 bg-white/5 border border-white/10 rounded-xl hover:bg-white/10 hover:-translate-y-1 hover:border-[#4ab793] transition-all duration-300 cursor-default">
              <span class="text-xl">{{ $service['icon'] }}</span>
              <span class="text-sm font-medium">{{ $service['label'] }}</span>
            </div>
            @endforeach
          </div>
        </div>

        <div class="bg-white/[0.03] p-10 rounded-[24px] border border-white/10 backdrop-blur-md">
          <h3 class="text-xl font-bold mb-2 text-white">📬 Restez informé</h3>
          <p class="text-white/80 mb-6 text-sm">Recevez nos dernières actualités, conseils RH et offres exclusives.</p>
          
          @if(session('newsletter_success'))
            <div id="newsletter-success" class="mb-4 p-3 bg-green-50 text-green-800 rounded-md">{{ session('newsletter_success') }}</div>
            <script>
              setTimeout(() => {
                const el = document.getElementById('newsletter-success');
                if (el) el.style.display = 'none';
              }, 5000);
            </script>
          @endif
          <form id="newsletter-section" action="{{ route('newsletter.store') }}" method="POST" class="flex flex-col sm:flex-row gap-3">
            @csrf
            <input type="email" name="email" value="{{ old('email') }}" placeholder="Votre adresse email" 
                   class="flex-1 p-4 rounded-xl border-2 border-white/10 bg-white/5 text-white focus:outline-none focus:border-[#4ab793] transition-all" required>
            <input type="text" name="name" value="{{ old('name') }}" placeholder="Votre prénom (optionnel)" 
                   class="hidden sm:block p-4 rounded-xl border-2 border-white/10 bg-white/5 text-white focus:outline-none focus:border-[#4ab793] transition-all" />
            <button type="submit" class="bg-[#4ab793] hover:bg-[#3a9174] hover:scale-105 text-white font-bold px-6 py-4 rounded-xl flex items-center justify-center gap-2 transition-all">
              <span>S'abonner</span>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </button>
          </form>
          <p class="text-xs text-white/50 mt-4 italic italic">🔒 Vos données sont protégées. Pas de spam.</p>
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
        @foreach($footerSections as $section)
        <div>
          <h4 class="text-white font-bold mb-6 relative pb-2 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-8 after:h-0.5 after:bg-[#4ab793]">
            {{ $section['title'] }}
          </h4>
          <ul class="space-y-3">
            @foreach($section['links'] as $link)
            <li><a href="{{ url($link['path']) }}" class="text-white/80 hover:text-[#4ab793] hover:pl-2 transition-all duration-300 text-md">→ {{ $link['label'] }}</a></li>
            @endforeach
          </ul>
        </div>
        @endforeach

        <div class="lg:col-span-2">
          <h4 class="text-white font-bold mb-6 relative pb-2 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-8 after:h-0.5 after:bg-[#4ab793]">Contact</h4>
          <ul class="space-y-4 text-md text-white/80">
            <li class="flex gap-3"><span class="text-[#4ab793]">📞</span> +221 77 850 44 44 / +221 77 854 01 01</li>
            <li class="flex gap-3"><span class="text-[#4ab793]">📧</span> <a href="mailto:contact@therarh.com" class="hover:text-[#4ab793]">contact@therarh.com</a></li>
            <li class="flex gap-3"><span class="text-[#4ab793]">📍</span> Dakar, Sénégal - Sipres 2 lot 06 en face Palene Auto</li>
            <li class="flex gap-3"><span class="text-[#4ab793]">🕒</span> Lun - Ven : 08h00 - 17h00</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="bg-black/20 py-8 relative z-10 border-t border-white/10">
    <div class="max-w-[1400px] mx-auto px-8 flex flex-col md:flex-row justify-between items-center gap-6">
      <div class="text-sm text-white/60">
        © {{ $currentYear }} <strong class="text-white">Thera RH</strong>. Tous droits réservés. | Conçu par Abdoulaye Diop
      </div>
      
      <div class="flex gap-4">
        @foreach($socialLinks as $social)
        <a href="{{ $social['url'] }}" target="_blank" 
           class="w-10 h-10 rounded-full flex items-center justify-center transition-all hover:-translate-y-1"
           style="background-color: rgba(255,255,255,0.1);"
           onmouseover="this.style.backgroundColor='{{ $social['color'] }}'"
           onmouseout="this.style.backgroundColor='rgba(255,255,255,0.1)'"
           aria-label="{{ $social['name'] }}">
          <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="{{ $social['icon'] }}"></path></svg>
        </a>
        @endforeach
      </div>
    </div>
  </div>

  <button x-show="showBackToTop" 
          @click="window.scrollTo({top: 0, behavior: 'smooth'})"
          x-transition
          class="fixed bottom-8 right-8 w-12 h-12 bg-[#4ab793] text-white rounded-full flex items-center justify-center shadow-2xl hover:scale-110 transition-all z-[99]">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
  </button>

</footer>