'use client';

const footerLinks = {
  Servicios: ['Reformas integrales', 'Reformas de cocinas', 'Reformas de baños', 'Diseño de interiores', 'Comunidades de vecinos'],
  Empresa: ['Sobre nosotros', 'Blog de reformas', 'Trabaja con nosotros', 'Prensa', 'Zona de trabajo'],
  Ayuda: ['Cómo funciona', 'Preguntas frecuentes', 'Galeria de proyectos', 'Financiación', 'Calculadora de obra'],
  Legal: ['Privacidad', 'Términos', 'Cookies', 'RGPD', 'Aviso legal'],
};

const socials = [
  {
    name: 'Twitter',
    href: '#',
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
      </svg>
    ),
  },
  {
    name: 'LinkedIn',
    href: '#',
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
      </svg>
    ),
  },
  {
    name: 'GitHub',
    href: '#',
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
      </svg>
    ),
  },
];

export default function Footer() {
  return (
    <footer className="bg-black text-white" role="contentinfo">
      {/* Main footer */}
      <div className="py-16 pb-8">
        <div className="container">
          <div className="grid grid-cols-[280px_1fr] max-lg:grid-cols-1 gap-16 lg:gap-16 max-lg:gap-12 mb-12">
            {/* Brand */}
            <div className="flex flex-col gap-4">
              <div className="flex items-center gap-2">
                <span className="w-9 h-9 bg-white text-black rounded-md flex items-center justify-center text-xs font-extrabold tracking-[-0.02em]">
                  Rx
                </span>
                <span className="text-lg font-extrabold tracking-[-0.04em] text-white">
                  Reformix
                </span>
              </div>
              <p className="text-sm text-white/45 leading-relaxed">
                Reformas de cocinas y baños con presupuesto en 5 minutos y render por WhatsApp. Tu reforma, gestionada de principio a fin.
              </p>
              <div className="flex gap-2">
                {socials.map((s) => (
                  <a
                    key={s.name}
                    href={s.href}
                    className="w-9 h-9 bg-white/10 text-white/60 rounded-md flex items-center justify-center transition-all duration-150 hover:bg-white/15 hover:text-white"
                    aria-label={s.name}
                    id={`footer-social-${s.name.toLowerCase()}`}
                  >
                    {s.icon}
                  </a>
                ))}
              </div>
            </div>

            {/* Links */}
            <nav className="grid grid-cols-4 max-lg:grid-cols-2 max-sm:grid-cols-2 max-sm:gap-6 gap-8" aria-label="Footer navigation">
              {Object.entries(footerLinks).map(([category, links]) => (
                <div key={category} className="flex flex-col gap-4">
                  <h3 className="text-xs font-bold uppercase tracking-widest text-white/35">
                    {category}
                  </h3>
                  <ul className="list-none flex flex-col gap-3" role="list">
                    {links.map((link) => (
                      <li key={link}>
                        <a
                          href="#"
                          className="text-sm text-white/55 no-underline transition-colors duration-150 hover:text-white"
                        >
                          {link}
                        </a>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </nav>
          </div>

          {/* Bottom bar */}
          <div className="flex items-center justify-between pt-8 border-t border-white/10 flex-wrap gap-4">
            <p className="text-sm text-white/35">
              © {new Date().getFullYear()} Reformix, S.L. Todos los derechos reservados.
            </p>
            <div className="flex items-center gap-2 text-xs font-medium text-white/45">
              <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
              Reformas en curso ahora mismo
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
