// ===== APP ROUTER + TWEAKS =====
const { useState: useStateApp, useEffect: useEffectApp } = React;

function parseHash() {
  const h = (window.location.hash || '#home').slice(1);
  if (h.startsWith('product/')) return { page: 'detail', productId: h.split('/')[1] };
  return { page: h || 'home', productId: null };
}

function App() {
  const [route, setRoute] = useStateApp(parseHash());
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{
    "heroStyle": "industrial",
    "cardDensity": "full",
    "tableDensity": "comfortable"
  }/*EDITMODE-END*/);

  useEffectApp(() => {
    const onHash = () => {
      setRoute(parseHash());
      window.scrollTo(0, 0);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (page, productId = null) => {
    if (page === 'detail' && productId) {
      window.location.hash = `product/${productId}`;
    } else {
      window.location.hash = page;
    }
    setRoute({ page, productId });
    window.scrollTo(0, 0);
  };

  let content;
  switch (route.page) {
    case 'products': content = <ProductsPage onNavigate={navigate} tweaks={tweaks} />; break;
    case 'detail': content = <DetailPage productId={route.productId} onNavigate={navigate} tweaks={tweaks} />; break;
    case 'applications': content = <ApplicationsPage onNavigate={navigate} />; break;
    case 'about': content = <AboutPage onNavigate={navigate} />; break;
    case 'distributors': content = <DistributorsPage onNavigate={navigate} />; break;
    case 'support': content = <SupportPage onNavigate={navigate} />; break;
    case 'contact': content = <ContactPage onNavigate={navigate} />; break;
    default: content = <HomePage onNavigate={navigate} tweaks={tweaks} />;
  }

  return (
    <>
      <Header currentPage={route.page} onNavigate={navigate} />
      {content}
      <Footer onNavigate={navigate} />
      <WhatsAppFab />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero">
          <TweakRadio
            label="Estilo"
            value={tweaks.heroStyle}
            onChange={(v) => setTweak('heroStyle', v)}
            options={[
              { value: 'industrial', label: 'Industrial' },
              { value: 'mono', label: 'Mono' },
              { value: 'light', label: 'Claro' },
            ]}
          />
        </TweakSection>
        <TweakSection title="Productos">
          <TweakRadio
            label="Densidad de tarjetas"
            value={tweaks.cardDensity}
            onChange={(v) => setTweak('cardDensity', v)}
            options={[
              { value: 'full', label: 'Completa' },
              { value: 'compact', label: 'Compacta' },
            ]}
          />
          <TweakRadio
            label="Tabla comparativa"
            value={tweaks.tableDensity}
            onChange={(v) => setTweak('tableDensity', v)}
            options={[
              { value: 'comfortable', label: 'Cómoda' },
              { value: 'dense', label: 'Densa' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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