/* App — router + tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FFC72C",
  "fontDisplay": "Archivo Black",
  "fontBody": "Manrope",
  "heroVariant": "A",
  "density": "default"
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  "Archivo Black": { display: "'Archivo Black', Impact, sans-serif", head: "'Archivo', sans-serif" },
  "Anton":         { display: "'Anton', Impact, sans-serif",         head: "'Archivo', sans-serif" },
  "Bebas Neue":    { display: "'Bebas Neue', Impact, sans-serif",    head: "'Archivo', sans-serif" },
  "Space Grotesk": { display: "'Space Grotesk', sans-serif",         head: "'Space Grotesk', sans-serif" }
};
const BODY_FONTS = {
  "Manrope":        "'Manrope', system-ui, sans-serif",
  "DM Sans":        "'DM Sans', system-ui, sans-serif",
  "Plus Jakarta":   "'Plus Jakarta Sans', system-ui, sans-serif",
  "IBM Plex Sans":  "'IBM Plex Sans', system-ui, sans-serif"
};
const ACCENT_PALETTE = [
  '#FFC72C',  // Sr Banheiro yellow (default)
  '#FFAB00',  // sun
  '#F4631E',  // construction orange
  '#2A6FDB'   // utility blue
];

function useHashRoute() {
  const parse = () => {
    const hash = window.location.hash.replace(/^#\/?/, '') || '';
    const [path] = hash.split('?');
    const seg = path.split('/')[0] || 'home';
    return seg;
  };
  const [route, setRoute] = React.useState(parse());
  React.useEffect(() => {
    const onHash = () => {
      setRoute(parse());
      window.scrollTo({ top: 0, behavior: 'auto' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return route;
}

function App() {
  const route = useHashRoute();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tweaksMounted, setTweaksMounted] = React.useState(false);

  React.useEffect(() => { setTweaksMounted(true); }, []);

  // Apply tweaks → CSS variables / styles
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--yellow', tweaks.accent);
    // adjust yellow-deep proportionally
    root.style.setProperty('--yellow-deep', shadeColor(tweaks.accent, -18));
    root.style.setProperty('--yellow-soft', shadeColor(tweaks.accent, 35));

    const pair = FONT_PAIRS[tweaks.fontDisplay] || FONT_PAIRS["Archivo Black"];
    root.style.setProperty('--font-display', pair.display);
    root.style.setProperty('--font-head', pair.head);
    root.style.setProperty('--font-body', BODY_FONTS[tweaks.fontBody] || BODY_FONTS["Manrope"]);

    document.body.style.fontSize = tweaks.density === 'compact' ? '15px' : tweaks.density === 'comfortable' ? '17px' : '16px';
  }, [tweaks]);

  let Page = Home;
  if (route === 'catalogo') Page = Catalogo;
  else if (route === 'vip') Page = VIP;

  return (
    <React.Fragment>
      <Header route={route} />
      {route === 'home' ? <Home heroVariant={tweaks.heroVariant}/> : <Page/>}
      <Footer/>

      {tweaksMounted && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Cor de destaque">
            <TweakColor
              label="Amarelo da marca"
              value={tweaks.accent}
              options={ACCENT_PALETTE}
              onChange={(v) => setTweak('accent', v)}
            />
          </TweakSection>

          <TweakSection title="Tipografia">
            <TweakSelect
              label="Display"
              value={tweaks.fontDisplay}
              options={Object.keys(FONT_PAIRS)}
              onChange={(v) => setTweak('fontDisplay', v)}
            />
            <TweakSelect
              label="Corpo"
              value={tweaks.fontBody}
              options={Object.keys(BODY_FONTS)}
              onChange={(v) => setTweak('fontBody', v)}
            />
          </TweakSection>

          <TweakSection title="Hero da Home">
            <TweakRadio
              label="Variante"
              value={tweaks.heroVariant}
              options={[
                { value: 'A', label: 'Editorial' },
                { value: 'B', label: 'Foto Fundo' },
                { value: 'C', label: 'Split' }
              ]}
              onChange={(v) => setTweak('heroVariant', v)}
            />
            <p style={{fontSize: 12, color: 'var(--tw-muted, #94a3b8)', marginTop: 8, lineHeight: 1.45}}>
              A: tipografia grande + imagem · B: foto cobrindo + texto sobre · C: split editorial 50/50
            </p>
          </TweakSection>

          <TweakSection title="Densidade">
            <TweakRadio
              label="Espaçamento base"
              value={tweaks.density}
              options={[
                { value: 'compact', label: 'Compacto' },
                { value: 'default', label: 'Padrão' },
                { value: 'comfortable', label: 'Espaçoso' }
              ]}
              onChange={(v) => setTweak('density', v)}
            />
          </TweakSection>

          <TweakSection title="Navegação rápida">
            <div style={{display: 'grid', gap: 6}}>
              {[
                ['#/', 'Home'],
                ['#/catalogo', 'Catálogo'],
                ['#/vip', 'Banheiro VIP'],
              ].map(([href, label]) => (
                <a key={href} href={href} style={{
                  display: 'block', padding: '8px 10px',
                  background: 'rgba(255,255,255,.04)',
                  border: '1px solid rgba(255,255,255,.08)',
                  borderRadius: 6, fontSize: 13, color: '#e2e8f0'
                }}>→ {label}</a>
              ))}
            </div>
          </TweakSection>
        </TweaksPanel>
      )}
    </React.Fragment>
  );
}

/* small color helper */
function shadeColor(hex, percent) {
  if (!hex || !hex.startsWith('#')) return hex;
  let h = hex.replace('#', '');
  if (h.length === 3) h = h.split('').map(c => c + c).join('');
  const num = parseInt(h, 16);
  let r = (num >> 16) + Math.round(2.55 * percent);
  let g = ((num >> 8) & 0xff) + Math.round(2.55 * percent);
  let b = (num & 0xff) + Math.round(2.55 * percent);
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

window.App = App;

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