/* Shared components + icons for ShikshaTri
   Exposed to window for cross-script use. */

// ============ ICONS (inline SVG, all 20x20 stroke) ============
const Icon = ({ d, size = 18, fill = 'none', stroke = 'currentColor', sw = 1.6, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {typeof d === 'string' ? <path d={d} /> : d}
  </svg>
);

const IconHome = (p) => <Icon {...p} d="M3 10l9-7 9 7v10a2 2 0 01-2 2h-4v-7h-6v7H5a2 2 0 01-2-2V10z" />;
const IconCube = (p) => <Icon {...p} d={<><path d="M12 2l9 5v10l-9 5-9-5V7l9-5z"/><path d="M3 7l9 5 9-5"/><path d="M12 12v10"/></>} />;
const IconBeaker = (p) => <Icon {...p} d={<><path d="M9 3h6"/><path d="M10 3v6L4 20a2 2 0 002 2h12a2 2 0 002-2l-6-11V3"/><path d="M7 15h10"/></>} />;
const IconBook = (p) => <Icon {...p} d={<><path d="M4 4a2 2 0 012-2h13v18H6a2 2 0 00-2 2V4z"/><path d="M19 20H6a2 2 0 000 4h13"/></>} />;
const IconGraduation = (p) => <Icon {...p} d={<><path d="M12 3L2 8l10 5 10-5-10-5z"/><path d="M6 10v5c0 2 3 4 6 4s6-2 6-4v-5"/></>} />;
const IconChart = (p) => <Icon {...p} d={<><path d="M3 3v18h18"/><rect x="7" y="12" width="3" height="6"/><rect x="12" y="8" width="3" height="10"/><rect x="17" y="4" width="3" height="14"/></>} />;
const IconClipboard = (p) => <Icon {...p} d={<><rect x="8" y="3" width="8" height="4" rx="1"/><path d="M8 5H5a2 2 0 00-2 2v13a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2h-3"/><path d="M9 12h6M9 16h4"/></>} />;
const IconChat = (p) => <Icon {...p} d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z" />;
const IconShield = (p) => <Icon {...p} d={<><path d="M12 2l8 3v7c0 5-3.5 9-8 10-4.5-1-8-5-8-10V5l8-3z"/><path d="M9 12l2 2 4-4"/></>} />;
const IconUsers = (p) => <Icon {...p} d={<><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></>} />;
const IconSettings = (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></>} />;
const IconBell = (p) => <Icon {...p} d={<><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></>} />;
const IconSearch = (p) => <Icon {...p} d={<><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></>} />;
const IconGlobe = (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20"/></>} />;
const IconPlay = (p) => <Icon {...p} fill="currentColor" stroke="none" d="M8 5v14l11-7L8 5z" />;
const IconPause = (p) => <Icon {...p} fill="currentColor" stroke="none" d="M6 4h4v16H6zM14 4h4v16h-4z" />;
const IconLayers = (p) => <Icon {...p} d={<><path d="M12 2l10 6-10 6L2 8l10-6z"/><path d="M2 14l10 6 10-6"/><path d="M2 11l10 6 10-6"/></>} />;
const IconRotate = (p) => <Icon {...p} d={<><path d="M21 12a9 9 0 11-3-6.7L21 8"/><path d="M21 3v5h-5"/></>} />;
const IconZoom = (p) => <Icon {...p} d={<><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5M8 11h6M11 8v6"/></>} />;
const IconAward = (p) => <Icon {...p} d={<><circle cx="12" cy="8" r="6"/><path d="M8.5 13.5L7 22l5-3 5 3-1.5-8.5"/></>} />;
const IconFlame = (p) => <Icon {...p} d="M12 2s6 5 6 11a6 6 0 01-12 0c0-3 2-4 2-4s0 3 2 3-1-6 2-10z" />;
const IconCheck = (p) => <Icon {...p} d="M4 12l5 5L20 6" />;
const IconArrow = (p) => <Icon {...p} d="M5 12h14M13 5l7 7-7 7" />;
const IconMic = (p) => <Icon {...p} d={<><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0014 0M12 19v3"/></>} />;
const IconSend = (p) => <Icon {...p} d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" fill="currentColor" stroke="currentColor" />;
const IconTool = (p) => <Icon {...p} d="M14.7 6.3a4 4 0 00-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 005.4-5.4l-3 3-2.6-.7-.7-2.6 3-3z" />;
const IconTarget = (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>} />;
const IconClock = (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>} />;
const IconMap = (p) => <Icon {...p} d={<><path d="M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4z"/><path d="M8 2v16M16 6v16"/></>} />;
const IconSparkle = ({ size = 18, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...rest}>
    <path d="M12 3 L13.5 9 L20 10.5 L13.5 12 L12 18.5 L10.5 12 L4 10.5 L10.5 9 Z" fill="currentColor"/>
    <path d="M19 3.5 L19.6 5.4 L21.5 6 L19.6 6.6 L19 8.5 L18.4 6.6 L16.5 6 L18.4 5.4 Z" fill="currentColor" opacity="0.6"/>
    <path d="M18 17 L18.6 18.9 L20.5 19.5 L18.6 20.1 L18 22 L17.4 20.1 L15.5 19.5 L17.4 18.9 Z" fill="currentColor" opacity="0.7"/>
  </svg>
);
const IconDownload = (p) => <Icon {...p} d="M12 3v12m0 0l-5-5m5 5l5-5M4 21h16" />;
const IconGrid = (p) => <Icon {...p} d={<><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"/></>} />;
const IconVideo = (p) => <Icon {...p} d={<><rect x="2" y="6" width="14" height="12" rx="2"/><path d="M22 8l-6 4 6 4V8z"/></>} />;
// --- Added icons for expanded modules ---
const IconHeadset = (p) => <Icon {...p} d={<><path d="M4 14v-2a8 8 0 0116 0v2"/><rect x="2" y="14" width="5" height="7" rx="1.5"/><rect x="17" y="14" width="5" height="7" rx="1.5"/><path d="M19 21a4 4 0 01-4 3h-3"/></>} />;
const IconScan = (p) => <Icon {...p} d={<><path d="M3 7V5a2 2 0 012-2h2M17 3h2a2 2 0 012 2v2M21 17v2a2 2 0 01-2 2h-2M7 21H5a2 2 0 01-2-2v-2"/><path d="M3 12h18"/></>} />;
const IconBoard = (p) => <Icon {...p} d={<><rect x="3" y="3" width="18" height="13" rx="1.5"/><path d="M8 21l4-5 4 5M12 16v-4M8 8h5"/></>} />;
const IconCalendar = (p) => <Icon {...p} d={<><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></>} />;
const IconFileText = (p) => <Icon {...p} d={<><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></>} />;
const IconBriefcase = (p) => <Icon {...p} d={<><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2M2 13h20"/></>} />;
const IconUser = (p) => <Icon {...p} d={<><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a7 7 0 0114 0v1"/></>} />;
const IconBookmark = (p) => <Icon {...p} d="M6 3h12a1 1 0 011 1v17l-7-4-7 4V4a1 1 0 011-1z" />;
const IconStar = (p) => <Icon {...p} d="M12 3l2.9 6 6.6.9-4.8 4.6 1.2 6.6L12 18l-5.9 3.1 1.2-6.6L2.5 9.9 9.1 9z" />;
const IconHelp = (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="10"/><path d="M9.2 9a3 3 0 015.6 1c0 2-3 2.5-3 4"/><circle cx="12" cy="17" r="0.6" fill="currentColor"/></>} />;
const IconPlus = (p) => <Icon {...p} d="M12 5v14M5 12h14" />;
const IconEdit = (p) => <Icon {...p} d={<><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z"/></>} />;
const IconTrophy = (p) => <Icon {...p} d={<><path d="M8 4h8v5a4 4 0 01-8 0V4z"/><path d="M8 5H5v2a3 3 0 003 3M16 5h3v2a3 3 0 01-3 3M9 21h6M12 13v4"/></>} />;
const IconEye = (p) => <Icon {...p} d={<><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>} />;
const IconFilter = (p) => <Icon {...p} d="M3 4h18l-7 8v6l-4 2v-8L3 4z" />;
const IconLock = (p) => <Icon {...p} d={<><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 018 0v3"/></>} />;
const IconLightbulb = (p) => <Icon {...p} d={<><path d="M9 18h6M10 22h4"/><path d="M12 2a7 7 0 00-4 12.7c.6.5 1 1.3 1 2.1V18h6v-1.2c0-.8.4-1.6 1-2.1A7 7 0 0012 2z"/></>} />;
const IconRefresh = (p) => <Icon {...p} d={<><path d="M21 12a9 9 0 11-2.6-6.4"/><path d="M21 3v6h-6"/></>} />;
const IconUpload = (p) => <Icon {...p} d="M12 21V9m0 0l-5 5m5-5l5 5M4 3h16" />;
const IconAlert = (p) => <Icon {...p} d={<><path d="M10.3 3.6L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.6a2 2 0 00-3.4 0z"/><path d="M12 9v4M12 17h.01"/></>} />;
const IconMail = (p) => <Icon {...p} d={<><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 6 10-6"/></>} />;
const IconPhone = (p) => <Icon {...p} d="M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3.1 19.5 19.5 0 01-6-6A19.8 19.8 0 012.1 4.2 2 2 0 014.1 2h3a2 2 0 012 1.7c.1.9.3 1.8.6 2.6a2 2 0 01-.5 2.1L8 11.5a16 16 0 006 6l1.1-1.1a2 2 0 012.1-.5c.8.3 1.7.5 2.6.6a2 2 0 011.7 2z" />;
const IconThumbsUp = (p) => <Icon {...p} d={<><path d="M7 10v11H4a1 1 0 01-1-1v-9a1 1 0 011-1h3z"/><path d="M7 10l4-8a2.5 2.5 0 012.5 2v3H20a2 2 0 012 2.3l-1.3 7A2 2 0 0118.7 21H7"/></>} />;
const IconExternal = (p) => <Icon {...p} d={<><path d="M15 3h6v6M21 3l-9 9"/><path d="M18 14v5a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h5"/></>} />;
const IconChevronRight = (p) => <Icon {...p} d="M9 6l6 6-6 6" />;
const IconServer = (p) => <Icon {...p} d={<><rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><path d="M7 7.5h.01M7 16.5h.01"/></>} />;
const IconCompass = (p) => <Icon {...p} d={<><circle cx="12" cy="12" r="10"/><path d="M16 8l-2 6-6 2 2-6 6-2z"/></>} />;

// ============ BRAND LOGO ============
const ShikshaTriLogo = ({ size = 34, mono = false }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
    {/* Chakra-inspired mark: triangle with radiating lines */}
    <circle cx="20" cy="20" r="18" fill={mono ? 'currentColor' : '#0b2a5b'} />
    <path d="M20 8 L30 26 L10 26 Z" fill={mono ? 'white' : '#e67514'} />
    <circle cx="20" cy="22" r="3" fill={mono ? '#0b2a5b' : 'white'} />
    {/* Spokes */}
    {[0, 45, 90, 135, 180, 225, 270, 315].map(a => (
      <line
        key={a}
        x1={20 + Math.cos(a * Math.PI / 180) * 3.5}
        y1={22 + Math.sin(a * Math.PI / 180) * 3.5}
        x2={20 + Math.cos(a * Math.PI / 180) * 6}
        y2={22 + Math.sin(a * Math.PI / 180) * 6}
        stroke={mono ? '#0b2a5b' : '#0b2a5b'}
        strokeWidth="1"
      />
    ))}
  </svg>
);

// ============ NAV DEFINITION ============
const NAV_ITEMS = [
  { section: 'Learn' },
  { id: 'student',  label: 'Dashboard',     hi: 'डैशबोर्ड',      icon: IconHome, role: 'student' },
  { id: 'library',  label: 'Trade Library', hi: 'ट्रेड लाइब्रेरी', icon: IconBook, role: 'student' },
  { id: 'lesson',   label: '3D Lessons',    hi: '3D पाठ',        icon: IconCube, role: 'student', badgeCount: 4 },
  { id: 'animation', label: 'Process Animation', hi: 'प्रक्रिया एनिमेशन', icon: IconVideo, role: 'student' },
  { id: 'lab',      label: 'Virtual Lab',   hi: 'वर्चुअल लैब',    icon: IconBeaker, role: 'student' },
  { id: 'workshop', label: 'Virtual Workshop', hi: 'वर्चुअल कार्यशाला', icon: IconTool, role: 'student' },
  { id: 'arvr',     label: 'AR & VR Learning', hi: 'एआर व वीआर', icon: IconHeadset, role: 'student' },
  { section: 'Assess & Grow' },
  { id: 'assess',   label: 'Assessments',   hi: 'मूल्यांकन',      icon: IconClipboard, role: 'student' },
  { id: 'tutor',    label: 'AI Tutor',      hi: 'एआई ट्यूटर',    icon: IconChat, role: 'student' },
  { id: 'certificates', label: 'Certificates', hi: 'प्रमाणपत्र',  icon: IconAward, role: 'student' },
  { id: 'readiness', label: 'Industry Readiness', hi: 'उद्योग तैयारी', icon: IconBriefcase, role: 'student' },
  { section: 'Resources' },
  { id: 'manual',   label: 'Workshop Manual', hi: 'कार्यशाला मैनुअल', icon: IconFileText, role: 'student' },
  { id: 'help',     label: 'Help & Support', hi: 'सहायता',       icon: IconHelp, role: 'student' },
  { section: 'Teach' },
  { id: 'instructor', label: 'Instructor',  hi: 'शिक्षक',        icon: IconGraduation, role: 'instructor' },
  { id: 'classroom', label: 'Smart Classroom', hi: 'स्मार्ट कक्षा', icon: IconBoard, role: 'instructor' },
  { id: 'questionbank', label: 'Question Bank', hi: 'प्रश्न बैंक', icon: IconClipboard, role: 'instructor' },
  { section: 'Manage' },
  { id: 'admin',    label: 'Institute Admin', hi: 'प्रशासन',     icon: IconChart, role: 'admin' },
  { id: 'reports',  label: 'Reports & Analytics', hi: 'रिपोर्ट',  icon: IconServer, role: 'admin' },
  { section: 'Account' },
  { id: 'profile',  label: 'My Profile',    hi: 'मेरी प्रोफ़ाइल', icon: IconUser, role: 'student' },
  { section: 'About' },
  { id: 'landing',  label: 'Product Page',    icon: IconGlobe, role: 'marketing' },
];

// ============ APP SHELL ============
const AppShell = ({ current, onNavigate, crumbs, actions, children }) => {
  return (
    <div className="app-shell">
      <Sidebar current={current} onNavigate={onNavigate} />
      <div className="main">
        <Topbar crumbs={crumbs} actions={actions} />
        {children}
      </div>
    </div>
  );
};

const Sidebar = ({ current, onNavigate }) => (
  <aside className="sidebar">
    <div className="brand">
      <div className="brand-mark">
        <ShikshaTriLogo size={26} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div className="brand-name">ShikshaTri</div>
        <div className="brand-sub">ITI · Ver 1.0</div>
      </div>
    </div>

    {NAV_ITEMS.map((item, i) => {
      if (item.section) return <div className="nav-section-label" key={'s' + i}>{item.section}</div>;
      const IC = item.icon;
      const active = current === item.id;
      return (
        <button className={'nav-item' + (active ? ' active' : '')} key={item.id} onClick={() => onNavigate(item.id)}>
          <IC className="nav-icon" size={17} />
          <span>{item.label}</span>
          {item.badgeCount && <span className="badge-count">{item.badgeCount}</span>}
        </button>
      );
    })}

    <div className="sidebar-footer">
      <div className="avatar">RK</div>
      <div style={{ minWidth: 0 }}>
        <div style={{ color: 'white', fontSize: 12, fontWeight: 600 }}>Rahul Kumar</div>
        <div>Fitter · Sem 3</div>
      </div>
    </div>
  </aside>
);

const Topbar = ({ crumbs, actions }) => {
  const [lang, setLang] = React.useState('EN');
  const langs = ['EN', 'हिं', 'த', 'తె', 'বাং'];
  return (
    <div className="topbar">
      <div className="crumbs">
        {crumbs.map((c, i) => (
          <React.Fragment key={i}>
            {i > 0 && <span className="sep">/</span>}
            {i === crumbs.length - 1 ? <strong>{c}</strong> : <span>{c}</span>}
          </React.Fragment>
        ))}
      </div>

      <div className="topbar-actions">
        <div style={{ position: 'relative' }}>
          <IconSearch size={14} style={{ position: 'absolute', left: 10, top: 10, color: 'var(--ink-500)' }} />
          <input
            placeholder="Search machines, lessons, trades…"
            style={{
              padding: '8px 12px 8px 30px',
              width: 260,
              border: '1px solid var(--ink-200)',
              borderRadius: 'var(--r-sm)',
              fontSize: 13,
              background: 'var(--ink-50)',
              outline: 'none',
              fontFamily: 'inherit',
            }}
          />
        </div>
        <div className="lang-pill" onClick={() => setLang(langs[(langs.indexOf(lang) + 1) % langs.length])}>
          <IconGlobe className="globe" size={13} />
          <span>{lang}</span>
        </div>
        <button className="icon-btn"><IconBell size={16} /><span className="dot" /></button>
        {actions}
      </div>
    </div>
  );
};

// ============ GOVERNMENT CREDIBILITY BAR ============
const GovBar = () => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
    <CredBadge label="NCVT · DGT" sub="Curriculum Aligned" />
    <CredBadge label="Skill India" sub="MSDE Partner" />
    <CredBadge label="Digital India" sub="Initiative" />
    <CredBadge label="ISO 27001" sub="Certified" />
  </div>
);
const CredBadge = ({ label, sub }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
    <div style={{
      width: 32, height: 32,
      borderRadius: 999,
      background: 'rgba(255,255,255,0.08)',
      border: '1px solid rgba(255,255,255,0.15)',
      display: 'grid', placeItems: 'center',
      color: 'rgba(255,255,255,0.9)',
    }}>
      <IconShield size={14} />
    </div>
    <div>
      <div style={{ fontSize: 12, fontWeight: 600, color: 'white', letterSpacing: '-0.01em' }}>{label}</div>
      <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 1 }}>{sub}</div>
    </div>
  </div>
);

// ============ TRADE ICON (procedural mini glyph) ============
const TradeIcon = ({ trade, size = 22 }) => {
  // Simple glyphs per trade
  const glyphs = {
    Electrician: <><path d="M12 2L5 14h5l-2 8 9-12h-5l2-8z"/></>,
    Fitter: <><rect x="4" y="10" width="16" height="4" rx="1"/><path d="M8 10V6M16 10V6M8 18v-4M16 18v-4"/></>,
    Turner: <><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></>,
    Machinist: <><rect x="3" y="9" width="18" height="6"/><path d="M7 9V4M17 9V4M12 15v5"/></>,
    Welder: <><path d="M6 3l6 8-6 8M18 3l-6 8 6 8"/></>,
    COPA: <><rect x="3" y="4" width="18" height="12" rx="1"/><path d="M8 20h8M12 16v4"/></>,
    'Electronics Mechanic': <><rect x="4" y="4" width="16" height="16" rx="2"/><circle cx="8" cy="8" r="1" fill="currentColor"/><circle cx="16" cy="8" r="1" fill="currentColor"/><circle cx="8" cy="16" r="1" fill="currentColor"/><circle cx="16" cy="16" r="1" fill="currentColor"/></>,
    'Mechanic Diesel': <><circle cx="8" cy="14" r="4"/><circle cx="17" cy="14" r="4"/><path d="M8 10V6h9v4"/></>,
    'Refrigeration & AC': <><rect x="3" y="5" width="18" height="10" rx="1"/><path d="M3 10h18M8 19l-2 2M12 19v2M16 19l2 2"/></>,
    Wireman: <><path d="M4 12c4-8 12-8 16 0M4 12c4 8 12 8 16 0"/></>,
    Plumber: <><path d="M6 4h4v6h4V4h4v6a4 4 0 01-4 4v6h-4v-6a4 4 0 01-4-4V4z"/></>,
    ICTSM: <><rect x="3" y="5" width="18" height="12" rx="1"/><path d="M9 21h6M12 17v4"/></>,
    'Instrument Mechanic': <><circle cx="12" cy="12" r="9"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M12 12l4-4"/></>,
    Foundryman: <><path d="M6 4l3 8h6l3-8M8 12l2 8h4l2-8"/></>,
    'Tool & Die Maker': <><path d="M14 6l4-4 4 4-4 4M14 6l-8 8-4 6 6-4 8-8M14 6l4 4"/></>,
    Surveyor: <><path d="M12 3v18M4 21l8-6 8 6"/><circle cx="12" cy="7" r="2"/></>,
    Draughtsman: <><path d="M3 21L21 3M3 3v18h18"/><path d="M8 21v-4M12 21v-8M16 21v-12"/></>,
    'Solar Technician': <><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></>,
    'Electric Vehicle Technician': <><rect x="3" y="10" width="14" height="6" rx="1"/><circle cx="7" cy="18" r="2"/><circle cx="15" cy="18" r="2"/><path d="M17 13h3l-2-4"/></>,
    Mechatronics: <><circle cx="8" cy="8" r="3"/><circle cx="16" cy="16" r="3"/><path d="M10 10l4 4M11 8h6M8 11v6"/></>,
    'CNC Operator': <><rect x="3" y="6" width="18" height="12" rx="1"/><path d="M7 10h4M7 14h6M17 10v4"/></>,
  };
  const glyph = glyphs[trade] || <circle cx="12" cy="12" r="8" />;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {glyph}
    </svg>
  );
};

// ============ TOAST (lightweight, DOM-based) ============
function toast(msg, opts) {
  opts = opts || {};
  let host = document.getElementById('st-toast-host');
  if (!host) {
    host = document.createElement('div');
    host.id = 'st-toast-host';
    host.style.cssText = 'position:fixed;right:20px;bottom:20px;z-index:2147480000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;';
    document.body.appendChild(host);
  }
  const t = document.createElement('div');
  t.style.cssText = 'pointer-events:auto;background:#0b2a5b;color:#fff;font-family:Inter,system-ui,Arial,sans-serif;font-size:13px;font-weight:500;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:340px;line-height:1.45;transform:translateY(8px);opacity:0;transition:transform .18s,opacity .18s;border-left:3px solid #e67514;';
  t.textContent = msg;
  host.appendChild(t);
  requestAnimationFrame(() => { t.style.transform = 'translateY(0)'; t.style.opacity = '1'; });
  setTimeout(() => {
    t.style.opacity = '0'; t.style.transform = 'translateY(8px)';
    setTimeout(() => t.remove(), 220);
  }, opts.duration || 2600);
}

// ============ MODAL (reusable) ============
const Modal = ({ open, title, subtitle, onClose, children, footer, width = 460 }) => {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(11,14,20,0.55)', zIndex: 2147481000, display: 'grid', placeItems: 'center', padding: 20 }}>
      <div onClick={e => e.stopPropagation()} style={{ width, maxWidth: '94vw', maxHeight: '90vh', overflow: 'auto', background: 'white', borderRadius: 16, boxShadow: '0 30px 80px rgba(0,0,0,0.4)' }}>
        <div style={{ display: 'flex', alignItems: 'start', justifyContent: 'space-between', gap: 16, padding: '18px 22px', borderBottom: '1px solid var(--ink-200)' }}>
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 600, color: 'var(--ink-900)' }}>{title}</div>
            {subtitle && <div style={{ fontSize: 12.5, color: 'var(--ink-600)', marginTop: 3 }}>{subtitle}</div>}
          </div>
          <button onClick={onClose} aria-label="Close" style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 22, lineHeight: 1, color: 'var(--ink-500)', padding: 2 }}>×</button>
        </div>
        <div style={{ padding: '20px 22px' }}>{children}</div>
        {footer && <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10, padding: '14px 22px', borderTop: '1px solid var(--ink-200)', background: 'var(--ink-50)' }}>{footer}</div>}
      </div>
    </div>
  );
};

// ============ FIELD (labelled input for forms) ============
const Field = ({ label, children }) => (
  <label style={{ display: 'block', marginBottom: 14 }}>
    <span style={{ display: 'block', fontSize: 11, fontWeight: 700, color: 'var(--ink-600)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{label}</span>
    {children}
  </label>
);
const fieldInputStyle = { width: '100%', padding: '10px 12px', border: '1px solid var(--ink-200)', borderRadius: 8, fontSize: 14, fontFamily: 'inherit', outline: 'none', background: 'white', color: 'var(--ink-900)', boxSizing: 'border-box' };

// Expose to window
Object.assign(window, {
  toast, Modal, Field, fieldInputStyle,
  Icon, IconHome, IconCube, IconBeaker, IconBook, IconGraduation, IconChart,
  IconClipboard, IconChat, IconShield, IconUsers, IconSettings, IconBell,
  IconSearch, IconGlobe, IconPlay, IconPause, IconLayers, IconRotate, IconZoom,
  IconAward, IconFlame, IconCheck, IconArrow, IconMic, IconSend, IconTool,
  IconTarget, IconClock, IconMap, IconSparkle, IconDownload, IconGrid, IconVideo,
  IconHeadset, IconScan, IconBoard, IconCalendar, IconFileText, IconBriefcase,
  IconUser, IconBookmark, IconStar, IconHelp, IconPlus, IconEdit, IconTrophy,
  IconEye, IconFilter, IconLock, IconLightbulb, IconRefresh, IconUpload,
  IconAlert, IconMail, IconPhone, IconThumbsUp, IconExternal, IconChevronRight,
  IconServer, IconCompass,
  ShikshaTriLogo, AppShell, Sidebar, Topbar, GovBar, CredBadge, TradeIcon,
  NAV_ITEMS,
});
