// shared from window
const { ROUTES, NAV_PRIMARY, NAV_ALL, ORG, SERVICES_TOP, SERVICE_GROUPS, SPECIALISTS, PRICES, FORMS, SOCIAL_SERVICE_TYPES, IPPSU_WAYS, HELP_WAYS, DONATION_AMOUNTS, BANK_DETAILS, PARENT_DOCS, LEGAL_DOCS, EQUIPMENT, FAQS } = window.NKO_DATA;

// ============== ICONS ==============
const Icon = ({ name, size = 20 }) => {
  const icons = {
    arrow: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
    arrowUp: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M7 17L17 7M7 7h10v10"/></svg>,
    plus: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 5v14M5 12h14"/></svg>,
    close: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M6 6l12 12M18 6L6 18"/></svg>,
    menu: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M4 7h16M4 17h16"/></svg>,
    phone: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.71 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.58 2.81.71A2 2 0 0122 16.92z"/></svg>,
    whatsapp: <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4l-2-1c-.3-.1-.5-.1-.7.1l-1 1c-.2.2-.4.2-.6.1-.7-.3-1.5-.8-2.1-1.4-.6-.6-1.1-1.4-1.4-2.1-.1-.2-.1-.4.1-.6l1-1c.2-.2.2-.4.1-.7l-1-2c-.2-.3-.5-.5-.8-.5h-1c-.6 0-1.1.5-1 1.1.3 2.1 1.4 4 2.9 5.5 1.5 1.5 3.4 2.6 5.5 2.9.6.1 1.1-.4 1.1-1v-1c0-.3-.2-.6-.5-.8zM12 2C6.5 2 2 6.5 2 12c0 1.7.4 3.4 1.3 4.9L2 22l5.3-1.3c1.4.8 3 1.3 4.7 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>,
    mail: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>,
    pin: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 21s-7-7.5-7-12a7 7 0 1114 0c0 4.5-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg>,
    clock: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
    doc: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M8 13h8M8 17h8M8 9h2"/></svg>,
    diagnostics: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3M8 11h6M11 8v6"/></svg>,
    brain: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M9.5 2a3.5 3.5 0 00-3.5 3.5 3.5 3.5 0 00-2 6.32A3.5 3.5 0 006 18.5a3.5 3.5 0 003.5 3.5 3.5 3.5 0 003.5-3.5v-13a3.5 3.5 0 00-3.5-3.5zM14.5 2a3.5 3.5 0 013.5 3.5 3.5 3.5 0 012 6.32A3.5 3.5 0 0118 18.5a3.5 3.5 0 01-3.5 3.5 3.5 3.5 0 01-3.5-3.5v-13A3.5 3.5 0 0114.5 2z"/></svg>,
    map: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3V6zM9 3v15M15 6v15"/></svg>,
    heart: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>,
    waves: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M2 6c2 0 2 2 4 2s2-2 4-2 2 2 4 2 2-2 4-2 2 2 4 2M2 12c2 0 2 2 4 2s2-2 4-2 2 2 4 2 2-2 4-2 2 2 4 2M2 18c2 0 2 2 4 2s2-2 4-2 2 2 4 2 2-2 4-2 2 2 4 2"/></svg>,
    hands: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M18 11V6a2 2 0 10-4 0v5M6 11V8a2 2 0 114 0v3M14 10V4a2 2 0 10-4 0v2M10 10.5V14M18 11a2 2 0 012 2v3a6 6 0 01-6 6h-2a6 6 0 01-6-6v-5"/></svg>,
    book: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 19.5A2.5 2.5 0 016.5 17H20M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>,
    speech: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 11.5a8.38 8.38 0 01-9 8.5 8.5 8.5 0 01-3.8-.9L3 21l1.9-5.7A8.5 8.5 0 0112 3a8.38 8.38 0 019 8.5z"/><path d="M8 11h.01M12 11h.01M16 11h.01"/></svg>,
    sport: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="5" r="2"/><path d="M12 7v4l-3 4 3 5M12 11l3 4-1 5M8 11l-3 1M16 11l3 1"/></svg>,
    group: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/><circle cx="9" cy="7" r="4"/></svg>,
    scales: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3v18M3 7h18M6 7l-3 7c0 2 1.5 3 3 3s3-1 3-3l-3-7zM18 7l-3 7c0 2 1.5 3 3 3s3-1 3-3l-3-7z"/></svg>,
    home: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12l9-9 9 9M5 10v10h14V10"/></svg>,
    clinic: <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="6" width="18" height="15" rx="2"/><path d="M9 6V3h6v3M12 11v6M9 14h6"/></svg>,
  };
  return icons[name] || null;
};

window.Icon = Icon;


// ============== UTILS ==============
const Btn = ({ kind = 'primary', to, onClick, href, children, full }) => {
  const cls = `btn btn-${kind}` + (full ? ' donate-submit' : '');
  const handle = (e) => {
    if (to) {
      e.preventDefault();
      window.location.hash = '#/' + to;
    }
    if (onClick) onClick(e);
  };
  if (href) return <a className={cls} href={href} onClick={handle}>{children}</a>;
  return <a className={cls} href={to ? '#/' + to : '#'} onClick={handle}>{children}</a>;
};

const Crumb = ({ items }) => (
  <nav className="crumb">
    <a href="#/home" onClick={(e) => { e.preventDefault(); window.location.hash = '#/home'; }}>Главная</a>
    {items.map((it, i) => (
      <React.Fragment key={i}>
        <span className="crumb-sep">/</span>
        {it.route ? (
          <a href={'#/' + it.route} onClick={(e) => { e.preventDefault(); window.location.hash = '#/' + it.route; }}>{it.label}</a>
        ) : (
          <span>{it.label}</span>
        )}
      </React.Fragment>
    ))}
  </nav>
);

window.Btn = Btn;
window.Crumb = Crumb;


const goTo = (route) => { window.location.hash = "#/" + route; window.scrollTo(0, 0); };
window.goTo = goTo;
