// Tweaks panel for index.html, controls site-wide variables.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#B5482E",
  "paperColor": "#F4EFE6",
  "inkColor": "#14110E",
  "headlineSize": 100,
  "density": "regular",
  "showMarquee": true,
  "showHeroAnimation": true,
  "showLogos": true,
  "heroHeadline": "Quietly fixing the data that runs your business.",
  "heroLede": "We build, repair, and modernize the systems small companies quietly run on, whatever they happen to be, so the work flows the way your business does.",
  "metaYears": "8+",
  "metaSystems": "140+",
  "metaRepeat": "94%",
  "metaScore": "5.0"
}/*EDITMODE-END*/;

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

  // Apply CSS variable overrides
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accentColor);
    // Derive a deeper accent and soft accent from base
    root.style.setProperty("--accent-deep", t.accentColor);
    root.style.setProperty("--paper", t.paperColor);
    root.style.setProperty("--ink", t.inkColor);

    // Density
    const padMap = { compact: "64px", regular: "96px", spacious: "128px" };
    document.querySelectorAll("section").forEach(s => {
      if (!s.classList.contains("hero")) {
        s.style.paddingTop = padMap[t.density];
        s.style.paddingBottom = padMap[t.density];
      }
    });

    // Headline scale
    const heroH1 = document.querySelector(".hero h1");
    if (heroH1) heroH1.style.fontSize = `clamp(48px, ${6.4 * (t.headlineSize / 100)}vw, ${92 * (t.headlineSize / 100)}px)`;

    // Visibility toggles
    const strip = document.querySelector(".strip");
    if (strip) strip.style.display = t.showMarquee ? "" : "none";
    const heroVisual = document.querySelector(".hero-visual");
    if (heroVisual) heroVisual.style.display = t.showHeroAnimation ? "" : "none";
    const platforms = document.querySelector(".platforms");
    if (platforms) platforms.style.display = t.showLogos ? "" : "none";

    // Adjust hero grid when visual hidden
    const heroGrid = document.querySelector(".hero-grid");
    if (heroGrid) heroGrid.style.gridTemplateColumns = t.showHeroAnimation ? "" : "1fr";
  }, [t]);

  // Apply text content
  React.useEffect(() => {
    const h1 = document.querySelector(".hero h1");
    if (h1) {
      // Preserve the swap span, split on last "that"-style break is fragile, so
      // just inject as plain text with a styled accent for the last clause.
      const txt = t.heroHeadline.trim();
      // Find a natural breakpoint, last comma or just last 3-4 words
      const words = txt.split(" ");
      const breakAt = Math.max(0, words.length - 4);
      const first = words.slice(0, breakAt).join(" ");
      const rest = words.slice(breakAt).join(" ");
      h1.innerHTML = `${first} <span class="swap" style="color:${t.accentColor};font-style:italic">${rest}<svg class="underline" viewBox="0 0 220 6" preserveAspectRatio="none" style="position:absolute;left:0;right:0;bottom:-2px;height:6px"><path d="M2 4 C 60 1, 120 1, 218 4" stroke="${t.accentColor}" stroke-width="2" fill="none"/></svg></span>`;
    }
    const lede = document.querySelector(".hero p.lede");
    if (lede) lede.textContent = t.heroLede;

    const metaItems = document.querySelectorAll(".hero-meta .meta-item .num");
    if (metaItems[0]) {
      const m = t.metaYears.match(/^(\d+)(\D*)$/);
      metaItems[0].innerHTML = m ? `${m[1]}<span style="color:${t.accentColor}">${m[2]}</span>` : t.metaYears;
    }
    if (metaItems[1]) metaItems[1].textContent = t.metaSystems;
    if (metaItems[2]) metaItems[2].textContent = t.metaRepeat;
    if (metaItems[3]) metaItems[3].textContent = t.metaScore;
  }, [t.heroHeadline, t.heroLede, t.metaYears, t.metaSystems, t.metaRepeat, t.metaScore, t.accentColor]);

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakColor label="Accent" value={t.accentColor} onChange={v => setTweak("accentColor", v)} />
      <TweakColor label="Paper" value={t.paperColor} onChange={v => setTweak("paperColor", v)} />
      <TweakColor label="Ink" value={t.inkColor} onChange={v => setTweak("inkColor", v)} />

      <TweakSection label="Layout" />
      <TweakSelect label="Density" value={t.density}
        options={["compact", "regular", "spacious"]}
        onChange={v => setTweak("density", v)} />
      <TweakSlider label="Headline scale" value={t.headlineSize} min={70} max={130} unit="%"
        onChange={v => setTweak("headlineSize", v)} />

      <TweakSection label="Sections" />
      <TweakToggle label="Hero animation" value={t.showHeroAnimation}
        onChange={v => setTweak("showHeroAnimation", v)} />
      <TweakToggle label="Marquee strip" value={t.showMarquee}
        onChange={v => setTweak("showMarquee", v)} />
      <TweakToggle label="Platform logos" value={t.showLogos}
        onChange={v => setTweak("showLogos", v)} />

      <TweakSection label="Hero copy" />
      <TweakText label="Headline" value={t.heroHeadline}
        onChange={v => setTweak("heroHeadline", v)} />
      <TweakText label="Lede" value={t.heroLede}
        onChange={v => setTweak("heroLede", v)} />

      <TweakSection label="Stats" />
      <TweakText label="Years" value={t.metaYears} onChange={v => setTweak("metaYears", v)} />
      <TweakText label="Systems" value={t.metaSystems} onChange={v => setTweak("metaSystems", v)} />
      <TweakText label="Repeat %" value={t.metaRepeat} onChange={v => setTweak("metaRepeat", v)} />
      <TweakText label="Score" value={t.metaScore} onChange={v => setTweak("metaScore", v)} />
    </TweaksPanel>
  );
}

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