const NavLinks = [
  { label: "Film", href: "#film" },
  { label: "Colours", href: "#colours" },
  { label: "Finishes", href: "#finishes" },
  { label: "Installers", href: "#installers" },
  { label: "Shipping", href: "#shipping" },
];

const Navbar = () => {
  const { ArrowUpRight } = window;
  const [open, setOpen] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);

  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  const glassStyle = {
    background: 'rgba(255,255,255,0.78)',
    backdropFilter: 'blur(14px)',
    WebkitBackdropFilter: 'blur(14px)',
    boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.4), 0 2px 12px rgba(0,0,0,0.08)'
  };

  return (
    <header style={{
      position: 'fixed', top: '16px', left: 0, right: 0,
      padding: isMobile ? '0 16px' : '0 32px',
      zIndex: 9999
    }}>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>

        {/* Logo */}
        <a href="#top" style={{
          ...glassStyle,
          width:'48px', height:'48px', borderRadius:'9999px',
          display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
          textDecoration:'none'
        }}>
          <img src="assets/logo-mark.svg" alt="OVERCUT PPF" style={{width:'28px',height:'28px'}} />
        </a>

        {/* Desktop nav */}
        {!isMobile && (
          <nav style={{...glassStyle, borderRadius:'9999px', padding:'6px', display:'flex', alignItems:'center', gap:'4px'}}>
            {NavLinks.map(({label, href}) => (
              <a key={label} href={href} style={{
                padding:'8px 12px', fontSize:'14px', fontWeight:500,
                color:'rgba(0,0,0,0.85)', borderRadius:'9999px', textDecoration:'none', whiteSpace:'nowrap'
              }}>{label}</a>
            ))}
            <a href="#order" style={{
              marginLeft:'4px', display:'inline-flex', alignItems:'center', gap:'4px',
              background:'#000', color:'#fff', borderRadius:'9999px',
              padding:'8px 16px', fontSize:'14px', fontWeight:500,
              textDecoration:'none', whiteSpace:'nowrap'
            }}>Order Samples</a>
          </nav>
        )}

        {/* Desktop installer portal */}
        {!isMobile && (
          <a href="#" style={{
            ...glassStyle, height:'48px', padding:'0 20px', borderRadius:'9999px',
            display:'flex', alignItems:'center', textDecoration:'none'
          }}>
            <span style={{fontSize:'14px', fontWeight:500, color:'rgba(0,0,0,0.9)', whiteSpace:'nowrap'}}>Installer Portal</span>
          </a>
        )}

        {/* Mobile hamburger */}
        {isMobile && (
          <button onClick={() => setOpen(!open)} style={{
            ...glassStyle,
            width:'48px', height:'48px', borderRadius:'9999px', border:'none',
            cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0
          }} aria-label="Toggle menu">
            <span style={{display:'flex',flexDirection:'column',gap:'5px',alignItems:'center'}}>
              <span style={{display:'block',width:'18px',height:'2px',background:'#000',borderRadius:'2px',transition:'all 0.3s',transform:open?'rotate(45deg) translate(5px,5px)':'none'}}></span>
              <span style={{display:'block',width:'18px',height:'2px',background:'#000',borderRadius:'2px',transition:'all 0.3s',opacity:open?0:1}}></span>
              <span style={{display:'block',width:'18px',height:'2px',background:'#000',borderRadius:'2px',transition:'all 0.3s',transform:open?'rotate(-45deg) translate(5px,-5px)':'none'}}></span>
            </span>
          </button>
        )}
      </div>

      {/* Mobile dropdown */}
      {isMobile && open && (
        <div style={{
          marginTop:'12px', borderRadius:'20px', padding:'20px',
          background:'rgba(255,255,255,0.95)', backdropFilter:'blur(24px)',
          WebkitBackdropFilter:'blur(24px)', boxShadow:'0 8px 32px rgba(0,0,0,0.15)'
        }}>
          {NavLinks.map(({label, href}) => (
            <a key={label} href={href} onClick={() => setOpen(false)} style={{
              display:'block', padding:'12px 0', fontSize:'16px', fontWeight:500,
              color:'#000', textDecoration:'none', borderBottom:'1px solid rgba(0,0,0,0.08)'
            }}>{label}</a>
          ))}
          <a href="#order" onClick={() => setOpen(false)} style={{
            marginTop:'12px', display:'flex', alignItems:'center', justifyContent:'center',
            background:'#000', color:'#fff', borderRadius:'9999px',
            padding:'14px 20px', fontSize:'15px', fontWeight:500, textDecoration:'none'
          }}>Order Samples</a>
          <a href="#" onClick={() => setOpen(false)} style={{
            display:'block', textAlign:'center', marginTop:'10px',
            fontSize:'13px', color:'rgba(0,0,0,0.6)', textDecoration:'none'
          }}>Installer Portal</a>
        </div>
      )}
    </header>
  );
};

window.Navbar = Navbar;