// Main app — Tech Mono variant (final pick), full-bleed with Tweaks.

const ACCENTS = {
  naranja: '#d9521c',
  tinta: '#101010',
  lima: '#8fa31f',
  azul: '#2563eb',
  verde: '#0f9d70',
};

const TYPE_STACKS = {
  mixto: {
    sans: "'Inter Tight', 'Helvetica Neue', sans-serif",
    mono: "'JetBrains Mono', ui-monospace, monospace",
  },
  clasico: {
    sans: "'Public Sans', system-ui, sans-serif",
    mono: "'IBM Plex Mono', monospace",
  },
  moderno: {
    sans: "'Geist', 'Inter Tight', sans-serif",
    mono: "'Geist Mono', 'JetBrains Mono', monospace",
  },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "naranja",
  "typeStack": "mixto",
  "density": "amplia"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = ACCENTS[t.accent] || ACCENTS.naranja;
  const stack = TYPE_STACKS[t.typeStack] || TYPE_STACKS.mixto;

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--typ-sans', stack.sans);
    r.style.setProperty('--typ-mono', stack.mono);
  }, [t.typeStack]);

  const fontOverride = `
    .tk-root { font-family: var(--typ-sans) !important; }
    .tk-root .tk-mono, .tk-root .tk-brand, .tk-root .tk-nav a,
    .tk-root .tk-topstrip, .tk-root .tk-label, .tk-root .tk-num,
    .tk-root .tk-svc-n, .tk-root .tk-tl-pd, .tk-root .tk-tl-tag,
    .tk-root .tk-tl-at, .tk-root .tk-card-head, .tk-root .tk-card-body,
    .tk-root .tk-btn, .tk-root .tk-id-role, .tk-root .tk-client,
    .tk-root .tk-col-idx, .tk-root .tk-c-row-l, .tk-root .tk-foot,
    .tk-root .tk-pon-tag, .tk-root .tk-pon-venues-label,
    .tk-root .tk-pon-vkind, .tk-root .tk-pon-vmore,
    .tk-root .tk-pon-fmt-n
    { font-family: var(--typ-mono) !important; }
  `;

  return (
    <>
      <style>{fontOverride}</style>
      <Tech density={t.density} accent={accent} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Color de acento">
          <TweakRadio
            label="Acento"
            value={t.accent}
            options={[
              { value: 'naranja', label: 'Naranja' },
              { value: 'tinta', label: 'Tinta' },
              { value: 'azul', label: 'Azul' },
              { value: 'verde', label: 'Verde' },
              { value: 'lima', label: 'Lima' },
            ]}
            onChange={(v) => setTweak('accent', v)}
          />
        </TweakSection>

        <TweakSection label="Tipografía">
          <TweakRadio
            label="Set"
            value={t.typeStack}
            options={[
              { value: 'mixto', label: 'Mixto' },
              { value: 'clasico', label: 'Clásico' },
              { value: 'moderno', label: 'Moderno' },
            ]}
            onChange={(v) => setTweak('typeStack', v)}
          />
        </TweakSection>

        <TweakSection label="Densidad">
          <TweakRadio
            label="Espaciado"
            value={t.density}
            options={[
              { value: 'compacta', label: 'Compacta' },
              { value: 'amplia', label: 'Amplia' },
            ]}
            onChange={(v) => setTweak('density', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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