// Marketing nav — sticky, theme switcher, dropdowns
// Requires: theme.js (provides window.useTheme), lucide-icons (window.lucide)

const NAV_ITEMS = [
  {
    label: 'What we offer',
    items: [
      { title: 'Automation Nano Flows',     desc: 'Small, surgical automations.',         slug: 'automation-nano-flows' },
      { title: 'Automation Systems',        desc: 'Cross-tool workflows.',                slug: 'automation-systems' },
      { title: 'AI & Agentic Workflows',    desc: 'RAG agents, decision loops.',          slug: 'ai-agentic-workflows' },
    ],
  },
  {
    label: 'Analysis',
    items: [
      { title: 'Operational Audit',         desc: 'Map every manual touchpoint.',         slug: 'operational-audit' },
      { title: 'Process Mapping',           desc: 'Diagram the system as-is.',            slug: 'process-mapping' },
      { title: 'Efficiency Detection',      desc: 'Surface latent inefficiencies.',       slug: 'efficiency-detection' },
    ],
  },
  {
    label: 'About',
    items: [
      { title: 'Mission',                   desc: 'Compile operations into systems.',     slug: 'mission' },
      { title: 'Background',                desc: 'Operations → engineering.',             slug: 'background' },
      { title: 'Vision',                    desc: 'Self-healing operational infrastructure.', slug: 'vision' },
    ],
  },
  {
    label: 'Behind the scenes',
    items: [
      { title: 'System architecture',       desc: 'How the bridge layer works.',          slug: 'system-architecture' },
      { title: 'Integration coverage',      desc: 'Native connectors + custom bridges.',  slug: 'integration-coverage' },
      { title: 'Custom pipelines',          desc: 'What we design per engagement.',       slug: 'custom-pipelines' },
    ],
  },
];

function Glyph({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none">
      <rect x="2" y="2" width="60" height="60" rx="14" fill="currentColor" opacity="0.06"/>
      <rect x="2" y="2" width="60" height="60" rx="14" stroke="currentColor" strokeWidth="1.5" opacity="0.4"/>
      <circle cx="18" cy="32" r="6" fill="currentColor"/>
      <circle cx="46" cy="32" r="6" fill="var(--signal)"/>
      <path d="M 24 32 L 40 32" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
      <circle cx="32" cy="32" r="1.5" fill="var(--signal)"/>
    </svg>
  );
}

function ThemeSwitch() {
  const [theme, setTheme] = useTheme();
  const opts = [
    { v: 'light',  l: 'LT'  },
    { v: 'dark',   l: 'DK'  },
    { v: 'cosmic', l: 'CSM' },
  ];
  return (
    <div className="so-theme-switch">
      {opts.map(o => (
        <button
          key={o.v}
          className={theme === o.v ? 'on' : ''}
          onClick={() => setTheme(o.v)}
        >{o.l}</button>
      ))}
    </div>
  );
}

function NavDropdown({ items }) {
  return (
    <div className="so-dropdown">
      {items.map(it => (
        <a key={it.title} className="dd-item" href={it.slug ? 'subpage.html?page=' + it.slug : '#'}>
          <span className="dd-title">{it.title}</span>
          <span className="dd-desc">{it.desc}</span>
        </a>
      ))}
    </div>
  );
}

function MarketingNav() {
  const [open, setOpen] = React.useState(null);
  const navRef = React.useRef(null);
  const [scrolled, setScrolled] = React.useState(false);
  const cfg = window.SO_CONFIG || {};
  const brand = cfg.brand || {};

  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h);
    return () => window.removeEventListener('scroll', h);
  }, []);

  return (
    <nav className={'so-nav' + (scrolled ? ' so-nav--scrolled' : '')} ref={navRef}>
      <div className="so-nav-inner">
        <a className="so-brand" href="index.html">
          <Glyph />
          <span className="so-brand-stack">
            <span className="so-wm">{brand.company || 'signalOPS'}</span>
            <span className="so-brand-tag">{brand.lab || 'DIGITAL Lab'}</span>
            <span className="so-brand-sub">{brand.project || 'Project Amera256'}</span>
          </span>
        </a>
        <div className="so-nav-items" onMouseLeave={() => setOpen(null)}>
          {NAV_ITEMS.map(g => (
            <div
              key={g.label}
              className={'so-nav-item' + (open === g.label ? ' open' : '')}
              onMouseEnter={() => setOpen(g.label)}
            >
              <span className="label">{g.label}</span>
              <span className="caret">▾</span>
              {open === g.label && <NavDropdown items={g.items} />}
            </div>
          ))}
        </div>
        <div className="so-nav-right">
          <ThemeSwitch />
          <a className="so-cta so-cta--primary" href="#contact">Wire a call <span className="arrow">→</span></a>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { MarketingNav, Glyph, ThemeSwitch });