import { Github, Linkedin, Mail } from 'lucide-react';
import { useTranslation } from 'react-i18next';

import { rivusLogoSrc } from '../lib/logos';
import { NAV_SECTIONS } from '../lib/sections';

const SOCIALS = [
  { Icon: Linkedin, href: 'https://www.linkedin.com', label: 'LinkedIn' },
  { Icon: Github, href: 'https://github.com', label: 'GitHub' },
  { Icon: Mail, href: 'mailto:contato@rivuslab.com', label: 'Email' },
] as const;

export function Footer({ isDark }: { isDark: boolean }) {
  const { t } = useTranslation();
  const year = new Date().getFullYear();

  return (
    <footer className="border-t border-border bg-bg-muted">
      <div className="container-rl py-14">
        <div className="grid gap-10 md:grid-cols-[1.4fr_1fr_1fr]">
          <div>
            <img
              src={rivusLogoSrc(isDark)}
              alt="RivusLab"
              className="h-9 w-auto"
              width={160}
              height={36}
            />
            <p className="mt-4 max-w-sm text-sm text-fg-muted leading-relaxed">
              {t('footer.tagline')}
            </p>

            <div className="mt-6 flex items-center gap-2">
              {SOCIALS.map(({ Icon, href, label }) => (
                <a
                  key={label}
                  href={href}
                  target="_blank"
                  rel="noreferrer"
                  aria-label={label}
                  className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border bg-bg text-fg-muted transition-colors hover:border-primary hover:text-primary"
                >
                  <Icon className="h-4 w-4" />
                </a>
              ))}
            </div>
          </div>

          <FooterColumn title={t('footer.navigation')}>
            {NAV_SECTIONS.map((section) => (
              <li key={section.id}>
                <a
                  href={`#${section.id}`}
                  className="text-sm text-fg-muted transition-colors hover:text-fg"
                >
                  {t(section.labelKey)}
                </a>
              </li>
            ))}
          </FooterColumn>

          <FooterColumn title={t('footer.contact')}>
            <li>
              <a
                href="mailto:contato@rivuslab.com"
                className="text-sm text-fg-muted transition-colors hover:text-fg"
              >
                contato@rivuslab.com
              </a>
            </li>
            <li className="text-sm text-fg-muted">+55 (11) 99972-6609</li>
          </FooterColumn>
        </div>

        <div className="mt-12 flex flex-col items-start justify-between gap-3 border-t border-border pt-6 text-xs text-fg-muted md:flex-row md:items-center">
          <span>© {year} RivusLab. {t('footer.rights')}</span>
          <span className="font-mono">v0.1.0</span>
        </div>
      </div>
    </footer>
  );
}

function FooterColumn({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div>
      <h4 className="text-xs font-bold uppercase tracking-[0.18em] text-fg">
        {title}
      </h4>
      <ul className="mt-4 space-y-2.5">{children}</ul>
    </div>
  );
}