/* ClearPath Tweaks — three expressive controls that reshape the whole feel:
   1. Brand Energy  — swaps the accent identity (orange / red / blue / green)
   2. Display Voice — recasts every headline (condensed / heavy / grotesque)
   3. Atmosphere    — re-lights the backdrop (flat midnight / warm ember / cool steel) */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "energy": ["#E8500A", "#B83D05"],
  "voice": "Bebas",
  "atmosphere": "Midnight"
}/*EDITMODE-END*/;

const VOICE_FONTS = {
  Bebas:   "'Bebas Neue', sans-serif",
  Anton:   "'Anton', sans-serif",
  Archivo: "'Archivo Black', sans-serif",
};

const ATMOSPHERES = {
  Midnight: {
    black: "#111010",
    steel: "#2A2A2A",
    nav:   "rgba(17,16,16,0.92)",
    layer: "transparent",
  },
  Ember: {
    black: "#15100D",
    steel: "#2C241F",
    nav:   "rgba(21,16,13,0.92)",
    // warm glow keyed to the live accent, pooling up behind the hero
    layer: "radial-gradient(1100px 620px at 72% -8%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 60%), radial-gradient(900px 700px at 0% 100%, color-mix(in srgb, var(--orange) 9%, transparent), transparent 55%)",
  },
  Steelyard: {
    black: "#171A1E",
    steel: "#242A30",
    nav:   "rgba(23,26,30,0.92)",
    layer: "linear-gradient(180deg, rgba(255,255,255,0.04), transparent 26%), radial-gradient(1000px 560px at 50% 0%, rgba(120,150,180,0.07), transparent 60%)",
  },
};

function applyTweaks(t) {
  const root = document.documentElement.style;
  // 1. Brand energy
  const [accent, accentDark] = Array.isArray(t.energy) ? t.energy : [t.energy, t.energy];
  root.setProperty('--orange', accent);
  root.setProperty('--orange-dark', accentDark);
  // 2. Display voice
  root.setProperty('--font-display', VOICE_FONTS[t.voice] || VOICE_FONTS.Bebas);
  // 3. Atmosphere
  const a = ATMOSPHERES[t.atmosphere] || ATMOSPHERES.Midnight;
  root.setProperty('--black', a.black);
  root.setProperty('--steel', a.steel);
  root.setProperty('--nav-bg', a.nav);
  root.setProperty('--atmosphere', a.layer);
}

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Identity" />
      <TweakColor
        label="Brand energy"
        value={t.energy}
        options={[
          ["#E8500A", "#B83D05"],
          ["#E11900", "#A81200"],
          ["#1F6FE5", "#1551B0"],
          ["#1E9E57", "#14713D"],
        ]}
        onChange={(v) => setTweak('energy', v)}
      />
      <TweakSection label="Headlines" />
      <TweakRadio
        label="Display voice"
        value={t.voice}
        options={["Bebas", "Anton", "Archivo"]}
        onChange={(v) => setTweak('voice', v)}
      />
      <TweakSection label="Backdrop" />
      <TweakRadio
        label="Atmosphere"
        value={t.atmosphere}
        options={["Midnight", "Ember", "Steelyard"]}
        onChange={(v) => setTweak('atmosphere', v)}
      />
    </TweaksPanel>
  );
}

// Apply persisted defaults immediately (before the panel is ever opened)
applyTweaks(TWEAK_DEFAULTS);

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