/* Leader Printing — home page tweaks */
const { useEffect } = React;

const PALETTES = [
  { name: "Navy + Red",    navy: "#0B2A5B", red: "#D62828" },
  { name: "Navy + Amber",  navy: "#0B2A5B", red: "#C8841C" },
  { name: "Navy + Forest", navy: "#0B2A5B", red: "#2F7A4F" },
  { name: "Ink + Red",     navy: "#15161A", red: "#D62828" },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": 0,
  "heroLayout": "editorial",
  "showMarquee": true,
  "showStats": true,
  "cardStyle": "outlined",
  "denseHeader": false
}/*EDITMODE-END*/;

function applyPalette(idx) {
  const p = PALETTES[idx] || PALETTES[0];
  const root = document.documentElement;
  root.style.setProperty("--navy", p.navy);
  root.style.setProperty("--red", p.red);
  // recompute hover variants
  root.style.setProperty("--navy-900", shade(p.navy, -10));
  root.style.setProperty("--navy-700", shade(p.navy, 18));
  root.style.setProperty("--navy-50", tint(p.navy, 92));
}
function shade(hex, pct) {
  const { r, g, b } = hexToRgb(hex);
  const t = pct < 0 ? 0 : 255;
  const p = Math.abs(pct) / 100;
  const f = (v) => Math.round((t - v) * p + v);
  return `rgb(${f(r)}, ${f(g)}, ${f(b)})`;
}
function tint(hex, pct) {
  const { r, g, b } = hexToRgb(hex);
  const t = 255;
  const p = pct / 100;
  const f = (v) => Math.round((t - v) * p + v);
  return `rgb(${f(r)}, ${f(g)}, ${f(b)})`;
}
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16),
  };
}

function HomeTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    applyPalette(t.palette);
  }, [t.palette]);

  useEffect(() => {
    document.querySelector(".marquee")?.style.setProperty("display", t.showMarquee ? "" : "none");
  }, [t.showMarquee]);

  useEffect(() => {
    document.querySelectorAll("[data-screen-label='02 Stats']").forEach(el => {
      el.style.display = t.showStats ? "" : "none";
    });
  }, [t.showStats]);

  useEffect(() => {
    document.body.classList.toggle("layout-stacked", t.heroLayout === "stacked");
    document.body.classList.toggle("cards-filled", t.cardStyle === "filled");
    document.body.classList.toggle("header-dense", t.denseHeader);
  }, [t.heroLayout, t.cardStyle, t.denseHeader]);

  const paletteOptions = PALETTES.map((p, i) => [p.navy, p.red, "#FAFAF7"]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color">
        <TweakColor
          label="Palette"
          value={paletteOptions[t.palette]}
          options={paletteOptions}
          onChange={(v) => {
            const idx = paletteOptions.findIndex(p => JSON.stringify(p) === JSON.stringify(v));
            setTweak("palette", idx >= 0 ? idx : 0);
          }}
        />
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          letterSpacing: "0.12em",
          color: "#6B7280",
          textTransform: "uppercase",
          marginTop: 2,
        }}>
          {PALETTES[t.palette].name}
        </div>
      </TweakSection>

      <TweakSection label="Layout">
        <TweakRadio
          label="Hero layout"
          value={t.heroLayout}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "stacked", label: "Stacked" },
          ]}
          onChange={(v) => setTweak("heroLayout", v)}
        />
        <TweakRadio
          label="Service cards"
          value={t.cardStyle}
          options={[
            { value: "outlined", label: "Outlined" },
            { value: "filled", label: "Filled" },
          ]}
          onChange={(v) => setTweak("cardStyle", v)}
        />
      </TweakSection>

      <TweakSection label="Sections">
        <TweakToggle
          label="Show marquee strip"
          value={t.showMarquee}
          onChange={(v) => setTweak("showMarquee", v)}
        />
        <TweakToggle
          label="Show stats counters"
          value={t.showStats}
          onChange={(v) => setTweak("showStats", v)}
        />
        <TweakToggle
          label="Dense header"
          value={t.denseHeader}
          onChange={(v) => setTweak("denseHeader", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<HomeTweaks />);