{# templates/visiteur/components/_footer.html.twig #}

<footer class="bg-accent text-accent-foreground">
  <div class="container mx-auto px-4 py-16">
    <div class="grid gap-12 md:grid-cols-2 lg:grid-cols-4">
      {# Brand #}
      <div>
        <div class="mb-4 flex items-center gap-2">
          <div class="flex h-10 w-10 items-center justify-center rounded bg-primary font-heading text-lg font-black text-primary-foreground">
            L
          </div>
          <span class="font-heading text-2xl font-bold tracking-wider">
            LUXIM
          </span>
        </div>
        <p class="text-sm leading-relaxed text-accent-foreground/70">
          Promoteur immobilier de confiance en Côte d'Ivoire. Nous bâtissons
          des espaces de vie modernes et accessibles.
        </p>
      </div>

      {# Liens rapides #}
      <div>
        <h4 class="mb-4 font-heading text-sm font-bold uppercase tracking-wider text-primary">
          Liens rapides
        </h4>
        <ul class="space-y-2 text-sm">
          {% set links = [
            { label: "Accueil", path: path('app_home') },
            { label: "À propos", path: path('app_home') },
            { label: "Programmes", path: path('app_programmes') },
            { label: "Construction-Vente", path: path('app_construction_vente') },
            { label: "Contact", path: path('app_contact') },
          ] %}
          {% for link in links %}
            <li>
              <a
                href="{{ link.path }}"
                class="text-accent-foreground/70 transition-colors hover:text-primary"
              >
                {{ link.label }}
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>

      {# Contact #}
      <div>
        <h4 class="mb-4 font-heading text-sm font-bold uppercase tracking-wider text-primary">
          Contact
        </h4>
        <ul class="space-y-3 text-sm text-accent-foreground/70">
          <li class="flex items-start gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mt-0.5 shrink-0 text-primary"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
            Abidjan, Cocody Riviera Faya, Côte d'Ivoire
          </li>
          <li class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-primary"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            +225 07 00 00 00 00
          </li>
          <li class="flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-primary"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
            contact@luxim.ci
          </li>
        </ul>
      </div>

      {# Réseaux sociaux #}
      <div>
        <h4 class="mb-4 font-heading text-sm font-bold uppercase tracking-wider text-primary">
          Suivez-nous
        </h4>
        <div class="flex gap-3">
          {% set socials = [
            { label: "Facebook", icon: '<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>' },
            { label: "Instagram", icon: '<rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/>' },
            { label: "LinkedIn", icon: '<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/>' },
          ] %}
          {% for social in socials %}
            <a
              href="#"
              aria-label="{{ social.label }}"
              class="flex h-10 w-10 items-center justify-center rounded-full bg-accent-foreground/10 text-accent-foreground/70 transition-colors hover:bg-primary hover:text-primary-foreground"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{{ social.icon|raw }}</svg>
            </a>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

  {# Bottom bar #}
  <div class="border-t border-accent-foreground/10">
    <div class="container mx-auto flex flex-col items-center justify-between gap-2 px-4 py-4 text-xs text-accent-foreground/50 md:flex-row">
      <p>© {{ "now"|date("Y") }} Luxim. Tous droits réservés.</p>
      <p>Promotion Immobilière — Côte d'Ivoire</p>
    </div>
  </div>
</footer>