import { Wordmark } from '@/components/primitives/Wordmark';
import { Container } from '@/components/primitives/Container';
import { IconoRed, NOMBRES_RED } from '@/components/primitives/IconoRed';
import { footer, creditosFotos, empezar } from '@/lib/content';
import { esExterno, propsEnlace, AVISO_PESTANA } from '@/lib/enlaces';

export function Footer() {
  return (
    <footer className="bg-azul-profundo text-white border-t border-white/10">
      <Container className="flex flex-col items-center gap-3 py-10 text-center md:flex-row md:justify-between md:text-left">
        <Wordmark size="sm" onDark />
        <p className="text-sm text-gris-medio">{footer.tagline}</p>
        <ul aria-label="Redes y contacto" className="flex items-center gap-2">
          {NOMBRES_RED.map((red) => (
            <li key={red}>
              <a href={empezar.contacto[red].href} {...propsEnlace(empezar.contacto[red].href)}
                aria-label={esExterno(empezar.contacto[red].href)
                  ? `${empezar.contacto[red].label} (${AVISO_PESTANA})`
                  : empezar.contacto[red].label}
                className="grid place-items-center w-10 h-10 rounded-full text-gris-medio hover:text-dorado transition-colors">
                <IconoRed nombre={red} className="w-5 h-5" />
              </a>
            </li>
          ))}
        </ul>
        <p className="text-xs text-gris-medio">{footer.legal}</p>
      </Container>
      <Container className="pb-6 text-center md:text-left">
        <p className="text-[10px] leading-relaxed text-gris-medio/60">
          {creditosFotos.map((c, i) => (
            <span key={c.href}>
              {i > 0 && ' · '}
              <a href={c.href} {...propsEnlace(c.href)} className="hover:text-gris-medio">{c.desc}<span className="sr-only"> ({AVISO_PESTANA})</span></a>, modificada,{' '}
              <a href={c.licenciaHref} {...propsEnlace(c.licenciaHref)} className="hover:text-gris-medio">{c.licencia}<span className="sr-only"> ({AVISO_PESTANA})</span></a>
            </span>
          ))}
        </p>
      </Container>
    </footer>
  );
}