/* Primitives: icons, small UI helpers, mono label */

/* ---- Stack logo mark ---- */
const StackMark = ({ size = 28, bg = 'var(--ink)' }) => (
  <svg viewBox="0 0 80 80" width={size} height={size} aria-label="BrokerStudio" role="img" style={{display:'block', flexShrink:0}}>
    <rect width="80" height="80" rx={size < 24 ? 4 : 10} fill={bg}/>
    <rect x="18" y="22" width="44" height="9" rx="2" fill="var(--bg)"/>
    <rect x="18" y="35.5" width="44" height="9" rx="2" fill="var(--accent)"/>
    <rect x="18" y="49" width="44" height="9" rx="2" fill="var(--bg)" opacity="0.55"/>
  </svg>
);

const StackLockup = ({ size = 28 }) => (
  <div style={{display:'flex', alignItems:'center', gap:10}}>
    <StackMark size={size}/>
    <span style={{fontFamily:'var(--ff-sans)', fontSize: size * 0.8, fontWeight:600, letterSpacing:'-0.02em'}}>BrokerStudio</span>
  </div>
);

const Icon = ({ name, size = 16, stroke = 1.6, style }) => {
  const s = { width: size, height: size, ...style };
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", style: s };
  const paths = {
    arrow: <path d="M5 12h14M13 5l7 7-7 7" />,
    check: <polyline points="4 12 10 18 20 6" />,
    dot: <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none" />,
    spark: <path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l3 3M15 15l3 3M6 18l3-3M15 9l3-3" />,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></>,
    doc: <><path d="M7 3h8l4 4v14a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" /><path d="M14 3v5h5" /></>,
    scale: <><path d="M12 3v18M5 7h14M7 7l-3 7a3 3 0 0 0 6 0l-3-7zM17 7l-3 7a3 3 0 0 0 6 0l-3-7z" /></>,
    shield: <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" />,
    bolt: <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" />,
    layers: <><path d="M12 3l9 5-9 5-9-5 9-5z" /><path d="M3 13l9 5 9-5M3 18l9 5 9-5" /></>,
    plug: <><path d="M9 7V3M15 7V3M6 7h12v6a6 6 0 0 1-12 0V7zM12 19v3" /></>,
    inbox: <><path d="M3 13h5l1 3h6l1-3h5M3 5l2 8v6h14v-6l2-8H3z" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /></>,
    sparkle: <><path d="M12 3l1.5 5L19 9.5 13.5 11 12 16l-1.5-5L5 9.5 10.5 8z" /></>,
    lock: <><rect x="4" y="11" width="16" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></>,
    globe: <><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></>,
    zap: <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" />,
    grid: <><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /></>,
    filter: <path d="M3 5h18l-7 8v6l-4-2v-4z" />,
    download: <><path d="M12 3v14M6 11l6 6 6-6M4 21h16" /></>,
    flag: <><path d="M5 3v18M5 4h12l-2 4 2 4H5" /></>,
    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" />,
    caret: <polyline points="9 6 15 12 9 18" />,
    bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 8 3 8H3s3-1 3-8z" /><path d="M10 20a2 2 0 0 0 4 0" /></>,
  };
  return <svg {...common}>{paths[name] ?? paths.dot}</svg>;
};

const Label = ({ n, children, color }) => (
  <div className="sec-label mono caps">
    <span className="dot" style={color ? { background: color } : null}></span>
    <span>{n}</span>
    <span>—</span>
    <span>{children}</span>
  </div>
);

const Pill = ({ variant = "default", children, style }) => (
  <span className={`pill ${variant}`} style={style}>{children}</span>
);

const Button = ({ variant = "default", children, icon = null, ...rest }) => {
  const cls = variant === "primary" ? "btn btn-primary"
    : variant === "accent" ? "btn btn-accent"
    : variant === "ghost" ? "btn btn-ghost"
    : "btn";
  return (
    <button className={cls} {...rest}>
      {children}
      {icon === "arrow" && <Icon name="arrow" size={14} />}
    </button>
  );
};

const Chrome = ({ url = "app.brokerstudio.com", children, outlook = false, style }) => (
  <div className="chrome" style={style}>
    <div className="chrome-bar">
      <div className="chrome-dots"><i/><i/><i/></div>
      <div className="chrome-url">
        {outlook
          ? <><Icon name="mail" size={12} /><span style={{marginLeft:8}}>outlook.office.com — BrokerStudio add-in connected</span></>
          : <><Icon name="lock" size={11} /><span style={{marginLeft:8}}>https://{url}</span></>
        }
      </div>
      <div className="row" style={{gap:8, color:'var(--muted)'}}>
        <Icon name="bell" size={14} />
        <div style={{width:22, height:22, borderRadius:999, background:'linear-gradient(140deg, var(--ink), var(--accent))', border:'1px solid var(--line-strong)'}}></div>
      </div>
    </div>
    <div className="chrome-body">{children}</div>
  </div>
);

const AppShell = ({ active = "coi", children, noSidebar = false }) => {
  if (noSidebar) {
    return (
      <div className="app app--no-side">
        <main className="app-main">{children}</main>
      </div>
    );
  }
  const items = [
    { k: "dash", label: "Dashboard", icon: "grid" },
    { k: "inbox", label: "Broker Inbox", icon: "inbox" },
    { k: "coi", label: "COI System", icon: "shield" },
    { k: "quotes", label: "Quote Compare", icon: "scale" },
    { k: "policy", label: "Policy Check", icon: "doc" },
    { k: "contract", label: "Contract Review", icon: "flag" },
  ];
  const bottom = [
    { k: "clients", label: "Clients", icon: "layers" },
    { k: "integrations", label: "Integrations", icon: "plug" },
  ];
  return (
    <div className="app">
      <aside className="app-side">
        <div className="app-brand"><StackMark size={18} />BrokerStudio</div>
        <div className="app-nav">
          {items.map(i => (
            <a key={i.k} className={i.k === active ? "active" : ""}>
              <Icon name={i.icon} size={14} /> {i.label}
            </a>
          ))}
          <div className="group">Workspace</div>
          {bottom.map(i => (
            <a key={i.k}><Icon name={i.icon} size={14} /> {i.label}</a>
          ))}
        </div>
      </aside>
      <main className="app-main">{children}</main>
    </div>
  );
};

Object.assign(window, { Icon, Label, Pill, Button, Chrome, AppShell, StackMark, StackLockup });