const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light"
}/*EDITMODE-END*/;

function Nav({ theme, onToggleTheme }) {
  return (
    <nav className="nav" aria-label="Primary navigation">
      <div className="pa-page nav-inner">
        <a className="brand" href="#top" aria-label="Prophecta mining operations overview">
          <BrandLogo />
          <span className="brand-sep" aria-hidden="true" />
          <span className="brand-title">
            <span className="brand-main">Prophecta Mining Operations</span>
            <span className="brand-sub">asset overview</span>
          </span>
        </a>
        <div className="nav-links">
          <a href="#fit">Workflows</a>
          <a href="#map">Map</a>
          <a href="#assets">Assets</a>
          <a href="#route">Modernization</a>
          <ThemeToggle theme={theme} onToggle={onToggleTheme} />
        </div>
      </div>
    </nav>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme || 'light');
  }, [t.theme]);

  const toggleTheme = useCallback(() => {
    setTweak('theme', t.theme === 'dark' ? 'light' : 'dark');
  }, [setTweak, t.theme]);

  return (
    <>
      <a className="skip-link" href="#map">Skip to operations map</a>
      <Nav theme={t.theme} onToggleTheme={toggleTheme} />

      <main id="top">
        <HeroSection />
        <FitSection />
        <AssetMapSection />
        <AssetCardsSection />
        <RouteSection />
      </main>

      <OverviewFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme">
          <TweakRadio
            label="Surface"
            value={t.theme}
            onChange={(value) => setTweak('theme', value)}
            options={['light', 'dark']}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);