// Pivot Pulse — slim local primitives.
// Mirrors ui_kits/burnoutiq/Primitives.jsx shape, subset we actually use.

function Icon({ name, size = 18, color = "currentColor", stroke = 2 }) {
  const c = { width:size, height:size, viewBox:"0 0 24 24", fill:"none", stroke:color, strokeWidth:stroke, strokeLinecap:"round", strokeLinejoin:"round" };
  switch (name) {
    case "flame":    return <svg {...c}><path d="M8.5 14.5A2.5 2.5 0 0 0 11 17c0-2-.5-3 .5-4.5 1 1 2 1.5 2 3A4 4 0 0 1 10 20a6 6 0 0 1-6-6c0-3 2-5.5 3.5-7C9 5.5 9 3 8.5 2c3 .5 5 3 5 5.5 0 1.5-.5 2.5-1 3.5 1 .5 1.5 1.5 1.5 3.5z"/></svg>;
    case "arrow":    return <svg {...c}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "sparkles": return <svg {...c}><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/></svg>;
    case "activity": return <svg {...c}><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>;
    case "share":    return <svg {...c}><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v14"/></svg>;
    case "check":    return <svg {...c}><path d="M20 6L9 17l-5-5"/></svg>;
    case "mail":     return <svg {...c}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case "calendar": return <svg {...c}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>;
    default: return null;
  }
}

function Eyebrow({ children, tone = "faint" }) {
  const colors = { faint:"#8A93A2", ember:"#B45309", amber:"#FCD34D" };
  return <div style={{fontFamily:"'Space Grotesk',sans-serif",fontSize:11,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.2em",color:colors[tone]}}>{children}</div>;
}

function PillTag({ children, bg = "#FEF3C7", color = "#92400E", icon }) {
  return (
    <span style={{display:"inline-flex",alignItems:"center",gap:6,fontFamily:"'Space Grotesk',sans-serif",fontWeight:600,fontSize:11,textTransform:"uppercase",letterSpacing:"0.2em",padding:"5px 12px",borderRadius:999,background:bg,color}}>
      {icon && <Icon name={icon} size={12} color={color} />}
      {children}
    </span>
  );
}

function Button({ children, variant = "primary", size = "md", onClick, icon, iconRight, style = {} }) {
  const sizes = { md:{padding:"11px 18px",fontSize:14,borderRadius:10}, sm:{padding:"7px 13px",fontSize:12.5,borderRadius:8}, lg:{padding:"14px 22px",fontSize:15,borderRadius:12} };
  const variants = {
    primary: { background:"#D97706", color:"#fff", border:"1px solid #D97706" },
    ghost:   { background:"transparent", color:"#0B1220", border:"1px solid #D6D1C3" },
    dark:    { background:"#0B1220", color:"#fff", border:"1px solid #0B1220" },
    amber:   { background:"#FCD34D", color:"#0B1220", border:"1px solid #FCD34D" }
  };
  const [hover,setHover] = React.useState(false);
  const hoverStyles = {
    primary: { background:"#B45309", boxShadow:"0 8px 24px rgba(11,18,32,0.12)" },
    ghost:   { borderColor:"#0B1220" },
    dark:    { background:"#1E293B" },
    amber:   { background:"#FBBF24" }
  };
  return (
    <button onClick={onClick} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{...variants[variant],...sizes[size],fontFamily:"'Space Grotesk',sans-serif",fontWeight:600,cursor:"pointer",display:"inline-flex",alignItems:"center",gap:8,letterSpacing:"-0.005em",transition:"all 180ms",...(hover?hoverStyles[variant]:{}),...style}}>
      {icon && <Icon name={icon} size={15} />}
      {children}
      {iconRight && <Icon name={iconRight} size={15} />}
    </button>
  );
}

function Card({ children, padding = 24, style = {} }) {
  return (
    <div style={{background:"#fff",border:"1px solid #E6E2D9",borderRadius:18,boxShadow:"0 1px 2px rgba(0,0,0,0.04)",padding,...style}}>
      {children}
    </div>
  );
}

// Mark used on the parent-brand surfaces: dark navy tile with ember flame.
// Matches the BurnoutIQ mark's grammar (per README §Logo marks).
function PivotMark({ size = 36 }) {
  return (
    <div style={{width:size,height:size,borderRadius:8,background:"#0B1220",display:"grid",placeItems:"center",flexShrink:0}}>
      <Icon name="flame" size={Math.round(size*0.56)} color="#D97706" stroke={2.2}/>
    </div>
  );
}

Object.assign(window, { Icon, Eyebrow, PillTag, Button, Card, PivotMark });