/* Tweaks app for SilverStream redesign */
const { useEffect } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "verde",
  "density": "standard",
  "audienceDefault": "pro",
  "showTrustStrip": true,
  "showCompare": true,
  "showTimeline": true,
  "showTestimonials": true,
  "heroFloat": true
}/*EDITMODE-END*/;

function TweaksApp() {
  const [tweaks, setTweak] = useTweaks(DEFAULTS);

  useEffect(() => {
    document.body.dataset.palette = tweaks.palette;
    document.body.dataset.density = tweaks.density;

    // Audience default
    const tabs = document.querySelectorAll('.aud-tab');
    const panes = document.querySelectorAll('.aud-pane');
    tabs.forEach(t => {
      const active = t.dataset.aud === tweaks.audienceDefault;
      t.classList.toggle('active', active);
      t.setAttribute('aria-selected', active);
    });
    panes.forEach(p => p.classList.toggle('active', p.dataset.audPane === tweaks.audienceDefault));

    // Section visibility
    const toggle = (sel, show) => {
      document.querySelectorAll(sel).forEach(el => el.style.display = show ? '' : 'none');
    };
    toggle('.trust-strip', tweaks.showTrustStrip);
    toggle('.compare', tweaks.showCompare);
    toggle('.timeline', tweaks.showTimeline);
    toggle('.testimonials', tweaks.showTestimonials);

    // Hero float animation
    document.querySelectorAll('.hero-product img, .spec-chip').forEach(el => {
      el.style.animationPlayState = tweaks.heroFloat ? 'running' : 'paused';
    });
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks · SilverStream">
      <TweakSection title="Estilo visual">
        <TweakSelect
          label="Paleta de color"
          value={tweaks.palette}
          onChange={v => setTweak('palette', v)}
          options={[
            { value: 'verde', label: 'Verde-petróleo (oficial)' },
            { value: 'azul', label: 'Azul clínico' },
            { value: 'calido', label: 'Cálido sobrio' },
          ]}
        />
        <TweakRadio
          label="Densidad de espaciado"
          value={tweaks.density}
          onChange={v => setTweak('density', v)}
          options={[
            { value: 'compact', label: 'Compacta' },
            { value: 'standard', label: 'Estándar' },
            { value: 'spacious', label: 'Amplia' },
          ]}
        />
        <TweakToggle
          label="Animación flotante en hero"
          value={tweaks.heroFloat}
          onChange={v => setTweak('heroFloat', v)}
        />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakRadio
          label="Audiencia activa por defecto"
          value={tweaks.audienceDefault}
          onChange={v => setTweak('audienceDefault', v)}
          options={[
            { value: 'pro', label: 'Profesional' },
            { value: 'otc', label: 'Doméstico' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Secciones (mostrar / ocultar)">
        <TweakToggle label="Logos de confianza" value={tweaks.showTrustStrip} onChange={v => setTweak('showTrustStrip', v)} />
        <TweakToggle label="Tabla comparativa" value={tweaks.showCompare} onChange={v => setTweak('showCompare', v)} />
        <TweakToggle label="Timeline de evidencia" value={tweaks.showTimeline} onChange={v => setTweak('showTimeline', v)} />
        <TweakToggle label="Testimonios (placeholders)" value={tweaks.showTestimonials} onChange={v => setTweak('showTestimonials', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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