/* site-tweaks.jsx
 *
 * Shared Tweaks panel for Softera subpages. Each page loads this file AFTER
 * tweaks-panel.jsx and exposes its own TWEAK_DEFAULTS object (wrapped in
 * EDITMODE markers so values persist to disk). Then in App():
 *
 *   const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
 *   useSiteTweaks(t);              // injects css / body classes
 *   ...
 *   <SiteTweaks t={t} setTweak={setTweak} />  // renders the panel
 *
 * Loaded via a <script type="text/babel" src="site-tweaks.jsx"> tag.
 *
 * (Don't spell out the matching closing script tag in this comment — that
 * exact sequence inside a script's own text breaks HTML re-parsing, e.g.
 * when a build step captures the live DOM via outerHTML.)
 */

/* global React */

window.SITE_LIGHT_BGS = ["#FFFFFF", "#F4F7FA", "#E8F0F7", "#DCE8F2", "#EAF6F8", "#E6FAF3"];
window.SITE_DARK_BGS  = ["#003B66", "#001F36", "#0E1A2A", "#0A2540", "#102A43", "#1F4E96"];

window.SITE_PRESETS = [
  ["#0061A1", "#75FAC7", "#003B66"], // perus brändi
  ["#003B66", "#00CAD0", "#001F36"], // deep + cyan
  ["#0096C6", "#75FAC7", "#0E1A2A"], // sky + mint
  ["#0061A1", "#00CAD0", "#0A2540"], // blue + cyan
  ["#1F4E96", "#75FAC7", "#102A43"], // syvä sininen
  ["#003B66", "#75FAC7", "#003B66"], // mono
];

window.SITE_TWEAK_DEFAULTS_BASE = {
  primaryColor: "#0061A1",
  accentColor: "#75FAC7",
  headingColor: "#0E1A2A",
  linkColor: "#0096C6",
  heroMode: "aurora",
  heroSolid: "#003B66",
  altTheme: "light",
  altBg: "#F4F7FA",
  lightBg: "#FFFFFF",
  darkBg: "#003B66",
  density: "normal",
  radius: "medium",
  headingWeight: 500,
};

/**
 * useSiteTweaks — call inside any subpage App() with the current tweaks object.
 * It injects a <style> tag and applies body classes that re-theme the page based
 * on tweak values. Re-runs whenever t changes.
 */
window.useSiteTweaks = function useSiteTweaks(t) {
  React.useEffect(() => {
    // Body class hooks
    document.body.classList.remove("dens-tight", "dens-normal", "dens-spacious");
    document.body.classList.add("dens-" + t.density);
    document.body.classList.remove("rad-sharp", "rad-medium", "rad-rounded");
    document.body.classList.add("rad-" + t.radius);
    document.body.classList.toggle("alt-dark", t.altTheme === "dark");
  }, [t.density, t.radius, t.altTheme]);

  React.useEffect(() => {
    let s = document.getElementById("__site-tweaks");
    if (!s) { s = document.createElement("style"); s.id = "__site-tweaks"; document.head.appendChild(s); }
    const heroBg =
      t.heroMode === "solid" ? t.heroSolid :
      t.heroMode === "deep"  ? "linear-gradient(135deg, #001F36 0%, #003B66 100%)" :
                               "linear-gradient(135deg, #003B66 0%, #0061A1 35%, #0096C6 70%, #00CAD0 100%)";
    s.textContent = `
      :root {
        --softera-blue: ${t.primaryColor};
        --primary: ${t.primaryColor};
        --primary-hover: color-mix(in oklab, ${t.primaryColor} 80%, black);
        --primary-pressed: color-mix(in oklab, ${t.primaryColor} 65%, black);
        --link: ${t.linkColor};
        --link-hover: ${t.primaryColor};
        --softera-mint: ${t.accentColor};
        --accent: ${t.accentColor};
        --accent-bright: ${t.accentColor};
        --accent-button: ${t.accentColor};
        --softera-deep: ${t.darkBg};
        --bg-soft: ${t.altBg};
        --ink: ${t.headingColor};
      }

      /* Hero background (subpages) */
      .page-hero { background: ${heroBg} !important; background-size: 200% 200%; }

      /* Section backgrounds */
      .section-block,
      .solution { background: ${t.lightBg}; }
      .section-block--alt,
      .solution--alt { background: ${t.altBg} !important; }
      .section-block--dark,
      .problem-band,
      .stat-strip,
      .section-cta,
      .cta-banner,
      .site-footer { background: ${t.darkBg} !important; }

      /* When alt-section is dark themed */
      body.alt-dark .section-block--alt,
      body.alt-dark .solution--alt {
        color: #fff;
      }
      body.alt-dark .section-block--alt .section-block__h,
      body.alt-dark .solution--alt .solution__h { color: #fff; }
      body.alt-dark .section-block--alt .section-block__strap,
      body.alt-dark .solution--alt .solution__strap { color: ${t.accentColor}; }
      body.alt-dark .section-block--alt .section-block__h em,
      body.alt-dark .solution--alt .solution__h em { color: ${t.accentColor}; }
      body.alt-dark .section-block--alt .section-block__lede,
      body.alt-dark .solution--alt .solution__lede,
      body.alt-dark .section-block--alt .feature-row__p,
      body.alt-dark .section-block--alt .text-block p,
      body.alt-dark .section-block--alt .cap-card__d,
      body.alt-dark .section-block--alt .feature-row__list li,
      body.alt-dark .section-block--alt .info-list li,
      body.alt-dark .section-block--alt .note-band__p,
      body.alt-dark .section-block--alt .diff-list li { color: rgba(255,255,255,0.82); }
      body.alt-dark .section-block--alt .feature-row__eye { color: ${t.accentColor}; }
      body.alt-dark .section-block--alt .feature-row__h,
      body.alt-dark .section-block--alt .cap-card__t,
      body.alt-dark .section-block--alt .note-band__h,
      body.alt-dark .section-block--alt .info-list strong { color: #fff; }
      body.alt-dark .section-block--alt .feature-row { border-top-color: rgba(255,255,255,0.10); }
      body.alt-dark .section-block--alt .cap-card,
      body.alt-dark .section-block--alt .module,
      body.alt-dark .section-block--alt .diff-list li,
      body.alt-dark .section-block--alt .note-band {
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.10);
      }
      body.alt-dark .section-block--alt .cap-card__ico {
        background: rgba(255,255,255,0.08);
        color: ${t.accentColor};
      }
      body.alt-dark .section-block--alt .note-band__num { color: ${t.accentColor}; }
      body.alt-dark .section-block--alt .info-list li { border-top-color: rgba(255,255,255,0.10); }
      body.alt-dark .section-block--alt .info-list li:last-child { border-bottom-color: rgba(255,255,255,0.10); }

      /* Heading font weight */
      .page-hero__h,
      .section-block__h,
      .solution__h,
      .section-cta__h,
      .problem-band__h,
      .feature-row__h,
      .ref-card__title,
      .product-card__h,
      .industry-tile__h { font-weight: ${t.headingWeight}; }

      /* Density */
      body.dens-tight .page-hero { padding: 110px 56px 60px; }
      body.dens-tight .section-block,
      body.dens-tight .solution,
      body.dens-tight .problem-band,
      body.dens-tight .section-cta,
      body.dens-tight .cta-banner { padding-top: 64px; padding-bottom: 64px; }
      body.dens-spacious .page-hero { padding: 200px 56px 120px; }
      body.dens-spacious .section-block,
      body.dens-spacious .solution,
      body.dens-spacious .problem-band,
      body.dens-spacious .section-cta,
      body.dens-spacious .cta-banner { padding-top: 150px; padding-bottom: 150px; }

      /* Radius */
      body.rad-sharp .cap-card,
      body.rad-sharp .product-card,
      body.rad-sharp .industry-tile,
      body.rad-sharp .ref-card,
      body.rad-sharp .feature-row__visual,
      body.rad-sharp .quote-callout,
      body.rad-sharp .note-band,
      body.rad-sharp .module,
      body.rad-sharp .diff-list li,
      body.rad-sharp .btn { border-radius: 4px !important; }
      body.rad-rounded .cap-card,
      body.rad-rounded .product-card,
      body.rad-rounded .industry-tile,
      body.rad-rounded .feature-row__visual,
      body.rad-rounded .note-band,
      body.rad-rounded .diff-list li,
      body.rad-rounded .module { border-radius: 22px !important; }
      body.rad-rounded .ref-card,
      body.rad-rounded .quote-callout { border-radius: 28px !important; }
      body.rad-rounded .btn { border-radius: 999px !important; }
    `;
  }, [t.primaryColor, t.accentColor, t.headingColor, t.linkColor, t.heroMode, t.heroSolid,
      t.lightBg, t.altBg, t.darkBg, t.headingWeight]);
};

/**
 * SiteTweaks — the actual panel UI. Renders inside a <TweaksPanel>.
 * Pass `extras` to inject page-specific controls between the standard sections.
 */
window.SiteTweaks = function SiteTweaks({ t, setTweak, extras = null }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Väripaletti — preset" />
      <TweakColor label="Brändipaletti" value={[t.primaryColor, t.accentColor, t.darkBg]}
        options={SITE_PRESETS}
        onChange={(v) => setTweak({ primaryColor: v[0], accentColor: v[1], darkBg: v[2] })} />

      <TweakSection label="Brändin perusvärit" />
      <TweakColor label="Pääväri (logo, CTA)" value={t.primaryColor}
        options={["#0061A1", "#003B66", "#0096C6", "#00CAD0", "#1F4E96"]}
        onChange={(v) => setTweak("primaryColor", v)} />
      <TweakColor label="Aksentti" value={t.accentColor}
        options={["#75FAC7", "#00CAD0", "#0096C6", "#A8F1B5"]}
        onChange={(v) => setTweak("accentColor", v)} />
      <TweakColor label="Otsikkoväri (vaalealla)" value={t.headingColor}
        options={["#0E1A2A", "#003B66", "#001F36", "#0061A1"]}
        onChange={(v) => setTweak("headingColor", v)} />
      <TweakColor label="Linkkien väri" value={t.linkColor}
        options={["#0096C6", "#0061A1", "#00CAD0", "#003B66"]}
        onChange={(v) => setTweak("linkColor", v)} />

      <TweakSection label="Hero" />
      <TweakRadio label="Hero-tausta" value={t.heroMode}
        options={["aurora", "deep", "solid"]}
        onChange={(v) => setTweak("heroMode", v)} />
      {t.heroMode === "solid" && (
        <TweakColor label="Hero — väri" value={t.heroSolid}
          options={SITE_DARK_BGS}
          onChange={(v) => setTweak("heroSolid", v)} />
      )}

      <TweakSection label="Vaaleat osiot" />
      <TweakColor label="Päätausta" value={t.lightBg}
        options={SITE_LIGHT_BGS}
        onChange={(v) => setTweak("lightBg", v)} />

      <TweakSection label="Aksenttiosio (section-block--alt)" />
      <TweakRadio label="Teema" value={t.altTheme}
        options={["light", "dark"]}
        onChange={(v) => setTweak("altTheme", v)} />
      <TweakColor label="Tausta" value={t.altBg}
        options={t.altTheme === "dark" ? SITE_DARK_BGS : SITE_LIGHT_BGS}
        onChange={(v) => setTweak("altBg", v)} />

      <TweakSection label="Tummat osiot" />
      <TweakColor label="Tausta (problem, stats, cta, footer)" value={t.darkBg}
        options={SITE_DARK_BGS}
        onChange={(v) => setTweak("darkBg", v)} />

      {extras}

      <TweakSection label="Layout" />
      <TweakRadio label="Tiheys" value={t.density}
        options={["tight", "normal", "spacious"]}
        onChange={(v) => setTweak("density", v)} />
      <TweakRadio label="Kulmien pyöristys" value={t.radius}
        options={["sharp", "medium", "rounded"]}
        onChange={(v) => setTweak("radius", v)} />

      <TweakSection label="Typografia" />
      <TweakRadio label="Otsikkojen paksuus" value={t.headingWeight}
        options={[400, 500, 600]}
        onChange={(v) => setTweak("headingWeight", v)} />
    </TweaksPanel>
  );
};