/* Shared chrome */
const { useEffect: chUseEffect, useState: chUseState } = React;

/* Theme — single source of truth.
   Initial paint already set data-theme via the inline bootstrap in <head>;
   this hook syncs React state with that DOM truth, then mutates DOM + storage on toggle.
   Listening for `gd-theme-change` lets every mounted ThemeToggle re-render in lockstep. */
function useTheme() {
  const read = () => (document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light');
  const [theme, setTheme] = chUseState(read);
  chUseEffect(() => {
    const onChange = () => setTheme(read());
    window.addEventListener('gd-theme-change', onChange);
    return () => window.removeEventListener('gd-theme-change', onChange);
  }, []);
  const toggle = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    if (next === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
    else document.documentElement.removeAttribute('data-theme');
    try { localStorage.setItem('gd-theme', next); } catch (e) {}
    window.dispatchEvent(new Event('gd-theme-change'));
  };
  return [theme, toggle];
}

function ThemeToggle() {
  const [theme, toggle] = useTheme();
  const dark = theme === 'dark';
  return (
    <button
      type="button"
      onClick={toggle}
      className="theme-toggle"
      aria-label={dark ? 'Switch to light mode' : 'Switch to dark mode'}
      aria-pressed={dark}
      title={dark ? 'Light mode' : 'Dark mode'}
    >
      {dark ? (
        /* sun */
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
          <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.6"/>
          <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M5.6 18.4L7 17M17 7l1.4-1.4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      ) : (
        /* moon */
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" aria-hidden="true">
          <path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/>
        </svg>
      )}
    </button>
  );
}

function useRoute() {
  const [route, setRoute] = chUseState(() => window.location.hash.replace(/^#/, '') || '/');
  chUseEffect(() => {
    const onHash = () => setRoute(window.location.hash.replace(/^#/, '') || '/');
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return [route, (r) => { window.location.hash = r; }];
}
function navTo(r) { window.location.hash = r; }

/* VariantPicker removed — production landing only renders the canonical hero. */
function VariantPicker() { return null; }

function PublicNav() {
  const [route] = useRoute();
  const isActive = (m) => route.startsWith(m);
  return (
    <header className="sticky top-0 z-30 bg-paper/85 backdrop-blur-xl hair-b">
      <div className="mx-auto max-w-[1280px] px-8 lg:px-16 h-16 flex items-center justify-between">
        <a href="#/" className="flex items-center"><Logo size={28}/></a>
        <nav className="hidden md:flex items-center gap-1">
          <a href="#/lab" className={`px-3.5 py-1.5 text-[13.5px] rounded-full transition-colors ${isActive('/lab') ? 'text-ink' : 'text-mute hover:text-ink'}`}>Lab</a>
          <a href="#/about" className={`px-3.5 py-1.5 text-[13.5px] rounded-full transition-colors ${isActive('/about') ? 'text-ink' : 'text-mute hover:text-ink'}`}>About</a>
        </nav>
        <div className="flex items-center gap-2">
          <VariantPicker/>
          <ThemeToggle/>
          <a href="https://app.gen-data.io" className="rounded-full bg-ink text-paper hover:bg-ink/90 px-4 py-1.5 text-[13px] font-medium transition-colors">Sign in</a>
        </div>
      </div>
    </header>
  );
}

function AppNav() {
  const [route] = useRoute();
  const isActive = (m) => route.startsWith(m);
  return (
    <header className="sticky top-0 z-30 bg-paper/85 backdrop-blur-xl hair-b">
      <div className="mx-auto max-w-[1280px] px-8 lg:px-16 h-16 flex items-center justify-between">
        <div className="flex items-center gap-8">
          <a href="#/" className="flex items-center" aria-label="GenData — back to landing"><Logo size={28}/></a>
          <nav className="hidden md:flex items-center gap-1">
            <a href="#/lab" className={`px-3.5 py-1.5 text-[13.5px] rounded-full transition-colors ${isActive('/lab') ? 'text-ink bg-off' : 'text-mute hover:text-ink'}`}>Lab</a>
            <a href="#/about" className={`px-3.5 py-1.5 text-[13.5px] rounded-full transition-colors ${isActive('/about') ? 'text-ink bg-off' : 'text-mute hover:text-ink'}`}>About</a>
            <a href="#/settings" className={`px-3.5 py-1.5 text-[13.5px] rounded-full transition-colors ${isActive('/settings') ? 'text-ink bg-off' : 'text-mute hover:text-ink'}`}>Settings</a>
          </nav>
        </div>
        <div className="flex items-center gap-3">
          <button aria-label="Search" className="hidden sm:grid place-items-center h-9 w-9 rounded-full text-mute hover:text-ink transition-colors">
            <Icon.Search className="w-4 h-4"/>
          </button>
          <ThemeToggle/>
          <button className="flex items-center gap-2.5 rounded-full border border-line hover:border-ink/30 transition-colors pl-1 pr-3 py-1">
            <span className="grid place-items-center h-7 w-7 rounded-full text-[11px] font-semibold text-paper" style={{ background: 'linear-gradient(135deg, #1E3A8A, #22D3EE)' }}>MG</span>
            <span className="hidden sm:flex flex-col leading-tight text-left">
              <span className="text-[12.5px] text-ink">m.gentner@example.com</span>
              <span className="mono text-[9px] text-mute">ATLAS · VIEWER</span>
            </span>
            <Icon.ChevronDown className="w-3.5 h-3.5 text-mute"/>
          </button>
        </div>
      </div>
    </header>
  );
}

function Footer({ variant = 'public' }) {
  return (
    <footer className="border-t border-line">
      <div className="mx-auto max-w-[1280px] px-8 lg:px-16 py-10 grid grid-cols-1 md:grid-cols-12 gap-8">
        <div className="md:col-span-5">
          <Logo size={26}/>
          <p className="mt-4 text-[13px] text-mute max-w-sm leading-relaxed">
            Causal Verbatim Intelligence. Quantifying the drivers behind customer behavior — at population scale.
          </p>
        </div>
        <div className="md:col-span-7 grid grid-cols-2 sm:grid-cols-3 gap-8">
          <div>
            <div className="mono text-[10px] text-mute">PLATFORM</div>
            <ul className="mt-3 space-y-2 text-[13px]">
              <li><a href="#/lab" className="text-ink hover:text-mute">Lab</a></li>
              <li><a href="#/demo" className="text-ink hover:text-mute">Request Demo</a></li>
              <li><span className="text-subtle/80">On-Prem — Coming</span></li>
            </ul>
          </div>
          <div>
            <div className="mono text-[10px] text-mute">COMPANY</div>
            <ul className="mt-3 space-y-2 text-[13px]">
              <li><a href="#/about" className="text-ink hover:text-mute">About</a></li>
              <li><a href="#/contact" className="text-ink hover:text-mute">Contact</a></li>
            </ul>
          </div>
          <div>
            <div className="mono text-[10px] text-mute">BACKED BY</div>
            <ul className="mt-2 space-y-3 mono text-[10px] text-mute">
              <li className="flex items-center" style={{ minHeight: 56 }}>
                <span className="logo-pad">
                  <img
                    src="src/assets/bafa-invest-logo.png"
                    alt="BAFA INVEST"
                    style={{ height: 56, width: 'auto', display: 'block' }}
                  />
                </span>
              </li>
              <li className="flex items-center" style={{ minHeight: 56 }}>
                <span className="logo-pad">
                  <img
                    src="src/assets/tum-venture-labs-logo.png"
                    alt="TUM Venture Labs"
                    style={{ height: 56, width: 'auto', display: 'block' }}
                  />
                </span>
              </li>
              <li style={{ marginTop: 4 }}>GDPR-COMPLIANT · EU DATA RESIDENCY</li>
            </ul>
          </div>
        </div>
      </div>
      <div className="mx-auto max-w-[1280px] px-8 lg:px-16 py-5 border-t border-line flex flex-col sm:flex-row items-center justify-between gap-3">
        <span className="mono text-[10px] text-mute">© 2026 GENDATA UG (HAFTUNGSBESCHRÄNKT)</span>
        <div className="flex items-center gap-4 mono text-[10px] text-mute">
          <a href="#/impressum" className="hover:text-ink transition-colors">IMPRESSUM</a>
          <span className="text-subtle/60">·</span>
          <a href="#/datenschutz" className="hover:text-ink transition-colors">DATENSCHUTZ</a>
          <span className="text-subtle/60">·</span>
          <a href="#/contact" className="hover:text-ink transition-colors">CONTACT</a>
        </div>
      </div>
    </footer>
  );
}

window.useRoute = useRoute;
window.navTo = navTo;
window.useTheme = useTheme;
window.ThemeToggle = ThemeToggle;
window.PublicNav = PublicNav;
window.AppNav = AppNav;
window.Footer = Footer;
