const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#C9A84C",
  "cardStyle": "elevated",
  "showNumbers": true
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const root = document.documentElement;
    const hex = tweaks.accentColor;
    root.style.setProperty('--accent', hex);
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    root.style.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
    root.dataset.cardStyle = tweaks.cardStyle;
    root.dataset.showNumbers = String(tweaks.showNumbers);
  }, [tweaks]);

  return (
    <>
      <Navigation />
      <Hero />
      <About />
      <Projects />
      <Skills />
      <Research />
      <ExperienceSection />
      <AchievementsSection />
      <CertificationsSection />
      <EducationSection />
      <ContactSection />
      <PortfolioFooter />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent Color">
          <TweakColor
            id="accentColor"
            value={tweaks.accentColor}
            onChange={v => setTweak('accentColor', v)}
            options={['#C9A84C', '#6366F1', '#10B981', '#EF4444']}
          />
        </TweakSection>
        <TweakSection label="Card Style">
          <TweakRadio
            id="cardStyle"
            value={tweaks.cardStyle}
            onChange={v => setTweak('cardStyle', v)}
            options={['elevated', 'flat', 'bordered']}
          />
        </TweakSection>
        <TweakSection label="Section Numbers">
          <TweakToggle
            id="showNumbers"
            value={tweaks.showNumbers}
            onChange={v => setTweak('showNumbers', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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