/* families-tweaks.jsx — expressive Tweaks for families.html.
   Reshapes the page's FEEL via three controls that rewrite design-system
   tokens under an `html.tw-on` scope: Mood (accent + dark-scheme hue),
   Corners (radius personality), Density (breathing room).
   Requires React, ReactDOM, Babel, and tweaks-panel.jsx loaded first. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "civic",
  "corners": "squared",
  "density": "regular"
}/*EDITMODE-END*/;

// Mood = the full Orient ramp (accent, badge bg/text, primary button, and the
// dark scheme-1/2 backgrounds all read from these tokens).
const FAM_MOODS = {
  civic:   { lightest:"#eeeeee", lighter:"#dddddd", light:"#8a8a8a", base:"#1f1f1f", dark:"#141414", darker:"#1b1b1b", darkest:"#101010" },
  warm:    { lightest:"#f6ebe3", lighter:"#ecd6c8", light:"#cf8f68", base:"#b0572c", dark:"#8a4221", darker:"#321f16", darkest:"#23140d" },
  coastal: { lightest:"#e5eef3", lighter:"#ccdee8", light:"#4c8bae", base:"#005a8c", dark:"#004870", darker:"#002438", darkest:"#001b2a" },
};

const FAM_CORNERS = {
  squared: { button:"0",     badge:"0",     card:"0",     input:"0",    image:"0"    },
  soft:    { button:"8px",   badge:"6px",   card:"12px",  input:"8px",  image:"12px" },
  rounded: { button:"999px", badge:"999px", card:"22px",  input:"14px", image:"18px" },
};

const FAM_DENSITY = {
  compact:  { sec:"clamp(2.5rem, 5vw, 4rem)",   pad:"1.15rem", gap:"1rem"    },
  regular:  { sec:"clamp(3.5rem, 7vw, 7rem)",   pad:"1.6rem",  gap:"1.6rem"  },
  spacious: { sec:"clamp(5rem, 11vw, 11rem)",   pad:"2.6rem",  gap:"2.75rem" },
};

function famCss(t) {
  const m = FAM_MOODS[t.mood] || FAM_MOODS.civic;
  const c = FAM_CORNERS[t.corners] || FAM_CORNERS.squared;
  const d = FAM_DENSITY[t.density] || FAM_DENSITY.regular;
  return `
html.tw-on {
  --color-orient-lightest:${m.lightest};
  --color-orient-lighter:${m.lighter};
  --color-orient-light:${m.light};
  --color-orient:${m.base};
  --color-orient-dark:${m.dark};
  --color-orient-darker:${m.darker};
  --color-orient-darkest:${m.darkest};
  --radius-button:${c.button};
  --radius-badge:${c.badge};
  --radius-card:${c.card};
  --radius-input:${c.input};
  --radius-image:${c.image};
  --section-y:${d.sec};
}
html.tw-on .card--pad { padding:${d.pad}; }
html.tw-on .cards-3, html.tw-on .cards-4, html.tw-on .ticks { gap:${d.gap}; }
/* gentle morph so reshaping feels alive */
html.tw-on .card, html.tw-on .btn, html.tw-on .badge, html.tw-on .input,
html.tw-on .section, html.tw-on .imgslot, html.tw-on .ico {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease,
              border-radius .4s ease, padding .4s ease;
}
`;
}

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

  React.useEffect(() => {
    document.documentElement.classList.add("tw-on");
  }, []);

  return (
    <>
      <style>{famCss(t)}</style>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Mood" />
        <TweakRadio label="Palette" value={t.mood}
                    options={[{value:"civic",label:"Civic"},
                              {value:"warm",label:"Warm"},
                              {value:"coastal",label:"Coastal"}]}
                    onChange={(v) => setTweak("mood", v)} />

        <TweakSection label="Form" />
        <TweakRadio label="Corners" value={t.corners}
                    options={[{value:"squared",label:"Squared"},
                              {value:"soft",label:"Soft"},
                              {value:"rounded",label:"Rounded"}]}
                    onChange={(v) => setTweak("corners", v)} />

        <TweakSection label="Rhythm" />
        <TweakRadio label="Density" value={t.density}
                    options={[{value:"compact",label:"Compact"},
                              {value:"regular",label:"Regular"},
                              {value:"spacious",label:"Spacious"}]}
                    onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </>
  );
}

(function mountFamiliesTweaks() {
  const el = document.getElementById("tweak-root");
  if (el) ReactDOM.createRoot(el).render(<FamiliesTweaks />);
})();