const SERVICES = [
  { id: 'purchase',     name: 'Purchase',     tagline: 'Own outright with full lifecycle support.',                href: '/purchase',     Icon: (p) => <Icons.Package {...p}/> },
  { id: 'rental',       name: 'Rental',       tagline: 'Test before you commit. Scale on demand.',                 href: '/rental',       Icon: (p) => <Icons.Wrench {...p}/> },
  { id: 'localization', name: 'Localization', tagline: 'Australian-tuned for climate, terrain, and standards.',    href: '/localization', Icon: (p) => <Icons.Compass {...p}/> },
];

const INDUSTRY_HREFS = { mining: '/mining' };

function Nav({ onRequestDemo, onIndustry }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(null); // 'industries' | 'services' | null
  const [mobile, setMobile] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const link = (active) => ({
    fontFamily: 'Inter', fontSize: 14, fontWeight: 500,
    color: active ? '#0A0F1A' : '#3A424D',
    textDecoration: 'none', border: 'none', cursor: 'pointer', background: 'transparent',
    padding: '4px 0', position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 4,
  });

  const cardStyle = {
    display: 'flex', gap: 14, padding: 14, borderRadius: 8, border: '1px solid transparent',
    background: 'transparent', textAlign: 'left', cursor: 'pointer', alignItems: 'flex-start',
    color: 'inherit', textDecoration: 'none',
  };

  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50,
      height: 72, display: 'flex', alignItems: 'center',
      padding: '0 32px', gap: 32,
      background: scrolled ? 'rgba(255,255,255,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid #E6EAF0' : '1px solid transparent',
      transition: 'all 140ms cubic-bezier(0.2,0,0,1)',
    }}>
      <a href="/" style={{ border: 'none', display: 'flex', alignItems: 'center' }}>
        <img src="../../assets/logo-placeholder.svg" alt="AusMotion" style={{ height: 28 }}/>
      </a>
      <nav style={{ display: 'flex', gap: 26, alignItems: 'center' }} className="desktop-nav">
        <button style={link(open === 'industries')} onClick={() => setOpen(open === 'industries' ? null : 'industries')}>
          Industries <Icons.ChevronDown size={14}/>
        </button>
        <a href="/robots" style={link(false)}>Robots</a>
        <button style={link(open === 'services')} onClick={() => setOpen(open === 'services' ? null : 'services')}>
          Services <Icons.ChevronDown size={14}/>
        </button>
        <a href="/Industry-Mining.html" style={link(false)}>Case studies</a>
        <a href="/about" style={link(false)}>About</a>
        <a href="/contact" style={link(false)}>Contact</a>
      </nav>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
        <span className="nav-signin"><Button variant="tertiary" href="#">Sign in</Button></span>
        <span className="nav-demo"><Button onClick={onRequestDemo}>Request a demo</Button></span>
        <button aria-label="Menu" onClick={() => setMobile(!mobile)} className="mobile-toggle" style={{
          display: 'none', background: 'transparent', border: 'none', color: '#0F1E3D', cursor: 'pointer', padding: 6,
        }}>
          {mobile ? <Icons.X size={22}/> : <Icons.Menu size={22}/>}
        </button>
      </div>

      {mobile && (
        <div style={{
          position: 'fixed', top: 72, left: 0, right: 0, bottom: 0, zIndex: 49,
          background: '#fff', padding: '24px 20px 32px', overflowY: 'auto',
          borderTop: '1px solid #E6EAF0',
        }}>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 12 }}>Industries</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 24 }}>
            {INDUSTRIES.map(ind => {
              const href = INDUSTRY_HREFS[ind.id];
              const Tag = href ? 'a' : 'button';
              const tagProps = href
                ? { href, onClick: () => setMobile(false) }
                : { onClick: () => { setMobile(false); onIndustry(ind); } };
              return (
                <Tag key={ind.id} {...tagProps} style={{
                  display: 'flex', gap: 14, alignItems: 'center', padding: '14px 12px',
                  background: 'transparent', border: 'none', borderBottom: '1px solid #F3F5F8',
                  textAlign: 'left', cursor: 'pointer', width: '100%',
                  color: 'inherit', textDecoration: 'none',
                }}>
                  <div style={{ width: 32, height: 32, borderRadius: 4, background: '#FBE4D6', color: '#B85420', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 32px' }}>
                    <ind.Icon size={18}/>
                  </div>
                  <span style={{ fontFamily: 'Inter', fontWeight: 500, fontSize: 15, color: '#0A0F1A' }}>{ind.name}</span>
                </Tag>
              );
            })}
          </div>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#7B8593', marginBottom: 12 }}>Services</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 24 }}>
            {SERVICES.map(svc => (
              <a key={svc.id} href={svc.href} onClick={() => setMobile(false)} style={{
                display: 'flex', gap: 14, alignItems: 'center', padding: '14px 12px',
                background: 'transparent', border: 'none', borderBottom: '1px solid #F3F5F8',
                textAlign: 'left', cursor: 'pointer', width: '100%',
                color: 'inherit', textDecoration: 'none',
              }}>
                <div style={{ width: 32, height: 32, borderRadius: 4, background: '#FBE4D6', color: '#B85420', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 32px' }}>
                  <svc.Icon size={18}/>
                </div>
                <span style={{ fontFamily: 'Inter', fontWeight: 500, fontSize: 15, color: '#0A0F1A' }}>{svc.name}</span>
              </a>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 32 }}>
            {[
              { label: 'Robots',       href: '/robots' },
              { label: 'Case studies', href: '/Industry-Mining.html' },
              { label: 'About',        href: '/about' },
              { label: 'Contact',      href: '/contact' },
              { label: 'Sign in',      href: '#' },
            ].map(l => (
              <a key={l.label} href={l.href} onClick={() => setMobile(false)} style={{
                display: 'block', padding: '14px 12px', fontFamily: 'Inter', fontSize: 16, fontWeight: 500,
                color: '#0A0F1A', textDecoration: 'none', border: 'none', borderBottom: '1px solid #F3F5F8',
              }}>{l.label}</a>
            ))}
          </div>
          <Button size="lg" onClick={() => { setMobile(false); onRequestDemo(); }} style={{ width: '100%', justifyContent: 'center' }}>Request a demo</Button>
        </div>
      )}

      {open === 'industries' && (
        <div style={{
          position: 'absolute', top: 72, left: 0, right: 0,
          background: '#fff', borderBottom: '1px solid #E6EAF0',
          boxShadow: '0 24px 60px rgba(10,15,26,0.12)',
          padding: '32px',
        }} onMouseLeave={() => setOpen(null)}>
          <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {INDUSTRIES.map(ind => {
              const href = INDUSTRY_HREFS[ind.id];
              const Tag = href ? 'a' : 'button';
              const tagProps = href
                ? { href, onClick: () => setOpen(null) }
                : { onClick: () => { setOpen(null); onIndustry(ind); } };
              return (
                <Tag key={ind.id} {...tagProps} style={cardStyle}
                  onMouseEnter={e => { e.currentTarget.style.background = '#F3F5F8'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>
                  <div style={{ width: 36, height: 36, borderRadius: 4, background: '#FBE4D6', color: '#B85420',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 36px' }}>
                    <ind.Icon size={20}/>
                  </div>
                  <div>
                    <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 15, color: '#0A0F1A' }}>{ind.name}</div>
                    <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#56606E', marginTop: 2, lineHeight: 1.45 }}>{ind.tagline}</div>
                  </div>
                </Tag>
              );
            })}
          </div>
        </div>
      )}

      {open === 'services' && (
        <div style={{
          position: 'absolute', top: 72, left: 0, right: 0,
          background: '#fff', borderBottom: '1px solid #E6EAF0',
          boxShadow: '0 24px 60px rgba(10,15,26,0.12)',
          padding: '32px',
        }} onMouseLeave={() => setOpen(null)}>
          <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {SERVICES.map(svc => (
              <a key={svc.id} href={svc.href} onClick={() => setOpen(null)} style={cardStyle}
                onMouseEnter={e => { e.currentTarget.style.background = '#F3F5F8'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>
                <div style={{ width: 36, height: 36, borderRadius: 4, background: '#FBE4D6', color: '#B85420',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 36px' }}>
                  <svc.Icon size={20}/>
                </div>
                <div>
                  <div style={{ fontFamily: 'Inter', fontWeight: 600, fontSize: 15, color: '#0A0F1A' }}>{svc.name}</div>
                  <div style={{ fontFamily: 'Inter', fontSize: 13, color: '#56606E', marginTop: 2, lineHeight: 1.45 }}>{svc.tagline}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.Nav = Nav;
window.SERVICES = SERVICES;
window.INDUSTRY_HREFS = INDUSTRY_HREFS;