// APP — orchestrates layout + Tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero_variant": "terminal",
  "palette": "gold",
  "show_corners": true
}/*EDITMODE-END*/;

// Curated palettes. Each defines the 5 CSS vars that drive the whole design.
// bg + ink stay dark/light; accents shift the entire mood.
const PALETTES = {
  magenta: {
    label: 'Magenta · Violeta',
    swatch: ['#ec4899', '#a855f7', '#08040f'],
    vars: {
      '--bg': '#08040f',
      '--bg-elev': '#0f0820',
      '--ink': '#f5f3ff',
      '--ink-dim': '#b8a8d4',
      '--ink-mute': '#6b5a8a',
      '--magenta': '#ec4899',
      '--violet': '#a855f7',
      '--line': 'rgba(168, 85, 247, 0.18)',
      '--line-strong': 'rgba(236, 72, 153, 0.45)',
      '--grad': 'linear-gradient(135deg, #ec4899 0%, #a855f7 60%, #6366f1 100%)',
      '--glow-1': 'rgba(168, 85, 247, 0.18)',
      '--glow-2': 'rgba(236, 72, 153, 0.14)',
      '--glow-3': 'rgba(99, 102, 241, 0.16)',
    },
  },
  cyber: {
    label: 'Cian · Violeta',
    swatch: ['#06b6d4', '#8b5cf6', '#050510'],
    vars: {
      '--bg': '#050510',
      '--bg-elev': '#0a0a1f',
      '--ink': '#f0f9ff',
      '--ink-dim': '#a5b4cc',
      '--ink-mute': '#5a6580',
      '--magenta': '#06b6d4',
      '--violet': '#8b5cf6',
      '--line': 'rgba(139, 92, 246, 0.18)',
      '--line-strong': 'rgba(6, 182, 212, 0.5)',
      '--grad': 'linear-gradient(135deg, #06b6d4 0%, #8b5cf6 60%, #6366f1 100%)',
      '--glow-1': 'rgba(139, 92, 246, 0.18)',
      '--glow-2': 'rgba(6, 182, 212, 0.16)',
      '--glow-3': 'rgba(59, 130, 246, 0.14)',
    },
  },
  matrix: {
    label: 'Verde · Cian',
    swatch: ['#14f195', '#22d3ee', '#020617'],
    vars: {
      '--bg': '#020617',
      '--bg-elev': '#031020',
      '--ink': '#ecfdf5',
      '--ink-dim': '#9ad5b8',
      '--ink-mute': '#4a6b5a',
      '--magenta': '#14f195',
      '--violet': '#22d3ee',
      '--line': 'rgba(34, 211, 238, 0.18)',
      '--line-strong': 'rgba(20, 241, 149, 0.45)',
      '--grad': 'linear-gradient(135deg, #14f195 0%, #22d3ee 60%, #06b6d4 100%)',
      '--glow-1': 'rgba(34, 211, 238, 0.16)',
      '--glow-2': 'rgba(20, 241, 149, 0.14)',
      '--glow-3': 'rgba(6, 182, 212, 0.14)',
    },
  },
  sunset: {
    label: 'Ámbar · Coral',
    swatch: ['#f59e0b', '#f43f5e', '#0c0508'],
    vars: {
      '--bg': '#0c0508',
      '--bg-elev': '#1a0a10',
      '--ink': '#fff7ed',
      '--ink-dim': '#d4b8a8',
      '--ink-mute': '#8a6a5a',
      '--magenta': '#f59e0b',
      '--violet': '#f43f5e',
      '--line': 'rgba(244, 63, 94, 0.18)',
      '--line-strong': 'rgba(245, 158, 11, 0.5)',
      '--grad': 'linear-gradient(135deg, #f59e0b 0%, #f43f5e 60%, #a855f7 100%)',
      '--glow-1': 'rgba(244, 63, 94, 0.16)',
      '--glow-2': 'rgba(245, 158, 11, 0.16)',
      '--glow-3': 'rgba(236, 72, 153, 0.14)',
    },
  },
  electric: {
    label: 'Azul Eléctrico',
    swatch: ['#3b82f6', '#60a5fa', '#020412'],
    vars: {
      '--bg': '#020412',
      '--bg-elev': '#08102a',
      '--ink': '#eff6ff',
      '--ink-dim': '#9bb0d4',
      '--ink-mute': '#4a5a80',
      '--magenta': '#3b82f6',
      '--violet': '#60a5fa',
      '--line': 'rgba(96, 165, 250, 0.18)',
      '--line-strong': 'rgba(59, 130, 246, 0.5)',
      '--grad': 'linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #c7d2fe 100%)',
      '--glow-1': 'rgba(96, 165, 250, 0.18)',
      '--glow-2': 'rgba(59, 130, 246, 0.14)',
      '--glow-3': 'rgba(139, 92, 246, 0.12)',
    },
  },
  mono: {
    label: 'Mono Blanco',
    swatch: ['#f5f5f5', '#a3a3a3', '#0a0a0a'],
    vars: {
      '--bg': '#0a0a0a',
      '--bg-elev': '#141414',
      '--ink': '#fafafa',
      '--ink-dim': '#a3a3a3',
      '--ink-mute': '#525252',
      '--magenta': '#f5f5f5',
      '--violet': '#737373',
      '--line': 'rgba(255, 255, 255, 0.10)',
      '--line-strong': 'rgba(255, 255, 255, 0.30)',
      '--grad': 'linear-gradient(135deg, #ffffff 0%, #a3a3a3 100%)',
      '--glow-1': 'rgba(255, 255, 255, 0.06)',
      '--glow-2': 'rgba(255, 255, 255, 0.04)',
      '--glow-3': 'rgba(255, 255, 255, 0.03)',
    },
  },
  toxic: {
    label: 'Lima · Magenta',
    swatch: ['#d9f99d', '#ec4899', '#0a0a10'],
    vars: {
      '--bg': '#0a0a10',
      '--bg-elev': '#14141f',
      '--ink': '#fafff0',
      '--ink-dim': '#b8c4a8',
      '--ink-mute': '#5a6a4a',
      '--magenta': '#d9f99d',
      '--violet': '#ec4899',
      '--line': 'rgba(236, 72, 153, 0.18)',
      '--line-strong': 'rgba(217, 249, 157, 0.45)',
      '--grad': 'linear-gradient(135deg, #d9f99d 0%, #84cc16 40%, #ec4899 100%)',
      '--glow-1': 'rgba(236, 72, 153, 0.16)',
      '--glow-2': 'rgba(132, 204, 22, 0.16)',
      '--glow-3': 'rgba(168, 85, 247, 0.14)',
    },
  },
  gold: {
    label: 'Negro · Oro',
    swatch: ['#f5c542', '#d4a017', '#0a0806'],
    vars: {
      '--bg': '#0a0806',
      '--bg-elev': '#16110a',
      '--ink': '#fff8e7',
      '--ink-dim': '#c9b88a',
      '--ink-mute': '#6e5e3a',
      '--magenta': '#f5c542',
      '--violet': '#d4a017',
      '--line': 'rgba(245, 197, 66, 0.16)',
      '--line-strong': 'rgba(245, 197, 66, 0.45)',
      '--grad': 'linear-gradient(135deg, #fde68a 0%, #f5c542 40%, #b8860b 100%)',
      '--glow-1': 'rgba(245, 197, 66, 0.16)',
      '--glow-2': 'rgba(212, 160, 23, 0.12)',
      '--glow-3': 'rgba(245, 197, 66, 0.10)',
    },
  },
};

function buildPaletteCss(p) {
  const vars = Object.entries(p.vars).map(([k, v]) => `  ${k}: ${v};`).join('\n');
  return `:root {\n${vars}\n}\nbody {\n  background:\n    radial-gradient(ellipse 80% 50% at 80% 0%, ${p.vars['--glow-1']}, transparent 60%),\n    radial-gradient(ellipse 60% 40% at 10% 30%, ${p.vars['--glow-2']}, transparent 60%),\n    radial-gradient(ellipse 80% 60% at 50% 110%, ${p.vars['--glow-3']}, transparent 60%),\n    ${p.vars['--bg']};\n}`;
}

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

  const Hero = tweaks.hero_variant === 'hologram'
    ? HeroHologram
    : tweaks.hero_variant === 'split'
      ? HeroSplit
      : HeroTerminal;

  const palette = PALETTES[tweaks.palette] || PALETTES.magenta;

  return (
    <div data-screen-label="Webinar Landing">
      <style>{buildPaletteCss(palette)}</style>

      <TopNav />
      <Hero />
      <BioSection />
      <ProgramaSection />
      <BonosSection />
      <FaqSection />
      <CtaFinal />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Paleta">
          <PaletteGrid
            value={tweaks.palette}
            onChange={(v) => setTweak('palette', v)}
          />
        </TweakSection>

        <TweakSection label="Hero — variación">
          <TweakRadio
            label="Estilo"
            value={tweaks.hero_variant}
            onChange={(v) => setTweak('hero_variant', v)}
            options={[
              { value: 'terminal', label: 'Terminal' },
              { value: 'hologram', label: 'Holograma' },
              { value: 'split', label: 'Bio Split' },
            ]}
          />
          <div style={{ fontSize: 12, color: '#888', marginTop: 10, lineHeight: 1.5 }}>
            <strong>Terminal</strong>: copy + panel tipo consola.<br/>
            <strong>Holograma</strong>: tipo gigante centrada, editorial.<br/>
            <strong>Bio Split</strong>: foco en tu historia desde arriba.
          </div>
        </TweakSection>

        <TweakSection label="Detalles">
          <TweakToggle
            label="Esquinas decorativas"
            value={tweaks.show_corners}
            onChange={(v) => setTweak('show_corners', v)}
          />
        </TweakSection>
      </TweaksPanel>

      <style>{`
        .corner { display: ${tweaks.show_corners ? 'block' : 'none'}; }
      `}</style>
    </div>
  );
}

function PaletteGrid({ value, onChange }) {
  const entries = Object.entries(PALETTES);
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, padding: '4px 0' }}>
      {entries.map(([key, p]) => {
        const active = value === key;
        return (
          <button
            key={key}
            onClick={() => onChange(key)}
            style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '8px 10px',
              border: active ? '1.5px solid #fff' : '1px solid rgba(255,255,255,0.15)',
              borderRadius: 8,
              background: active ? 'rgba(255,255,255,0.08)' : 'rgba(255,255,255,0.02)',
              cursor: 'pointer',
              fontFamily: 'inherit',
              color: 'inherit',
              textAlign: 'left',
              transition: 'all 0.15s ease',
            }}
          >
            <div style={{ display: 'flex', gap: 0, flexShrink: 0 }}>
              {p.swatch.map((c, i) => (
                <div key={i} style={{
                  width: 12, height: 22,
                  background: c,
                  marginLeft: i === 0 ? 0 : -3,
                  borderRadius: i === 0 ? '3px 0 0 3px' : i === p.swatch.length - 1 ? '0 3px 3px 0' : 0,
                  border: '1px solid rgba(0,0,0,0.3)',
                }} />
              ))}
            </div>
            <span style={{ fontSize: 11, lineHeight: 1.2 }}>{p.label}</span>
          </button>
        );
      })}
    </div>
  );
}

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