---
import { getLangFromUrl, t } from '../i18n/utils';
import general from '../content/settings/general.json';

const lang = getLangFromUrl(Astro.url);
const year = new Date().getFullYear();

const navLinks = [
  { href: '/', label: t(lang, 'nav.accueil') },
  { href: '/services', label: t(lang, 'nav.services') },
  { href: '/contact', label: t(lang, 'nav.contact') },
  { href: '/soumission', label: t(lang, 'nav.soumission') },
];

const serviceLinks = [
  { label: 'Peinture intérieure', href: '/services#peinture-interieure' },
  { label: 'Peinture extérieure', href: '/services#peinture-exterieure' },
  { label: 'Peinture commerciale', href: '/services#peinture-commerciale' },
  { label: 'Décoration intérieure', href: '/services#decoration-interieure' },
];

const legalNotice = t(lang, 'footer.legal').replace('{year}', String(year));
---

<footer class="site-footer">
  <div class="container-site footer-grid">
    <!-- Brand column -->
    <div class="footer-brand">
      <a href="/" aria-label="Cachet Peintres Décorateurs">
        <img
          src="/images/logo.png"
          alt="Cachet Peintres Décorateurs"
          width="140"
          height="52"
          loading="lazy"
        />
      </a>
      <p class="footer-tagline">{t(lang, 'footer.tagline')}</p>
      <p class="footer-service-area">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
          <circle cx="12" cy="10" r="3"/>
        </svg>
        {general.serviceArea}
      </p>
      {general.facebook && (
        <a
          href={general.facebook}
          class="footer-social"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Facebook"
        >
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
          </svg>
          Facebook
        </a>
      )}
    </div>

    <!-- Navigation column -->
    <div class="footer-col">
      <h3 class="footer-col-title">{t(lang, 'footer.nav.title')}</h3>
      <ul>
        {navLinks.map(link => (
          <li><a href={link.href} class="footer-link">{link.label}</a></li>
        ))}
      </ul>
    </div>

    <!-- Services column -->
    <div class="footer-col">
      <h3 class="footer-col-title">{t(lang, 'footer.services.title')}</h3>
      <ul>
        {serviceLinks.map(link => (
          <li><a href={link.href} class="footer-link">{link.label}</a></li>
        ))}
      </ul>
    </div>

    <!-- Contact column -->
    <div class="footer-col">
      <h3 class="footer-col-title">{t(lang, 'footer.contact.title')}</h3>
      <ul class="footer-contact-list">
        <li>
          <a href={`tel:${general.phone.replace(/\D/g, '')}`} class="footer-link footer-contact-item">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.18 6.18l.94-.94a2 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>
            {general.phone}
          </a>
        </li>
        <li>
          <a href={`mailto:${general.email}`} class="footer-link footer-contact-item">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
              <polyline points="22,6 12,13 2,6"/>
            </svg>
            {general.email}
          </a>
        </li>
        <li class="footer-contact-item footer-address">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
            <circle cx="12" cy="10" r="3"/>
          </svg>
          {general.address}
        </li>
      </ul>
    </div>
  </div>

  <!-- Bottom bar -->
  <div class="footer-bottom">
    <div class="container-site footer-bottom-inner">
      <p class="footer-copyright">{legalNotice}</p>
      <p class="footer-legal-nums">
        <span>{t(lang, 'footer.rbq')}</span>
        <span aria-hidden="true">·</span>
        <span>{t(lang, 'footer.neq')}</span>
      </p>
    </div>
  </div>
</footer>

<style>
  .site-footer {
    background-color: var(--color-brand-600);
    color: rgba(255, 255, 255, 0.85);
    padding-top: 3.5rem;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
  }

  .footer-brand img {
    height: 44px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    margin-bottom: 1rem;
  }

  .footer-tagline {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.5rem;
    font-weight: 400;
  }

  .footer-service-area {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 1rem;
  }

  .footer-social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.4rem 0.875rem;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .footer-social:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  .footer-col-title {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.125rem;
  }

  .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .footer-link {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease;
  }

  .footer-link:hover {
    color: #ffffff;
  }

  .footer-contact-list {
    gap: 0.75rem !important;
  }

  .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
  }

  .footer-contact-item svg {
    flex-shrink: 0;
    margin-top: 3px;
  }

  .footer-address {
    color: rgba(255, 255, 255, 0.7);
  }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.125rem 0;
  }

  .footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .footer-copyright {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
  }

  .footer-legal-nums {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
  }

  @media (max-width: 900px) {
    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
  }

  @media (max-width: 540px) {
    .footer-grid {
      grid-template-columns: 1fr;
      gap: 1.75rem;
    }

    .footer-bottom-inner {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
  }
</style>
