/* ============================================================
   Shared UI: line-icon set + primitives
   All exported to window for cross-file use.
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- Line icon set (stroke 2.2, currentColor) ---------- */
const S = (p) => ({ width:p.s||24, height:p.s||24, viewBox:"0 0 24 24", fill:"none",
  stroke:"currentColor", strokeWidth:p.w||2.2, strokeLinecap:"round", strokeLinejoin:"round" });

const Icon = {
  back:(p)=> <svg {...S(p)}><path d="M15 5l-7 7 7 7"/></svg>,
  chevR:(p)=> <svg {...S(p)}><path d="M9 5l7 7-7 7"/></svg>,
  chevD:(p)=> <svg {...S(p)}><path d="M5 9l7 7 7-7"/></svg>,
  chevL:(p)=> <svg {...S(p)}><path d="M15 5l-7 7 7 7"/></svg>,
  gear:(p)=> <svg {...S(p)} fill="none"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 13a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2v.2a2 2 0 1 1-4 0v-.1A1.7 1.7 0 0 0 7 17.7a1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0-1.2-2.9H1A2 2 0 1 1 1 8h.1A1.7 1.7 0 0 0 2.3 5l-.1-.1A2 2 0 1 1 5 2.1l.1.1A1.7 1.7 0 0 0 7 2.5h.1A1.7 1.7 0 0 0 8.3 1V.8a2 2 0 1 1 4 0V1a1.7 1.7 0 0 0 2.9 1.2 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1A1.7 1.7 0 0 0 23.2 8h.2a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.2 1z" transform="translate(0.5 0.5) scale(0.92)"/></svg>,
  share:(p)=> <svg {...S(p)}><path d="M12 16V4m0 0L8 8m4-4l4 4"/><path d="M5 13v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5"/></svg>,
  passport:(p)=> <svg {...S(p)}><rect x="6" y="3" width="12" height="18" rx="2.4"/><path d="M12 8v4m-2-2h4"/></svg>,
  shield:(p)=> <svg {...S(p)}><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z"/></svg>,
  shieldStar:(p)=> <svg {...S(p)}><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3z"/><path d="M12 8.5l1.1 2.2 2.4.3-1.8 1.7.5 2.4L12 13.9l-2.2 1.2.5-2.4-1.8-1.7 2.4-.3z" strokeWidth="1.5"/></svg>,
  chat:(p)=> <svg {...S(p)}><path d="M4 5h16v11H8l-4 3z"/><path d="M12 9.5l.7 1.4 1.5.2-1.1 1 .3 1.5-1.4-.7-1.3.7.3-1.5-1.1-1 1.5-.2z" strokeWidth="1.4"/></svg>,
  calendar:(p)=> <svg {...S(p)}><rect x="4" y="5" width="16" height="16" rx="3"/><path d="M4 9h16M9 3v4m6-4v4"/></svg>,
  calSync:(p)=> <svg {...S(p)}><rect x="4" y="5" width="16" height="16" rx="3"/><path d="M4 9h16M8 3v3m8-3v3"/><path d="M9 15a3 3 0 0 1 5-1.5M15 16a3 3 0 0 1-5 1.5" strokeWidth="1.8"/></svg>,
  paw:(p)=> <svg {...S(p)} fill="none"><ellipse cx="7" cy="9" rx="1.7" ry="2.2"/><ellipse cx="12" cy="7.3" rx="1.7" ry="2.3"/><ellipse cx="17" cy="9" rx="1.7" ry="2.2"/><path d="M12 12c-2.6 0-4.6 1.8-4.6 3.9 0 1.6 1.3 2.4 2.6 2.4.9 0 1.4-.5 2-.5s1.1.5 2 .5c1.3 0 2.6-.8 2.6-2.4 0-2.1-2-3.9-4.6-3.9z"/></svg>,
  stetho:(p)=> <svg {...S(p)}><path d="M6 3v5a4 4 0 0 0 8 0V3"/><path d="M6 3H4m2 0h2M14 3h-2m2 0h2"/><path d="M10 16v1a4 4 0 0 0 8 0v-2"/><circle cx="18" cy="13" r="2"/></svg>,
  scale:(p)=> <svg {...S(p)}><rect x="4" y="4" width="16" height="16" rx="3.5"/><path d="M8.5 9.5L12 8l-1 3.5"/><path d="M7 16h10" strokeWidth="1.8"/></svg>,
  weight:(p)=> <svg {...S(p)}><path d="M5 8h14l1.5 11a2 2 0 0 1-2 2.2H5.5A2 2 0 0 1 3.5 19z"/><path d="M9 8a3 3 0 0 1 6 0"/><path d="M12 12v3" strokeWidth="1.8"/></svg>,
  syringe:(p)=> <svg {...S(p)}><path d="M14 4l6 6M17 7l-9 9-4 1 1-4 9-9"/><path d="M9 11l2 2M11 9l2 2" strokeWidth="1.7"/></svg>,
  camera:(p)=> <svg {...S(p)}><path d="M4 8h3l1.5-2h7L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/><circle cx="12" cy="13" r="3.2"/></svg>,
  doc:(p)=> <svg {...S(p)}><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4M10 12h6M10 16h6" strokeWidth="1.8"/></svg>,
  clip:(p)=> <svg {...S(p)}><path d="M19 11l-7.5 7.5a3.5 3.5 0 0 1-5-5L13 6a2.3 2.3 0 0 1 3.3 3.3L9 16.7"/></svg>,
  pill:(p)=> <svg {...S(p)}><rect x="3" y="9" width="18" height="6" rx="3" transform="rotate(45 12 12)"/><path d="M9 9l6 6" strokeWidth="1.8"/></svg>,
  bug:(p)=> <svg {...S(p)}><rect x="7" y="7" width="10" height="12" rx="5"/><path d="M12 4v3M7.5 9L5 7m11.5 2L19 7M7 13H4m13 0h3M7.5 17L5 19m11.5-2L19 19"/></svg>,
  cross:(p)=> <svg {...S(p)}><rect x="4" y="4" width="16" height="16" rx="5"/><path d="M12 8v8m-4-4h8" strokeWidth="2"/></svg>,
  moon:(p)=> <svg {...S(p)}><path d="M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z"/></svg>,
  fork:(p)=> <svg {...S(p)}><path d="M7 3v7a2 2 0 0 0 4 0V3M9 10v11M17 3c-1.5 0-2.5 2-2.5 5s1 4 2.5 4m0 0v3"/></svg>,
  plus:(p)=> <svg {...S(p)}><path d="M12 5v14m-7-7h14"/></svg>,
  plusC:(p)=> <svg {...S(p)}><circle cx="12" cy="12" r="9"/><path d="M12 8v8m-4-4h8" strokeWidth="2"/></svg>,
  check:(p)=> <svg {...S(p)}><path d="M5 12.5l4.5 4.5L19 7" strokeWidth="2.4"/></svg>,
  checkC:(p)=> <svg {...S(p)}><circle cx="12" cy="12" r="9"/><path d="M8.5 12.2l2.4 2.4 4.6-5"/></svg>,
  clock:(p)=> <svg {...S(p)}><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>,
  search:(p)=> <svg {...S(p)}><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>,
  send:(p)=> <svg {...S(p)} fill="currentColor" stroke="none"><path d="M4 11.5L20 4l-7.5 16-2.2-6.2z"/></svg>,
  send2:(p)=> <svg {...S(p)}><path d="M4 12l16-8-6 16-3-7z"/></svg>,
  home:(p)=> <svg {...S(p)}><path d="M4 11l8-7 8 7"/><path d="M6 9.5V20h12V9.5"/></svg>,
  person:(p)=> <svg {...S(p)}><circle cx="12" cy="8" r="3.4"/><path d="M5.5 20a6.5 6.5 0 0 1 13 0"/></svg>,
  personPlus:(p)=> <svg {...S(p)}><circle cx="9" cy="8" r="3.4"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0"/><path d="M18 8v6m3-3h-6" strokeWidth="1.9"/></svg>,
  tree:(p)=> <svg {...S(p)}><path d="M12 3l5 7h-3l3 5h-4v6h-2v-6H8l3-5H8z"/></svg>,
  globe:(p)=> <svg {...S(p)}><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.4 2.5 14.6 0 17M12 3.5c-2.5 2.4-2.5 14.6 0 17"/></svg>,
  bowl:(p)=> <svg {...S(p)}><path d="M4 11h16a8 8 0 0 1-16 0z"/><path d="M9 7c0-1.5 1.3-2.5 3-2.5s3 1 3 2.5" strokeWidth="1.8"/></svg>,
  chip:(p)=> <svg {...S(p)}><rect x="7" y="7" width="10" height="10" rx="2"/><path d="M10 4v3m4-3v3m-4 10v3m4-3v3M4 10h3m-3 4h3m10-4h3m-3 4h3" strokeWidth="1.7"/></svg>,
  ruler:(p)=> <svg {...S(p)}><rect x="3" y="8" width="18" height="8" rx="2" transform="rotate(0 12 12)"/><path d="M7 8v3m4-3v4m4-4v3" strokeWidth="1.7"/></svg>,
  cake:(p)=> <svg {...S(p)}><path d="M4 11a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v9H4z"/><path d="M4 15c1.5 0 1.5 1.5 3 1.5S8.5 15 10 15s1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5M9 8V5m6 3V5" strokeWidth="1.7"/></svg>,
  gender:(p)=> <svg {...S(p)}><circle cx="10" cy="14" r="5"/><path d="M14 10l5-5m0 0h-4m4 0v4"/></svg>,
  scissors:(p)=> <svg {...S(p)}><circle cx="6" cy="7" r="2.4"/><circle cx="6" cy="17" r="2.4"/><path d="M8 8.5L20 17M8 15.5L20 7"/></svg>,
  pen:(p)=> <svg {...S(p)}><path d="M14 5l5 5L9 20l-5 1 1-5z"/><path d="M13 6l5 5" strokeWidth="1.8"/></svg>,
  drop:(p)=> <svg {...S(p)}><path d="M12 3.5C9 8 6.5 11 6.5 14.5a5.5 5.5 0 0 0 11 0C17.5 11 15 8 12 3.5z"/></svg>,
  hash:(p)=> <svg {...S(p)}><path d="M9 4l-1.5 16M16.5 4L15 20M5 9h15M4 15h15"/></svg>,
  sparkle:(p)=> <svg {...S(p)} fill="currentColor" stroke="none"><path d="M12 3l1.7 5.3L19 10l-5.3 1.7L12 17l-1.7-5.3L5 10l5.3-1.7z"/><path d="M18.5 14l.7 2.2L21.5 17l-2.3.8-.7 2.2-.7-2.2L15.5 17l2.3-.8z"/></svg>,
  scan:(p)=> <svg {...S(p)}><path d="M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2"/></svg>,
  qmark:(p)=> <svg {...S(p)}><circle cx="12" cy="12" r="8.5"/><path d="M9.5 9.5a2.5 2.5 0 0 1 4 1.6c0 1.6-2 1.8-2 3.4M12 17.4v.01" strokeWidth="1.9"/></svg>,
  qr:(p)=> <svg {...S(p)}><rect x="4" y="4" width="6" height="6" rx="1.3"/><rect x="14" y="4" width="6" height="6" rx="1.3"/><rect x="4" y="14" width="6" height="6" rx="1.3"/><path d="M14 14h2v2m4 0v4m-6 0h2m4-6v.02M14 20v.02" strokeWidth="2"/></svg>,
  bed:(p)=> <svg {...S(p)}><path d="M3 18v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5M3 18v2m18-2v2M3 13.5h18M7 11V9.5A1.5 1.5 0 0 1 8.5 8h2A1.5 1.5 0 0 1 12 9.5V11"/></svg>,
  book:(p)=> <svg {...S(p)}><path d="M12 6.5C10 5 7 4.5 4 5v13c3-.5 6 0 8 1.5 2-1.5 5-2 8-1.5V5c-3-.5-6 0-8 1.5z"/><path d="M12 6.5v13"/></svg>,
  headset:(p)=> <svg {...S(p)}><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><rect x="3" y="13" width="4" height="6.2" rx="1.6"/><rect x="17" y="13" width="4" height="6.2" rx="1.6"/><path d="M20 19.2a3 3 0 0 1-3 3h-3" strokeWidth="1.9"/></svg>,
  grid:(p)=> <svg {...S(p)}><rect x="4" y="4" width="7" height="7" rx="2.2"/><rect x="13" y="4" width="7" height="7" rx="2.2"/><rect x="4" y="13" width="7" height="7" rx="2.2"/><rect x="13" y="13" width="7" height="7" rx="2.2"/></svg>,
  umbrella:(p)=> <svg {...S(p)}><path d="M12 3v2.5M3.5 12a8.5 8.5 0 0 1 17 0z"/><path d="M12 12v6a2.4 2.4 0 0 1-4.8 0" strokeWidth="2"/></svg>,
  store:(p)=> <svg {...S(p)}><path d="M4 9l1-4h14l1 4M4 9v10h16V9M4 9a2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 5 0 2.5 2.5 0 0 0 5 0M10 19v-5h4v5"/></svg>,
  hotel:(p)=> <svg {...S(p)}><path d="M5 21V4h14v17M9 8h.02M13 8h.02M9 12h.02M13 12h.02M10 21v-4h4v4"/></svg>,
  phone:(p)=> <svg {...S(p)}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L20 13l2 5v2a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z"/></svg>,
  mail:(p)=> <svg {...S(p)}><rect x="3" y="5" width="18" height="14" rx="3"/><path d="M4 7l8 6 8-6"/></svg>,
  lock:(p)=> <svg {...S(p)}><rect x="5" y="11" width="14" height="9" rx="2.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>,
};
window.Icon = Icon;

/* ---------- iOS status bar ---------- */
function StatusBar(){
  return (
    <div className="status">
      <span>9:41</span>
      <span className="right">
        <svg width="18" height="12" viewBox="0 0 18 12" fill="#111318"><rect x="0" y="7" width="3" height="5" rx="1"/><rect x="5" y="4.5" width="3" height="7.5" rx="1"/><rect x="10" y="2" width="3" height="10" rx="1"/><rect x="15" y="0" width="3" height="12" rx="1"/></svg>
        <svg width="17" height="12" viewBox="0 0 17 12" fill="#111318"><path d="M8.5 2.4c2.3 0 4.4.9 6 2.4l1.4-1.5A11 11 0 0 0 8.5.4 11 11 0 0 0 1.1 3.3L2.5 4.8a8.6 8.6 0 0 1 6-2.4zM8.5 6c1.2 0 2.3.5 3.1 1.3l1.4-1.5a6.6 6.6 0 0 0-9 0l1.4 1.5A4.4 4.4 0 0 1 8.5 6zm0 3.4l2-2.1a3 3 0 0 0-4 0z"/></svg>
        <svg width="27" height="13" viewBox="0 0 27 13" fill="none"><rect x="1" y="1" width="22" height="11" rx="3.2" stroke="#111318" strokeWidth="1" opacity=".4"/><rect x="2.5" y="2.5" width="18" height="8" rx="2" fill="#111318"/><rect x="24.3" y="4.2" width="1.6" height="4.6" rx="1" fill="#111318" opacity=".5"/></svg>
      </span>
    </div>
  );
}
window.StatusBar = StatusBar;

/* ---------- App bar with back / title / action ---------- */
function AppBar({ onBack, title, right, big }){
  return (
    <div className="appbar">
      {onBack ? <button className="iconbtn" onClick={onBack}><Icon.back/></button> : <span style={{width:40}}/>}
      {title && !big ? <div style={{fontSize:17,fontWeight:600}}>{title}</div> : <span/>}
      {right || <span style={{width:40}}/>}
    </div>
  );
}
window.AppBar = AppBar;

/* ---------- Tag ---------- */
function Tag({ children, variant, style }){
  return <span className={"tag"+(variant?` tag--${variant}`:"")} style={style}>{children}</span>;
}
window.Tag = Tag;

/* ---------- Doctor placeholder avatar (neutral, no fake photo) ---------- */
function DocAvatar({ size=64, hue=150 }){
  return (
    <div style={{width:size,height:size,borderRadius:18,flex:"none",
      background:`linear-gradient(160deg, oklch(0.93 0.03 ${hue}), oklch(0.88 0.04 ${hue}))`,
      display:"flex",alignItems:"flex-end",justifyContent:"center",overflow:"hidden",color:`oklch(0.55 0.05 ${hue})`}}>
      <svg width={size*0.78} height={size*0.78} viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="9" r="4"/><path d="M3.5 23a8.5 8.5 0 0 1 17 0z"/></svg>
    </div>
  );
}
window.DocAvatar = DocAvatar;

/* ---------- Mascot (small line-paw chip used in chat) ---------- */
function Mascot({ size=42 }){
  return (
    <div style={{width:size,height:size,borderRadius:13,flex:"none",background:"#fff",
      border:"2px solid var(--green)",display:"flex",alignItems:"center",justifyContent:"center",color:"var(--green)"}}>
      <Icon.paw s={size*0.55}/>
    </div>
  );
}
window.Mascot = Mascot;