---
import { Image } from 'astro:assets';
import logo from '../assets/logo-white.png';
import SocialIcon from './SocialIcon.astro';
import { SITE, CONTACT, SOCIALS, NAV, GENRES } from '../data/site';

// Nur Profile anzeigen, fuer die in site.ts auch eine URL hinterlegt ist.
const socials = SOCIALS.filter((s) => s.url);
const year = new Date().getFullYear();

const names = GENRES.map((g) => g.name);
const genreList = `${names.slice(0, -1).join(', ')} und ${names.at(-1)}`;
---

<footer class="relative border-t border-white/10 bg-ink-950">
  <div class="mx-auto max-w-7xl px-5 py-16 sm:px-8 sm:py-20">
    <div class="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between">
      <div class="max-w-sm">
        <div class="flex items-center gap-3">
          <Image src={logo} alt="" width={40} height={40} loading="lazy" class="h-10 w-10" />
          <span class="font-display text-xl text-white">DJ NIZZ</span>
        </div>
        <p class="mt-5 leading-relaxed text-white/55">
          {genreList} für Clubs, Festivals und Privatevents in {SITE.region} und Umgebung.
        </p>

        {
          socials.length > 0 && (
            <ul class="mt-7 flex items-center gap-3">
              {socials.map((social) => (
                <li>
                  <a
                    href={social.url}
                    target="_blank"
                    rel="noopener noreferrer me"
                    class="grid h-11 w-11 place-items-center rounded-full border border-white/12 text-white/65 transition duration-300 hover:border-gold-400/60 hover:text-gold-400"
                    aria-label={social.name}
                  >
                    <SocialIcon name={social.icon} />
                  </a>
                </li>
              ))}
            </ul>
          )
        }
      </div>

      <div class="grid gap-10 sm:grid-cols-2 sm:gap-16">
        <div>
          <h2 class="text-xs font-semibold tracking-[0.2em] text-white/40 uppercase">Navigation</h2>
          <ul class="mt-4 space-y-3">
            {
              NAV.map((item) => (
                <li>
                  <a href={item.href} class="text-white/70 transition-colors hover:text-gold-400">
                    {item.label}
                  </a>
                </li>
              ))
            }
          </ul>
        </div>

        <div>
          <h2 class="text-xs font-semibold tracking-[0.2em] text-white/40 uppercase">Booking</h2>
          <ul class="mt-4 space-y-3">
            <li>
              <a
                href={`mailto:${CONTACT.email}?subject=Booking-Anfrage`}
                class="text-white/70 transition-colors hover:text-gold-400"
              >
                {CONTACT.email}
              </a>
            </li>
            {
              CONTACT.phone && (
                <li>
                  <a
                    href={`tel:${CONTACT.phone.replace(/[^+\d]/g, '')}`}
                    class="text-white/70 transition-colors hover:text-gold-400"
                  >
                    {CONTACT.phone}
                  </a>
                </li>
              )
            }
          </ul>
        </div>
      </div>
    </div>

    <div
      class="mt-14 flex flex-col gap-4 border-t border-white/10 pt-8 text-sm text-white/40 sm:flex-row sm:items-center sm:justify-between"
    >
      <p>© {year} {SITE.name}. Alle Rechte vorbehalten.</p>
      <ul class="flex items-center gap-6">
        <li><a href="/impressum" class="transition-colors hover:text-white/70">Impressum</a></li>
        <li><a href="/datenschutz" class="transition-colors hover:text-white/70">Datenschutz</a></li>
      </ul>
    </div>
  </div>
</footer>
