// landing-tweaks.jsx — Tweaks panel for the Alkimia landing
// Exposes: title font (Cinzel / Marcellus), accent gold tone, surface ratio preview.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "titleFont": "Cinzel",
  "goldTone": "#C9A24B",
  "showSerial": true,
  "showTrustStrip": true,
  "compactSpacing": false
}/*EDITMODE-END*/;

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

  // Apply CSS variables
  React.useEffect(() => {
    const r = document.documentElement;
    const fontStack = t.titleFont === "Marcellus"
      ? '"Marcellus", "Times New Roman", serif'
      : '"Cinzel", "Times New Roman", serif';
    r.style.setProperty('--serif-display', fontStack);
    r.style.setProperty('--gold', t.goldTone);
    // Recompute soft/deep variants from base hue if user changed tone
    // (kept simple — just shift lightness)
    r.style.setProperty('--gold-soft', shiftLightness(t.goldTone, 0.08));
    r.style.setProperty('--gold-deep', shiftLightness(t.goldTone, -0.18));

    // Toggle visibility
    document.querySelectorAll('.product-card .serial, .precio-card .pc-serial')
      .forEach(el => el.style.display = t.showSerial ? '' : 'none');
    document.querySelector('.trust-strip')
      ?.style.setProperty('display', t.showTrustStrip ? 'grid' : 'none');

    // Compact spacing
    if (t.compactSpacing) {
      document.querySelectorAll('section').forEach(s => s.style.paddingTop = '88px');
      document.querySelectorAll('section').forEach(s => s.style.paddingBottom = '88px');
    } else {
      document.querySelectorAll('section').forEach(s => { s.style.paddingTop=''; s.style.paddingBottom=''; });
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks · Alkimia">
      <TweakSection label="Tipografía" />
      <TweakRadio label="Titular"
        value={t.titleFont}
        options={["Cinzel", "Marcellus"]}
        onChange={v => setTweak('titleFont', v)} />

      <TweakSection label="Color" />
      <TweakColor label="Oro acento"
        value={t.goldTone}
        options={["#C9A24B", "#D9B96A", "#B8862E", "#A67C2B"]}
        onChange={v => setTweak('goldTone', v)} />

      <TweakSection label="Layout" />
      <TweakToggle label="Serial № en cards"
        value={t.showSerial}
        onChange={v => setTweak('showSerial', v)} />
      <TweakToggle label="Trust strip en hero"
        value={t.showTrustStrip}
        onChange={v => setTweak('showTrustStrip', v)} />
      <TweakToggle label="Spacing compacto"
        value={t.compactSpacing}
        onChange={v => setTweak('compactSpacing', v)} />
    </TweaksPanel>
  );
}

function shiftLightness(hex, amt){
  // hex → hsl → shift L → hex
  const h = hex.replace('#','');
  const r = parseInt(h.slice(0,2),16)/255;
  const g = parseInt(h.slice(2,4),16)/255;
  const b = parseInt(h.slice(4,6),16)/255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let H=0, S=0, L=(max+min)/2;
  if (max!==min){
    const d = max-min;
    S = L>0.5 ? d/(2-max-min) : d/(max+min);
    switch(max){
      case r: H=(g-b)/d + (g<b?6:0); break;
      case g: H=(b-r)/d + 2; break;
      case b: H=(r-g)/d + 4; break;
    }
    H/=6;
  }
  L = Math.max(0, Math.min(1, L+amt));
  function hue2rgb(p,q,t){
    if(t<0)t+=1; if(t>1)t-=1;
    if(t<1/6) return p+(q-p)*6*t;
    if(t<1/2) return q;
    if(t<2/3) return p+(q-p)*(2/3-t)*6;
    return p;
  }
  let R,G,B;
  if (S===0){ R=G=B=L; }
  else {
    const q = L<0.5 ? L*(1+S) : L+S-L*S;
    const p = 2*L-q;
    R = hue2rgb(p,q,H+1/3);
    G = hue2rgb(p,q,H);
    B = hue2rgb(p,q,H-1/3);
  }
  const toHex = (x) => Math.round(x*255).toString(16).padStart(2,'0');
  return '#' + toHex(R) + toHex(G) + toHex(B);
}

// Mount
const tweakRoot = document.createElement('div');
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<LandingTweaks />);