); } function SvgEditor({ label, value, onChange, onReset }) { return (

{label}

onChange(e.target.value)}
        rows={6}
        style={{
          font: "10.5px/1.45 ui-monospace, 'SF Mono', Menlo, monospace",
          padding: "8px 10px",
          border: "1px solid rgba(0,0,0,.12)",
          borderRadius: 8,
          background: "rgba(255,255,255,.7)",
          color: "#29261b",
          resize: "vertical",
          minHeight: 90,
          maxHeight: 220,
          outline: "none",
          width: "100%",
          boxSizing: "border-box",
        }}
        onFocus={(e) => { e.target.style.borderColor = "rgba(0,0,0,.3)"; }}
        onBlur={(e) => { e.target.style.borderColor = "rgba(0,0,0,.12)"; }}
      />
    </div>
  );
}

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

React.useEffect(() => {
    const root = document.documentElement;
    const [primary, accent, bg] = t.palette;
    root.style.setProperty("--red", primary);
    root.style.setProperty("--burgundy", shade(primary, -0.25));
    root.style.setProperty("--ink", shade(primary, -0.3));
    root.style.setProperty("--olive", accent);
    root.style.setProperty("--olive-soft", tint(accent, 0.55));
    root.style.setProperty("--bg", bg);
    root.style.setProperty("--sky", tint(primary, 0.78));
    root.style.setProperty("--rule", "rgba(0,0,0,0.08)");
  }, [t.palette]);

React.useEffect(() => {
    ensureGoogleFont(t.displayFont);
    document.documentElement.style.setProperty(
      "--display",
      `'${t.displayFont}', 'Bricolage Grotesque', system-ui, sans-serif`
    );
  }, [t.displayFont]);

React.useEffect(() => {
    ensureGoogleFont(t.bodyFont);
    document.documentElement.style.setProperty(
      "--body",
      `'${t.bodyFont}', system-ui, -apple-system, sans-serif`
    );
  }, [t.bodyFont]);

React.useEffect(() => {
    const nav = document.getElementById("logo-mark");
    const foot = document.getElementById("logo-mark-foot");
    if (nav) nav.innerHTML = t.logoSvg;
    if (foot) foot.innerHTML = t.logoSvg;
  }, [t.logoSvg]);

React.useEffect(() => {
    const hero = document.querySelector(".hero");
    if (!hero) return;
    const s = HERO_STYLES[t.heroStyle] || HERO_STYLES.warm;
    hero.style.background = s.bg;
    hero.style.color = s.fg;
    hero.querySelectorAll("h1, p").forEach(el => { el.style.color = s.fg; });
    hero.querySelectorAll(".hero-art").forEach(el => {
      el.style.color = t.heroStyle === "cream" ? "rgba(47,47,47,.6)" : "rgba(253,247,235,.85)";
      el.style.borderColor = t.heroStyle === "cream" ? "rgba(47,47,47,.35)" : "rgba(253,247,235,.5)";
    });
  }, [t.heroStyle]);

React.useEffect(() => {
    document.querySelectorAll(".stars, .doodle").forEach(el => {
      el.style.display = t.showStarryDoodles ? "" : "none";
    });
  }, [t.showStarryDoodles]);

return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Logo (SVG)" />
      <TweakSelect
        label="Preset"
        value={matchPreset(t.logoSvg)}
        options={["rz mark (uploaded)", "studio.", "wordmark + star", "monogram", "underline", "custom"]}
        onChange={(v) => {
          if (v !== "custom" && LOGO_PRESETS[v]) setTweak("logoSvg", LOGO_PRESETS[v]);
        }}
      />
      <LogoPreview svg={t.logoSvg} />
      <SvgEditor
        label="Edit SVG"
        value={t.logoSvg}
        onChange={(v) => setTweak("logoSvg", v)}
        onReset={() => setTweak("logoSvg", LOGO_PRESETS["rz mark (uploaded)"])}
      />

<TweakSection label="Palette" />
      <TweakColor
        label="Theme"
        value={t.palette}
        options={PALETTES}
        onChange={(v) => setTweak("palette", v)}
      />

<TweakSection label="Typography" />
      <TweakSelect
        label="Display"
        value={t.displayFont}
        options={DISPLAY_FONTS}
        onChange={(v) => setTweak("displayFont", v)}
      />
      <TweakSelect
        label="Body"
        value={t.bodyFont}
        options={BODY_FONTS}
        onChange={(v) => setTweak("bodyFont", v)}
      />

<TweakSection label="Hero" />
      <TweakRadio
        label="Style"
        value={t.heroStyle}
        options={["warm", "cream", "ink"]}
        onChange={(v) => setTweak("heroStyle", v)}
      />
      <TweakToggle
        label="Daisies"
        value={t.showStarryDoodles}
        onChange={(v) => setTweak("showStarryDoodles", v)}
      />
    </TweaksPanel>
  );
}

// ── tiny color helpers ───────────────────────────────────────
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const n = h.length === 3
    ? h.split("").map(c => c + c).join("")
    : h;
  const v = parseInt(n, 16);
  return { r: (v >> 16) & 255, g: (v >> 8) & 255, b: v & 255 };
}
function rgbToHex({ r, g, b }) {
  const c = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
  return "#" + c(r) + c(g) + c(b);
}
function shade(hex, amt) {
  const { r, g, b } = hexToRgb(hex);
  const m = amt < 0 ? 1 + amt : 1;
  return rgbToHex({ r: r * m, g: g * m, b: b * m });
}
function tint(hex, amt) {
  const { r, g, b } = hexToRgb(hex);
  return rgbToHex({
    r: r + (255 - r) * amt,
    g: g + (255 - g) * amt,
    b: b + (255 - b) * amt,
  });
}

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