// Nav.jsx — Sticky nav with transparent/solid variant
const PDNav = ({ onNav, screen, navStyle }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const transparent = navStyle === 'transparent' && !scrolled && screen === 'home';
  const links = [
    ['home', 'Inicio'],
    ['servicios', 'Servicios'],
    ['escuelas', 'Para Escuelas'],
    ['proceso', 'Proceso'],
    ['blog', 'Blog'],
    ['contacto', 'Contacto'],
  ];

  const wrapStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60,
    padding: scrolled ? '10px 5%' : '18px 5%',
    background: transparent ? 'transparent' : 'rgba(255,255,255,0.82)',
    backdropFilter: transparent ? 'none' : 'saturate(180%) blur(18px)',
    WebkitBackdropFilter: transparent ? 'none' : 'saturate(180%) blur(18px)',
    borderBottom: transparent ? '1px solid transparent' : '1px solid rgba(13,27,62,0.06)',
    transition: 'all 0.3s ease',
  };
  const inner = { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, maxWidth: 1320, margin: '0 auto' };
  const brandStyle = { display: 'flex', alignItems: 'center', cursor: 'pointer' };
  const logoImg = { height: 36, width: 'auto', display: 'block' };
  const linksWrap = { display: 'flex', alignItems: 'center', gap: 6 };
  const link = (active) => ({
    padding: '8px 14px', fontSize: 13, fontWeight: 600,
    color: transparent ? (active ? '#fff' : 'rgba(255,255,255,0.75)') : (active ? '#0d1b3e' : '#44506a'),
    borderRadius: 8, transition: 'color 0.2s, background 0.2s',
    position: 'relative',
  });
  const activeIndicator = { position: 'absolute', bottom: 2, left: '50%', transform: 'translateX(-50%)', width: 4, height: 4, borderRadius: '50%', background: 'var(--accent)' };

  const ctaStyle = {
    background: 'var(--accent)', color: '#0d1b3e',
    padding: '10px 20px', borderRadius: 9999, fontSize: 12,
    fontFamily: "'GCarturm', sans-serif", fontWeight: 700,
    letterSpacing: '0.06em', textTransform: 'uppercase',
    boxShadow: '0 6px 20px var(--accent-glow)',
    transition: 'transform 0.2s',
  };

  return (
    <nav style={wrapStyle}>
      <div style={inner}>
        <div style={brandStyle} onClick={() => onNav('home')}>
          <img
            src={transparent ? 'assets/logo-white.png' : 'assets/logo-black.png'}
            alt="PhotoDay"
            style={logoImg}
          />
        </div>

        <div style={{ ...linksWrap, display: window.innerWidth < 960 ? 'none' : 'flex' }}>
          {links.map(([key, label]) => (
            <a key={key} style={link(screen === key)} onClick={() => onNav(key)}>
              {label}
              {screen === key && <span style={activeIndicator}></span>}
            </a>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <button
            style={ctaStyle}
            onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
            onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
            onClick={() => onNav('cotizador')}
          >
            Solicitar propuesta →
          </button>
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            style={{ display: window.innerWidth < 960 ? 'flex' : 'none', width: 40, height: 40, borderRadius: 8, alignItems: 'center', justifyContent: 'center', color: transparent ? '#fff' : '#0d1b3e' }}
            aria-label="Menú"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: '#fff', borderBottom: '1px solid #eef1f6', padding: '16px 5%', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {links.map(([key, label]) => (
            <a key={key} onClick={() => { onNav(key); setMenuOpen(false); }} style={{ padding: '12px 0', fontSize: 15, fontWeight: 600, color: screen === key ? '#0d1b3e' : '#44506a', borderBottom: '1px solid #f7f9fc' }}>
              {label}
            </a>
          ))}
        </div>
      )}
    </nav>
  );
};
Object.assign(window, { PDNav });