// Tack — Tweaks panel
// Allows light remixing without leaving the site: accent palette, hero image,
// headline copy, density. Persists via useTweaks (localStorage).

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#4ade9f", "#2a8bff"],
  "heroImage": "assets/hero-daily-allowance.png",
  "headline": "Know what you can spend today.",
  "density": "regular"
}/*EDITMODE-END*/;

// Curated accent palettes (primary, secondary)
const PALETTES = [
  ["#4ade9f", "#2a8bff"],   // mint → blue (default, user-approved)
  ["#2a8bff", "#7c5cff"],   // blue → violet
  ["#0ea5b7", "#2a8bff"],   // teal → blue (calm)
  ["#d4af37", "#f4915a"],   // gold → orange (premium)
  ["#7c5cff", "#f06292"],   // violet → pink
];

const HEROES = [
  { v: "assets/hero-daily-allowance.png", label: "Daily allowance" },
  { v: "assets/hero-multi-currency.png", label: "Multi-currency" },
  { v: "assets/hero-privacy.png", label: "Privacy" },
  { v: "assets/hero-savings.png", label: "Savings goals" },
];

const HEADLINES = [
  "Know what you can spend today.",
  "Your money, clearly.",
  "One number. One day. Your money.",
  "Stop wondering. Start spending with confidence.",
];

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

  // Apply CSS vars + DOM updates whenever tweaks change
  React.useEffect(() => {
    const root = document.documentElement;
    const [a, b] = t.palette || PALETTES[0];
    root.style.setProperty('--accent', a);
    root.style.setProperty('--accent-2', b);
    root.setAttribute('data-density', t.density);

    const heroImg = document.getElementById('hero-img');
    if (heroImg && t.heroImage) heroImg.src = t.heroImage;

    const h1 = document.getElementById('hero-headline');
    if (h1) {
      const text = t.headline || HEADLINES[0];
      // wrap last word in gradient span for visual punctuation
      const parts = text.trim().replace(/\.$/, '').split(' ');
      const last = parts.pop();
      const dot = text.trim().endsWith('.') ? '.' : '';
      h1.innerHTML = parts.join(' ') + ' <span class="grad">' + last + dot + '</span>';
    }
  }, [t]);

  return (
    <TweaksPanel title="Tack">
      <TweakSection label="Accent" />
      <TweakColor
        label="Palette"
        value={t.palette}
        options={PALETTES}
        onChange={(v) => setTweak('palette', v)}
      />

      <TweakSection label="Hero image" />
      <TweakSelect
        label="Hero composition"
        value={t.heroImage}
        options={HEROES.map(h => ({ label: h.label, value: h.v }))}
        onChange={(v) => setTweak('heroImage', v)}
      />

      <TweakSection label="Headline" />
      <TweakSelect
        label="Headline copy"
        value={t.headline}
        options={HEADLINES.map(h => ({ label: h, value: h }))}
        onChange={(v) => setTweak('headline', v)}
      />

      <TweakSection label="Layout" />
      <TweakRadio
        label="Section density"
        value={t.density}
        options={['compact', 'regular', 'roomy']}
        onChange={(v) => setTweak('density', v)}
      />
    </TweaksPanel>
  );
}

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