/* Root App — composes all sections + tweaks panel */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "mint"
}/*EDITMODE-END*/;

function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="brand">
          <img src="logo.png" alt="dbpilot" style={{ width: 40, height: 40, objectFit: 'contain' }} />
          dbpilot
        </a>
        <div className="nav-links">
          <a href="#features" className="hide-mobile">Fonctionnalités</a>
          <a href="#how" className="hide-mobile">Comment ça marche</a>
          <a href="#cli" className="hide-mobile">CLI</a>
<a href="https://github.com/theo-mrn/pgpilot" className="btn btn-ghost" style={{ padding: '6px 12px', fontSize: 13 }}>
            <Icon.Github />
            <span className="hide-mobile">GitHub</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

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

  // apply palette CSS variables whenever it changes
  useEffect(() => {
    applyPalette(t.palette);
  }, [t.palette]);

  return (
    <>
      <div className="noise"></div>
      <Nav />
      <Hero />
      <Features />
      <HowItWorks />
      <Commands />
      <Install />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <div style={{ color: 'rgba(41,38,27,.6)', fontSize: 11, marginBottom: 4 }}>
          Choisis une ambiance pour toute la page.
        </div>
        <PaletteGrid
          value={t.palette}
          onChange={(v) => setTweak('palette', v)}
        />
      </TweaksPanel>
    </>
  );
}

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