import type { SVGProps } from "react";

type IconProps = SVGProps<SVGSVGElement>;

/* ---- Membership feature icons ---- */

export function CardIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 48 48"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="2.2"
      aria-hidden="true"
      {...props}
    >
      <rect x="4.5" y="9.5" width="39" height="29" rx="3" />
      <line x1="4.5" y1="16.5" x2="43.5" y2="16.5" />
      <line x1="33.5" y1="34.5" x2="33.5" y2="32.5" />
      <line x1="36.5" y1="34.5" x2="36.5" y2="32.5" />
      <line x1="39.5" y1="34.5" x2="39.5" y2="32.5" />
    </svg>
  );
}

export function ShieldIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path d="M11.302 21.6149C11.5234 21.744 11.6341 21.8086 11.7903 21.8421C11.9116 21.8681 12.0884 21.8681 12.2097 21.8421C12.3659 21.8086 12.4766 21.744 12.698 21.6149C14.646 20.4784 20 16.9084 20 12V6.6C20 6.04207 20 5.7631 19.8926 5.55048C19.7974 5.36198 19.6487 5.21152 19.4613 5.11409C19.25 5.00419 18.9663 5.00084 18.3988 4.99413C15.4272 4.95899 13.7136 4.71361 12 3C10.2864 4.71361 8.57279 4.95899 5.6012 4.99413C5.03373 5.00084 4.74999 5.00419 4.53865 5.11409C4.35129 5.21152 4.20259 5.36198 4.10739 5.55048C4 5.7631 4 6.04207 4 6.6V12C4 16.9084 9.35396 20.4784 11.302 21.6149Z" />
    </svg>
  );
}

export function DollarIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      aria-hidden="true"
      {...props}
    >
      <circle cx="12" cy="12" r="10" />
      <path d="M12 17V17.5V18" strokeLinecap="round" />
      <path d="M12 6V6.5V7" strokeLinecap="round" />
      <path
        d="M15 9.5C15 8.11929 13.6569 7 12 7C10.3431 7 9 8.11929 9 9.5C9 10.8807 10.3431 12 12 12C13.6569 12 15 13.1193 15 14.5C15 15.8807 13.6569 17 12 17C10.3431 17 9 15.8807 9 14.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function LockIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      {...props}
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M5 6.27273L12.3636 3L19.7273 6.27273V11.1818C19.7273 15.7227 16.5855 19.9691 12.3636 21C8.14182 19.9691 5 15.7227 5 11.1818V6.27273ZM12.3636 19.3064C15.6527 18.2918 18.0909 14.88 18.0909 11.1818V7.33637L12.3636 4.79182L6.63636 7.33637V11.1818C6.63636 14.88 9.07455 18.2918 12.3636 19.3064Z"
        fill="currentColor"
      />
      <path d="M8 11H16V13H8V11Z" fill="currentColor" />
    </svg>
  );
}

export function UsersIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 492.308 492.308"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      {...props}
    >
      <path d="M492.308,356.865c0-73.547-41.636-138.937-107.13-170.163c12.648-17.293,19.591-38.065,19.591-59.789c0-55.808-45.404-101.212-101.212-101.212c-47.137,0-87.701,32.655-98.438,77.484c-5.339-0.874-10.778-1.446-16.361-1.446c-55.875,0-101.327,45.404-101.327,101.212c0,18.39,4.895,35.939,14.126,51.531C41.148,277.487,0,336.246,0,401.779v64.827h377.51v-64.827c0-3.766-0.201-7.496-0.468-11.212h115.266V356.865z M303.558,45.394c44.952,0,81.519,36.567,81.519,81.519c0,21.048-7.981,41.058-22.288,56.135l-0.471,0.471l6.962,6.961l-7.058-6.865c-15.625,16.077-36.462,24.933-58.663,24.933c-4.611,0-9.206-0.536-13.772-1.321c0.058-1.425,0.175-2.839,0.175-4.275c0-43.355-27.448-80.322-65.839-94.71C232.59,71.909,265.407,45.394,303.558,45.394z M188.76,121.433c44.942,0,81.51,36.567,81.51,81.519c0,18.529-6.077,36.058-17.567,50.683c-5.837,7.377-12.763,13.573-20.462,18.438c-0.507,0.32-1.057,0.564-1.57,0.873c-2.085,1.254-4.186,2.483-6.373,3.541c-1.196,0.579-2.457,1.013-3.68,1.532c-1.566,0.664-3.102,1.395-4.709,1.96c-2.447,0.861-4.961,1.544-7.493,2.169c-0.43,0.106-0.841,0.269-1.273,0.368c-2.918,0.669-5.886,1.17-8.891,1.517c-0.062,0.007-0.121,0.025-0.183,0.031c-3.068,0.347-6.175,0.523-9.31,0.523c-3.144,0-6.261-0.176-9.337-0.523c-18.457-2.082-35.484-10.309-48.55-23.459c-2.174-2.189-4.238-4.514-6.18-6.969c-11.49-14.625-17.567-32.154-17.567-50.683C107.125,158,143.75,121.433,188.76,121.433z M357.817,446.914H19.692v-45.135c0-59.173,38.327-112.048,93.962-130.731c0.557,0.615,1.182,1.144,1.751,1.743c1.17,1.232,2.373,2.415,3.596,3.58c1.457,1.388,2.942,2.73,4.471,4.022c1.281,1.082,2.575,2.133,3.903,3.147c1.594,1.217,3.225,2.366,4.883,3.483c1.37,0.921,2.739,1.832,4.15,2.683c1.728,1.044,3.499,1.998,5.285,2.934c1.435,0.752,2.86,1.514,4.33,2.196c1.873,0.87,3.793,1.624,5.718,2.377c1.463,0.572,2.907,1.177,4.398,1.681c2.057,0.695,4.162,1.248,6.267,1.81c1.427,0.381,2.831,0.822,4.278,1.141c2.371,0.523,4.79,0.873,7.209,1.227c1.234,0.18,2.444,0.445,3.689,0.581c3.686,0.401,7.412,0.627,11.175,0.627c3.755,0,7.474-0.225,11.153-0.627c1.23-0.134,2.425-0.397,3.644-0.575c2.428-0.355,4.855-0.709,7.236-1.234c1.429-0.315,2.815-0.752,4.225-1.129c2.118-0.566,4.234-1.124,6.305-1.825c1.469-0.497,2.891-1.095,4.333-1.659c1.946-0.761,3.885-1.525,5.777-2.405c1.443-0.671,2.841-1.421,4.251-2.16c1.811-0.95,3.605-1.918,5.357-2.978c1.386-0.838,2.731-1.734,4.077-2.639c1.678-1.13,3.328-2.294,4.94-3.528c1.312-1.003,2.591-2.043,3.857-3.114c1.538-1.3,3.033-2.651,4.499-4.049c1.218-1.162,2.414-2.34,3.579-3.567c0.571-0.602,1.199-1.134,1.758-1.752c55.692,18.596,94.067,71.471,94.067,130.74V446.914z M472.615,370.875h-98.317c-10.623-52.624-47.683-97.167-98.45-116.406c5.147-8.697,8.95-17.996,11.28-27.731c5.448,0.899,10.929,1.502,16.43,1.502c25.249,0,48.99-9.297,67.694-26.152c61.737,26.877,101.364,86.911,101.364,154.777V370.875z" />
    </svg>
  );
}

/* ---- Navigation chevrons ---- */

export function ChevronLeftIcon(props: IconProps) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
      <path
        d="M15 19L8 12L15 5"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function ChevronRightIcon(props: IconProps) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
      <path
        d="M9 5L16 12L9 19"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

/* ---- Social icons (footer) ---- */

export function FacebookIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      width="28"
      height="28"
      fill="currentColor"
      aria-hidden="true"
      {...props}
    >
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
    </svg>
  );
}

export function InstagramIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      width="28"
      height="28"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>
  );
}

export function LinkedInIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      width="24"
      height="24"
      fill="currentColor"
      aria-hidden="true"
      {...props}
    >
      <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
    </svg>
  );
}

export function XIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      width="28"
      height="28"
      fill="currentColor"
      aria-hidden="true"
      {...props}
    >
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  );
}

export function MailIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      width="28"
      height="28"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
      <polyline points="22,6 12,13 2,6" />
    </svg>
  );
}

export function MenuIcon(props: IconProps) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <line x1="3" y1="12" x2="21" y2="12" />
      <line x1="3" y1="6" x2="21" y2="6" />
      <line x1="3" y1="18" x2="21" y2="18" />
    </svg>
  );
}

export function CloseIcon(props: IconProps) {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <line x1="18" y1="6" x2="6" y2="18" />
      <line x1="6" y1="6" x2="18" y2="18" />
    </svg>
  );
}

export function SearchIcon(props: IconProps) {
  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <circle cx="11" cy="11" r="8" />
      <line x1="21" y1="21" x2="16.65" y2="16.65" />
    </svg>
  );
}

export function PlusIcon(props: IconProps) {
  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  );
}

/* ---- Misc ---- */

export function ChevronDownIcon(props: IconProps) {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      aria-hidden="true"
      {...props}
    >
      <polyline points="6 9 12 15 18 9" />
    </svg>
  );
}

export function SettingsIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
      <circle cx="12" cy="12" r="3" />
    </svg>
  );
}

export function ArrowLeftSmallIcon(props: IconProps) {
  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <polyline points="15 18 9 12 15 6" />
    </svg>
  );
}

export function ArrowRightSmallIcon(props: IconProps) {
  return (
    <svg
      width="20"
      height="20"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <polyline points="9 18 15 12 9 6" />
    </svg>
  );
}

export function ScrollDownArrowIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="#2e5e99"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
      {...props}
    >
      <polyline points="6 9 12 15 18 9" />
    </svg>
  );
}

export function CategoryIcon(props: IconProps) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      {...props}
    >
      <path d="M12 2l-5.5 9h11z" />
      <circle cx="17.5" cy="17.5" r="4.5" />
      <path d="M3 13.5h8v8H3z" />
    </svg>
  );
}