// ─── Logo.jsx — Componente Logo SVG y BarChart ───

const Logo=({size=42})=>(
  <svg width={size} height={size} viewBox="0 0 100 100" fill="none">
    <defs>
      <linearGradient id="ng1" x1="50" y1="10" x2="50" y2="90" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stopColor="#22d3ee"/>
        <stop offset="100%" stopColor="#6366f1"/>
      </linearGradient>
      <linearGradient id="ng2" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stopColor="#22d3ee"/>
        <stop offset="100%" stopColor="#8b5cf6"/>
      </linearGradient>
    </defs>
    <circle cx="50" cy="12" r="5" fill="#22d3ee"/>
    <circle cx="82" cy="35" r="5" fill="#3b82f6"/>
    <circle cx="70" cy="75" r="5" fill="#6366f1"/>
    <circle cx="30" cy="75" r="5" fill="#7c3aed"/>
    <circle cx="18" cy="35" r="5" fill="#6366f1"/>
    <line x1="50" y1="12" x2="82" y2="35" stroke="url(#ng1)" strokeWidth="2.5" opacity="0.9"/>
    <line x1="82" y1="35" x2="70" y2="75" stroke="url(#ng1)" strokeWidth="2.5" opacity="0.9"/>
    <line x1="70" y1="75" x2="30" y2="75" stroke="url(#ng1)" strokeWidth="2.5" opacity="0.9"/>
    <line x1="30" y1="75" x2="18" y2="35" stroke="url(#ng1)" strokeWidth="2.5" opacity="0.9"/>
    <line x1="18" y1="35" x2="50" y2="12" stroke="url(#ng1)" strokeWidth="2.5" opacity="0.9"/>
    <line x1="50" y1="12" x2="50" y2="50" stroke="url(#ng2)" strokeWidth="2" opacity="0.8"/>
    <line x1="82" y1="35" x2="50" y2="50" stroke="url(#ng2)" strokeWidth="2" opacity="0.8"/>
    <line x1="70" y1="75" x2="50" y2="50" stroke="url(#ng2)" strokeWidth="2" opacity="0.8"/>
    <line x1="30" y1="75" x2="50" y2="50" stroke="url(#ng2)" strokeWidth="2" opacity="0.8"/>
    <line x1="18" y1="35" x2="50" y2="50" stroke="url(#ng2)" strokeWidth="2" opacity="0.8"/>
    <circle cx="50" cy="50" r="14" stroke="#3b82f6" strokeWidth="1.5" fill="none" opacity="0.5"/>
    <circle cx="50" cy="50" r="9" stroke="#f59e0b" strokeWidth="1.5" fill="none" opacity="0.7"/>
    <circle cx="50" cy="50" r="5" stroke="#f59e0b" strokeWidth="1.5" fill="none" opacity="0.9"/>
    <circle cx="50" cy="50" r="3" fill="#f59e0b"/>
    <circle cx="50" cy="50" r="1.5" fill="#fff"/>
  </svg>
);

function BarChart({data,C,height=120}){
  if(!data||!data.length)return <div style={{color:C.muted,fontSize:12,padding:20,textAlign:"center"}}>Sin datos suficientes</div>;
  const max=Math.max(...data.map(d=>d.v),1);
  const W=500,H=height,pad=20,bw=Math.floor((W-pad*2)/data.length)-6;
  return(
    <svg viewBox={`0 0 ${W} ${H+24}`} style={{width:"100%",height:H+24}}>
      {data.map((d,i)=>{
        const bh=Math.max(3,((d.v/max)*(H-10)));
        const x=pad+i*((W-pad*2)/data.length)+(((W-pad*2)/data.length)-bw)/2;
        return(
          <g key={i}>
            <rect x={x} y={H-bh} width={bw} height={bh} fill={C.blue} rx="3" opacity=".85"/>
            <text x={x+bw/2} y={H+14} textAnchor="middle" fontSize="10" fill={C.muted} fontFamily="system-ui">{d.l}</text>
          </g>
        );
      })}
    </svg>
  );
}
