/* ============================================================
   TECHIYAT — shared UI primitives
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---- icon set (simple line icons) ---- */
const ICONS = {
  grid:"M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z",
  compass:"M12 2a10 10 0 100 20 10 10 0 000-20z|M16 8l-2.5 5.5L8 16l2.5-5.5z",
  link:"M9 15l6-6|M11 6l1-1a4 4 0 016 6l-1 1|M13 18l-1 1a4 4 0 01-6-6l1-1",
  pulse:"M3 12h4l2 6 4-14 2 8h6",
  doc:"M6 2h8l4 4v16H6z|M14 2v4h4",
  globe:"M12 2a10 10 0 100 20 10 10 0 000-20z|M2 12h20|M12 2a14 14 0 010 20 14 14 0 010-20z",
  spark:"M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z",
  shield:"M12 2l8 3v6c0 5-3.5 8-8 11-4.5-3-8-6-8-11V5z|M9 12l2 2 4-4",
  gear:"M12 9a3 3 0 100 6 3 3 0 000-6z|M19 12a7 7 0 00-.1-1.3l2-1.5-2-3.4-2.3 1a7 7 0 00-2.3-1.3L14 2h-4l-.3 2.2a7 7 0 00-2.3 1.3l-2.3-1-2 3.4 2 1.5a7 7 0 000 2.6l-2 1.5 2 3.4 2.3-1a7 7 0 002.3 1.3L10 22h4l.3-2.2a7 7 0 002.3-1.3l2.3 1 2-3.4-2-1.5c.07-.43.1-.86.1-1.3z",
  search:"M11 4a7 7 0 100 14 7 7 0 000-14z|M20 20l-4-4",
  bell:"M18 8a6 6 0 10-12 0c0 7-3 9-3 9h18s-3-2-3-9z|M13.7 21a2 2 0 01-3.4 0",
  chevDown:"M6 9l6 6 6-6",
  chevRight:"M9 6l6 6-6 6",
  arrowRight:"M5 12h14|M13 6l6 6-6 6",
  arrowUp:"M12 19V5|M6 11l6-6 6 6",
  check:"M5 12l4 4 10-11",
  checkCircle:"M12 2a10 10 0 100 20 10 10 0 000-20z|M8 12l3 3 5-6",
  plus:"M12 5v14M5 12h14",
  lock:"M5 11h14v10H5z|M8 11V7a4 4 0 018 0v4",
  eye:"M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z|M12 9a3 3 0 100 6 3 3 0 000-6z",
  eyeOff:"M3 3l18 18|M10.6 10.6a3 3 0 004.2 4.2|M9.9 4.6A10 10 0 0112 4.5c6 0 10 7 10 7a18 18 0 01-3.3 3.9M6.1 6.1A18 18 0 002 11.5s4 7 10 7a10 10 0 003.6-.7",
  layers:"M12 3l9 5-9 5-9-5z|M3 13l9 5 9-5",
  users:"M9 11a4 4 0 100-8 4 4 0 000 8z|M2 21a7 7 0 0114 0|M17 11a4 4 0 000-8|M22 21a7 7 0 00-5-6.7",
  user:"M12 12a4 4 0 100-8 4 4 0 000 8z|M4 21a8 8 0 0116 0",
  building:"M4 21V4h10v17M14 9h6v12M7 8h2M7 12h2M7 16h2M17 13h1M17 17h1",
  beaker:"M9 3h6M10 3v6l-5 9a2 2 0 002 3h10a2 2 0 002-3l-5-9V3|M7.5 15h9",
  cpu:"M6 6h12v12H6z|M9 9h6v6H9z|M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2",
  database:"M12 3c4.4 0 8 1.3 8 3s-3.6 3-8 3-8-1.3-8-3 3.6-3 8-3z|M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6|M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6",
  bolt:"M13 2L4 14h7l-1 8 9-12h-7z",
  heart:"M12 21C5 14 3 11 3 7.5A4.5 4.5 0 0112 5a4.5 4.5 0 019 2.5C21 11 19 14 12 21z",
  handshake:"M8 12l3 3 4-4 3 3|M2 12l4-4 4 3M22 12l-4-4-3 2",
  target:"M12 2a10 10 0 100 20 10 10 0 000-20z|M12 7a5 5 0 100 10 5 5 0 000-10z|M12 11a1 1 0 100 2 1 1 0 000-2z",
  flag:"M5 21V4M5 4h12l-2 4 2 4H5",
  warn:"M12 3l9 16H3z|M12 10v4M12 17v.5",
  clock:"M12 2a10 10 0 100 20 10 10 0 000-20z|M12 7v5l3 2",
  send:"M22 2L11 13M22 2l-7 20-4-9-9-4z",
  sliders:"M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6",
  file:"M6 2h8l4 4v16H6z|M14 2v4h4|M9 13h6M9 17h6",
  scale:"M12 3v18M7 21h10M5 7l-3 6h6zM19 7l-3 6h6zM5 7h14",
  map:"M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z|M9 4v14M15 6v14",
  brain:"M9 4a3 3 0 00-3 3 3 3 0 00-1 5 3 3 0 002 4 3 3 0 003 2V4z|M15 4a3 3 0 013 3 3 3 0 011 5 3 3 0 01-2 4 3 3 0 01-3 2V4z",
  trend:"M3 17l6-6 4 4 8-8|M21 7h-5M21 7v5",
  leaf:"M5 21c0-9 6-15 16-16-1 10-7 16-16 16z|M9 17c2-4 4-6 8-8",
  sprout:"M12 22V11|M12 11C12 7 9 5 5 5c0 4 3 6 7 6z|M12 13c0-3 3-5 7-5 0 3-3 5-7 5z",
  radar:"M12 3a9 9 0 109 9|M12 7.5a4.5 4.5 0 104.5 4.5|M12 12l6-3.6|M12 12h.01",
  broadcast:"M4.9 4.9a10 10 0 000 14.2|M19.1 4.9a10 10 0 010 14.2|M7.8 7.8a6 6 0 000 8.4|M16.2 7.8a6 6 0 010 8.4|M12 11.2a.8.8 0 100 1.6.8.8 0 000-1.6z",
  satellite:"M5 5l4 4|M9 9l-4 4 6 6 4-4|M13 13l4-4|M15 3l6 6|M16 8a4 4 0 00-4-4",
  download:"M12 3v12|M7 11l5 5 5-5|M5 21h14"
};

function Icon({ name, size=18, sw=1.8, style, className }){
  const d = ICONS[name] || ICONS.grid;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"
      style={style} className={className} aria-hidden="true">
      {d.split("|").map((p,i)=><path key={i} d={p} />)}
    </svg>
  );
}

/* ---- brand mark (concentric "second life" sprout in a seal) ---- */
function Mark({ size=34, light=false }){
  const fg = light ? "#fff" : "#fff";
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none" aria-hidden="true">
      <path d="M18 26V14" stroke={fg} strokeWidth="2.2" strokeLinecap="round"/>
      <path d="M18 17c0-3.2-2.4-5-5.6-5 0 3.2 2.4 5 5.6 5z" stroke={fg} strokeWidth="2" strokeLinejoin="round"/>
      <path d="M18 19.5c0-2.6 2.2-4.2 5.2-4.2 0 2.6-2.2 4.2-5.2 4.2z" stroke={fg} strokeWidth="2" strokeLinejoin="round"/>
    </svg>
  );
}

function Logo({ size=20, dark=false }){
  return (
    <div className="row gap10">
      <div className="side-mark" style={{width:size*1.7, height:size*1.7}}><Mark size={size*1.1}/></div>
      <div className="col" style={{gap:1}}>
        <div className="serif" style={{fontSize:size, fontWeight:600, color: dark? "#fff":"var(--ink)", lineHeight:1}}>Techiyat</div>
      </div>
    </div>
  );
}

/* ---- score ring ---- */
function ScoreRing({ value=80, size=160, label="Readiness", lg=false, color }){
  const r = lg ? 92 : 70, cx = lg ? 104 : 80;
  const circ = 2*Math.PI*r;
  const [v,setV] = useState(0);
  useEffect(()=>{ const t=setTimeout(()=>setV(value),120); return ()=>clearTimeout(t); },[value]);
  const stroke = color || (value>=80? "var(--moss)" : value>=65? "var(--amber)" : "var(--risk)");
  return (
    <div className={"ring-wrap"+(lg?" lg":"")} style={{width:size, height:size}}>
      <svg width={size} height={size} viewBox={`0 0 ${cx*2} ${cx*2}`}>
        <circle cx={cx} cy={cx} r={r} fill="none" stroke="var(--paper-sunken)" strokeWidth={lg?13:11}/>
        <circle cx={cx} cy={cx} r={r} fill="none" stroke={stroke} strokeWidth={lg?13:11} strokeLinecap="round"
          strokeDasharray={circ} strokeDashoffset={circ - circ*(v/100)}
          transform={`rotate(-90 ${cx} ${cx})`} style={{transition:"stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1)"}}/>
      </svg>
      <div className="ring-cx">
        <div>
          <div className="ring-val" style={{color:stroke}}>{Math.round(v)}</div>
          <div className="ring-lab">{label}</div>
        </div>
      </div>
    </div>
  );
}

/* ---- placeholder image ---- */
function Ph({ label="image", h=140, style }){
  return <div className="ph" data-label={label} style={{height:h, ...style}} />;
}

/* ---- meter ---- */
function Meter({ value, tone="", thin=false }){
  const [w,setW]=useState(0);
  useEffect(()=>{ const t=setTimeout(()=>setW(value),100); return ()=>clearTimeout(t); },[value]);
  return <div className={"meter "+tone+(thin?" thin":"")}><i style={{width:w+"%"}}/></div>;
}

/* ---- badge by risk ---- */
function RiskBadge({ level }){
  const m = { high:["risk","High risk"], medium:["watch","Watch"], low:["ok","Stable"] };
  const [c,t] = m[level] || m.low;
  return <span className={"badge "+c}>{t}</span>;
}
function UrgencyDot({ level }){
  const c = level==="high"? "var(--risk)" : level==="medium"? "var(--amber)" : "var(--ok)";
  const t = level==="high"? "Urgent" : level==="medium"? "Moderate" : "Low urgency";
  return <span className="row gap6" style={{fontSize:12, color:"var(--sage)"}}><span className="chip-dot" style={{background:c}}/>{t}</span>;
}

/* ---- modal ---- */
function Modal({ open, onClose, title, icon, children, footer, wide }){
  useEffect(()=>{
    if(!open) return;
    const h = e => e.key==="Escape" && onClose();
    window.addEventListener("keydown",h); return ()=>window.removeEventListener("keydown",h);
  },[open,onClose]);
  if(!open) return null;
  return (
    <div className="scrim" onClick={onClose}>
      <div className={"modal"+(wide?" wide":"")} onClick={e=>e.stopPropagation()}>
        <div className="modal-hd">
          {icon && <div className="side-mark" style={{width:34,height:34,background:"var(--pine)"}}><Icon name={icon} size={17} style={{color:"#fff"}}/></div>}
          <h3 className="serif" style={{fontSize:18, flex:1}}>{title}</h3>
          <button className="x-btn" onClick={onClose}><Icon name="plus" size={18} style={{transform:"rotate(45deg)"}}/></button>
        </div>
        <div className="modal-bd">{children}</div>
        {footer && <div className="modal-ft">{footer}</div>}
      </div>
    </div>
  );
}

/* ---- toast ---- */
function useToast(){
  const [toast,setToast] = useState(null);
  const show = (msg,icon="checkCircle") => { setToast({msg,icon}); setTimeout(()=>setToast(null), 2800); };
  const node = toast ? (
    <div className="toast"><Icon name={toast.icon} size={18} style={{color:"var(--amber-2)"}}/>{toast.msg}</div>
  ) : null;
  return [node, show];
}

/* ---- section heading ---- */
function PageHd({ eyebrow, title, sub, children }){
  return (
    <div className="page-hd">
      <div>
        {eyebrow && <div className="eyebrow mb8">{eyebrow}</div>}
        <h1>{title}</h1>
        {sub && <div className="sub">{sub}</div>}
      </div>
      {children && <div className="row gap10 wrap">{children}</div>}
    </div>
  );
}

const SECTOR_ICON = { medtech:"beaker", ai:"brain", cyber:"shield", agritech:"sprout", fintech:"scale", default:"layers" };

Object.assign(window, { Icon, Mark, Logo, ScoreRing, Ph, Meter, RiskBadge, UrgencyDot, Modal, useToast, PageHd, SECTOR_ICON,
  useState, useEffect, useRef });