/* ============================================================
   BLOCK CORE — shared helpers used by every style-aware block.
   window.BLOCKS is the global catalog; blocks-*.jsx push into it.
   Every block: { id, type, subtype, title, w, Render(s) }
   Render is given the active style config `s` and renders using
   s.cls.* token classes, so one definition works in all styles.
   ============================================================ */

window.BLOCKS = window.BLOCKS || [];
const cx = (...a) => a.filter(Boolean).join(' ');

/* striped placeholder slot (never hand-draw art) */
function Slot({ label='image', className='', style }){
  return (
    <div className={cx('relative overflow-hidden rounded-xl', className)} style={style}>
      <div className="absolute inset-0" style={{
        background:'repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 9px)',
        opacity:.18,
      }}/>
      <div className="absolute inset-0 flex items-center justify-center">
        <span style={{ fontFamily:'Space Mono, monospace', fontSize:10, letterSpacing:'.12em',
          textTransform:'uppercase', opacity:.55 }}>{label}</span>
      </div>
    </div>
  );
}

/* area sparkline (uses style chart colors) */
function Spark({ colors, w=220, h=70, data }){
  const d = data || [12,18,14,24,20,30,26,38,33,46,40,52];
  const max = Math.max(...d), min = Math.min(...d);
  const nx = i => (i/(d.length-1))*w;
  const ny = v => h - ((v-min)/(max-min || 1))*(h-8) - 4;
  const line = d.map((v,i)=>`${i?'L':'M'}${nx(i).toFixed(1)},${ny(v).toFixed(1)}`).join(' ');
  const area = `${line} L${w},${h} L0,${h} Z`;
  const id = 'sp'+Math.random().toString(36).slice(2,7);
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display:'block' }}>
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={colors[0]} stopOpacity=".45"/>
          <stop offset="1" stopColor={colors[0]} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d={area} fill={`url(#${id})`}/>
      <path d={line} fill="none" stroke={colors[0]} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* mini bar chart */
function Bars({ colors, data }){
  const d = data || [40,68,52,84,60,92,74];
  const max = Math.max(...d);
  return (
    <div className="flex items-end gap-2 h-full w-full">
      {d.map((v,i)=>(
        <div key={i} className="flex-1 rounded-t-md" style={{
          height:`${(v/max)*100}%`,
          background:`linear-gradient(180deg, ${colors[0]}, ${colors[1]||colors[0]})`,
          opacity: i===5 ? 1 : .8,
        }}/>
      ))}
    </div>
  );
}

/* donut ring */
function Ring({ colors, value=72, size=84 }){
  const r = size/2 - 8, c = 2*Math.PI*r;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="currentColor" strokeOpacity=".18" strokeWidth="8"/>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={colors[0]} strokeWidth="8"
        strokeLinecap="round" strokeDasharray={c} strokeDashoffset={c*(1-value/100)}
        transform={`rotate(-90 ${size/2} ${size/2})`}/>
    </svg>
  );
}

/* tiny check / star / arrow glyphs */
function Glyph({ d, size=16, fill='none' }){
  return <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
    strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={d}/></svg>;
}
const G = {
  check:'M20 6L9 17l-5-5',
  star:'M12 3l2.6 5.6L21 9.3l-4.5 4.2 1.1 6.2L12 16.8 6.4 19.7l1.1-6.2L3 9.3l6.4-.7z',
  arrow:'M5 12h14M13 6l6 6-6 6',
  plus:'M12 5v14M5 12h14',
  heart:'M12 21s-7-4.4-9.5-8.5C1 9 3 5.5 6.5 5.5 9 5.5 12 8 12 8s3-2.5 5.5-2.5C21 5.5 23 9 21.5 12.5 19 16.6 12 21 12 21z',
  play:'M8 5v14l11-7z',
  bell:'M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 01-3.4 0',
  search:'M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.3-4.3',
};

window.cx = cx;
window.Slot = Slot;
window.Spark = Spark;
window.Bars = Bars;
window.Ring = Ring;
window.Glyph = Glyph;
window.G = G;