// ═══════════════════════════════════════════════════════════════
//  UI — Composants réutilisables
// ═══════════════════════════════════════════════════════════════

// ── BOUTON GOLD ──────────────────────────────────────────────
function BtnGold({ label, onClick, disabled, style, icon }) {
  return (
    <button className="btn-gold" onClick={onClick} disabled={disabled} style={style}>
      {icon && <span>{icon}</span>}
      {label}
    </button>
  );
}

// ── BOUTON GHOST ─────────────────────────────────────────────
function BtnGhost({ label, onClick, active, style, icon, danger, small }) {
  return (
    <button
      className={`btn-ghost${active ? ' active' : ''}${danger ? ' btn-danger' : ''}${small ? ' btn-sm' : ''}`}
      onClick={onClick}
      style={style}
    >
      {icon && <span>{icon}</span>}
      {label}
    </button>
  );
}

// ── CARD ─────────────────────────────────────────────────────
function Card({ children, style }) {
  return <div className="card" style={style}>{children}</div>;
}

// ── SECTION TITLE ─────────────────────────────────────────────
function STitle({ children, style }) {
  return <div className="stitle" style={style}>{children}</div>;
}

// ── BADGE ─────────────────────────────────────────────────────
function Badge({ label, color }) {
  return (
    <span
      className="badge"
      style={{ backgroundColor: color + '22', borderColor: color + '55', color }}
    >
      {label}
    </span>
  );
}

// ── FIELD ─────────────────────────────────────────────────────
function Field({ label: lbl, value, onChange, placeholder, type, style, mono, autoFocus }) {
  return (
    <div className="field" style={style}>
      {lbl && <label>{lbl}</label>}
      <input
        type={type || 'text'}
        value={value}
        onChange={e => onChange(e.target.value)}
        placeholder={placeholder}
        autoFocus={autoFocus}
        style={mono ? { fontFamily:"'DM Mono', monospace", letterSpacing: 1 } : {}}
      />
    </div>
  );
}

// ── CHIP ──────────────────────────────────────────────────────
function Chip({ label, active, onClick, style }) {
  return (
    <div className={`chip${active ? ' active' : ''}`} onClick={onClick} style={style}>
      {label}
    </div>
  );
}

// ── DIVIDER ───────────────────────────────────────────────────
function Divider({ style }) {
  return <div style={{ height:1, background:'#1c1c2c', margin:'8px 0', ...style }} />;
}

// ── EMPTY STATE ───────────────────────────────────────────────
function Empty({ icon, text }) {
  return (
    <div className="cart-empty">
      <div style={{ fontSize: 52 }}>{icon}</div>
      <div style={{ color:'#4a4a6a', fontSize: 13 }}>{text}</div>
    </div>
  );
}

// ── TVA ROW ───────────────────────────────────────────────────
function TVARow({ group, currency }) {
  return (
    <div style={{
      display:'flex', alignItems:'center',
      background:'#0c0c18', borderRadius:7,
      padding:'8px 10px', marginBottom:6,
      borderLeft: '3px solid ' + group.color, gap:10,
    }}>
      <Badge label={group.key + ' ' + group.rate + '%'} color={group.color} />
      <span style={{ fontFamily:"'DM Mono', monospace", fontSize:11, color:'#4a4a6a', flex:1 }}>
        HT {fmtN(group.ht, currency)}
      </span>
      <span style={{ fontFamily:"'DM Mono', monospace", fontSize:11, color:'#5a5a7a' }}>
        TVA {fmtN(group.tva, currency)}
      </span>
    </div>
  );
}