// Bellia — tokens, icons, primitives, mini charts
// Palette orange crème + blanc crème, coins arrondis, Inter.

const C = {
  bg:        '#FBF6EC',
  card:      '#FFFFFF',
  cardSoft:  '#FBF3E5',
  cardWash:  '#FDF7EC',
  ink:       '#241B12',
  ink2:      '#3D2F22',
  mute:      '#8A7B69',
  mute2:     '#A89A87',
  line:      '#EADDC8',
  lineSoft:  '#F1E7D5',
  orange:    '#E89B6C',
  orangeDp:  '#C97849',
  orangeMid: '#DE8657',
  orangeSft: '#F7D7BD',
  orangeWh:  '#FCEDDC',
  ok:        '#7FB069',
  okSft:     '#E7F2DD',
  warn:      '#D9923B',
  warnSft:   '#FBE9D5',
  err:       '#C46A5F',
  errSft:    '#FBE0DC',
  white:     '#FFFDF8',
  cream:     '#FFF8EE',
};

// ---------- Lucide-style icons (inline SVG) ----------
const ICONS = {
  search:  '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
  bell:    '<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>',
  chevDown:'<path d="m6 9 6 6 6-6"/>',
  chevRight:'<path d="m9 18 6-6-6-6"/>',
  chevLeft:'<path d="m15 18-6-6 6-6"/>',
  settings:'<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
  plus:    '<path d="M5 12h14"/><path d="M12 5v14"/>',
  download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
  filter:  '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
  dashboard:'<rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/>',
  bag:     '<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/>',
  receipt: '<path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1z"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 17.5v-11"/>',
  users:   '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
  package: '<path d="m16.5 9.4-9-5.19"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.27 6.96 8.73 5.05 8.73-5.05"/><path d="M12 22.08V12"/>',
  book:    '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
  chart:   '<path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/>',
  shield:  '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
  zap:     '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>',
  calc:    '<rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><circle cx="8" cy="11" r=".5"/><circle cx="12" cy="11" r=".5"/><circle cx="16" cy="11" r=".5"/><circle cx="8" cy="15" r=".5"/><circle cx="12" cy="15" r=".5"/><circle cx="16" cy="15" r=".5"/><circle cx="8" cy="19" r=".5"/><circle cx="12" cy="19" r=".5"/><circle cx="16" cy="19" r=".5"/>',
  percent: '<line x1="19" y1="5" x2="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/>',
  euro:    '<path d="M4 10h12"/><path d="M4 14h9"/><path d="M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8a7.7 7.7 0 0 0 5.2-2"/>',
  cal:     '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
  file:    '<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/>',
  activity:'<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>',
  trendUp: '<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/>',
  trendDn: '<polyline points="22 17 13.5 8.5 8.5 13.5 2 7"/><polyline points="16 17 22 17 22 11"/>',
  card:    '<rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>',
  check:   '<polyline points="20 6 9 17 4 12"/>',
  checkC:  '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
  alertT:  '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
  alertC:  '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>',
  mail:    '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 6-10 7L2 6"/>',
  lock:    '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
  eye:     '<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>',
  eyeOff:  '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-10-7-10-7a18.45 18.45 0 0 1 4.39-5.94"/><path d="M10.58 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19"/><path d="M14.12 14.12a3 3 0 1 1-4.24-4.24"/><line x1="2" y1="2" x2="22" y2="22"/>',
  logout:  '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>',
  arrowUp: '<line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/>',
  arrowR:  '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
  arrowDn: '<line x1="7" y1="7" x2="17" y2="17"/><polyline points="17 7 17 17 7 17"/>',
  x:       '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
  more:    '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
  store:   '<path d="m2 7 4-4h12l4 4"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/>',
  list:    '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="3.5" cy="6" r=".5"/><circle cx="3.5" cy="12" r=".5"/><circle cx="3.5" cy="18" r=".5"/>',
  refresh: '<polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>',
  coffee:  '<path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><line x1="6" y1="2" x2="6" y2="4"/><line x1="10" y1="2" x2="10" y2="4"/><line x1="14" y1="2" x2="14" y2="4"/>',
  moon:    '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>',
  power:   '<path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" y1="2" x2="12" y2="12"/>',
  play:    '<polygon points="6 3 20 12 6 21 6 3"/>',
  sparkles:'<path d="M12 3l1.9 5.6L19 10.5l-5.1 1.9L12 18l-1.9-5.6L5 10.5l5.1-1.9z"/>',
  bot:     '<rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/>',
  hash:    '<line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/>',
  layers:  '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>',
  truck:   '<rect x="1" y="3" width="15" height="13" rx="1"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/>',
};

const Icon = ({ name, size = 18, color = 'currentColor', stroke = 1.75, style, className }) => {
  const inner = ICONS[name];
  if (!inner) return <span style={{ display: 'inline-block', width: size, height: size, ...style }} />;
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'inline-block', flexShrink: 0, ...style }}
      className={className}
      dangerouslySetInnerHTML={{ __html: inner }}
    />
  );
};

// ---------- format helpers ----------
const fmtEUR = (n, decimals = 0) => {
  const s = Math.abs(n).toLocaleString('fr-FR', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
  return `${n < 0 ? '-' : ''}${s.replace(/\u202F/g, ' ').replace(/,/g, decimals === 0 ? ' ' : ',').replace(/(\d)\u00a0(\d{3})/g, '$1 $2')} €`;
};
// simpler: use built-in
const eur = (n, dec = 0) => n.toLocaleString('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: dec, maximumFractionDigits: dec }).replace(/\u202F/g, ' ').replace(/\u00a0/g, ' ');
const pct = (n, dec = 1) => `${n.toLocaleString('fr-FR', { minimumFractionDigits: dec, maximumFractionDigits: dec })} %`;
const signedPct = (n, dec = 1) => `${n > 0 ? '+' : ''}${n.toLocaleString('fr-FR', { minimumFractionDigits: dec, maximumFractionDigits: dec })} %`;
const num = (n) => n.toLocaleString('fr-FR');

// ---------- primitives ----------
const Pill = ({ children, kind = 'neutral', size = 'md', style, icon }) => {
  const map = {
    neutral: { bg: C.cardSoft, fg: C.ink2 },
    accent:  { bg: C.orangeWh, fg: C.orangeDp },
    ok:      { bg: C.okSft, fg: C.ok },
    warn:    { bg: C.warnSft, fg: C.warn },
    err:     { bg: C.errSft, fg: C.err },
    invert:  { bg: 'rgba(255,248,238,0.18)', fg: C.cream },
  };
  const s = map[kind];
  const pad = size === 'sm' ? '3px 8px' : '5px 11px';
  const fs = size === 'sm' ? 10 : 11;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: pad, background: s.bg, color: s.fg, borderRadius: 999, fontSize: fs, fontWeight: 600, letterSpacing: 0.1, lineHeight: 1, ...style }}>
      {icon}{children}
    </span>
  );
};

const Btn = ({ children, kind = 'primary', size = 'md', icon, iconAfter, full, onClick, style, type }) => {
  const map = {
    primary: { bg: C.orange, fg: '#fff', bd: 'transparent' },
    primaryDark: { bg: C.ink, fg: C.cream, bd: 'transparent' },
    ghost:   { bg: 'transparent', fg: C.ink, bd: C.line },
    soft:    { bg: C.cardSoft, fg: C.ink, bd: 'transparent' },
    accent:  { bg: C.orangeWh, fg: C.orangeDp, bd: 'transparent' },
  };
  const m = map[kind];
  const sz = size === 'sm' ? { h: 32, fs: 12, px: 14 } : size === 'lg' ? { h: 48, fs: 14, px: 22 } : { h: 38, fs: 13, px: 18 };
  return (
    <button type={type || 'button'} onClick={onClick} style={{
      height: sz.h, padding: `0 ${sz.px}px`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      gap: 8, background: m.bg, color: m.fg, border: `1px solid ${m.bd}`, borderRadius: 999,
      fontSize: sz.fs, fontWeight: 600, cursor: 'pointer', width: full ? '100%' : 'auto',
      fontFamily: 'inherit', transition: 'transform .12s ease, filter .12s ease',
      ...style,
    }}
    onMouseDown={e => e.currentTarget.style.transform = 'translateY(1px)'}
    onMouseUp={e => e.currentTarget.style.transform = 'translateY(0)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
    >
      {icon}{children}{iconAfter}
    </button>
  );
};

const Avatar = ({ initials = 'YB', size = 32, c = C.orange, fg = '#fff', style }) => (
  <div style={{
    width: size, height: size, borderRadius: 999, background: c, color: fg,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontSize: size * 0.38, fontWeight: 700, letterSpacing: 0.2, flexShrink: 0, ...style,
  }}>{initials}</div>
);

const Logo = ({ size = 30, tone = 'light' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <div style={{
      width: size, height: size, borderRadius: size * 0.35, background: C.orange,
      display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
      fontWeight: 800, fontSize: size * 0.5, letterSpacing: -0.5,
      boxShadow: '0 4px 14px -6px rgba(201, 120, 73, 0.5)',
    }}>b</div>
    <span style={{ fontWeight: 700, fontSize: size * 0.6, color: tone === 'dark' ? C.cream : C.ink, letterSpacing: -0.5 }}>Bellia</span>
  </div>
);

const Card = ({ children, style, hoverable, onClick }) => (
  <div onClick={onClick} style={{
    background: C.card, border: `1px solid ${C.line}`, borderRadius: 22, padding: 22,
    cursor: onClick ? 'pointer' : 'default', transition: 'transform .15s ease, box-shadow .15s ease',
    ...style,
  }}
  onMouseEnter={e => hoverable && (e.currentTarget.style.boxShadow = '0 8px 24px -16px rgba(36,27,18,0.18)')}
  onMouseLeave={e => hoverable && (e.currentTarget.style.boxShadow = 'none')}
  >{children}</div>
);

// ---------- charts ----------
// Pretty area line chart with N-1 dashed overlay
const AreaLineChart = ({ data, prevData, height = 240, accent = C.orange, accentSoft = C.orangeWh, showAxis = true, padding = { l: 36, r: 12, t: 18, b: 28 } }) => {
  const w = 800, h = height;
  const all = [...data, ...(prevData || [])];
  const max = Math.max(...all) * 1.1;
  const min = 0;
  const pw = w - padding.l - padding.r;
  const ph = h - padding.t - padding.b;
  const pt = (i, v, n) => [padding.l + (i / (n - 1)) * pw, padding.t + ph - ((v - min) / (max - min)) * ph];

  const pts = data.map((v, i) => pt(i, v, data.length));
  const prevPts = (prevData || []).map((v, i) => pt(i, v, prevData.length));

  const linePath = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const areaPath = `${linePath} L${pts[pts.length-1][0]},${padding.t + ph} L${padding.l},${padding.t + ph} Z`;
  const prevPath = prevPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');

  const yTicks = 4;
  const ticks = Array.from({ length: yTicks + 1 }, (_, i) => max * (i / yTicks));

  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height, display: 'block' }}>
      <defs>
        <linearGradient id="bel-area" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={accent} stopOpacity="0.25" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </linearGradient>
      </defs>
      {showAxis && ticks.map((t, i) => {
        const y = padding.t + ph - ((t - min) / (max - min)) * ph;
        return (
          <g key={i}>
            <line x1={padding.l} y1={y} x2={w - padding.r} y2={y} stroke={C.lineSoft} strokeWidth="1" />
            <text x={padding.l - 8} y={y + 3} fontSize="10" fill={C.mute} textAnchor="end" fontFamily="Inter">{Math.round(t/1000)}k</text>
          </g>
        );
      })}
      {prevPath && <path d={prevPath} fill="none" stroke={C.mute2} strokeWidth="1.5" strokeDasharray="4 4" />}
      <path d={areaPath} fill="url(#bel-area)" />
      <path d={linePath} fill="none" stroke={accent} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
      {pts.map((p, i) => i % Math.ceil(data.length / 6) === 0 || i === pts.length - 1 ? (
        <circle key={i} cx={p[0]} cy={p[1]} r="3" fill={C.card} stroke={accent} strokeWidth="1.8" />
      ) : null)}
    </svg>
  );
};

const BarChartGrouped = ({ data, prevData, height = 200, accent = C.orange, accentSoft = C.orangeSft }) => {
  const w = 800, h = height;
  const pad = { l: 36, r: 12, t: 14, b: 26 };
  const pw = w - pad.l - pad.r, ph = h - pad.t - pad.b;
  const max = Math.max(...data, ...(prevData || [0])) * 1.15;
  const bw = pw / data.length * 0.62;
  const sw = pw / data.length;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height, display: 'block' }}>
      {[0, 0.25, 0.5, 0.75, 1].map((p, i) => {
        const y = pad.t + ph - p * ph;
        return <line key={i} x1={pad.l} y1={y} x2={w - pad.r} y2={y} stroke={C.lineSoft} strokeWidth="1" />;
      })}
      {data.map((v, i) => {
        const x = pad.l + i * sw + sw/2 - bw/2;
        const hh = (v / max) * ph;
        const y = pad.t + ph - hh;
        const prev = prevData?.[i];
        return (
          <g key={i}>
            {prev != null && (() => {
              const hp = (prev / max) * ph;
              const yp = pad.t + ph - hp;
              return <rect x={x} y={yp} width={bw * 0.42} height={hp} rx="3" fill={C.lineSoft} />;
            })()}
            <rect x={prev != null ? x + bw * 0.48 : x} y={y} width={prev != null ? bw * 0.52 : bw} height={hh} rx="5" fill={i === data.length - 1 ? accent : accentSoft} />
            {i === data.length - 1 && <rect x={prev != null ? x + bw * 0.48 : x} y={y} width={prev != null ? bw * 0.52 : bw} height={hh} rx="5" fill={accent} />}
          </g>
        );
      })}
    </svg>
  );
};

const Sparkline = ({ data, height = 36, accent = C.orange, fill = true }) => {
  const w = 120, h = height;
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const pts = data.map((v, i) => [(i / (data.length - 1)) * (w - 4) + 2, h - 4 - ((v - min) / range) * (h - 8)]);
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const area = fill ? `${path} L${pts[pts.length-1][0]},${h} L${pts[0][0]},${h} Z` : '';
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height, display: 'block' }}>
      {fill && <path d={area} fill={accent} opacity="0.12" />}
      <path d={path} fill="none" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

const DonutChart = ({ slices, size = 140, thickness = 22 }) => {
  const r = (size - thickness) / 2;
  const c = 2 * Math.PI * r;
  const total = slices.reduce((a, s) => a + s.value, 0);
  let offset = 0;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ display: 'block' }}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={C.lineSoft} strokeWidth={thickness} />
      {slices.map((s, i) => {
        const frac = s.value / total;
        const len = c * frac;
        const dash = `${len} ${c - len}`;
        const el = (
          <circle key={i} cx={size/2} cy={size/2} r={r} fill="none" stroke={s.color} strokeWidth={thickness}
            strokeDasharray={dash} strokeDashoffset={-offset} transform={`rotate(-90 ${size/2} ${size/2})`} strokeLinecap="butt" />
        );
        offset += len;
        return el;
      })}
    </svg>
  );
};

// ---------- demo data ----------
// 30 jours réalistes: lundis bas, week-ends hauts
const seedDay = (i, base) => {
  const dow = (i + 1) % 7; // 0 lun, ..., 6 dim
  const weekend = dow === 5 || dow === 6 ? 1.35 : dow === 4 ? 1.15 : dow === 0 ? 0.75 : 1;
  const noise = 0.92 + ((i * 37) % 17) / 100;
  return Math.round(base * weekend * noise);
};
const SALES_30 = Array.from({ length: 30 }, (_, i) => seedDay(i, 2850));
const SALES_30_PREV = Array.from({ length: 30 }, (_, i) => seedDay(i, 2640) - 80);
const MONTH_TOTAL = SALES_30.reduce((a, b) => a + b, 0);

const BREADCRUMB = { restaurant: 'Cantine Corner — République', period: 'Mai 2026' };

Object.assign(window, {
  C, ICONS, Icon, eur, pct, signedPct, num,
  Pill, Btn, Avatar, Logo, Card,
  AreaLineChart, BarChartGrouped, Sparkline, DonutChart,
  SALES_30, SALES_30_PREV, MONTH_TOTAL, BREADCRUMB,
});
