// Nexora Cores — Website UI Kit · Navigation (transparent over hero → solid on scroll, with mega-menus)
const { Button } = window.NexoraCoresDesignSystem_c8b55f;
const SP = ''; // sprite is inlined in the page → same-document #ico-* refs

const NAV_TINTS = {
  purple: ['var(--purple)', 'var(--purple-soft)'],
  sky:    ['#0EA5E9', '#E0F5FF'],
  green:  ['var(--success)', 'var(--success-soft)'],
  gray:   ['var(--ink-soft)', 'var(--surface-3)'],
  amber:  ['var(--warning)', 'var(--warning-soft)'],
};

const NAV_MENUS = {
  Products: {
    wide: true,
    items: [
      { icon: 'community', tint: 'purple', title: 'CommunityOS',  desc: 'Loyalty, memberships, missions & rewards', href: 'communityos.html' },
      { icon: 'signal',    tint: 'sky',    title: 'Connect',      desc: 'MVNO-as-a-Service — live in 60 days',     href: '#products' },
      { icon: 'building',  tint: 'amber',  title: 'Core AI',      desc: 'AI employee for hospitality & community',    href: 'core-ai.html' },
      { icon: 'api',       tint: 'gray',   title: 'Platform API', desc: 'Build on Nexora infrastructure',          href: 'platform-api.html' },
    ],
    footer: { label: 'View all products', href: '#products' },
  },
  Solutions: {
    items: [
      { icon: 'building', tint: 'purple', title: 'Restaurants & Hospitality', desc: 'AI employee for calls, orders & bookings', href: 'solutions.html#hospitality' },
      { icon: 'telecom', tint: 'sky',    title: 'Telecom Operators',   desc: 'White-label loyalty for MVNO brands',  href: 'solutions.html#telecom' },
      { icon: 'bank',    tint: 'green',  title: 'Fintech & Neobanks',  desc: 'Reward-linked banking engagement',     href: 'solutions.html#fintech' },
      { icon: 'globe',   tint: 'gray',   title: 'NGOs & Communities',  desc: 'Verifiable social impact rewards',     href: 'solutions.html#ngo' },
    ],
    footer: { label: 'All industries', href: 'solutions.html' },
  },
  Resources: {
    items: [
      { icon: 'docs',      tint: 'gray',   title: 'Documentation', desc: 'API references and integration guides', href: 'docs.html' },
      { icon: 'lightbulb', tint: 'purple', title: 'Case Studies',  desc: 'How organizations grow with Nexora Cores',     href: 'case-studies.html' },
      { icon: 'blog',      tint: 'sky',    title: 'Blog',          desc: 'Engagement strategy & product updates',  href: 'blog.html' },
    ],
  },
  Company: {
    items: [
      { icon: 'building',  tint: 'gray',   title: 'About',          desc: 'Our mission, team, and story',       href: 'about.html' },
      { icon: 'handshake', tint: 'purple', title: 'Design Partners', desc: 'Building alongside real communities', href: '#partner' },
      { icon: 'mail',      tint: 'sky',    title: 'Contact',        desc: 'Talk to the team',                    href: '#contact' },
    ],
  },
};

function NavMark({ solid }) {
  return (
    <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', flexShrink: 0 }}>
      <img src="assets/logo-mark.svg" width="32" height="32" alt="Nexora Cores" />
      <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, color: solid ? 'var(--ink)' : '#fff', letterSpacing: '-0.02em', transition: 'color .3s' }}>
        Nexora <span style={{ color: solid ? 'var(--purple)' : '#9C8FFF' }}>Cores</span>
      </span>
    </a>
  );
}

function DropItem({ it }) {
  const [hover, setHover] = React.useState(false);
  const [c, bg] = NAV_TINTS[it.tint];
  return (
    <a
      href={it.href}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', alignItems: 'flex-start', gap: 11, padding: '10px 11px', borderRadius: 9, textDecoration: 'none', background: hover ? 'var(--surface-2)' : 'transparent', transition: 'background .15s' }}
    >
      <span style={{ width: 36, height: 36, borderRadius: 9, background: bg, color: c, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <svg width="18" height="18" style={{ display: 'block' }}><use href={`${SP}#ico-${it.icon}`} /></svg>
      </span>
      <div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.01em' }}>{it.title}</div>
        <div style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--ink-muted)', lineHeight: 1.4, marginTop: 2, letterSpacing: '-0.005em' }}>{it.desc}</div>
      </div>
    </a>
  );
}

function NavItem({ label, menu, solid }) {
  const [open, setOpen] = React.useState(false);
  const base = solid ? 'var(--ink-soft)' : 'rgba(255,255,255,.72)';
  const active = solid ? 'var(--ink)' : '#fff';
  return (
    <div
      onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}
      style={{ position: 'relative' }}
    >
      <button
        style={{
          display: 'flex', alignItems: 'center', gap: 5, padding: '8px 12px',
          fontFamily: 'var(--font-body)', fontSize: 15, color: open ? active : base,
          background: open ? (solid ? 'var(--surface-2)' : 'rgba(255,255,255,.1)') : 'none',
          border: 'none', cursor: 'pointer', borderRadius: 7, letterSpacing: '-0.01em', transition: 'color .2s, background .2s',
        }}
      >
        {label}
        <svg width="13" height="13" style={{ opacity: .55, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>
          <use href={`${SP}#ico-chevron-down`} />
        </svg>
      </button>
      <div
        style={{
          position: 'absolute', top: 'calc(100% + 8px)', left: 0,
          background: '#fff', border: '1px solid var(--border)', borderRadius: 14,
          boxShadow: '0 12px 44px rgba(13,13,20,.14), 0 2px 8px rgba(13,13,20,.06)',
          padding: 8, minWidth: menu.wide ? 540 : 304,
          display: menu.wide ? 'grid' : 'block', gridTemplateColumns: menu.wide ? '1fr 1fr' : undefined, gap: menu.wide ? 4 : 0,
          opacity: open ? 1 : 0, visibility: open ? 'visible' : 'hidden',
          transform: open ? 'translateY(0)' : 'translateY(-6px)',
          transition: 'opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s',
          zIndex: 50,
        }}
      >
        {menu.items.map(it => <DropItem key={it.title} it={it} />)}
        {menu.footer ? (
          <React.Fragment>
            <hr style={{ gridColumn: menu.wide ? '1 / -1' : undefined, border: 'none', borderTop: '1px solid var(--surface-3)', margin: '6px 4px' }} />
            <a href={menu.footer.href} style={{ gridColumn: menu.wide ? '1 / -1' : undefined, display: 'block', padding: '9px 11px', fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 600, color: 'var(--purple)', textDecoration: 'none', letterSpacing: '-0.01em' }}>{menu.footer.label} →</a>
          </React.Fragment>
        ) : null}
      </div>
    </div>
  );
}

function Nav() {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const linkColor = solid ? 'var(--ink-soft)' : 'rgba(255,255,255,.72)';

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 200, height: 'var(--nav-height)',
      background: solid ? 'rgba(255,255,255,0.95)' : 'transparent',
      backdropFilter: solid ? 'blur(20px)' : 'none', WebkitBackdropFilter: solid ? 'blur(20px)' : 'none',
      borderBottom: `1px solid ${solid ? 'var(--border)' : 'transparent'}`,
      display: 'flex', alignItems: 'center', padding: '0 5%',
      boxShadow: solid ? '0 2px 20px rgba(0,0,0,.06)' : 'none', transition: 'background .3s, box-shadow .3s, border-color .3s',
    }}>
      <div style={{ width: '100%', maxWidth: 'var(--container)', margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <NavMark solid={solid} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 2 }} className="nav-center">
          <NavItem label="Products" menu={NAV_MENUS.Products} solid={solid} />
          <NavItem label="Solutions" menu={NAV_MENUS.Solutions} solid={solid} />
          <NavItem label="Resources" menu={NAV_MENUS.Resources} solid={solid} />
          <NavItem label="Company" menu={NAV_MENUS.Company} solid={solid} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
          <a href="signin.html" style={{ fontFamily: 'var(--font-body)', fontSize: 15, color: linkColor, textDecoration: 'none', padding: '8px 14px', borderRadius: 6, letterSpacing: '-0.01em', transition: 'color .3s' }}>Sign in</a>
          <Button variant="primary" size="sm" href="#contact">Book a Strategy Call</Button>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;