// SVG icons — stroke-based, distinctive, hand-tuned for field-force actions.
// Each takes { size, stroke, fill } with sensible defaults.

const I = ({ size = 32, children, viewBox = "0 0 32 32" }) => (
  <svg width={size} height={size} viewBox={viewBox} fill="none"
       strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.6">
    {children}
  </svg>
);

// 1. شروع به کار — Start (play in soft ring)
function IconStart({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <circle cx="16" cy="16" r="11" stroke={color} strokeOpacity="0.25" />
      <path d="M13 11.5 L22 16 L13 20.5 Z" fill={color} stroke={color} />
    </I>
  );
}

// 2. پایان کار — End (square stop with ring)
function IconEnd({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <circle cx="16" cy="16" r="11" stroke={color} strokeOpacity="0.25" />
      <rect x="11.5" y="11.5" width="9" height="9" rx="1.2" fill={color} stroke={color} />
    </I>
  );
}

// 3. سلفی با سردر فروشگاه — Selfie at storefront (camera + tiny shop awning above)
function IconSelfie({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      {/* storefront awning */}
      <path d="M6 7 L26 7" stroke={color} />
      <path d="M6 7 L7.5 4 L24.5 4 L26 7" stroke={color} />
      <path d="M8.5 7 L8.5 9 M12 7 L12 9 M15.5 7 L15.5 9 M19 7 L19 9 M22.5 7 L22.5 9" stroke={color} strokeOpacity="0.55"/>
      {/* camera body */}
      <rect x="6" y="12" width="20" height="15" rx="2.5" stroke={color} />
      <path d="M12 12 L13.5 10 L18.5 10 L20 12" stroke={color} />
      <circle cx="16" cy="19.5" r="4" stroke={color} />
      <circle cx="16" cy="19.5" r="1.4" fill={color} />
    </I>
  );
}

// 4. ثبت استراحت — Break (coffee cup with steam)
function IconBreak({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <path d="M12 4 C12 6, 14 6, 14 8" stroke={color} strokeOpacity="0.55" />
      <path d="M17 4 C17 6, 19 6, 19 8" stroke={color} strokeOpacity="0.55" />
      <path d="M7 11 L7 21 C7 24, 9 26, 12 26 L18 26 C21 26, 23 24, 23 21 L23 11 Z" stroke={color} />
      <path d="M23 13 L26 13 C27.5 13, 28.5 14, 28.5 16 C28.5 18, 27.5 19, 26 19 L23 19" stroke={color} />
    </I>
  );
}

// 4b. برگشت به کار — Return to work (curved arrow)
function IconReturnToWork({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <path d="M6 16 C6 10.5, 10.5 6, 16 6 C21.5 6, 26 10.5, 26 16 C26 21.5, 21.5 26, 16 26"
            stroke={color} />
      <path d="M16 22 L12 26 L16 30" stroke={color} fill="none" />
    </I>
  );
}

// Warning / alert
function IconAlert({ size = 36, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none">
      <path d="M18 4 L33 30 L3 30 Z" stroke={color} strokeWidth="1.6" strokeLinejoin="round" />
      <path d="M18 14 L18 22" stroke={color} strokeWidth="2" strokeLinecap="round" />
      <circle cx="18" cy="26" r="1.4" fill={color} />
    </svg>
  );
}


// 5. ثبت روز تعطیل — Holiday (calendar with dot)
function IconHoliday({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <rect x="5" y="7" width="22" height="20" rx="2.5" stroke={color} />
      <path d="M5 12 L27 12" stroke={color} />
      <path d="M10 4 L10 9 M22 4 L22 9" stroke={color} />
      <path d="M9 16 L11 16 M14 16 L16 16 M19 16 L21 16 M9 20 L11 20 M19 20 L21 20" stroke={color} strokeOpacity="0.5" />
      <circle cx="16" cy="21" r="2.5" fill={color} />
    </I>
  );
}

// 6. ارسال پیام — Send message (bubble with arrow)
function IconMessage({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <path d="M5 9 C5 7, 6.5 6, 8.5 6 L23.5 6 C25.5 6, 27 7, 27 9 L27 19 C27 21, 25.5 22, 23.5 22 L14 22 L9 26.5 L9 22 L8.5 22 C6.5 22, 5 21, 5 19 Z" stroke={color} />
      <path d="M11 14 L21 14 M14 11 L21 11 M11 17 L19 17" stroke={color} strokeOpacity="0.6" />
    </I>
  );
}

// 6b. ارسال — Send (paper plane)
function IconSend({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <path d="M27 5 L4 14.5 L13 17.5 L16 26 Z" stroke={color} />
      <path d="M27 5 L13 17.5" stroke={color} strokeOpacity="0.6" />
    </I>
  );
}

// 7. ثبت اطلاعات — Register info (clipboard with checkmark)
function IconRegister({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <rect x="7" y="6" width="18" height="22" rx="2.5" stroke={color} />
      <rect x="11" y="3" width="10" height="5" rx="1.2" stroke={color} fill="white" />
      <path d="M11 15 L14 18 L21 11.5" stroke={color} strokeWidth="2" />
      <path d="M11 22 L21 22 M11 25 L17 25" stroke={color} strokeOpacity="0.55" />
    </I>
  );
}

// 8. سمپل دریافتی — Received samples (package with arrow down)
function IconSamples({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <path d="M16 3 L16 11 M13 8 L16 11 L19 8" stroke={color} />
      <path d="M5 13 L16 9 L27 13 L27 24 L16 28 L5 24 Z" stroke={color} />
      <path d="M5 13 L16 17 L27 13 M16 17 L16 28" stroke={color} />
      <path d="M10.5 11 L21.5 15" stroke={color} strokeOpacity="0.5" />
    </I>
  );
}

// 9. محصول موجود — Inventory (shelf with boxes)
function IconInventory({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      {/* top shelf */}
      <rect x="7" y="6" width="6" height="6" rx="0.6" stroke={color} />
      <rect x="14" y="4" width="6" height="8" rx="0.6" stroke={color} />
      <rect x="21" y="7" width="4" height="5" rx="0.6" stroke={color} />
      <path d="M5 13 L27 13" stroke={color} strokeWidth="2" />
      {/* bottom shelf */}
      <rect x="7" y="16" width="5" height="7" rx="0.6" stroke={color} />
      <rect x="13" y="18" width="6" height="5" rx="0.6" stroke={color} />
      <rect x="20" y="15" width="5" height="8" rx="0.6" stroke={color} />
      <path d="M5 24 L27 24" stroke={color} strokeWidth="2" />
      <path d="M7 24 L7 27 M25 24 L25 27" stroke={color} />
    </I>
  );
}

// 10. تقویم کاری — Work calendar (calendar with route pin)
function IconCalendarWork({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <rect x="4" y="7" width="20" height="19" rx="2.5" stroke={color} />
      <path d="M4 12 L24 12" stroke={color} />
      <path d="M9 4 L9 9 M19 4 L19 9" stroke={color} />
      <path d="M8 16 L10 16 M13 16 L15 16 M8 20 L10 20" stroke={color} strokeOpacity="0.5" />
      {/* route pin overlay */}
      <path d="M23 17 C23 14.8, 24.8 13, 27 13 C29.2 13, 31 14.8, 31 17 C31 20, 27 24, 27 24 C27 24, 23 20, 23 17 Z"
            stroke={color} fill="white" />
      <circle cx="27" cy="17" r="1.6" fill={color} />
    </I>
  );
}

// Camera (used in selfie sheet)
function IconCamera({ size = 36, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none">
      <rect x="4" y="11" width="28" height="20" rx="3" stroke={color} strokeWidth="1.6" />
      <path d="M12 11 L14 8 L22 8 L24 11" stroke={color} strokeWidth="1.6" strokeLinejoin="round" />
      <circle cx="18" cy="21" r="5.5" stroke={color} strokeWidth="1.6" />
      <circle cx="27" cy="15" r="1" fill={color} />
    </svg>
  );
}

// Close X
function IconClose({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <path d="M5 5 L15 15 M15 5 L5 15" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

// Map pin (used in calendar list)
function IconPin({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M8 14 C8 14, 13 9.5, 13 6 C13 3.2, 10.8 1, 8 1 C5.2 1, 3 3.2, 3 6 C3 9.5, 8 14, 8 14 Z"
            stroke={color} strokeWidth="1.4" strokeLinejoin="round" />
      <circle cx="8" cy="6" r="1.6" fill={color} />
    </svg>
  );
}

// 11. آپلود مدارک — Documents (folder with ID card + check)
function IconDocuments({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      {/* folder back tab */}
      <path d="M4 9 L4 26 C4 27, 5 28, 6 28 L26 28 C27 28, 28 27, 28 26 L28 11 C28 10, 27 9, 26 9 L15 9 L13 6 L6 6 C5 6, 4 7, 4 9 Z" stroke={color} />
      {/* ID card inside */}
      <rect x="9" y="14" width="14" height="9" rx="1.4" stroke={color} fill="white" />
      <circle cx="12.5" cy="18" r="1.6" fill={color} />
      <path d="M16 17 L21 17 M16 19.5 L20 19.5 M11 21.5 L21 21.5" stroke={color} strokeOpacity="0.55" />
    </I>
  );
}

// 11b. Upload arrow (used in the screen)
function IconUpload({ size = 24, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M12 16 L12 4 M7 9 L12 4 L17 9" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M4 15 L4 19 C4 20, 5 21, 6 21 L18 21 C19 21, 20 20, 20 19 L20 15" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// 11c. Bank for IBAN input
function IconBank({ size = 20, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M3 10 L12 4 L21 10 L21 11 L3 11 Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M5 11 L5 19 M9 11 L9 19 M15 11 L15 19 M19 11 L19 19" stroke={color} strokeWidth="1.5" />
      <path d="M3 19 L21 19 L21 21 L3 21 Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
    </svg>
  );
}

// 11d. Check (success badge)
function IconCheck({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <path d="M4 10.5 L8 14.5 L16 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// 12. درآمد و حقوق — Earnings (banknote with arrow up)
function IconEarnings({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      <rect x="4" y="9" width="24" height="14" rx="2" stroke={color} />
      <circle cx="16" cy="16" r="3.5" stroke={color} />
      <path d="M16 14.5 L16 17.5 M14.5 16 L17.5 16" stroke={color} />
      <circle cx="8" cy="16" r="0.9" fill={color} />
      <circle cx="24" cy="16" r="0.9" fill={color} />
      {/* small up arrow indicator */}
      <path d="M22 5 L22 10 M19.5 7.5 L22 5 L24.5 7.5" stroke={color} strokeWidth="1.5" />
    </I>
  );
}

// 13. Admin — gear with people (used as admin entry)
function IconAdmin({ size, color = "currentColor" }) {
  return (
    <I size={size}>
      {/* gear teeth */}
      <path d="M16 4 L17 7 L20 6.5 L19 9.5 L22 11 L19 12.5 L20 15.5 L17 15 L16 18 L15 15 L12 15.5 L13 12.5 L10 11 L13 9.5 L12 6.5 L15 7 Z" stroke={color} />
      <circle cx="16" cy="11" r="2.5" stroke={color} />
      {/* people */}
      <circle cx="11" cy="22" r="2" stroke={color} />
      <circle cx="21" cy="22" r="2" stroke={color} />
      <path d="M6 28 C6 25.5, 8 24, 11 24 C14 24, 16 25.5, 16 28" stroke={color} />
      <path d="M16 28 C16 25.5, 18 24, 21 24 C24 24, 26 25.5, 26 28" stroke={color} />
    </I>
  );
}

// 14. Approve check, 15. Reject X — used in admin
function IconCheckCircle({ size = 20, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.6" />
      <path d="M7.5 12.5 L10.5 15.5 L16.5 9" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function IconXCircle({ size = 20, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10" stroke={color} strokeWidth="1.6" />
      <path d="M8.5 8.5 L15.5 15.5 M15.5 8.5 L8.5 15.5" stroke={color} strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

// 16. Plus
function IconPlus({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <path d="M10 4 L10 16 M4 10 L16 10" stroke={color} strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

// 17. Trash
function IconTrash({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <path d="M4 6 L16 6 M8 6 L8 4 L12 4 L12 6" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      <path d="M5.5 6 L6.5 16 C6.5 16.6, 7 17, 7.5 17 L12.5 17 C13 17, 13.5 16.6, 13.5 16 L14.5 6"
            stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M9 9 L9 14 M11 9 L11 14" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

// 18. Pencil (edit)
function IconEdit({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <path d="M3 17 L3 14 L13 4 L16 7 L6 17 Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M11 6 L14 9" stroke={color} strokeWidth="1.5" />
    </svg>
  );
}

// Lock / key for login
function IconLock({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <rect x="5" y="11" width="14" height="10" rx="2" stroke={color} strokeWidth="1.5" />
      <path d="M8 11 L8 8 C8 5.8, 9.8 4, 12 4 C14.2 4, 16 5.8, 16 8 L16 11" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      <circle cx="12" cy="16" r="1.4" fill={color} />
    </svg>
  );
}
function IconUser({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="9" r="4" stroke={color} strokeWidth="1.5" />
      <path d="M4 21 C4 17, 8 14.5, 12 14.5 C16 14.5, 20 17, 20 21" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}
function IconEye({ size = 18, color = "currentColor", off = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M2.5 12 C5 7, 8.5 4.5, 12 4.5 C15.5 4.5, 19 7, 21.5 12 C19 17, 15.5 19.5, 12 19.5 C8.5 19.5, 5 17, 2.5 12 Z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <circle cx="12" cy="12" r="3" stroke={color} strokeWidth="1.5" />
      {off && <path d="M4 4 L20 20" stroke={color} strokeWidth="1.6" strokeLinecap="round" />}
    </svg>
  );
}
function IconLogout({ size = 18, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M14 4 L18 4 C19 4, 20 5, 20 6 L20 18 C20 19, 19 20, 18 20 L14 20" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      <path d="M9 8 L4 12 L9 16 M4 12 L15 12" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Chevron for navigation
function IconChevron({ size = 18, color = "currentColor", dir = "left" }) {
  const d = dir === "left" ? "M11 5 L6 10 L11 15" : "M5 5 L10 10 L5 15";
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <path d={d} stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Bell
function IconBell({ size = 20, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M6 10 C6 7, 8.5 5, 12 5 C15.5 5, 18 7, 18 10 L18 14 L20 17 L4 17 L6 14 Z"
            stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M10 19 C10.5 20.5, 13.5 20.5, 14 19" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
    </svg>
  );
}

// Clock
function IconClock({ size = 16, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="10" r="7" stroke={color} strokeWidth="1.5" />
      <path d="M10 6 L10 10 L13 12" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

Object.assign(window, {
  IconStart, IconEnd, IconSelfie, IconBreak, IconReturnToWork, IconHoliday,
  IconMessage, IconSend, IconRegister, IconSamples, IconInventory,
  IconCalendarWork, IconCamera, IconClose, IconPin, IconAlert,
  IconDocuments, IconUpload, IconBank, IconCheck,
  IconEarnings, IconAdmin, IconCheckCircle, IconXCircle,
  IconPlus, IconTrash, IconEdit,
  IconLock, IconUser, IconEye, IconLogout,
  IconChevron, IconBell, IconClock,
});
