const NAV_LINKS_V2 = [
  { href: '#casos', label: 'Casos' },
  { href: '#producto', label: 'Módulos' },
  { href: '#sistema', label: 'El sistema' },
  { href: '#resultados', label: 'Caso Tero' },
  { href: '#precios', label: 'Precios' },
];

const TopStrip = () => (
  <div style={{ background: 'var(--ink)', color: 'rgba(246,241,231,.78)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase' }}>
    <div className="container" style={{ display: 'flex', justifyContent: 'space-between', gap: 16, padding: '9px 40px' }}>
      <span>En uso diario en Tero Restó</span>
      <span className="strip-r">Benavidez · zona norte</span>
    </div>
    <style>{`@media (max-width:640px){.strip-r{display:none}}`}</style>
  </div>
);

const NavV2 = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', on);
    return () => window.removeEventListener('scroll', on);
  }, []);
  const solid = scrolled || open;

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60,
      background: solid ? 'rgba(253,251,247,.95)' : 'var(--bg)',
      backdropFilter: solid ? 'blur(10px)' : 'none', WebkitBackdropFilter: solid ? 'blur(10px)' : 'none',
      borderBottom: '1.5px solid ' + (solid ? 'var(--ink)' : 'var(--line-strong)'),
      transition: 'border-color 200ms ease',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 74, gap: 16 }}>
        <a href="#" style={{ textDecoration: 'none', color: 'var(--ink)', display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
          <Icon.Logo size={32}/>
          <span style={{ fontFamily: 'var(--serif)', fontSize: 30, letterSpacing: '-.02em', lineHeight: 1 }}>{BRAND.name}</span>
        </a>

        <nav className="nv-links" style={{ display: 'flex', gap: 30 }}>
          {NAV_LINKS_V2.map(l => (
            <a key={l.href} href={l.href} className="nv-link" style={{ color: 'var(--ink)', textDecoration: 'none', fontSize: 14.5, fontWeight: 500 }}>{l.label}</a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href="#diagnostico" className="btn btn-primary nv-cta" style={{ padding: '11px 18px', fontSize: 14 }}>Diagnóstico gratis<Icon.Arrow size={15}/></a>
          <button className="nv-burger" onClick={() => setOpen(o => !o)} aria-label="Menú" aria-expanded={open} style={{
            display: 'none', width: 44, height: 44, border: '1.5px solid var(--ink)', borderRadius: 3,
            background: 'transparent', color: 'var(--ink)', cursor: 'pointer', alignItems: 'center', justifyContent: 'center', padding: 0,
          }}>{open ? <Icon.X size={18}/> : (
            <svg width="20" height="14" viewBox="0 0 20 14" fill="none"><path d="M1 2h18M1 7h13M1 12h18" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>
          )}</button>
        </div>
      </div>

      {open && (
        <div className="nv-sheet" style={{ borderTop: '1px solid var(--line-strong)', padding: '8px 20px 22px', display: 'none', flexDirection: 'column' }}>
          {NAV_LINKS_V2.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{
              padding: '14px 2px', color: 'var(--ink)', textDecoration: 'none', fontFamily: 'var(--serif)', fontSize: 26,
              borderBottom: '1px solid var(--line)',
            }}>{l.label}</a>
          ))}
          <a href="#diagnostico" onClick={() => setOpen(false)} className="btn btn-primary btn-lg" style={{ justifyContent: 'center', marginTop: 18 }}>
            Diagnóstico gratis<Icon.Arrow size={15}/>
          </a>
        </div>
      )}
      <style>{`
        .nv-link{background-image:linear-gradient(var(--accent),var(--accent));background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size 220ms ease;padding-bottom:2px}
        .nv-link:hover{background-size:100% 1.5px;color:var(--ink)}
        @media (max-width:980px){.nv-links{display:none!important}.nv-burger{display:inline-flex!important}.nv-sheet{display:flex!important}}
        @media (max-width:520px){.nv-cta{display:none!important}}
      `}</style>
    </header>
  );
};

Object.assign(window, { TopStrip, NavV2 });