const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#60a5fa",
  "background": "glow",
  "heroLayout": "center",
  "heroCopy": "benefit",
  "compact": false
}/*EDITMODE-END*/;

const ACCENTS = [
  "#e8e253", // mustard (default)
  "#9d7cff", // violet
  "#4ade80", // green
  "#60a5fa", // blue
  "#f97a6e", // coral
  "#fafafa"  // white
];

const HERO_COPY = {
  default: {
    h1: 'Reservas <span class="italic">sin</span> límites,<br />negocio <span class="accent">sin</span> caos.',
    sub: "RubeloreOS es la plataforma todo-en-uno para salones, barberías, spas y centros de bienestar. Reservas online, equipo, ventas y clientes — en un solo sitio.",
    badge: "Nueva versión · agendas con IA y POS integrado"
  },
  bold: {
    h1: 'El <span class="accent">sistema operativo</span> de tu negocio de belleza.',
    sub: "Una plataforma. Cero fricción. Reservas, agenda, equipo, POS y marketing — todo conectado y trabajando para ti, 24/7.",
    badge: "Más de 120.000 negocios confían en RubeloreOS"
  },
  benefit: {
    h1: 'Llena tu agenda.<br /><span class="italic accent">Cobra sin esperar.</span>',
    sub: "Reservas online 24/7, recordatorios automáticos que reducen ausencias hasta un 70% y un POS que cobra en segundos. Lo que necesitas, donde lo necesitas.",
    badge: "+28% de ingresos en los primeros 3 meses"
  }
};

function applyTweaks(t) {
  // Accent color
  document.documentElement.style.setProperty('--accent', t.accent);
  // Derive a slightly dimmer accent for hover
  document.documentElement.style.setProperty('--accent-dim', t.accent);
  // Accent ink: white text only if accent is very light
  const ink = t.accent === '#fafafa' ? '#0a0a0a' : '#0a0a0a';
  document.documentElement.style.setProperty('--accent-ink', ink);

  // Background
  document.body.dataset.bg = t.background;

  // Hero layout
  const hero = document.querySelector('.hero');
  if (hero) hero.dataset.layout = t.heroLayout;

  // Hero copy
  const copy = HERO_COPY[t.heroCopy] || HERO_COPY.default;
  const h1 = document.querySelector('[data-copy="hero-h1"]');
  const sub = document.querySelector('[data-copy="hero-sub"]');
  const badge = document.querySelector('[data-copy="hero-badge"]');
  if (h1) h1.innerHTML = copy.h1;
  if (sub) sub.textContent = copy.sub;
  if (badge) badge.textContent = copy.badge;

  // Compact mode
  document.documentElement.style.setProperty(
    '--section-pad',
    t.compact ? '60px' : '100px'
  );
  document.querySelectorAll('section').forEach(s => {
    if (!s.classList.contains('hero') && !s.classList.contains('stats')) {
      s.style.paddingTop = t.compact ? '60px' : '';
      s.style.paddingBottom = t.compact ? '60px' : '';
    }
  });
}

function TweaksApp() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply on every change
  useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Acento">
        <window.TweakColor
          label="Color de acento"
          value={t.accent}
          options={ACCENTS}
          onChange={v => setTweak('accent', v)}
        />
      </window.TweakSection>

      <window.TweakSection label="Hero">
        <window.TweakRadio
          label="Alineación"
          value={t.heroLayout}
          options={[
            { value: "center", label: "Centro" },
            { value: "left", label: "Izquierda" }
          ]}
          onChange={v => setTweak('heroLayout', v)}
        />
        <window.TweakSelect
          label="Variante de copy"
          value={t.heroCopy}
          options={[
            { value: "default", label: "Sin caos (default)" },
            { value: "bold", label: "Sistema operativo (bold)" },
            { value: "benefit", label: "Llena tu agenda (beneficio)" }
          ]}
          onChange={v => setTweak('heroCopy', v)}
        />
      </window.TweakSection>

      <window.TweakSection label="Estilo">
        <window.TweakRadio
          label="Fondo"
          value={t.background}
          options={[
            { value: "plain", label: "Liso" },
            { value: "grid", label: "Grid" },
            { value: "glow", label: "Glow" }
          ]}
          onChange={v => setTweak('background', v)}
        />
        <window.TweakToggle
          label="Modo compacto"
          value={t.compact}
          onChange={v => setTweak('compact', v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

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