/* Main App: hash router + Tweaks panel */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showUtilityBar": true,
  "showPromoBar": true,
  "accentRed": "#B91C1C",
  "ctaPalette": "green",
  "displayFont": "Manrope",
  "compactNav": false
}/*EDITMODE-END*/;

const FONT_OPTIONS = ['Manrope', 'Inter', 'DM Sans'];

function applyTweaks(t) {
  const root = document.documentElement;
  root.style.setProperty('--red', t.accentRed);
  // CTA palette
  if (t.ctaPalette === 'red') {
    root.style.setProperty('--green', '#B91C1C');
    root.style.setProperty('--green-dark', '#8B1818');
  } else if (t.ctaPalette === 'black') {
    root.style.setProperty('--green', '#1A1A1A');
    root.style.setProperty('--green-dark', '#000000');
  } else {
    root.style.setProperty('--green', '#166534');
    root.style.setProperty('--green-dark', '#0E4A24');
  }
  // Display font
  const style = document.getElementById('__tweaks_font') || (() => {
    const s = document.createElement('style');
    s.id = '__tweaks_font';
    document.head.appendChild(s);
    return s;
  })();
  style.textContent = `.display { font-family: '${t.displayFont}', 'Manrope', sans-serif !important; }`;
}

const Route = ({ route }) => {
  // route looks like '#/build/tv-frame' or '#/examples/tv-frames'
  const path = (route || '#/').replace(/^#/, '');
  if (path === '/' || path === '') return <Home/>;
  if (path === '/products') return <Products/>;
  if (path === '/build/tv-frame') return <TvBuilder/>;
  if (path === '/build/custom-board') return <BoardBuilder/>;
  if (path === '/build/mirror') return <MirrorBuilder/>;
  if (path === '/build/canvas') return <CanvasBuilder/>;
  if (path === '/build/custom-frame') return <CustomFrameBuilder/>;
  if (path === '/examples') return <ExamplesIndex/>;
  if (path === '/examples/tv-frames') return <TvFramesExamples/>;
  if (path === '/examples/mirrors') return <MirrorsExamples/>;
  if (path === '/examples/boards') return <BoardsExamples/>;
  if (path === '/examples/canvas') return <CanvasExamples/>;
  if (path === '/examples/custom-frames') return <CustomFramesExamples/>;
  if (path === '/commercial') return <Commercial/>;
  if (path === '/about') return <About/>;
  if (path.startsWith('/visit')) return <Visit/>;
  return <Home/>;
};

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

  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <div data-screen-label={routeLabel(route)}>
      {t.showUtilityBar && <UtilityBar/>}
      {t.showPromoBar && <PromoBar/>}
      <Navbar route={route}/>
      <main>
        <Route route={route}/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Layout">
          <TweakToggle label="Top utility bar" value={t.showUtilityBar}
            onChange={v => setTweak('showUtilityBar', v)}/>
          <TweakToggle label="Promo bar (TEXAS 15% off)" value={t.showPromoBar}
            onChange={v => setTweak('showPromoBar', v)}/>
        </TweakSection>
        <TweakSection title="Color">
          <TweakColor label="Accent red"
            value={t.accentRed}
            options={['#B91C1C', '#C92A2A', '#9F1239', '#6B0F1A']}
            onChange={v => setTweak('accentRed', v)}/>
          <TweakRadio label="Primary CTA color"
            options={[
              { value: 'green', label: 'Green' },
              { value: 'red', label: 'Red' },
              { value: 'black', label: 'Black' },
            ]}
            value={t.ctaPalette}
            onChange={v => setTweak('ctaPalette', v)}/>
        </TweakSection>
        <TweakSection title="Type">
          <TweakSelect label="Display font" value={t.displayFont}
            options={FONT_OPTIONS} onChange={v => setTweak('displayFont', v)}/>
        </TweakSection>
        <TweakSection title="Jump to">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
            {[
              { l: 'Home', h: '#/' },
              { l: 'Products', h: '#/products' },
              { l: 'TV Builder', h: '#/build/tv-frame' },
              { l: 'Boards', h: '#/build/custom-board' },
              { l: 'Mirror', h: '#/build/mirror' },
              { l: 'Canvas', h: '#/build/canvas' },
              { l: 'Examples', h: '#/examples' },
              { l: 'Commercial', h: '#/commercial' },
              { l: 'About', h: '#/about' },
              { l: 'Visit', h: '#/visit' },
            ].map(j => (
              <a key={j.h} href={j.h} style={{
                padding: '8px 10px', borderRadius: 6,
                background: '#F1F0EC', color: 'var(--ink)',
                fontSize: 12, fontWeight: 500, textAlign: 'center'
              }}>{j.l}</a>
            ))}
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

function routeLabel(route) {
  const p = (route || '#/').replace(/^#/, '');
  const map = {
    '/': '01 Home',
    '/products': '02 Products',
    '/build/tv-frame': '03 TV Builder',
    '/build/custom-board': '04 Boards Builder',
    '/build/mirror': '05 Mirror Builder',
    '/build/canvas': '06 Canvas Builder',
    '/build/custom-frame': '07 Custom Frame Builder',
    '/examples': '08 Examples Index',
    '/examples/tv-frames': '09 TV Examples',
    '/examples/mirrors': '10 Mirror Examples',
    '/examples/boards': '11 Board Examples',
    '/examples/canvas': '12 Canvas Examples',
    '/examples/custom-frames': '13 Custom Frame Examples',
    '/commercial': '14 Commercial',
    '/about': '15 About',
    '/visit': '16 Visit',
  };
  return map[p] || '00 Page';
}

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