import { Mail, MapPin, MessageCircle } from 'lucide-react';
import { Link } from 'react-router';
import type { ThemeProps } from '../types';

const navLinks = [
  { label: 'Sistemas',   href: '#machinery' },
  { label: 'Anatomía',   href: '#anatomy' },
  { label: 'Proceso',    href: '#proceso' },
  { label: 'Principios', href: '#principios' },
];

export const Footer = ({ isNavyBg }: ThemeProps) => {
  const bg     = isNavyBg ? '#001040' : '#0a0a0a';
  const sub    = 'rgba(255,255,255,0.45)';
  const border = 'rgba(255,255,255,0.08)';

  const handleNav = (href: string) => {
    const el = document.querySelector(href);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <footer
      style={{ background: bg, borderTop: `1px solid ${border}` }}
      className="px-8 pt-20 pb-10 md:px-14 transition-colors duration-500"
      role="contentinfo"
    >
      <div className="mx-auto max-w-7xl">
        {/* Main grid */}
        <div className="grid gap-14 md:grid-cols-[1.8fr_1fr_1.2fr]">
          {/* Brand */}
          <div>
            <div className="mb-6 flex items-center gap-3">
              <img
                src="/icons/Logo_blanco.svg"
                alt="Rynext logo"
                className="h-9 w-auto object-contain"
              />
              <img
                src="/icons/Text_Logo_Blanco.svg"
                alt="Rynext"
                style={{
                  width: "130px",
                  height: "18px",
                  objectFit: "cover",
                  objectPosition: "center 52%",
                  display: "block",
                }}
              />
            </div>
            <p
              className="text-sm leading-relaxed mb-8"
              style={{ color: sub, maxWidth: "30ch" }}
            >
              Diseñamos y construimos sistemas empresariales a medida,
              arquitectura real, sin atajos técnicos.
            </p>
            {/* Social */}
            <div className="flex items-center gap-3">
              <a
                href="https://www.facebook.com/RynextTechnologies/"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Rynext en Facebook"
                className="flex h-9 w-9 items-center justify-center rounded transition-colors"
                style={{ background: "rgba(255,255,255,0.07)", color: sub }}
                onMouseEnter={(e) => {
                  (e.currentTarget as HTMLAnchorElement).style.background = "rgba(255,255,255,0.14)";
                  (e.currentTarget as HTMLAnchorElement).style.color = "#fff";
                }}
                onMouseLeave={(e) => {
                  (e.currentTarget as HTMLAnchorElement).style.background = "rgba(255,255,255,0.07)";
                  (e.currentTarget as HTMLAnchorElement).style.color = sub;
                }}
              >
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                </svg>
              </a>
              <a
                href="https://linkedin.com/company/rynext"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Rynext en LinkedIn"
                className="flex h-9 w-9 items-center justify-center rounded transition-colors"
                style={{ background: "rgba(255,255,255,0.07)", color: sub }}
                onMouseEnter={(e) => {
                  (e.currentTarget as HTMLAnchorElement).style.background =
                    "rgba(255,255,255,0.14)";
                  (e.currentTarget as HTMLAnchorElement).style.color = "#fff";
                }}
                onMouseLeave={(e) => {
                  (e.currentTarget as HTMLAnchorElement).style.background =
                    "rgba(255,255,255,0.07)";
                  (e.currentTarget as HTMLAnchorElement).style.color = sub;
                }}
              >
                {/* LinkedIn SVG */}
                <svg
                  width="15"
                  height="15"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
                  <rect x="2" y="9" width="4" height="12" />
                  <circle cx="4" cy="4" r="2" />
                </svg>
              </a>
              <a
                href={`https://wa.me/529984814889?text=${encodeURIComponent('¿En qué podemos ayudarte?')}`}
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Rynext en WhatsApp"
                className="flex h-9 w-9 items-center justify-center rounded transition-colors"
                style={{ background: "rgba(255,255,255,0.07)", color: sub }}
                onMouseEnter={(e) => {
                  (e.currentTarget as HTMLAnchorElement).style.background =
                    "rgba(255,255,255,0.14)";
                  (e.currentTarget as HTMLAnchorElement).style.color = "#fff";
                }}
                onMouseLeave={(e) => {
                  (e.currentTarget as HTMLAnchorElement).style.background =
                    "rgba(255,255,255,0.07)";
                  (e.currentTarget as HTMLAnchorElement).style.color = sub;
                }}
              >
                <MessageCircle size={15} />
              </a>
            </div>
          </div>

          {/* Navegación */}
          <div>
            <p
              className="text-mono-label mb-6"
              style={{
                color: "rgba(255,255,255,0.25)",
                letterSpacing: "0.12em",
              }}
            >
              Navegación
            </p>
            <ul className="flex flex-col gap-3.5">
              {navLinks.map((link) => (
                <li key={link.href}>
                  <button
                    onClick={() => handleNav(link.href)}
                    className="text-sm font-medium transition-colors"
                    style={{
                      color: sub,
                      background: "none",
                      border: "none",
                      cursor: "pointer",
                      padding: 0,
                    }}
                    onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
                    onMouseLeave={(e) => (e.currentTarget.style.color = sub)}
                  >
                    {link.label}
                  </button>
                </li>
              ))}
            </ul>
          </div>

          {/* Contacto */}
          <div>
            <p
              className="text-mono-label mb-6"
              style={{
                color: "rgba(255,255,255,0.25)",
                letterSpacing: "0.12em",
              }}
            >
              Contacto
            </p>
            <ul className="flex flex-col gap-4">
              <li className="flex items-start gap-3">
                <MapPin
                  size={14}
                  style={{ color: "#e50914", marginTop: 2, flexShrink: 0 }}
                />
                <span className="text-sm leading-snug" style={{ color: sub }}>
                  Cancún, Quintana Roo
                  <br />
                  México
                </span>
              </li>
              <li className="flex items-center gap-3">
                <Mail size={14} style={{ color: "#e50914", flexShrink: 0 }} />
                <a
                  href="mailto:contacto@rynext.com.mx"
                  className="text-sm font-medium transition-colors"
                  style={{ color: sub }}
                  onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
                  onMouseLeave={(e) => (e.currentTarget.style.color = sub)}
                >
                  contacto@rynext.com.mx
                </a>
              </li>
              <li className="mt-2">
                <a
                  href="mailto:contacto@rynext.com.mx"
                  className="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-bold text-white transition hover:opacity-90"
                  style={{ background: "#e50914", borderRadius: 3 }}
                >
                  Hablemos de tu proyecto
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom bar */}
        <div
          className="mt-16 border-t pt-8 text-center"
          style={{ borderColor: border }}
        >
          <div className="flex flex-col items-center gap-2 sm:flex-row sm:justify-center sm:gap-4">
            <p className="text-xs" style={{ color: "rgba(255,255,255,0.25)" }}>
              © {new Date().getFullYear()} Rynext Technologies S.A.S. | Todos los derechos reservados.
            </p>
            <Link
              to="/privacidad"
              className="text-xs transition-colors"
              style={{ color: "rgba(255,255,255,0.25)", textDecoration: "none" }}
              onMouseEnter={(e) => (e.currentTarget.style.color = "rgba(255,255,255,0.6)")}
              onMouseLeave={(e) => (e.currentTarget.style.color = "rgba(255,255,255,0.25)")}
            >
              Aviso de Privacidad
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
};