// Sellatr primitives — Icon, Button, Avatar, Badge, Logo, ChannelIcon.
// All mounted to window so other Babel scripts can use them.

const { useState, useEffect, useRef, useMemo } = React;

/* ============ ICONS (Lucide-style, 1.75 stroke) ============ */
const Icon = ({ name, size = 18, className = '', style = {}, strokeWidth }) => {
  const stroke = strokeWidth ?? (size >= 32 ? 2 : 1.75);
  const P = {
    inbox: <><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></>,
    chat: <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>,
    bolt: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
    chart: <><path d="M3 3v18h18"/><path d="m19 9-5 5-4-4-3 3"/></>,
    pie: <><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></>,
    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.87M16 3.13a4 4 0 0 1 0 7.75"/></>,
    user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    send: <><path d="M22 2 11 13"/><path d="m22 2-7 20-4-9-9-4 20-7z"/></>,
    sparkles: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></>,
    sparkle: <path d="M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z"/>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    arrowRight: <><path d="M5 12h14M12 5l7 7-7 7"/></>,
    arrowLeft: <><path d="M19 12H5M12 5l-7 7 7 7"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    checkCircle: <><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 17 9"/></>,
    x: <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>,
    minus: <path d="M5 12h14"/>,
    more: <><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></>,
    bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></>,
    book: <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15zM4 19.5V22h15"/>,
    cart: <><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></>,
    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"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
    mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 6-10 7L2 6"/></>,
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>,
    calendar: <><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"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>,
    target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
    heart: <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></>,
    code: <><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></>,
    cpu: <><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="4"/><line x1="15" y1="2" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="22"/><line x1="15" y1="20" x2="15" y2="22"/><line x1="20" y1="9" x2="22" y2="9"/><line x1="20" y1="14" x2="22" y2="14"/><line x1="2" y1="9" x2="4" y2="9"/><line x1="2" y1="14" x2="4" y2="14"/></>,
    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"/></>,
    workflow: <><rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><path d="M9 6h6a3 3 0 0 1 3 3v6"/></>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    building: <><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01"/></>,
    stethoscope: <><path d="M6 2v6a4 4 0 0 0 8 0V2"/><path d="M4 2h4M12 2h4"/><circle cx="20" cy="14" r="2"/><path d="M18 14v3a5 5 0 0 1-10 0v-3"/></>,
    utensils: <><path d="M3 2v7c0 1.1.9 2 2 2h2v11M11 2v20M21 15V2v0c-1.66 0-3 2.69-3 6s1.34 6 3 6"/></>,
    home: <><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></>,
    scale: <><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1zM2 16l3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1zM7 21h10M12 3v18"/></>,
    car: <><path d="M16 17H8M20 17h-3a2 2 0 0 1-2-2v-2H9v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4l3-6h14l3 6v4a2 2 0 0 1-2 2z"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/></>,
    store: <><path d="m2 7 1.5-4h17L22 7M2 7v13a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7M2 7h20"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    palette: <><circle cx="13.5" cy="6.5" r="1"/><circle cx="17.5" cy="10.5" r="1"/><circle cx="8.5" cy="7.5" r="1"/><circle cx="6.5" cy="12.5" r="1"/><path d="M12 22a10 10 0 1 1 10-10c0 4-3 4-5 4-2 0-3 2-3 4 0 1 1 2-2 2z"/></>,
    money: <><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/></>,
    creditCard: <><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></>,
    trending: <><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></>,
    megaphone: <path d="m3 11 18-5v12L3 14v-3zM11.6 16.8a3 3 0 1 1-5.8-1.6"/>,
    video: <><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></>,
    headphones: <path d="M3 18v-6a9 9 0 0 1 18 0v6M21 19a2 2 0 0 1-2 2h-1v-7h3v5zM3 19a2 2 0 0 0 2 2h1v-7H3v5z"/>,
    repeat: <><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></>,
    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"/></>,
    package: <><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><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"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></>,
    zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
    play: <polygon points="6 3 20 12 6 21 6 3"/>,
    layoutGrid: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    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"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" className={className} style={style}>
      {P[name] || null}
    </svg>
  );
};

/* ============ CHANNEL BRAND ICONS ============ */
const ChannelIcon = ({ channel, size = 18 }) => {
  const map = {
    whatsapp: (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15s-.77.97-.95 1.17c-.17.2-.35.22-.65.07-.3-.15-1.26-.47-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.21-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.1 3.21 5.09 4.5.71.31 1.27.49 1.7.63.71.23 1.36.2 1.87.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35zM12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.38 5.07L2 22l5.07-1.38A9.95 9.95 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2z"/></svg>),
    instagram: (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.34 4.14.63a5.85 5.85 0 0 0-2.13 1.39A5.85 5.85 0 0 0 .63 4.14C.34 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.27 2.14.56 2.9.3.79.7 1.46 1.39 2.13.67.69 1.34 1.09 2.13 1.39.76.29 1.63.5 2.9.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.14-.27 2.9-.56a5.85 5.85 0 0 0 2.13-1.39 5.85 5.85 0 0 0 1.39-2.13c.29-.76.5-1.63.56-2.9C23.99 15.67 24 15.26 24 12s-.01-3.67-.07-4.95c-.06-1.27-.27-2.14-.56-2.9a5.85 5.85 0 0 0-1.39-2.13A5.85 5.85 0 0 0 19.86.63C19.1.34 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/></svg>),
    messenger: (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.36 2 2 6.13 2 11.7c0 2.9 1.19 5.42 3.14 7.17.16.15.26.35.27.57l.05 1.79a.8.8 0 0 0 1.12.71l2-.88c.16-.07.34-.09.5-.04.91.25 1.88.38 2.91.38 5.64 0 10-4.13 10-9.7S17.64 2 12 2zm6 7.46-2.93 4.65a1.5 1.5 0 0 1-2.17.4l-2.34-1.75a.6.6 0 0 0-.72 0L6.69 15.4c-.42.32-.97-.18-.69-.62l2.93-4.65a1.5 1.5 0 0 1 2.17-.4l2.34 1.75a.6.6 0 0 0 .72 0l3.15-2.64c.42-.32.97.18.69.62z"/></svg>),
    telegram: (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.62 6.93-1.65 7.78c-.12.55-.45.69-.91.43l-2.52-1.86-1.21 1.17c-.13.13-.25.25-.5.25l.18-2.55 4.66-4.21c.2-.18-.04-.28-.32-.1l-5.76 3.63L5.7 12.7c-.54-.17-.55-.54.11-.8l9.65-3.72c.45-.16.85.1.71.74z"/></svg>),
    email: (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="m22 7-9.4 6.6a2 2 0 0 1-2.2 0L2 7"/></svg>),
    web: (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10z"/></svg>),
    api: (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><polyline points="8 6 2 12 8 18"/><polyline points="16 6 22 12 16 18"/><line x1="14" y1="4" x2="10" y2="20"/></svg>),
  };
  return map[channel] || null;
};

const CHANNEL_META = {
  whatsapp:  { name: 'واتساب',      color: '#25D366' },
  instagram: { name: 'إنستجرام',   color: '#E4405F' },
  messenger: { name: 'ماسنجر',     color: '#0084FF' },
  telegram:  { name: 'تيليجرام',    color: '#26A5E4' },
  email:     { name: 'البريد',       color: '#52525B' },
  web:       { name: 'الموقع',        color: '#5B5BF7' },
  api:       { name: 'API',          color: '#0B0B0E' },
};

/* ============ BUTTON ============ */
const Button = ({ children, variant = 'primary', size = 'md', icon, iconRight, ...rest }) => {
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 13, radius: 12 },
    md: { padding: '11px 20px', fontSize: 14, radius: 14 },
    lg: { padding: '15px 26px', fontSize: 15, radius: 16 },
  };
  const s = sizes[size];
  const variants = {
    primary: {
      background: 'linear-gradient(135deg, #5B5BF7 0%, #2A6FFF 60%, #06B6D4 110%)',
      color: '#fff', border: 'none',
      boxShadow: '0 1px 0 rgba(255,255,255,0.18) inset, 0 6px 22px rgba(91,91,247,0.32)',
    },
    secondary: {
      background: '#fff', color: 'var(--fg)',
      border: '1px solid var(--border-strong)', boxShadow: 'var(--shadow-1)',
    },
    ghost: {
      background: 'transparent', color: 'var(--fg)',
      border: '1px solid transparent', boxShadow: 'none',
    },
    dark: {
      background: 'var(--black)', color: '#fff', border: 'none',
      boxShadow: '0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 22px rgba(0,0,0,0.28)',
    },
    outline: {
      background: 'rgba(255,255,255,0.04)', color: '#fff',
      border: '1px solid rgba(255,255,255,0.22)', boxShadow: 'none',
    },
  };
  const v = variants[variant];
  return (
    <button {...rest} style={{
      ...s, ...v, padding: s.padding, borderRadius: s.radius,
      fontFamily: 'var(--font-arabic)', fontWeight: 600, fontSize: s.fontSize,
      cursor: rest.disabled ? 'not-allowed' : 'pointer',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      transition: 'transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), filter 160ms var(--ease-out)',
      whiteSpace: 'nowrap', ...rest.style,
    }}
    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.filter = 'brightness(1.04)'; }}
    onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.filter = ''; }}
    >
      {icon && <Icon name={icon} size={s.fontSize + 2} />}
      {children}
      {iconRight && <Icon name={iconRight} size={s.fontSize + 2} />}
    </button>
  );
};

/* ============ AVATAR ============ */
const Avatar = ({ initials, color = '#5B5BF7', size = 36, status, src }) => {
  const dotColor = status === 'online' ? '#10B981' : status === 'away' ? '#F59E0B' : status === 'offline' ? '#71717A' : null;
  return (
    <div style={{ position: 'relative', width: size, height: size, flex: '0 0 auto' }}>
      <div style={{
        width: size, height: size, borderRadius: 9999, overflow: 'hidden',
        background: color, color: '#fff',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-arabic)', fontWeight: 600, fontSize: size * 0.36,
      }}>{src ? <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/> : initials}</div>
      {dotColor && (
        <span style={{
          position: 'absolute', insetInlineEnd: -2, insetBlockEnd: -2,
          width: size * 0.28, height: size * 0.28, borderRadius: 99,
          background: dotColor, border: '2px solid var(--bg)',
        }} />
      )}
    </div>
  );
};

/* ============ BADGE ============ */
const Badge = ({ children, variant = 'neutral', dot = false, icon }) => {
  const v = {
    neutral:   { bg: 'var(--bg-muted)',                   fg: 'var(--fg)',          dot: 'var(--neutral-400)', border: '1px solid var(--border)' },
    success:   { bg: 'rgba(16,185,129,0.10)',             fg: '#047857',            dot: '#10B981',            border: 'none' },
    warning:   { bg: 'rgba(245,158,11,0.12)',             fg: '#B45309',            dot: '#F59E0B',            border: 'none' },
    danger:    { bg: 'rgba(239,68,68,0.10)',              fg: '#B91C1C',            dot: '#EF4444',            border: 'none' },
    info:      { bg: 'rgba(42,111,255,0.10)',             fg: '#1D4ED8',            dot: '#2A6FFF',            border: 'none' },
    ai:        { bg: 'rgba(91,91,247,0.10)',              fg: 'var(--indigo-deep)', dot: '#5B5BF7',            border: '1px solid rgba(91,91,247,0.18)' },
    whatsapp:  { bg: 'rgba(37,211,102,0.10)',             fg: 'var(--whatsapp-deep)', dot: '#25D366',          border: 'none' },
    instagram: { bg: 'rgba(228,64,95,0.10)',              fg: '#C13584',            dot: '#E4405F',            border: 'none' },
    dark:      { bg: 'var(--black)',                       fg: '#fff',               dot: '#fff',                border: 'none' },
    glass:     { bg: 'rgba(255,255,255,0.7)',              fg: 'var(--fg)',          dot: 'var(--indigo)',      border: '1px solid var(--border)' },
  }[variant];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: 'var(--font-arabic)', fontSize: 12, fontWeight: 600,
      padding: '5px 11px', borderRadius: 9999,
      background: v.bg, color: v.fg, border: v.border, whiteSpace: 'nowrap',
      backdropFilter: variant === 'glass' ? 'blur(12px)' : undefined,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 99, background: v.dot, display: 'inline-block' }} />}
      {icon && <ChannelIcon channel={icon} size={12} />}
      {children}
    </span>
  );
};

/* ============ LOGO ============ */
const Logo = ({ variant = 'dark', height = 28 }) => {
  const src = variant === 'dark' ? './assets/logo-on-white.png' : './assets/logo-on-dark.png';
  return <img src={src} alt="Sellatr" style={{ height, width: 'auto', display: 'block' }} />;
};
const LogoMark = ({ size = 32, theme = 'dark' }) => {
  const src = theme === 'dark' ? './assets/logo-mark.png' : './assets/logo-mark-light.png';
  return <img src={src} alt="Sellatr" style={{ width: size, height: size, borderRadius: size * 0.22, display: 'block' }} />;
};

/* ============ SECTION HEADER ============ */
const SectionHeader = ({ eyebrow, title, subtitle, align = 'center', children }) => (
  <div style={{
    maxWidth: 760, margin: align === 'center' ? '0 auto' : '0', textAlign: align,
    display: 'flex', flexDirection: 'column', gap: 16, alignItems: align === 'center' ? 'center' : 'flex-start',
  }}>
    {eyebrow && <Badge variant="ai" dot>{eyebrow}</Badge>}
    <h2 style={{
      fontFamily: 'var(--font-arabic)',
      fontSize: 'clamp(34px, 4.4vw, 56px)',
      fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.15, margin: 0,
      textWrap: 'balance',
    }}>{title}</h2>
    {subtitle && <p style={{
      fontFamily: 'var(--font-arabic)', fontSize: 18, lineHeight: 1.7,
      color: 'var(--fg-muted)', margin: 0, maxWidth: 640, textWrap: 'pretty',
    }}>{subtitle}</p>}
    {children}
  </div>
);

/* ============ MISC ============ */
const HairlineDivider = () => (<div style={{ height: 1, background: 'linear-gradient(90deg, transparent, var(--border-strong), transparent)' }} />);

const KBD = ({ children }) => (
  <kbd style={{
    fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
    padding: '2px 7px', borderRadius: 6,
    background: 'var(--bg-muted)', border: '1px solid var(--border)', color: 'var(--fg-muted)',
  }}>{children}</kbd>
);

Object.assign(window, {
  Icon, ChannelIcon, CHANNEL_META, Button, Avatar, Badge, Logo, LogoMark, SectionHeader, HairlineDivider, KBD,
});