// Genius — primitives UI
const GIcons = {
  spark:'M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3z',
  grid:'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z',
  bulb:'M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9V16h7v-2.1A6 6 0 0012 3z',
  users:'M16 19v-1.5a3.5 3.5 0 00-3.5-3.5h-5A3.5 3.5 0 004 17.5V19M10 11a3.5 3.5 0 100-7 3.5 3.5 0 000 7M20 19v-1.5a3.5 3.5 0 00-2.6-3.4M15.5 4.2a3.5 3.5 0 010 6.6',
  send:'M4 12l16-8-6 16-2.5-6.5L4 12z',
  chart:'M4 20V10M10 20V4M16 20v-7M22 20H2',
  arrow:'M5 12h13M13 6l6 6-6 6',
  back:'M19 12H6M11 18l-6-6 6-6',
  check:'M4 12.5l5 5L20 6.5',
  link:'M10 13a4 4 0 005.7 0l2.6-2.6a4 4 0 00-5.7-5.7L11.5 6M14 11a4 4 0 00-5.7 0L5.7 13.6a4 4 0 005.7 5.7L12.5 18',
  clock:'M12 7v5l3.5 2M12 21a9 9 0 100-18 9 9 0 000 18z',
  refresh:'M20 11a8 8 0 10-2.3 5.7M20 5v6h-6',
  db:'M12 7c4.4 0 8-1.1 8-2.5S16.4 2 12 2 4 3.1 4 4.5 7.6 7 12 7zM4 4.5v15C4 20.9 7.6 22 12 22s8-1.1 8-2.5v-15M4 12c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5',
  image:'M4 5h16v14H4zM4 16l4.5-4.5 3.5 3.5 3-3L20 16M15 9.5a1 1 0 100-2 1 1 0 000 2z',
  mail:'M3 6h18v12H3zM3 7l9 6 9-6',
  target:'M12 21a9 9 0 100-18 9 9 0 000 18zM12 16.5a4.5 4.5 0 100-9 4.5 4.5 0 000 9zM12 13.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z',
  moon:'M20 14.5A8.5 8.5 0 019.5 4a8.5 8.5 0 1010.5 10.5z',
  sun:'M12 17a5 5 0 100-10 5 5 0 000 10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4',
  plus:'M12 5v14M5 12h14',
  x:'M6 6l12 12M18 6L6 18',
  doc:'M6 3h8l4 4v14H6zM14 3v4h4',
  copy:'M9 9h11v11H9zM5 15H4V4h11v1',
  lock:'M6 11h12v10H6zM9 11V8a3 3 0 016 0v3',
  bolt:'M13 2L4 14h6l-1 8 9-12h-6l1-8z',
  trend:'M3 17l6-6 4 4 8-8M17 7h4v4',
};
function Icon({ name, size = 18, w = 1.7, style }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={w} strokeLinecap="round" strokeLinejoin="round" style={{ flex:'0 0 auto', ...style }}><path d={GIcons[name]} /></svg>;
}

function Btn({ children, kind = 'primary', icon, iconRight, onClick, disabled, full, size = 'md', style }) {
  return <button className={`btn btn-${kind} btn-${size}${full ? ' btn-full' : ''}`} onClick={onClick} disabled={disabled} style={style}>
    {icon && <Icon name={icon} size={size === 'sm' ? 15 : 17} />}
    <span>{children}</span>
    {iconRight && <Icon name={iconRight} size={size === 'sm' ? 15 : 17} />}
  </button>;
}

function Badge({ children, tone = 'navy', soft = true }) {
  return <span className={`badge badge-${tone}${soft ? ' soft' : ''}`}>{children}</span>;
}

function Card({ children, pad = 20, style, className = '', onClick, hover }) {
  return <div className={`card ${className}${hover ? ' card-hover' : ''}`} style={{ padding:pad, ...style }} onClick={onClick}>{children}</div>;
}

function SectionHead({ title, sub, right }) {
  return <div className="sec-head"><div><div className="sec-title">{title}</div>{sub && <div className="sec-sub">{sub}</div>}</div>{right}</div>;
}

function ScoreRing({ value, size = 62 }) {
  const r = (size - 7) / 2, c = 2 * Math.PI * r;
  const tone = value >= 90 ? 'var(--coral)' : value >= 82 ? 'var(--navy)' : 'var(--muted-2)';
  return <div className="ring" style={{ width:size, height:size }}>
    <svg width={size} height={size}>
      <circle cx={size/2} cy={size/2} r={r} stroke="var(--line)" strokeWidth="5" fill="none" />
      <circle cx={size/2} cy={size/2} r={r} stroke={tone} strokeWidth="5" fill="none" strokeLinecap="round"
        strokeDasharray={`${c*value/100} ${c}`} transform={`rotate(-90 ${size/2} ${size/2})`} />
    </svg>
    <div className="ring-val" style={{ color:tone }}>{value}</div>
  </div>;
}

function Meter({ value, max = 100, tone = 'navy' }) {
  return <div className="meter"><div className="meter-fill" style={{ width:`${Math.min(100, value/max*100)}%`, background:`var(--${tone})` }} /></div>;
}

function Stepper({ steps, current, onJump }) {
  return <div className="stepper">{steps.map((s, i) => {
    const st = i < current ? 'done' : i === current ? 'now' : 'todo';
    return <React.Fragment key={s}>
      <button className={`step step-${st}`} onClick={() => i <= current && onJump(i)}>
        <span className="step-dot">{i < current ? <Icon name="check" size={12} w={2.6} /> : i + 1}</span>
        <span>{s}</span>
      </button>
      {i < steps.length - 1 && <span className={`step-bar${i < current ? ' on' : ''}`} />}
    </React.Fragment>;
  })}</div>;
}

function Logo({ size = 26 }) {
  return <div className="logo" style={{ flexDirection:'column', alignItems:'flex-start', gap:5 }}>
    <img className="logo-v logo-v-light" src="logo-verlaine.png" alt="Groupe Verlaine" style={{ height:size*1.02 }} />
    <img className="logo-v logo-v-dark" src="logo-verlaine-blanc.png" alt="Groupe Verlaine" style={{ height:size*1.02 }} />
    <div className="logo-genius">Genius</div>
  </div>;
}

// Barres de perf minimalistes
function MiniBars({ data, tone = 'navy' }) {
  const max = Math.max(...data);
  return <div className="mbars">{data.map((d, i) => <span key={i} style={{ height:`${Math.max(12, d/max*100)}%`, background: i === data.length-1 ? `var(--${tone})` : 'var(--line-2)' }} />)}</div>;
}

function Toggle({ on, onChange, label }) {
  return <button className={`tgl${on ? ' on' : ''}`} onClick={() => onChange(!on)} aria-label={label}><span /></button>;
}

Object.assign(window, { Icon, Btn, Badge, Card, SectionHead, ScoreRing, Meter, Stepper, Logo, MiniBars, Toggle });