'use client';

import Link from 'next/link';
import { ChevronRight, Instagram, Linkedin, Music2 } from 'lucide-react';
import { useEffect, useState } from 'react';
import { usePathname } from 'next/navigation';
import { socials } from '@/lib/socials';

const socialIcons = { Instagram, LinkedIn: Linkedin, TikTok: Music2 };

export function SiteHeader() {
  const [menuOpen, setMenuOpen] = useState(false);
  const pathname = usePathname();
  useEffect(() => setMenuOpen(false), [pathname]);
  const closeMenu = () => setMenuOpen(false);
  return (
    <header className="site-header">
      <Link className="brand" href="/#inicio" aria-label="Medios con Valor, ir al inicio" onClick={closeMenu}>
        <img src="/mcv-logo.png" alt="Medios con Valor" />
      </Link>
      <button className={`menu-toggle${menuOpen ? ' open' : ''}`} type="button" onClick={() => setMenuOpen((current) => !current)} aria-expanded={menuOpen} aria-label={menuOpen ? 'Cerrar menú' : 'Abrir menú'}><span /><span /><span /></button>
      <nav className={menuOpen ? 'open' : ''} aria-label="Navegación principal">
        <Link href="/#servicios" onClick={closeMenu}>Servicios</Link>
        <Link href="/#respuestas" onClick={closeMenu}>Respuestas</Link>
        <Link href="/blog" onClick={closeMenu}>Blog</Link>
        <Link href="/#contacto" onClick={closeMenu}>Contacto</Link>
        <a className="mobile-quote" href="https://mediosconvalor.com/cotiza/" target="_blank" rel="noopener noreferrer">Cotizar <ChevronRight size={17} /></a>
      </nav>
      <a className="button button-small" href="https://mediosconvalor.com/cotiza/" target="_blank" rel="noopener noreferrer">
        Cotizar <ChevronRight size={18} />
      </a>
    </header>
  );
}

export function SiteFooter() {
  return (
    <footer>
      <Link className="footer-brand" href="/#inicio" aria-label="Ir al inicio">
        <img src="/mcv-logo.png" alt="Medios con Valor" />
      </Link>
      <p><a className="footer-credit" href="https://mediosconvalor.github.io" target="_blank" rel="noopener noreferrer">© 2026 Medios con Valor. No solo decimos, lo hacemos.</a></p>
      <nav className="footer-social" aria-label="Redes sociales">{socials.map((social) => { const Icon = socialIcons[social.name]; return <a href={social.href} target="_blank" rel="noopener noreferrer" aria-label={social.name} key={social.name}><Icon size={18} /><span>{social.name}</span></a>; })}<Link href="/siguenos">Síguenos</Link></nav>
    </footer>
  );
}
