const { PillButton } = window.CerrajerosLaSaforDesignSystem_88370e;

function SiteNav({ onNav }) {
  const [open, setOpen] = React.useState(false);
  const links = [
    { label: 'Inicio',    id: 'inicio' },
    { label: 'Servicios', id: 'servicios' },
    { label: 'Sobre nosotros', id: 'sobre' },
    { label: 'Cobertura', id: 'cobertura' },


  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(247,244,239,0.95)', backdropFilter: 'blur(8px)',
      borderBottom: '1px solid var(--stone-3)',
    }}>
      <div style={{ maxWidth: 'var(--content-wide)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 76 }}>
          <a className="nav-brand" href="#inicio" onClick={(e)=>{e.preventDefault();onNav&&onNav('inicio');}} style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: 'var(--font-display)', fontWeight: 900, textTransform: 'uppercase',
            fontSize: 24, color: 'var(--ink)', letterSpacing: '-0.01em', textDecoration: 'none', lineHeight: 1,
          }}>
            <img className="nav-logo" src="image/logoSafor-removebg.png" alt="Cerrajeros La Safor" style={{ width: 48, height: 48, display: 'block' }} />
            Cerrajeros Safor
          </a>

          <nav style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-6)' }} className="site-nav-desktop">
            {links.map((l) => (
              <a key={l.id} href={'#' + l.id} onClick={(e)=>{e.preventDefault();onNav&&onNav(l.id);}} style={{
                fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600,
                color: 'var(--ink)', textDecoration: 'none',
              }}
              onMouseEnter={(e)=>e.currentTarget.style.color='var(--verde-bright)'}
              onMouseLeave={(e)=>e.currentTarget.style.color='var(--ink)'}>
                {l.label}
              </a>
            ))}
            <PillButton variant="bright" size="sm" href="#contacto" onClick={(e)=>{e.preventDefault();onNav&&onNav('contacto');}}>
              Contáctanos
            </PillButton>
          </nav>

          <button className="site-nav-burger" onClick={()=>setOpen(o=>!o)} aria-label="Menú" style={{
            display: 'none', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink)', padding: 8,
          }}>
            <i data-lucide={open ? 'x' : 'menu'} />
          </button>
        </div>
      </div>
      {open && (
        <div style={{ borderTop: '1px solid var(--stone-3)', padding: 'var(--space-4) var(--gutter)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
          {links.map((l) => (
            <a key={l.id} href={'#'+l.id} onClick={(e)=>{e.preventDefault();setOpen(false);onNav&&onNav(l.id);}} style={{
              fontFamily: 'var(--font-body)', fontSize: 16, color: 'var(--ink)', textDecoration: 'none', fontWeight: 600,
            }}>{l.label}</a>
          ))}
        </div>
      )}
    </header>
  );
}

Object.assign(window, { SiteNav });