// Main app — full-bleed single page (Variant A only), with Tweaks

const KDNA_PALETTES = {
  cyan_magenta: { name: 'Cyan × Magenta', hue: '#00e5ff', hueAlt: '#ff2bd6' },
  green_magenta: { name: 'Acid × Pink', hue: '#39ff88', hueAlt: '#ff2bd6' },
  violet_cyan:  { name: 'Violet × Cyan', hue: '#9b5cff', hueAlt: '#00e5ff' },
  amber_cyan:   { name: 'Amber × Cyan', hue: '#ffa23a', hueAlt: '#00e5ff' },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "cyan_magenta",
  "intensity": 0.2
}/*EDITMODE-END*/;

function App() {
  const [tweaks] = React.useState(TWEAK_DEFAULTS);
  const pal = KDNA_PALETTES[tweaks.palette] || KDNA_PALETTES.cyan_magenta;
  const palette = { hue: pal.hue, hueAlt: pal.hueAlt, intensity: tweaks.intensity };

  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <VariantA palette={palette} />
    </div>
  );
}

// (TweaksPanel kept below for reference but not rendered in production build)

function TweaksPanel({ tweaks, update }) {
  return (
    <div style={tweakStyles.panel}>
      <div style={tweakStyles.header}>
        <span style={tweakStyles.title}>Tweaks</span>
        <span style={tweakStyles.hint}>live</span>
      </div>

      <div style={tweakStyles.group}>
        <div style={tweakStyles.label}>Palette</div>
        <div style={tweakStyles.swatchGrid}>
          {Object.entries(KDNA_PALETTES).map(([k, v]) => (
            <button
              key={k}
              onClick={() => update('palette', k)}
              style={{
                ...tweakStyles.swatch,
                borderColor: tweaks.palette === k ? v.hue : 'rgba(255,255,255,0.1)',
                boxShadow: tweaks.palette === k ? `0 0 12px ${v.hue}55` : 'none',
              }}
              title={v.name}
            >
              <span style={{ ...tweakStyles.sw, background: v.hue, boxShadow: `0 0 6px ${v.hue}` }} />
              <span style={{ ...tweakStyles.sw, background: v.hueAlt, boxShadow: `0 0 6px ${v.hueAlt}` }} />
              <span style={tweakStyles.swatchLabel}>{v.name}</span>
            </button>
          ))}
        </div>
      </div>

      <div style={tweakStyles.group}>
        <div style={tweakStyles.label}>
          <span>Intensität</span>
          <span style={tweakStyles.valueTag}>{Math.round(tweaks.intensity * 100)}%</span>
        </div>
        <input
          type="range" min={0.1} max={1.2} step={0.05}
          value={tweaks.intensity}
          onChange={e => update('intensity', Number(e.target.value))}
          style={tweakStyles.slider}
        />
      </div>
    </div>
  );
}

const tweakStyles = {
  panel: {
    position: 'fixed', right: 18, bottom: 18, zIndex: 9999,
    width: 260, padding: 16,
    background: 'rgba(10,10,13,0.92)',
    border: '1px solid rgba(255,255,255,0.12)',
    backdropFilter: 'blur(14px)',
    color: '#fff',
    fontFamily: '"Space Grotesk", sans-serif',
    boxShadow: '0 12px 60px rgba(0,0,0,0.6)',
  },
  header: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
    marginBottom: 14, paddingBottom: 10,
    borderBottom: '1px solid rgba(255,255,255,0.08)',
  },
  title: { fontSize: 13, fontWeight: 600, letterSpacing: '0.04em' },
  hint: { fontSize: 10, fontFamily: 'JetBrains Mono, monospace', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.1em', textTransform: 'uppercase' },
  group: { marginBottom: 14 },
  label: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontSize: 10, fontFamily: 'JetBrains Mono, monospace',
    letterSpacing: '0.14em', textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.5)', marginBottom: 8,
  },
  valueTag: { color: 'rgba(255,255,255,0.9)' },
  swatchGrid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 },
  swatch: {
    display: 'flex', alignItems: 'center', gap: 6,
    background: 'rgba(255,255,255,0.03)', border: '1px solid',
    padding: '8px 10px', cursor: 'pointer',
    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
    color: 'rgba(255,255,255,0.75)', letterSpacing: '0.04em',
    transition: 'all .2s', textAlign: 'left',
  },
  sw: { width: 10, height: 10, borderRadius: '50%', flexShrink: 0 },
  swatchLabel: { marginLeft: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' },
  slider: { width: '100%', accentColor: '#00e5ff' },
};

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