// GreenLeaze landing — expressive tweaks
// Three controls that re-shape the entire visual identity:
//   1. Palette   — re-skins surfaces & accents (Forêt / Sable / Sauge)
//   2. Typographie — swaps display font personality (Éditorial / Sérif / Tech)
//   3. Atmosphère  — density, radius & rhythm (Compact / Équilibré / Aéré)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "foret",
  "type": "editorial",
  "air": "balanced"
}/*EDITMODE-END*/;

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

  // Apply tweaks as data-* attributes on <body> so the CSS in tweaks-overrides.css picks them up
  React.useEffect(() => {
    document.body.setAttribute('data-palette', t.palette);
    document.body.setAttribute('data-type', t.type);
    document.body.setAttribute('data-air', t.air);
  }, [t.palette, t.type, t.air]);

  // Render swatches as inline SVG previews instead of plain hex so the palette
  // option reads as a full "mood" not a single color
  const paletteOptions = [
    ['#0D5537', '#E7F2F1', '#F2B814'],     // Forêt — original
    ['#0D5537', '#F6EFE3', '#C1914C'],     // Sable — warm cream + tan
    ['#0D5537', '#DBE6D9', '#98C293'],     // Sauge — soft sage
  ];
  const paletteLabels = ['Forêt', 'Sable', 'Sauge'];
  const paletteKey = { 0: 'foret', 1: 'sable', 2: 'sauge' };
  const paletteIdx = ['foret', 'sable', 'sauge'].indexOf(t.palette);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <div className="gl-palette-grid">
        {paletteOptions.map((cols, i) => (
          <button
            key={i}
            type="button"
            className={"gl-palette-card" + (paletteIdx === i ? ' is-active' : '')}
            onClick={() => setTweak('palette', paletteKey[i])}
            aria-label={paletteLabels[i]}
          >
            <div className="gl-palette-swatch">
              <span style={{ background: cols[0] }} />
              <span style={{ background: cols[1] }} />
              <span style={{ background: cols[2] }} />
            </div>
            <div className="gl-palette-label">{paletteLabels[i]}</div>
          </button>
        ))}
      </div>

      <TweakSection label="Typographie" />
      <TweakRadio
        value={t.type}
        options={['editorial', 'serif', 'tech']}
        onChange={(v) => setTweak('type', v)}
      />
      <div className="gl-type-preview" data-type-preview={t.type}>
        Vos produits, en circulaire.
      </div>

      <TweakSection label="Atmosphère" />
      <TweakRadio
        value={t.air}
        options={['compact', 'balanced', 'aere']}
        onChange={(v) => setTweak('air', v)}
      />
      <div className="gl-air-hint">
        {t.air === 'compact' && 'Dense · startup tech, plus d\'info à l\'écran'}
        {t.air === 'balanced' && 'Équilibré · le rythme par défaut'}
        {t.air === 'aere' && 'Aéré · éditorial, généreux, premium'}
      </div>
    </TweaksPanel>
  );
}

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