/* app.jsx — Router with i18n provider */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e22718",
  "accentActive": "#b91c1c",
  "density": "comfortable"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  ['#e22718', '#b91c1c'],  // Red (QTS — default)
  ['#1c69d4', '#0653b6'],  // Blue (Pampa)
  ['#06b6d4', '#0891b2'],  // Cyan
  ['#10b981', '#059669'],  // Emerald
  ['#f59e0b', '#d97706'],  // Amber
];

function AppShell() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState(() => {
    const hash = window.location.hash.replace('#', '');
    return ['home', 'portfolio', 'services', 'about', 'contact'].includes(hash) ? hash : 'home';
  });
  const [pageParams, setPageParams] = React.useState({});

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-active', t.accentActive);
    document.documentElement.setAttribute('data-density', t.density);
  }, [t.accent, t.accentActive, t.density]);

  React.useEffect(() => {
    const onHash = () => {
      const hash = window.location.hash.replace('#', '');
      if (['home', 'portfolio', 'services', 'about', 'contact'].includes(hash)) {
        setPage(hash);
        setPageParams({});
        window.scrollTo({ top: 0 });
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (target, params = {}) => {
    setPage(target);
    setPageParams(params);
    window.location.hash = target;
    window.scrollTo({ top: 0, behavior: 'instant' });
  };

  return (
    <>
      <DcNav currentPage={page} onNavigate={navigate} />
      {page === 'home' && <HomePage onNavigate={navigate} />}
      {page === 'portfolio' && <PortfolioPage onNavigate={navigate} initialProject={pageParams.project} />}
      {page === 'services' && <ServicesPage onNavigate={navigate} />}
      {page === 'about' && <AboutPage onNavigate={navigate} />}
      {page === 'contact' && <ContactPage onNavigate={navigate} />}
      <DcFooter onNavigate={navigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Brand accent" />
        <TweakColor
          label="Accent color"
          value={t.accent}
          options={ACCENT_OPTIONS.map(([p]) => p)}
          onChange={(v) => {
            const pair = ACCENT_OPTIONS.find(([p]) => p === v) || [v, v];
            setTweak({ accent: pair[0], accentActive: pair[1] });
          }}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['comfortable', 'compact']}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
    </>
  );
}

function App() {
  return (
    <LangProvider>
      <AppShell />
    </LangProvider>
  );
}

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