/* ===== Shared UI: icons + components ===== */
const { useState, useEffect, useRef } = React;

/* ---------- Icon set (simple line glyphs) ---------- */
const PATHS = {
  drone: 'M5 5l3 3M19 5l-3 3M5 19l3-3M19 19l-3-3 M2 5a3 3 0 003 3M22 5a3 3 0 01-3 3M2 19a3 3 0 013-3M22 19a3 3 0 00-3-3 M9 9h6v6H9z M12 12v0',
  play: 'M8 5v14l11-7z',
  arrowRight: 'M5 12h14M13 6l6 6-6 6',
  arrowUpRight: 'M7 17L17 7M8 7h9v9',
  check: 'M20 6L9 17l-5-5',
  checkCircle: 'M22 11.08V12a10 10 0 11-5.93-9.14 M22 4L12 14.01l-3-3',
  lock: 'M5 11h14v10H5zM8 11V7a4 4 0 018 0v4',
  user: 'M20 21a8 8 0 10-16 0 M12 11a4 4 0 100-8 4 4 0 000 8z',
  users: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2 M9 11a4 4 0 100-8 4 4 0 000 8z M23 21v-2a4 4 0 00-3-3.87 M16 3.13a4 4 0 010 7.75',
  book: 'M4 19.5A2.5 2.5 0 016.5 17H20 M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z',
  grad: 'M22 10L12 5 2 10l10 5 10-5z M6 12v5c0 1 2.7 3 6 3s6-2 6-3v-5',
  trophy: 'M6 9H4.5a2.5 2.5 0 010-5H6 M18 9h1.5a2.5 2.5 0 000-5H18 M4 22h16 M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22 M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22 M18 2H6v7a6 6 0 0012 0V2z',
  qr: 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3z M14 14h3v3h-3z M20 14v.01 M14 20v.01 M20 20v.01 M20 17v.01 M17 20v.01',
  card: 'M2 7h20v12H2zM2 11h20',
  phone: 'M22 16.92v3a2 2 0 01-2.18 2 19.8 19.8 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0122 16.92z',
  mail: 'M2 5h20v14H2zM2 6l10 7 10-7',
  pin: 'M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z M12 13a3 3 0 100-6 3 3 0 000 6z',
  clock: 'M12 22a10 10 0 100-20 10 10 0 000 20z M12 6v6l4 2',
  calendar: 'M3 5h18v17H3zM3 9h18 M8 2v4 M16 2v4',
  layers: 'M12 2L2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5',
  shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
  zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
  target: 'M12 22a10 10 0 100-20 10 10 0 000 20z M12 18a6 6 0 100-12 6 6 0 000 12z M12 14a2 2 0 100-4 2 2 0 000 4z',
  globe: 'M12 22a10 10 0 100-20 10 10 0 000 20z M2 12h20 M12 2a15 15 0 010 20 15 15 0 010-20z',
  menu: 'M3 6h18M3 12h18M3 18h18',
  close: 'M18 6L6 18M6 6l12 12',
  chevDown: 'M6 9l6 6 6-6',
  chevRight: 'M9 6l6 6-6 6',
  chevLeft: 'M15 6l-6 6 6 6',
  plus: 'M12 5v14M5 12h14',
  edit: 'M11 4H4v16h16v-7 M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z',
  trash: 'M3 6h18 M8 6V4h8v2 M19 6l-1 14H6L5 6',
  pause: 'M6 4h4v16H6zM14 4h4v16h-4z',
  eye: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z M12 15a3 3 0 100-6 3 3 0 000 6z',
  'eye-off': 'M17.9 17.9A10 10 0 0112 19c-6 0-10-7-10-7a18 18 0 015.1-5.9M9.9 4.2A9 9 0 0112 4c6 0 10 7 10 7a18 18 0 01-2.1 3M1 1l22 22 M9.9 9.9a3 3 0 004.2 4.2',
  search: 'M11 19a8 8 0 100-16 8 8 0 000 16z M21 21l-4.3-4.3',
  filter: 'M3 4h18l-7 9v5l-4 2v-7L3 4z',
  star: 'M12 2l3 6.5 7 .9-5 4.8 1.2 7L12 18l-6.4 3.2L7 14.2 2 9.4l7-.9L12 2z',
  youtube: 'M22 8.5a3 3 0 00-2.1-2.1C18 6 12 6 12 6s-6 0-7.9.4A3 3 0 002 8.5 31 31 0 002 12a31 31 0 00.1 3.5A3 3 0 004 17.6C6 18 12 18 12 18s6 0 7.9-.4a3 3 0 002.1-2.1A31 31 0 0022 12a31 31 0 00-.1-3.5z M10 9.2l5 2.8-5 2.8z',
  instagram: 'M16 3H8a5 5 0 00-5 5v8a5 5 0 005 5h8a5 5 0 005-5V8a5 5 0 00-5-5z M12 15.5a3.5 3.5 0 100-7 3.5 3.5 0 000 7z M17.5 6.5v.01',
  tg: 'M22 3L2 10.5l6 2.2M22 3l-3 16-7-5.3M22 3L8.5 14.5 8 18.5l3.5-4.8',
  settings: 'M12 15a3 3 0 100-6 3 3 0 000 6z M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-2.7 1.1V21a2 2 0 11-4 0v-.1A1.6 1.6 0 005 19.4l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.6 1.6 0 00-1.1-2.7H1a2 2 0 110-4h.1A1.6 1.6 0 002.6 5l-.1-.1a2 2 0 112.8-2.8l.1.1a1.6 1.6 0 001.8.3H9a1.6 1.6 0 001-1.5V1a2 2 0 114 0v.1a1.6 1.6 0 001 1.5 1.6 1.6 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8V9a1.6 1.6 0 001.5 1H23a2 2 0 110 4h-.1a1.6 1.6 0 00-1.5 1z',
  logout: 'M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4 M16 17l5-5-5-5 M21 12H9',
  doc: 'M14 2H6v20h12V8z M14 2v6h6 M9 13h6 M9 17h6',
  video: 'M23 7l-7 5 7 5V7z M14 5H3a2 2 0 00-2 2v10a2 2 0 002 2h11a2 2 0 002-2V7a2 2 0 00-2-2z',
  wrench: 'M14.7 6.3a4 4 0 00-5.4 5.3L3 18l3 3 6.4-6.3a4 4 0 005.3-5.4l-2.8 2.8-2.8-2.8 2.6-3z',
  camera: 'M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z M12 17a4 4 0 100-8 4 4 0 000 8z',
  leaf: 'M11 20A7 7 0 019.8 6.1C15.5 5 17 4.5 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z M2 21c0-3 1.85-5.36 5.08-6',
  flag: 'M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z M4 22v-7',
  award: 'M12 15a6 6 0 100-12 6 6 0 000 12z M8.2 13.9L7 22l5-3 5 3-1.2-8.1',
  copy: 'M9 9h11v13H9z M5 5h11v2 M5 5v13h2',
  download: 'M12 3v12 M7 10l5 5 5-5 M5 21h14',
  history: 'M3 12a9 9 0 109-9 M3 4v5h5 M12 7v5l3 3',
};
function Icon({ name, size=20, sw=1.9, style, className }){
  const d = PATHS[name] || '';
  const fill = (name==='play'||name==='star'||name==='pause') ? 'currentColor' : 'none';
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill={fill}
      stroke={fill==='none'?'currentColor':'none'} strokeWidth={sw}
      strokeLinecap="round" strokeLinejoin="round" style={style} className={className} aria-hidden="true">
      {d.split(' M').map((seg,i)=> <path key={i} d={(i?'M':'')+seg} /> )}
    </svg>
  );
}

/* ---------- Logo ---------- */
function Logo({ variant='full', height=40, light=false, onClick }){
  const src = variant==='mark'
    ? (light?'assets/logo-mark-white.png':'assets/logo-mark.png')
    : (light?'assets/logo-white.png':'assets/logo-full.png');
  return <img src={src} alt="КРСУ — Лаборатория БПЛА" style={{height, width:'auto', cursor:onClick?'pointer':'default'}} onClick={onClick} />;
}

/* ---------- Reveal on scroll ---------- */
function Reveal({ children, delay=0, as='div', className='', style }){
  const ref = useRef(null);
  const [shown,setShown] = useState(false);
  useEffect(()=>{
    if(shown) return;
    const el = ref.current; if(!el) return;
    let done=false;
    const show = ()=>{ if(!done){ done=true; setShown(true); } };
    const near = ()=>{ const r=el.getBoundingClientRect(); return r.top < (window.innerHeight||800)*0.92 && r.bottom > -40; };
    if(near()){ const t=setTimeout(show, delay); return ()=>clearTimeout(t); }
    const io = new IntersectionObserver((es)=>{
      es.forEach(e=>{ if(e.isIntersecting){ setTimeout(show, delay); io.disconnect(); } });
    }, { threshold:.06, rootMargin:'0px 0px -6% 0px' });
    io.observe(el);
    const safety = setTimeout(show, 1300);
    return ()=>{ io.disconnect(); clearTimeout(safety); };
  },[shown]);
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${shown?'in':''} ${className}`} style={style}>{children}</Tag>;
}

/* ---------- Stat ---------- */
function Stat({ value, label, accent }){
  return (
    <div className="stack" style={{gap:4}}>
      <div style={{fontSize:40, fontWeight:800, color: accent?'var(--green)':'var(--navy)', letterSpacing:'-0.02em', lineHeight:1}}>{value}</div>
      <div className="muted" style={{fontSize:14, fontWeight:600}}>{label}</div>
    </div>
  );
}

/* ---------- Placeholder image ---------- */
function Ph({ label, ratio, style, children, className='' }){
  const s = { ...style };
  if(ratio) s.aspectRatio = ratio;
  return <div className={`ph ${className}`} data-label={label} style={s}>{children}</div>;
}

/* ---------- Avatar ---------- */
function Avatar({ name, size=40, color }){
  const initials = (name||'?').split(' ').map(w=>w[0]).slice(0,2).join('').toUpperCase();
  return <div style={{width:size,height:size,borderRadius:'50%',background:color||'var(--navy)',color:'#fff',
    display:'flex',alignItems:'center',justifyContent:'center',fontWeight:700,fontSize:size*0.38,flexShrink:0}}>{initials}</div>;
}

Object.assign(window, { Icon, Logo, Reveal, Stat, Ph, Avatar });