/* Blua Tweaks — paleta, tipografia, densidade, acento */

const BLUA_TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "snow",
  "accent": "cyan",
  "font": "Inter",
  "density": "regular",
  "scroll": "smooth"
}/*EDITMODE-END*/;

const PALETTES = {
  "snow": {
    bg:        "#FAFBFC",
    bgDeep:    "#FFFFFF",
    bgSoft:    "#F2F5F9",
    bgGrad1:   "rgba(29, 78, 216, 0.08)",
    bgGrad2:   "rgba(30, 58, 138, 0.06)",
    text:      "#0A1628",
    textDim:   "rgba(10, 22, 40, 0.62)",
    textMute:  "rgba(10, 22, 40, 0.42)",
    border:    "rgba(10, 22, 40, 0.08)",
    borderS:   "rgba(10, 22, 40, 0.16)",
    surface:   "rgba(10, 22, 40, 0.025)",
    surface2:  "rgba(10, 22, 40, 0.04)"
  },
  "ivory": {
    bg:        "#F7F4EE",
    bgDeep:    "#FBF8F2",
    bgSoft:    "#EFEBE1",
    bgGrad1:   "rgba(14, 165, 233, 0.06)",
    bgGrad2:   "rgba(37, 99, 235, 0.04)",
    text:      "#1A1815",
    textDim:   "rgba(26, 24, 21, 0.62)",
    textMute:  "rgba(26, 24, 21, 0.42)",
    border:    "rgba(26, 24, 21, 0.08)",
    borderS:   "rgba(26, 24, 21, 0.16)",
    surface:   "rgba(26, 24, 21, 0.03)",
    surface2:  "rgba(26, 24, 21, 0.05)"
  },
  "mist": {
    bg:        "#EEF2F6",
    bgDeep:    "#F6F8FA",
    bgSoft:    "#E2E8EE",
    bgGrad1:   "rgba(14, 165, 233, 0.08)",
    bgGrad2:   "rgba(37, 99, 235, 0.06)",
    text:      "#0F172A",
    textDim:   "rgba(15, 23, 42, 0.62)",
    textMute:  "rgba(15, 23, 42, 0.42)",
    border:    "rgba(15, 23, 42, 0.09)",
    borderS:   "rgba(15, 23, 42, 0.18)",
    surface:   "rgba(15, 23, 42, 0.03)",
    surface2:  "rgba(15, 23, 42, 0.05)"
  }
};

const ACCENTS = {
  "cyan":     { a: "#1E3A8A", a2: "#1D4ED8", soft: "rgba(29,78,216,0.14)",  glow: "rgba(29,78,216,0.28)" },
  "blue":     { a: "#1D4ED8", a2: "#2563EB", soft: "rgba(29,78,216,0.12)",  glow: "rgba(29,78,216,0.26)" },
  "indigo":   { a: "#4F46E5", a2: "#7C3AED", soft: "rgba(79,70,229,0.10)",   glow: "rgba(79,70,229,0.25)" }
};

function applyTweaks(t) {
  const root = document.documentElement;
  const pal  = PALETTES[t.palette] || PALETTES["snow"];
  const acc  = ACCENTS[t.accent]   || ACCENTS["cyan"];

  root.style.setProperty('--bg', pal.bg);
  root.style.setProperty('--bg-deep', pal.bgDeep);
  root.style.setProperty('--bg-soft', pal.bgSoft);
  root.style.setProperty('--text', pal.text);
  root.style.setProperty('--text-dim', pal.textDim);
  root.style.setProperty('--text-mute', pal.textMute);
  root.style.setProperty('--border', pal.border);
  root.style.setProperty('--border-strong', pal.borderS);
  root.style.setProperty('--surface', pal.surface);
  root.style.setProperty('--surface-2', pal.surface2);

  root.style.setProperty('--accent', acc.a);
  root.style.setProperty('--accent-2', acc.a2);
  root.style.setProperty('--accent-soft', acc.soft);
  root.style.setProperty('--accent-glow', acc.glow);

  // background gradient
  document.body.style.background =
    `radial-gradient(ellipse 70% 50% at 50% 0%, ${pal.bgGrad1}, transparent 65%),` +
    `radial-gradient(ellipse 60% 50% at 80% 80%, ${pal.bgGrad2}, transparent 65%),` +
    pal.bgDeep;

  // Font
  const fontMap = {
    "Inter":   `"Inter", -apple-system, BlinkMacSystemFont, sans-serif`,
    "Geist":   `"Geist", "Inter", -apple-system, sans-serif`,
    "SF Pro":  `-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", sans-serif`
  };
  root.style.setProperty('--font-sans', fontMap[t.font] || fontMap["Inter"]);
  root.style.setProperty('--font-display', fontMap[t.font] || fontMap["Inter"]);

  // Density
  document.body.dataset.density = t.density;

  // Scroll mode (smooth | stack | cards)
  document.body.dataset.scroll = t.scroll || 'smooth';
  if (window.ScrollTrigger) {
    requestAnimationFrame(() => window.ScrollTrigger.refresh());
  }
}

function App() {
  const [t, setTweak] = useTweaks(BLUA_TWEAKS);
  React.useEffect(() => applyTweaks(t), [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakRadio
        label="Background"
        value={t.palette}
        options={['snow', 'ivory', 'mist']}
        onChange={(v) => setTweak('palette', v)}
      />
      <TweakRadio
        label="Accent"
        value={t.accent}
        options={['cyan', 'blue', 'indigo']}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Typography" />
      <TweakRadio
        label="Font family"
        value={t.font}
        options={['Inter', 'Geist', 'SF Pro']}
        onChange={(v) => setTweak('font', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={(v) => setTweak('density', v)}
      />

      <TweakSection label="Scroll" />
      <TweakRadio
        label="Modo de rolagem"
        value={t.scroll}
        options={['smooth', 'stack', 'cards']}
        onChange={(v) => setTweak('scroll', v)}
      />
    </TweaksPanel>
  );
}

// Mount after DOM is ready
function mount() {
  const root = document.getElementById('tweaks-root');
  if (!root) return;
  // Apply defaults immediately so palette/font are correct on first paint
  applyTweaks(BLUA_TWEAKS);
  ReactDOM.createRoot(root).render(<App />);
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mount);
} else {
  mount();
}