// app.jsx — main App composes everything + tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "console",
  "plansVariant": "cards",
  "palette": "cyan",
  "showTicker": true,
  "showAttackMap": true
}/*EDITMODE-END*/;

const PALETTES = {
  cyan:    { primary: '#1E9CFF', primary2: '#57b9ff', glow: 'rgba(30, 156, 255, 0.45)', name: 'Cyan · plataforma' },
  threat:  { primary: '#ff4d4d', primary2: '#ff7a7a', glow: 'rgba(255, 77, 77, 0.45)',   name: 'Threat red' },
  emerald: { primary: '#22e7a3', primary2: '#5ff0bf', glow: 'rgba(34, 231, 163, 0.45)',  name: 'Emerald · ok' },
  violet:  { primary: '#8b7bff', primary2: '#ada0ff', glow: 'rgba(139, 123, 255, 0.45)', name: 'Violet · ops' },
};

function Nav() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const close = () => setOpen(false);

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-logo" onClick={close}><Logo height={28} /></a>
        <div className="nav-links nav-links-desktop">
          <a href="#contexto">Contexto</a>
          <a href="#proceso">Cómo funciona</a>
          <a href="#plataforma">Plataforma</a>
          <a href="#planes">Planes</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta nav-cta-desktop">
          <a href="#contacto" className="btn btn-ghost" style={{ height: 38 }}>Iniciar diagnóstico</a>
          <a href="#planes" className="btn btn-primary" style={{ height: 38 }}>Ver planes</a>
        </div>
        <button
          className="nav-burger"
          aria-label={open ? 'Cerrar menú' : 'Abrir menú'}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <span className={`burger ${open ? 'open' : ''}`}>
            <span /><span /><span />
          </span>
        </button>
      </div>

      <div className={`nav-mobile ${open ? 'open' : ''}`} onClick={close}>
        <div className="nav-mobile-inner" onClick={(e) => e.stopPropagation()}>
          <a href="#contexto" onClick={close}>Contexto crítico</a>
          <a href="#riesgos" onClick={close}>Los 4 riesgos</a>
          <a href="#proceso" onClick={close}>Cómo funciona</a>
          <a href="#plataforma" onClick={close}>La plataforma</a>
          <a href="#planes" onClick={close}>Planes</a>
          <a href="#faq" onClick={close}>FAQ</a>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 24 }}>
            <a href="#contacto" className="btn btn-primary btn-lg" onClick={close} style={{ justifyContent: 'center' }}>Diagnóstico gratuito <ArrowIcon /></a>
            <a href="#planes" className="btn btn-ghost btn-lg" onClick={close} style={{ justifyContent: 'center' }}>Ver planes</a>
          </div>
        </div>
      </div>
    </nav>
  );
}

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

  // Apply palette by setting CSS custom properties on :root
  React.useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES.cyan;
    const root = document.documentElement;
    root.style.setProperty('--primary', p.primary);
    root.style.setProperty('--primary-2', p.primary2);
    root.style.setProperty('--primary-glow', p.glow);
  }, [t.palette]);

  return (
    <>
      <div className="bg-stack">
        <div className="bg-gradient" />
        <div className="bg-grid" />
        <div className="bg-scanlines" />
        <div className="bg-noise" />
      </div>

      <Nav />
      <Hero variant={t.heroVariant} />
      <ThreatData />
      <Fears />
      <Consequences />
      <Analogy />
      <Process />
      <Platform />
      <Plans variant={t.plansVariant} />
      <FAQ />
      <CTAFinal />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakSelect
          label="Variante de hero"
          value={t.heroVariant}
          options={[
            { value: 'cinematic', label: 'Cinematográfico — center stage' },
            { value: 'console',   label: 'Threat console — log streaming' },
            { value: 'bignumber', label: 'Big number — 11,334 dominante' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />

        <TweakSection label="Planes" />
        <TweakRadio
          label="Layout de planes"
          value={t.plansVariant}
          options={[
            { value: 'cards',   label: 'Cards' },
            { value: 'table',   label: 'Tabla' },
            { value: 'stacked', label: 'Stacked' },
          ]}
          onChange={(v) => setTweak('plansVariant', v)}
        />

        <TweakSection label="Paleta" />
        <TweakColor
          label="Color de acento"
          value={PALETTES[t.palette]?.primary}
          options={Object.values(PALETTES).map(p => p.primary)}
          onChange={(v) => {
            const found = Object.entries(PALETTES).find(([_, p]) => p.primary === v);
            if (found) setTweak('palette', found[0]);
          }}
        />
        <div className="mono" style={{ fontSize: 10, color: 'rgba(41,38,27,.55)', letterSpacing: '0.04em', marginTop: -4 }}>
          {PALETTES[t.palette]?.name}
        </div>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);