// Moodset — Home page composition.
// Hero → Categories preview → The Moodset Edit (featured) → Manifesto → Footer
// Product + category data come from data.js (loaded as a plain <script src>).

const { useEffect } = React;

// ── Tweak defaults (writable by the host) ───────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d4924a",
  "bgWarmth": 12,
  "overlay": 55,
  "density": "cozy"
}/*EDITMODE-END*/;

// Curated accent options — all warm amber / brass family
const ACCENT_OPTIONS = ['#d4924a', '#e8b975', '#c97a3a', '#b89968'];
const DENSITY_OPTIONS = [
  { value: 'comfortable', label: 'Comfy' },
  { value: 'cozy',        label: 'Cozy'  },
  { value: 'compact',     label: 'Dense' },
];

function hexToRgb(hex) {
  const h = hex.replace('#','');
  const n = parseInt(h.length === 3 ? h.split('').map(c=>c+c).join('') : h, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}

function applyTweaks(t) {
  const root = document.documentElement;
  const { r, g, b } = hexToRgb(t.accent);
  root.style.setProperty('--amber', t.accent);
  root.style.setProperty('--amber-soft', `rgba(${r},${g},${b},0.18)`);
  root.style.setProperty('--amber-glow', `rgba(${r},${g},${b},0.35)`);
  const w = Number(t.bgWarmth) || 0;
  const ink   = `oklch(${(0.06 + w*0.0005).toFixed(3)} ${(w*0.0008).toFixed(4)} 70)`;
  const char  = `oklch(${(0.10 + w*0.0009).toFixed(3)} ${(w*0.0012).toFixed(4)} 70)`;
  const char2 = `oklch(${(0.13 + w*0.0010).toFixed(3)} ${(w*0.0015).toFixed(4)} 70)`;
  root.style.setProperty('--ink', ink);
  root.style.setProperty('--char', char);
  root.style.setProperty('--char-2', char2);
  root.style.setProperty('--hero-overlay', String((Number(t.overlay) || 0) / 100));
}

function HomePage() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(t); }, [t]);

  const products = window.MOODSET_PRODUCTS || [];
  const categories = window.MOODSET_CATEGORIES || [];
  const featured = products.filter((p) => p.featured);

  return (
    <React.Fragment>
      <Nav current="home" />
      <Hero />

      <Categories items={categories} />
      <Edit products={featured} />

      <Manifesto />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Atmosphere" />
        <TweakColor
          label="Accent glow"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSlider
          label="Background warmth"
          value={t.bgWarmth}
          min={0} max={24} step={1}
          onChange={(v) => setTweak('bgWarmth', v)}
        />
        <TweakSlider
          label="Hero overlay"
          value={t.overlay}
          min={20} max={85} step={5} unit="%"
          onChange={(v) => setTweak('overlay', v)}
        />

        <TweakSection label="The Edit" />
        <TweakRadio
          label="Grid density"
          value={t.density}
          options={DENSITY_OPTIONS}
          onChange={(v) => setTweak('density', v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HomePage />);