const TweaksPanel = ({ tweaks, setTweak, visible }) => {
  const [hover, setHover] = React.useState(false);
  if (!visible) return null;

  const active = hover;

  const tweaksPanelStyles = {
    position: 'fixed', bottom: 16, right: 16, zIndex: 9999,
    background: active ? 'rgba(17,17,17,0.88)' : 'rgba(17,17,17,0.32)',
    color: '#F4EFE6', borderRadius: 12,
    padding: 20, width: 260,
    fontFamily: 'var(--font-mono)', fontSize: 12,
    border: '1px solid rgba(244,239,230,0.12)',
    backdropFilter: 'blur(14px) saturate(1.1)',
    WebkitBackdropFilter: 'blur(14px) saturate(1.1)',
    boxShadow: active ? '0 12px 40px rgba(0,0,0,0.35)' : '0 6px 20px rgba(0,0,0,0.18)',
    maxHeight: 'calc(100vh - 100px)', overflowY: 'auto',
    opacity: active ? 1 : 0.62,
    transition: 'opacity 220ms cubic-bezier(0.25,1,0.5,1), background 220ms cubic-bezier(0.25,1,0.5,1), box-shadow 220ms cubic-bezier(0.25,1,0.5,1)',
  };

  const labelStyle = { display: 'block', marginBottom: 12 };
  const selectStyle = {
    width: '100%', padding: '6px 8px', marginTop: 4,
    background: 'rgba(255,255,255,0.06)', color: '#F4EFE6',
    border: '1px solid rgba(244,239,230,0.18)',
    fontFamily: 'var(--font-mono)', fontSize: 11, borderRadius: 4,
  };
  const optionStyle = { background: '#111', color: '#F4EFE6' };

  return (
    <div
      style={tweaksPanelStyles}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onFocusCapture={() => setHover(true)}
      onBlurCapture={() => setHover(false)}
    >
      <div style={{ fontWeight: 700, fontSize: 13, marginBottom: 16, letterSpacing: '0.06em' }}>TWEAKS</div>

      <label style={labelStyle}>
        Hero layout
        <select style={selectStyle} value={tweaks.heroStyle} onChange={e => setTweak('heroStyle', e.target.value)}>
          <option style={optionStyle} value="A">A — Split (grid + ventana OS)</option>
          <option style={optionStyle} value="B">B — Centrado tipográfico</option>
          <option style={optionStyle} value="C">C — Terminal / consola</option>
        </select>
      </label>

      <label style={labelStyle}>
        Cards de servicio
        <select style={selectStyle} value={tweaks.cardStyle} onChange={e => setTweak('cardStyle', e.target.value)}>
          <option style={optionStyle} value="rounded">Redondeadas (pastel)</option>
          <option style={optionStyle} value="sharp">Rectas (neobrutalista)</option>
        </select>
      </label>

      <label style={labelStyle}>
        Acento primario
        <select style={selectStyle} value={tweaks.primaryColor} onChange={e => setTweak('primaryColor', e.target.value)}>
          <option style={optionStyle} value="#2B5FD9">Azul ventana</option>
          <option style={optionStyle} value="#7B5EA7">Morado</option>
          <option style={optionStyle} value="#2E6F40">Verde botica</option>
          <option style={optionStyle} value="#C13B2E">Rojo sello</option>
        </select>
      </label>

      <label style={labelStyle}>
        Grid visible
        <select style={selectStyle} value={tweaks.showGrid ? 'yes' : 'no'} onChange={e => setTweak('showGrid', e.target.value === 'yes')}>
          <option style={optionStyle} value="yes">Sí</option>
          <option style={optionStyle} value="no">No</option>
        </select>
      </label>
    </div>
  );
};

window.TweaksPanel = TweaksPanel;