/* Shared helpers for UI kit previews */
const { useState, useEffect, useRef, useMemo } = React;

const Icon = ({ name, size = 20, stroke = 1.75, ...rest }) => {
  const paths = {
    video:   <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M10 9l5 3-5 3V9z" fill="currentColor" stroke="none"/></>,
    play:    <path d="M6 4l14 8-14 8V4z" fill="currentColor" stroke="none"/>,
    pause:   <><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></>,
    user:    <><path d="M20 21a8 8 0 10-16 0"/><circle cx="12" cy="7" r="4"/></>,
    users:   <><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></>,
    search:  <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    bell:    <><path d="M18 16V11a6 6 0 10-12 0v5l-2 2h16l-2-2z"/><path d="M10 20a2 2 0 004 0"/></>,
    check:   <path d="M4 12l5 5L20 6"/>,
    x:       <path d="M6 6l12 12M18 6l-12 12"/>,
    dot:     <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/>,
    arrow:   <path d="M5 12h14M13 5l7 7-7 7"/>,
    briefcase:<><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M3 13h18"/></>,
    home:    <path d="M3 11l9-8 9 8v10a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1V11z"/>,
    settings:<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33h.01a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v.01a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></>,
    clock:   <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    send:    <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>,
    mic:     <><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></>,
    rec:     <circle cx="12" cy="12" r="6" fill="currentColor" stroke="none"/>,
    plus:    <path d="M12 5v14M5 12h14"/>,
    filter:  <path d="M3 5h18l-7 9v5l-4 2v-7L3 5z"/>,
    star:    <path d="M12 2l3 7 7 .6-5.3 4.7 1.6 7L12 17.8 5.7 21.3 7.3 14.3 2 9.6 9 9z"/>,
    mapPin:  <><path d="M12 22s8-7 8-13a8 8 0 10-16 0c0 6 8 13 8 13z"/><circle cx="12" cy="9" r="3"/></>,
    linkedin:<><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7.5v.5M12 10v7m0-4a3 3 0 016 0v4" /></>,
    chevron: <path d="M9 6l6 6-6 6"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}>
      {paths[name] || null}
    </svg>
  );
};

// Simple avatar placeholder (colored circle with initials; no real photos)
const Avatar = ({ name = "NN", size = 40, hue = 28 }) => {
  const initials = name.split(" ").map(s => s[0]).slice(0,2).join("").toUpperCase();
  return (
    <div style={{
      width:size, height:size, borderRadius:"50%",
      background:`linear-gradient(135deg, hsl(${hue} 80% 82%), hsl(${hue} 80% 68%))`,
      color:"#fff", fontWeight:700, fontSize:size*0.38,
      display:"flex", alignItems:"center", justifyContent:"center",
      border:"1px solid var(--border-1)"
    }}>{initials}</div>
  );
};

const Button = ({ variant = "primary", size = "md", children, icon, ...rest }) => {
  const base = {
    fontFamily:"var(--font-sans)", fontWeight:600,
    border:0, borderRadius:"9999px", cursor:"pointer",
    display:"inline-flex", alignItems:"center", gap:8,
    transition:"all 120ms var(--ease-std)", letterSpacing:"-0.005em",
  };
  const sizes = {
    sm: { padding:"8px 14px", fontSize:13 },
    md: { padding:"12px 22px", fontSize:15 },
    lg: { padding:"14px 26px", fontSize:16 },
  };
  const variants = {
    primary:   { background:"var(--nubel-orange)", color:"#fff" },
    secondary: { background:"var(--ink)", color:"#fff" },
    ghost:     { background:"transparent", color:"var(--ink)", border:"1px solid var(--border-2)" },
    link:      { background:"none", color:"var(--ink)", padding:"10px 4px" },
  };
  return (
    <button {...rest}
      onMouseEnter={e => { if(variant==='primary') e.currentTarget.style.background='var(--nubel-orange-hover)'; }}
      onMouseLeave={e => { if(variant==='primary') e.currentTarget.style.background='var(--nubel-orange)'; }}
      style={{...base, ...sizes[size], ...variants[variant], ...(rest.style||{})}}>
      {children}
      {icon && <Icon name={icon} size={14} stroke={2} />}
    </button>
  );
};

const Tag = ({ variant = "default", children }) => {
  const variants = {
    default: { background:"var(--slate-100)", color:"var(--fg-2)" },
    brand:   { background:"var(--nubel-orange-soft)", color:"var(--nubel-orange-press)" },
    success: { background:"var(--success-soft)", color:"var(--success)" },
    warn:    { background:"var(--warning-soft)", color:"var(--warning)" },
    outline: { background:"#fff", color:"var(--fg-2)", border:"1px solid var(--border-1)" },
    dark:    { background:"var(--ink)", color:"#fff" },
  };
  return <span style={{
    fontSize:12, fontWeight:600, padding:"4px 10px", borderRadius:9999,
    display:"inline-flex", alignItems:"center", gap:6, ...variants[variant]
  }}>{children}</span>;
};

window.Icon = Icon;
window.Avatar = Avatar;
window.Button = Button;
window.Tag = Tag;