// Shared helpers + small components.

function ytId(url){
  if(!url) return null;
  const m = String(url).match(/(?:youtu\.be\/|v=|embed\/|shorts\/)([A-Za-z0-9_-]{11})/);
  return m ? m[1] : null;
}

// Inline SVG icons
function Icon({ name, size=18, stroke=2 }){
  const p = { width:size, height:size, viewBox:'0 0 24 24', fill:'none',
    stroke:'currentColor', strokeWidth:stroke, strokeLinecap:'round', strokeLinejoin:'round' };
  const paths = {
    user: <React.Fragment><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></React.Fragment>,
    dots: <React.Fragment><circle cx="12" cy="5" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="12" cy="19" r="1.4"/></React.Fragment>,
    gear: <React.Fragment><circle cx="12" cy="12" r="3.2"/><path d="M12 2.5v3M12 18.5v3M21.5 12h-3M5.5 12h-3M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1M18.4 18.4l-2.1-2.1M7.7 7.7 5.6 5.6"/></React.Fragment>,
    book: <React.Fragment><path d="M4 5a2 2 0 0 1 2-2h6v17H6a2 2 0 0 0-2 2z"/><path d="M20 5a2 2 0 0 0-2-2h-6v17h6a2 2 0 0 1 2 2z"/></React.Fragment>,
    play: <path d="M7 4l13 8-13 8z" fill="currentColor" stroke="none"/>,
    pause: <React.Fragment><rect x="6" y="4" width="4" height="16" fill="currentColor" stroke="none"/><rect x="14" y="4" width="4" height="16" fill="currentColor" stroke="none"/></React.Fragment>,
    prev: <path d="M15 5l-7 7 7 7M9 5v14" />,
    next: <path d="M9 5l7 7-7 7M15 5v14" />,
    first: <path d="M18 5l-7 7 7 7M7 5v14"/>,
    last: <path d="M6 5l7 7-7 7M17 5v14"/>,
    arrowL: <path d="M19 12H5M11 6l-6 6 6 6"/>,
    arrowR: <path d="M5 12h14M13 6l6 6-6 6"/>,
    plus: <path d="M12 5v14M5 12h14"/>,
    expand: <path d="M8 3H3v5M16 3h5v5M21 16v5h-5M3 16v5h5"/>,
    logo: <React.Fragment><path d="M12 3v8M9 6h6" stroke="currentColor"/><path d="M5 21c1.5-5 4-7 7-7s5.5 2 7 7z"/></React.Fragment>
  };
  return <svg {...p}>{paths[name]}</svg>;
}

window.ytId = ytId;
window.Icon = Icon;