---
import Footer from './Footer.astro';
import Icon from '@/components/ui/primitives/Icon/Icon.astro';
import { useTranslations } from '@/i18n/utils';
import type { Locale } from '@/i18n/ui';

interface Props {
  locale?: Locale;
  background?: 'default' | 'secondary' | 'invert';
}

const { locale = 'de', background = 'secondary' } = Astro.props;
const t = useTranslations(locale);
---

<Footer
  layout="columns"
  columns={2}
  {background}
  copyright={t('footer.copyright')}
  showSocial={false}
>
  <div slot="tagline" class="space-y-3">
    <p class="text-sm max-w-xs text-foreground-muted">{t('footer.tagline')}</p>
    <a
      href={t('nav.contact.href')}
      class="inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium border border-border text-foreground-muted hover:text-foreground hover:border-border-strong transition-colors"
    >
      {t('nav.contact')}
    </a>
    <a
      href="https://www.linkedin.com/company/armarium-suite"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="LinkedIn"
      class="inline-flex items-center justify-center w-9 h-9 rounded-full border border-border text-foreground-muted hover:text-foreground hover:border-border-strong transition-colors"
    >
      <Icon name="linkedin" size="sm" />
    </a>
  </div>
  <div slot="columns" class="grid grid-cols-2 gap-8">
    <div class="space-y-[var(--space-stack-md)]">
      <h3 class="font-semibold text-sm text-foreground">{t('footer.app')}</h3>
      <ul class="space-y-2">
        <li><a href={t('nav.blog.href')} class="text-sm transition-colors text-foreground-muted hover:text-foreground">{t('nav.blog')}</a></li>
        <li><a href={t('nav.features.href')} class="text-sm transition-colors text-foreground-muted hover:text-foreground">{t('nav.features')}</a></li>
        <li><a href={t('nav.about.href')} class="text-sm transition-colors text-foreground-muted hover:text-foreground">{t('nav.about')}</a></li>
      </ul>
    </div>
    <div class="space-y-[var(--space-stack-md)]">
      <h3 class="font-semibold text-sm text-foreground">{t('footer.legal')}</h3>
      <ul class="space-y-2">
        <li><a href={t('footer.privacy.href')} class="text-sm transition-colors text-foreground-muted hover:text-foreground">{t('footer.privacy')}</a></li>
        <li><a href={t('footer.imprint.href')} class="text-sm transition-colors text-foreground-muted hover:text-foreground">{t('footer.imprint')}</a></li>
      </ul>
    </div>
  </div>
</Footer>
