const { useState: v7us, useEffect: v7ue, useRef: v7ur } = React;

const ICONS = {
  ArrowRight:'M5 12h14M12 5l7 7-7 7',
  ArrowUpRight:'M7 17L17 7M7 7h10v10',
  Check:'M20 6L9 17l-5-5',
  X:'M18 6L6 18M6 6l12 12',
  Plus:'M12 5v14M5 12h14',
  Play:'M8 5v14l11-7L8 5z',
  Minus:'M5 12h14',
  Shield:'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
  Lock:'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2zM7 11V7a5 5 0 0 1 10 0v4',
  Eye:'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0',
  ChevronRight:'M9 18l6-6-6-6',
  Sparkle:'M12 3l1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3z',
  Bell:'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9 M13.7 21a2 2 0 0 1-3.4 0',
  AlertTriangle:'M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z M12 9v4 M12 17h.01',
};

function Icon({ name, size=16, stroke=1.7, color='currentColor', className='' }) {
  const d = ICONS[name];
  if (!d) return <span style={{ width:size, height:size }} />;
  const filled = name === 'Play';
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24"
      fill={filled?color:'none'} stroke={filled?'none':color}
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      className={className} style={{ display:'inline-block', flexShrink:0 }}>
      {d.split(' M').map((s,i)=>(<path key={i} d={i===0?s:'M'+s}/>))}
    </svg>
  );
}

function Btn({ variant='primary', size='md', children, icon, onClick, className='', as:As='button', ...rest }) {
  const C = window.DT.color;
  const sizes = { sm:'h-10 px-4 text-[13px]', md:'h-12 px-6 text-[14px]', lg:'h-14 px-8 text-[15px]' };
  const styles = {
    primary:  { background:C.ink, color:C.cream, border:'1px solid '+C.ink },
    grass:    { background:C.grass, color:'#FFFFFF', border:'1px solid '+C.grass },
    accent:   { background:C.accent, color:C.cream, border:'1px solid '+C.accent },
    ghost:    { background:'transparent', color:C.ink, border:'1.5px solid rgba(19,17,14,0.18)' },
    ghostInv: { background:'transparent', color:C.cream, border:'1.5px solid rgba(247,244,236,0.30)' },
    light:    { background:'#FFFFFF', color:C.ink, border:'1px solid rgba(19,17,14,0.12)' },
  };
  return (
    <As onClick={onClick}
      className={`inline-flex items-center justify-center gap-2.5 font-semibold rounded-full transition-all duration-200 select-none active:translate-y-[1px] ${sizes[size]} ${className}`}
      style={styles[variant]} {...rest}>
      {children}
      {icon && <Icon name={icon} size={14} stroke={2.2}/>}
    </As>
  );
}

function Eyebrow({ children, dark=false, color, className='' }) {
  const C = window.DT.color;
  const fg = color || (dark?'rgba(247,244,236,0.7)':C.inkMute);
  return (
    <div className={`inline-flex items-center gap-2.5 ${className}`}>
      <span className="w-5 h-px" style={{ background:fg, opacity:0.5 }}/>
      <span className="text-[11px] uppercase tracking-[0.18em] font-bold"
        style={{ color:fg, fontFamily:window.DT.font.mono, fontWeight:600 }}>{children}</span>
    </div>
  );
}

function Reveal({ children, delay=0, y=20, className='' }) {
  const ref = v7ur(null);
  const [shown,setShown] = v7us(false);
  v7ue(()=>{
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e])=>{ if(e.isIntersecting){ setShown(true); io.disconnect(); }}, { threshold:0.12 });
    io.observe(el);
    return ()=>io.disconnect();
  },[]);
  return (
    <div ref={ref} className={className} style={{
      opacity:shown?1:0,
      transform:shown?'translateY(0)':`translateY(${y}px)`,
      transition:`opacity 700ms cubic-bezier(0.22,0.61,0.36,1) ${delay}ms, transform 700ms cubic-bezier(0.22,0.61,0.36,1) ${delay}ms`,
      willChange:'opacity, transform',
    }}>{children}</div>
  );
}

// status pill used across portal UI
function StatusPill({ kind, dark=false }) {
  const C = window.DT.color;
  const map = {
    in_progress: { label:'В работе',           bg:'#3970C2', fg:'#FFFFFF' },
    done:        { label:'Выполнено',          bg:C.grass,    fg:'#FFFFFF' },
    approval:    { label:'Нужно подтверждение',bg:C.accent,   fg:'#FFFFFF' },
    attention:   { label:'Внимание',           bg:C.warn,     fg:'#FFFFFF' },
    error:       { label:'Ошибка',             bg:'#B23A3A',  fg:'#FFFFFF' },
    waiting:     { label:'Ожидает ответа',     bg:'rgba(19,17,14,0.10)', fg:C.inkMute },
  };
  const s = map[kind] || map.done;
  return (
    <span className="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] uppercase tracking-[0.10em] font-bold whitespace-nowrap"
      style={{ background:s.bg, color:s.fg, fontFamily:window.DT.font.mono }}>
      {s.label}
    </span>
  );
}

// Portal logo mark — abstract: nested squares (offset), grass status dot. Less "microwave", more "doorway".
function PortalLogoMark({ size=28, fg, accent, inverse=false }) {
  const C = window.DT.color;
  const stroke = inverse ? C.cream : (fg || C.ink);
  const dotFg  = accent || C.grass;
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" style={{ display:'block', flexShrink:0 }}>
      {/* outer frame */}
      <rect x="8" y="8" width="48" height="48" rx="8" fill="none" stroke={stroke} strokeWidth="3.2"/>
      {/* inner offset square — like a doorway/inset, not a window with shelf */}
      <rect x="20" y="20" width="36" height="36" rx="5" fill="none" stroke={stroke} strokeWidth="3.2"/>
      {/* status dot — top-right corner of outer frame */}
      <circle cx="52" cy="12" r="5" fill={dotFg} stroke={inverse?C.panel:C.cream} strokeWidth="2"/>
    </svg>
  );
}

Object.assign(window, { Icon, Btn, Eyebrow, Reveal, StatusPill, PortalLogoMark });