hostingdelsur.net/src/components/Footer.astro

---
import type { Lang } from '@/i18n/utils';
import type { TranslationKey } from '@/i18n/ui';

interface Props {
  t: (key: TranslationKey) => string;
  lang: Lang;
}

const { t, lang } = Astro.props;
const year = new Date().getFullYear();
const base = lang === 'en' ? '/en' : '';
const locationText = lang === 'en' ? 'Maldonado, Uruguay' : 'Maldonado, Uruguay';

const navLinks: { href: string; key: TranslationKey }[] = [
  { href: `${base}/`, key: 'nav.home' },
  { href: `${base}/servicios/`, key: 'nav.services' },
  { href: `${base}/planes/`, key: 'nav.plans' },
  { href: `${base}/nosotros/`, key: 'nav.about' },
  { href: `${base}/instructivos/`, key: 'nav.tutorials' },
  { href: `${base}/contacto/`, key: 'nav.contact' },
];

const legalLinks = [
  { href: `${base}/legal/privacidad/`, key: 'footer.privacy' as TranslationKey },
  { href: `${base}/legal/terminos/`, key: 'footer.terms' as TranslationKey },
];
---
<footer class="py-14 md:py-20" style="background: #0F0E0C; color: #FAF6EE;">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-8">
      <div class="md:col-span-4">
        <a href={lang === 'en' ? '/en/' : '/'} class="inline-flex items-center gap-2.5 mb-4" aria-label="Hosting del Sur">
          <img src="/logo/hds-mark.svg" alt="" width="36" height="36" class="h-9 w-9" aria-hidden="true" style="filter: brightness(0) invert(1);" />
          <span class="text-lg font-display tracking-tight">
            <span style="color: #EE7623;">hosting</span> del <span style="color: #EE7623;">sur</span>
          </span>
        </a>
        <p class="text-sm leading-relaxed max-w-sm" style="color: #C8C2B8;">
          {t('footer.tagline')}
        </p>
        <p class="text-xs mt-4" style="color: #8A8580;">
          {t('footer.subline')}
        </p>
      </div>

      <div class="md:col-span-2">
        <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-4" style="color: #FA9F5C;">
          {t('footer.nav')}
        </h2>
        <ul class="space-y-2.5">
          {navLinks.map((link) => (
            <li>
              <a
                href={link.href}
                class="text-sm transition-colors hover:text-white"
                style="color: #C8C2B8;"
              >
                {t(link.key)}
              </a>
            </li>
          ))}
        </ul>
      </div>

      <div class="md:col-span-3">
        <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-4" style="color: #FA9F5C;">
          {t('footer.contact')}
        </h2>
        <ul class="space-y-2.5 text-sm" style="color: #C8C2B8;">
          <li>
            <a href="https://wa.me/59899812487" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">
              +598 99 812 487
            </a>
          </li>
          <li>
            <a href="mailto:contacto@hostingdelsur.net" class="hover:text-white transition-colors break-all">
              contacto@hostingdelsur.net
            </a>
          </li>
            <li>{locationText}</li>
        </ul>
      </div>

      <div class="md:col-span-3">
        <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-4" style="color: #FA9F5C;">
          {t('footer.legal')}
        </h2>
        <ul class="space-y-2.5">
          {legalLinks.map((link) => (
            <li>
              <a
                href={link.href}
                class="text-sm transition-colors hover:text-white"
                style="color: #C8C2B8;"
              >
                {t(link.key)}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>

    <div class="mt-12 pt-6 border-t flex flex-col sm:flex-row sm:justify-between gap-3 text-xs" style="border-color: #2A2520; color: #8A8580;">
      <p>© {year} Hosting del Sur. {t('footer.copyright')}</p>
      <p>{locationText}</p>
    </div>
  </div>
</footer>