/* Site-wide chrome: top nav, footer, announcement bar, Tweaks panel. */
/* useState/useEffect come from Primitives.jsx (loaded first) */

function AnnouncementBar() {
  return (
    <a href="#changelog" onClick={(e) => { e.preventDefault(); window.__nav?.('changelog'); }}
       className="block w-full text-center text-[12px] py-2 border-b"
       style={{ background: 'var(--bg-muted)', borderColor: 'var(--border)', color: 'var(--fg2)' }}>
      <span style={{ color: 'var(--brand)', fontWeight: 600 }}>In active build</span>
      <span className="mx-2">·</span>
      Phase 4a of Agent Workforce shipped — trust layer v1 live
      <span className="mx-2">·</span>
      <span className="underline underline-offset-2">Read the changelog</span>
    </a>
  );
}

function TopNav({ route, theme, onToggleTheme }) {
  const [open, setOpen] = useState(null); // 'product' | 'resources' | null
  const [mobile, setMobile] = useState(false);
  const nav = [
    { label: 'Product', key: 'product', children: [
      ['Home', ''], ['Overview', 'product'], ['Modules', 'modules'], ['Agent Workforce', 'workforce'], ['Security', 'security'],
    ]},
    { label: 'Pricing', to: 'pricing' },
    { label: 'Customers', to: 'customers' },
    { label: 'Resources', key: 'resources', children: [
      ['Changelog', 'changelog'], ['About', 'about'],
    ]},
  ];
  return (
    <header className="sticky top-0 z-40" style={{ background: 'hsl(var(--sb-background) / 0.92)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--border)' }}>
      <Container className="flex items-center justify-between" >
        <div className="flex items-center gap-8 h-16">
          <a href="#" onClick={(e) => { e.preventDefault(); window.__nav?.(''); }}>
            <Logo size={28} />
          </a>
          <nav className="hidden lg:flex items-center gap-1">
            {nav.map((n) => n.children ? (
              <div key={n.label} className="relative" onMouseEnter={() => setOpen(n.key)} onMouseLeave={() => setOpen(null)}>
                <button className="h-16 px-3 text-[13.5px] font-medium flex items-center gap-1" style={{ color: 'var(--fg1)' }}>
                  {n.label} <Icon name="ChevronDown" size={12} />
                </button>
                {open === n.key && (
                  <div className="absolute left-0 top-full mt-0 w-56 card p-2" style={{ boxShadow: 'var(--sb-shadow-md)' }}>
                    {n.children.map(([l, t]) => (
                      <a key={l} href={'#'+t} onClick={(e) => { e.preventDefault(); window.__nav?.(t); setOpen(null); }}
                         className="block px-3 py-2 rounded text-[13.5px] hover:bg-[var(--bg-muted)]">{l}</a>
                    ))}
                  </div>
                )}
              </div>
            ) : (
              <a key={n.label} href={'#'+n.to} onClick={(e) => { e.preventDefault(); window.__nav?.(n.to); }}
                 className="h-16 px-3 text-[13.5px] font-medium flex items-center" style={{ color: route === n.to ? 'var(--brand)' : 'var(--fg1)' }}>{n.label}</a>
            ))}
          </nav>
        </div>
        <div className="hidden lg:flex items-center gap-3">
          <button
            onClick={onToggleTheme}
            title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
            aria-label="Toggle theme"
            className="btn btn-ghost"
            style={{ height: 36, width: 36, padding: 0, justifyContent: 'center' }}
          >
            <Icon name={theme === 'dark' ? 'Sun' : 'Moon'} size={16} />
          </button>
          <a href="https://app.syncbuild.co" className="text-[13.5px] font-medium">Sign in</a>
          <Button to="contact" icon="Sparkles">Request early access</Button>
        </div>
        <div className="lg:hidden flex items-center gap-1">
          <button
            onClick={onToggleTheme}
            aria-label="Toggle theme"
            className="btn btn-ghost"
            style={{ height: 36, width: 36, padding: 0, justifyContent: 'center' }}
          >
            <Icon name={theme === 'dark' ? 'Sun' : 'Moon'} size={16} />
          </button>
          <button className="btn btn-ghost" style={{ height: 36, padding: '0 10px' }} onClick={() => setMobile(m => !m)}>
            <Icon name={mobile ? 'X' : 'Menu'} size={16} />
          </button>
        </div>
      </Container>
      {mobile && (
        <div className="lg:hidden border-t" style={{ borderColor: 'var(--border)' }}>
          <Container className="py-3 flex flex-col">
            {[['Overview','product'],['Modules','modules'],['Agent Workforce','workforce'],['Pricing','pricing'],['Security','security'],['Customers','customers'],['Changelog','changelog'],['About','about'],['Contact','contact']].map(([l,t]) => (
              <a key={l} href={'#'+t} onClick={(e) => { e.preventDefault(); window.__nav?.(t); setMobile(false); }} className="py-2.5 text-[14px]">{l}</a>
            ))}
          </Container>
        </div>
      )}
    </header>
  );
}

function Footer() {
  const cols = [
    ['Product', [['Overview','product'],['Modules','modules'],['Agent Workforce','workforce'],['Security','security'],['Pricing','pricing']]],
    ['Company', [['About','about'],['Customers','customers'],['Changelog','changelog'],['Contact','contact']]],
    ['For builders', [['General contractors','product'],['Subcontractors','product'],['Owners & developers','product'],['Project managers','product']]],
    ['Legal', [['Terms','about'],['Privacy','about'],['Compliance posture','security'],['Sub-processors','security']]],
  ];
  return (
    <footer className="pt-20 pb-10 border-t" style={{ borderColor: 'var(--border)' }}>
      <Container>
        <div className="grid grid-cols-2 md:grid-cols-6 gap-8">
          <div className="col-span-2">
            <Logo size={28} />
            <p className="m-lede mt-4 text-[13.5px]" style={{ maxWidth: 280 }}>
              AI-driven construction management. Built agent-native from day one — so the busywork runs while your team builds.
            </p>
            <div className="flex items-center gap-2 mt-4">
              <a href="#" className="btn btn-ghost" style={{ height: 34, width: 34, padding: 0, justifyContent: 'center' }}><Icon name="Github" size={14}/></a>
              <a href="#" className="btn btn-ghost" style={{ height: 34, width: 34, padding: 0, justifyContent: 'center' }}><Icon name="Linkedin" size={14}/></a>
              <a href="#" className="btn btn-ghost" style={{ height: 34, width: 34, padding: 0, justifyContent: 'center' }}><Icon name="Twitter" size={14}/></a>
            </div>
          </div>
          {cols.map(([h, items]) => (
            <div key={h}>
              <div className="sb-eyebrow mb-3">{h}</div>
              <ul className="space-y-2.5 text-[13.5px]">
                {items.map(([l, t]) => (
                  <li key={l}>
                    <a href={'#'+t} onClick={(e) => { e.preventDefault(); window.__nav?.(t); }} style={{ color: 'var(--fg1)' }} className="hover:underline underline-offset-2">{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="mt-14 pt-6 border-t flex flex-col md:flex-row gap-3 md:items-center justify-between text-[12px]" style={{ borderColor: 'var(--border)', color: 'var(--fg2)' }}>
          <div>© 2026 SyncBuild, Inc. All rights reserved.</div>
          <div className="flex items-center gap-3">
            <span>· Status: all systems nominal</span>
            <span>· v2026.04.20</span>
            <span>· SOC 2 Type I in progress</span>
          </div>
        </div>
      </Container>
    </footer>
  );
}

function TweaksPanel({ visible, onClose, state, setState }) {
  if (!visible) return null;
  return (
    <div className="tw-panel">
      <div className="flex items-center justify-between px-4 pt-3 pb-2">
        <div className="text-[13px] font-semibold">Tweaks</div>
        <button onClick={onClose} className="text-[12px]" style={{ color: 'var(--fg2)' }}>Hide</button>
      </div>
      <div className="tw-row">
        <span>Theme</span>
        <Segmented value={state.theme} onChange={(v) => setState({ theme: v })} options={[{value:'light',label:'Light'},{value:'dark',label:'Dark'}]} />
      </div>
      <div className="tw-row">
        <span>Hero layout</span>
        <Segmented value={state.heroLayout} onChange={(v) => setState({ heroLayout: v })} options={[{value:'split',label:'Split'},{value:'centered',label:'Center'},{value:'right',label:'Right'}]} />
      </div>
      <div className="tw-row">
        <span>Headline</span>
        <Segmented value={state.heroCopy} onChange={(v) => setState({ heroCopy: v })} options={[{value:'agent',label:'Agent'},{value:'builder',label:'Builder'},{value:'outcome',label:'Outcome'}]} />
      </div>
      <div className="tw-row">
        <span>Accent</span>
        <Segmented value={state.accent} onChange={(v) => setState({ accent: v })} options={[{value:'pink',label:'Pink'},{value:'terracotta',label:'Terra'},{value:'blue',label:'Blue'},{value:'ink',label:'Ink'}]} />
      </div>
    </div>
  );
}

Object.assign(window, { AnnouncementBar, TopNav, Footer, TweaksPanel });