/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, TweakSlider, useTweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "violet",
  "intensity": 0,
  "wash": 20,
  "particles": true
}/*EDITMODE-END*/;

const PALETTES = {
  // Restrained, single-hue family — recommended default
  violet: {
    label: "Violeta sereno",
    c1: "#a5b4fc", c2: "#c4b5fd", c3: "#93c5fd", c4: "#ddd6fe",
    p1: "rgba(124, 58, 237, .28)",
    p2: "rgba(59, 130, 246, .18)",
    p3: "rgba(99, 102, 241, .10)",
  },
  // Almost no color — Vercel/Linear style
  mono: {
    label: "Neutro mineral",
    c1: "#cbd5e1", c2: "#e2e8f0", c3: "#94a3b8", c4: "#cbd5e1",
    p1: "rgba(71, 85, 105, .18)",
    p2: "rgba(100, 116, 139, .12)",
    p3: "rgba(148, 163, 184, .08)",
  },
  // Soft tech — peach + lavender
  warm: {
    label: "Cálido suave",
    c1: "#fecaca", c2: "#fbcfe8", c3: "#ddd6fe", c4: "#fde68a",
    p1: "rgba(244, 114, 182, .22)",
    p2: "rgba(251, 146, 60, .18)",
    p3: "rgba(167, 139, 250, .12)",
  },
  // Original — full brand spectrum
  brand: {
    label: "Marca completa",
    c1: "#ff2d20", c2: "#7a2dbf", c3: "#1e1ee0", c4: "#c0224a",
    p1: "rgba(122, 45, 191, .32)",
    p2: "rgba(30, 30, 224, .22)",
    p3: "rgba(255, 45, 32, .12)",
  },
  // Cold, sober — graphite + deep blue
  cool: {
    label: "Acero profundo",
    c1: "#1e293b", c2: "#3b82f6", c3: "#64748b", c4: "#1e40af",
    p1: "rgba(59, 130, 246, .22)",
    p2: "rgba(30, 64, 175, .14)",
    p3: "rgba(100, 116, 139, .08)",
  },
};

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

  React.useEffect(() => {
    const bg = document.querySelector('.hero-bg');
    if (!bg) return;
    const p = PALETTES[t.palette] || PALETTES.violet;
    bg.style.setProperty('--c1', p.c1);
    bg.style.setProperty('--c2', p.c2);
    bg.style.setProperty('--c3', p.c3);
    bg.style.setProperty('--c4', p.c4);
    bg.style.setProperty('--p1', p.p1);
    bg.style.setProperty('--p2', p.p2);
    bg.style.setProperty('--p3', p.p3);
    bg.style.setProperty('--intensity', (t.intensity / 100).toFixed(2));
    // wash maps inversely — higher wash = more white veil = less color
    const top = 0.30 + (t.wash / 100) * 0.55;
    const bot = 0.65 + (t.wash / 100) * 0.30;
    bg.style.setProperty('--wash-top', top.toFixed(2));
    bg.style.setProperty('--wash-bot', bot.toFixed(2));
    bg.style.setProperty('--particles', t.particles ? '1' : '0');
  }, [t]);

  // Build palette options as small SVG swatches (a horizontal gradient of the 4 blob colors)
  const swatch = (p) => `
    <svg viewBox="0 0 80 56" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="g" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="${p.c1}"/>
          <stop offset="33%" stop-color="${p.c2}"/>
          <stop offset="66%" stop-color="${p.c3}"/>
          <stop offset="100%" stop-color="${p.c4}"/>
        </linearGradient>
      </defs>
      <rect width="80" height="56" rx="8" fill="url(#g)"/>
    </svg>`;

  return (
    <TweaksPanel title="Tweaks · Hero background">
      <TweakSection label="Paleta">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
          {Object.entries(PALETTES).map(([key, p]) => {
            const active = t.palette === key;
            return (
              <button
                key={key}
                onClick={() => setTweak('palette', key)}
                style={{
                  background:'transparent',
                  border: active ? '2px solid #1d1d1f' : '1px solid rgba(0,0,0,.12)',
                  borderRadius: 10,
                  padding: 6,
                  cursor:'pointer',
                  display:'flex',
                  flexDirection:'column',
                  alignItems:'stretch',
                  gap: 6,
                  textAlign:'left',
                  fontFamily:'inherit',
                }}
              >
                <span
                  style={{display:'block', height:32, borderRadius:6, overflow:'hidden'}}
                  dangerouslySetInnerHTML={{__html: swatch(p)}}
                />
                <span style={{fontSize:11, color:'#1d1d1f', fontWeight: active ? 600 : 500}}>
                  {p.label}
                </span>
              </button>
            );
          })}
        </div>
      </TweakSection>

      <TweakSection label="Efectos">
        <TweakToggle
          label="Partículas"
          value={t.particles}
          onChange={(v) => setTweak('particles', v)}
        />
      </TweakSection>

      <TweakSection label="Intensidad">
        <TweakSlider
          label="Color"
          value={t.intensity}
          onChange={(v) => setTweak('intensity', v)}
          min={10} max={100} step={5}
          unit="%"
        />
        <TweakSlider
          label="Veil blanco"
          value={t.wash}
          onChange={(v) => setTweak('wash', v)}
          min={0} max={100} step={5}
          unit="%"
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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