/* App root — Tweaks wiring + section composition */

const ACCENTS = {
  indigo:   { color: '#6366f1', soft: 'rgba(99,102,241,0.12)',  glow: 'rgba(99,102,241,0.35)' },
  emerald:  { color: '#10b981', soft: 'rgba(16,185,129,0.12)',  glow: 'rgba(16,185,129,0.35)' },
  amber:    { color: '#f59e0b', soft: 'rgba(245,158,11,0.12)',  glow: 'rgba(245,158,11,0.35)' },
  cyan:     { color: '#06b6d4', soft: 'rgba(6,182,212,0.12)',   glow: 'rgba(6,182,212,0.35)' },
  rose:     { color: '#f43f5e', soft: 'rgba(244,63,94,0.12)',   glow: 'rgba(244,63,94,0.35)' },
};

const FONT_PAIRS = {
  geist:   { sans: "'Geist'",         mono: "'Geist Mono'",      display: "'Geist'" },
  inter:   { sans: "'Inter Tight'",   mono: "'JetBrains Mono'",  display: "'Inter Tight'" },
  serif:   { sans: "'Inter'",         mono: "'JetBrains Mono'",  display: "'Instrument Serif'" },
  space:   { sans: "'Space Grotesk'", mono: "'IBM Plex Mono'",   display: "'Space Grotesk'" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "indigo",
  "fontPair": "geist",
  "motion": 60,
  "theme": "dark"
}/*EDITMODE-END*/;

const { motion, AnimatePresence } = window.Motion || window.framerMotion || {};
window.motion = motion;
window.AnimatePresence = AnimatePresence;

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

  // Apply tweaks via CSS vars + data-attr
  React.useEffect(() => {
    window.__tweaks = t;
    const root = document.documentElement;
    const accent = ACCENTS[t.accent] || ACCENTS.indigo;
    root.style.setProperty('--accent', accent.color);
    root.style.setProperty('--accent-soft', accent.soft);
    root.style.setProperty('--accent-glow', accent.glow);

    const fp = FONT_PAIRS[t.fontPair] || FONT_PAIRS.geist;
    root.style.setProperty('--font-sans', fp.sans);
    root.style.setProperty('--font-mono', fp.mono);
    root.style.setProperty('--font-display', fp.display);

    root.setAttribute('data-theme', t.theme);
  }, [t]);

  return (
    <>
      <Nav theme={t.theme} onThemeToggle={() => setTweak('theme', t.theme === 'dark' ? 'light' : 'dark')} />
      <main className="relative z-[2]">
        <Hero />
        <About />
        <Marquee />
        <Projects />
        <Process />
        <Skills />
        <Testimonials />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={['dark', 'light']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakSelect
          label="Accent"
          value={t.accent}
          options={[
            { value: 'indigo',  label: 'Indigo' },
            { value: 'emerald', label: 'Emerald' },
            { value: 'amber',   label: 'Amber' },
            { value: 'cyan',    label: 'Cyan' },
            { value: 'rose',    label: 'Rose' },
          ]}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Font pair"
          value={t.fontPair}
          options={[
            { value: 'geist', label: 'Geist + Geist Mono' },
            { value: 'inter', label: 'Inter Tight + JetBrains' },
            { value: 'serif', label: 'Instrument Serif + Inter' },
            { value: 'space', label: 'Space Grotesk + Plex' },
          ]}
          onChange={(v) => setTweak('fontPair', v)}
        />

        <TweakSection label="Motion" />
        <TweakSlider
          label="Intensity"
          value={t.motion}
          min={0}
          max={100}
          step={10}
          unit="%"
          onChange={(v) => setTweak('motion', v)}
        />
      </TweaksPanel>
    </>
  );
};

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