/* Pentai landing — Tweaks. Controls the static HTML via CSS vars + body classes. */

const HERO_SUB_DEFAULT = "Pentai brings homework tracking, activity scheduling, shopping lists, and household management into one elegant app — built for busy families who need smart, effortless coordination.";

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#2495A0", "#5BA886", "#FA8E52"],
  "headlineFont": "DM Serif",
  "surface": ["#FAF7F2", "#F2EDE4", "#EDE5D8"],
  "cardRadius": 24,
  "gradientHeadlines": false,
  "floatPhone": true,
  "grain": true,
  "badgeStyle": "light",
  "heroSub": HERO_SUB_DEFAULT
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Cormorant": "'Cormorant Garamond', serif",
  "DM Serif": "'DM Serif Display', serif",
  "Nunito": "'Nunito', sans-serif"
};

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

  // Accent palette → cool / mid / warm families + the signature gradient
  React.useEffect(() => {
    const r = document.documentElement.style;
    const [cool, mid, warm] = t.palette;
    r.setProperty('--teal', cool);
    r.setProperty('--teal-light', cool);
    r.setProperty('--brand-teal', cool);
    r.setProperty('--amber', warm);
    r.setProperty('--amber-light', warm);
    r.setProperty('--brand-amber', warm);
    r.setProperty('--brand-grad', `linear-gradient(115deg, ${cool} 0%, ${mid} 48%, ${warm} 100%)`);
  }, [t.palette]);

  // Surface tone
  React.useEffect(() => {
    const r = document.documentElement.style;
    const [c1, c2, c3] = t.surface;
    r.setProperty('--cream', c1);
    r.setProperty('--cream-2', c2);
    r.setProperty('--cream-3', c3);
  }, [t.surface]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--display-font', FONT_MAP[t.headlineFont] || FONT_MAP.Cormorant);
  }, [t.headlineFont]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--card-radius', t.cardRadius + 'px');
  }, [t.cardRadius]);

  React.useEffect(() => {
    document.body.classList.toggle('solid-headlines', !t.gradientHeadlines);
  }, [t.gradientHeadlines]);

  React.useEffect(() => {
    document.body.classList.toggle('no-float', !t.floatPhone);
  }, [t.floatPhone]);

  React.useEffect(() => {
    document.body.classList.toggle('no-grain', !t.grain);
  }, [t.grain]);

  React.useEffect(() => {
    document.body.classList.toggle('badges-light', t.badgeStyle === 'light');
  }, [t.badgeStyle]);

  React.useEffect(() => {
    const el = document.querySelector('.hero-sub');
    if (el) el.textContent = t.heroSub;
  }, [t.heroSub]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.palette}
        options={[
          ["#2495A0", "#5BA886", "#FA8E52"],
          ["#E8924A", "#F0A85C", "#E0633A"],
          ["#2495A0", "#7E8FB5", "#C17D8E"],
          ["#2E9E7E", "#7DB36A", "#E2A33C"]
        ]}
        onChange={(v) => setTweak('palette', v)} />
      <TweakToggle label="Gradient headlines" value={t.gradientHeadlines}
        onChange={(v) => setTweak('gradientHeadlines', v)} />

      <TweakSection label="Type & surface" />
      <TweakRadio label="Headline font" value={t.headlineFont}
        options={["Cormorant", "DM Serif", "Nunito"]}
        onChange={(v) => setTweak('headlineFont', v)} />
      <TweakColor label="Background" value={t.surface}
        options={[
          ["#FAF7F2", "#F2EDE4", "#EDE5D8"],
          ["#F6F5F1", "#EDEBE4", "#E4E1D7"],
          ["#F3F4F4", "#E8EAEA", "#DDE0E0"],
          ["#F7F3F4", "#EFE7E9", "#E7DBDE"]
        ]}
        onChange={(v) => setTweak('surface', v)} />
      <TweakSlider label="Card corners" value={t.cardRadius} min={8} max={36} unit="px"
        onChange={(v) => setTweak('cardRadius', v)} />

      <TweakSection label="Motion" />
      <TweakToggle label="Float phone" value={t.floatPhone}
        onChange={(v) => setTweak('floatPhone', v)} />
      <TweakToggle label="Grain texture" value={t.grain}
        onChange={(v) => setTweak('grain', v)} />

      <TweakSection label="Download" />
      <TweakRadio label="Store badges" value={t.badgeStyle}
        options={["dark", "light"]}
        onChange={(v) => setTweak('badgeStyle', v)} />

      <TweakSection label="Copy" />
      <TweakText label="Hero subhead" value={t.heroSub}
        onChange={(v) => setTweak('heroSub', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<PentaiTweaks />);