import type { SVGProps } from 'react';

type IconProps = SVGProps<SVGSVGElement>;

/** Long arrow used on CTA buttons (hero, "Watch the interview", RSVP). */
export function LongArrowRightIcon({ color = 'currentColor', ...props }: IconProps & { color?: string }) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
      <path d="M5 12L19 12" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M12 19L19 12L12 5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/** The `arrow_icon($size)` helper from the original pages. */
export function ArrowIcon({ size = 24, ...props }: IconProps & { size?: 20 | 24 }) {
  return (
    <svg className={`iconSize-${size}`} width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
      <path d="M4 12H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      <path d="M14 6L20 12L14 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function ChevronDownIcon(props: IconProps) {
  return (
    <svg className="dropdown-chevron svg-stroke-white" width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M0.75 0.75L5.75 5.75L10.75 0.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function FooterChevronIcon(props: IconProps) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="d-sm-none ms-auto footer-chevron svg-stroke-white iconSize-16" {...props}>
      <path d="m6 9 6 6 6-6" />
    </svg>
  );
}

export function CloseIcon(props: IconProps) {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="iconSize-24" {...props}>
      <path d="M18 6 6 18" />
      <path d="m6 6 12 12" />
    </svg>
  );
}

export function MenuIcon(props: IconProps) {
  return (
    <svg className="iconSize-28 svg-stroke-white" width="28" height="28" viewBox="0 0 24 24" fill="none" {...props}>
      <path d="M4 6H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      <path d="M4 12H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      <path d="M4 18H20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

/** Golden target icon used by the feature boxes. */
export function FeatureDotIcon(props: IconProps) {
  return (
    <svg className="iconSize-32" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <g clipPath="url(#clip0_704_6357)">
        <path d="M10.8 21.34C16.6211 21.34 21.34 16.6211 21.34 10.8C21.34 4.97893 16.6211 0.26001 10.8 0.26001C4.97893 0.26001 0.26001 4.97893 0.26001 10.8C0.26001 16.6211 4.97893 21.34 10.8 21.34Z" stroke="#938048" strokeWidth="0.52" strokeMiterlimit="10" />
        <path d="M11 15C13.2091 15 15 13.2091 15 11C15 8.79086 13.2091 7 11 7C8.79086 7 7 8.79086 7 11C7 13.2091 8.79086 15 11 15Z" fill="#938048" />
      </g>
      <defs>
        <clipPath id="clip0_704_6357">
          <rect width="21.61" height="21.61" fill="white" />
        </clipPath>
      </defs>
    </svg>
  );
}

export function PlayIcon(props: IconProps) {
  return (
    <svg width="13" height="14" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M1 2.66716C0.999913 2.3739 1.0772 2.08582 1.22407 1.83199C1.37094 1.57816 1.58217 1.36757 1.83646 1.22149C2.09074 1.07541 2.37907 0.999014 2.67232 1.00001C2.96558 1.00101 3.25338 1.07936 3.50667 1.22716L13.5042 7.05883C13.7565 7.20523 13.9659 7.41528 14.1116 7.668C14.2573 7.92071 14.3341 8.20724 14.3344 8.49894C14.3346 8.79064 14.2583 9.0773 14.1131 9.33027C13.9678 9.58324 13.7587 9.79366 13.5067 9.94049L3.50667 15.7738C3.25338 15.9216 2.96558 16 2.67232 16.001C2.37907 16.002 2.09074 15.9256 1.83646 15.7795C1.58217 15.6334 1.37094 15.4228 1.22407 15.169C1.0772 14.9152 0.999913 14.6271 1 14.3338V2.66716Z" stroke="#938048" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function ZoomIcon(props: IconProps) {
  return (
    <svg className="iconSize-32" width="32" height="32" viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
      <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8" />
      <path d="M11 8V14M8 11H14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
      <path d="M16 16L21 21" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

export function FaqToggleIcon(props: IconProps) {
  return (
    <svg className="iconSize-24" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
      <path d="M5 12H19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      <path className="faq-toggle-bar" d="M12 5V19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

export function ArrowUpIcon(props: IconProps) {
  return (
    <svg className="iconSize-20" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
      <path d="M12 20V4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      <path d="M6 10L12 4L18 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function LinkedInSolidIcon(props: IconProps) {
  return (
    <svg className="iconSize-32" width="32" height="32" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.65h.05A4.17 4.17 0 0 1 17.6 8.7c4 0 4.75 2.6 4.75 6V21h-4v-5.5c0-1.31-.03-3-1.85-3-1.85 0-2.13 1.43-2.13 2.9V21h-4V9Z" />
    </svg>
  );
}

export function PeopleIcon(props: IconProps) {
  return (
    <svg className="iconSize-28" width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" {...props}>
      <path d="M16 19V17.5C16 15.8431 14.6569 14.5 13 14.5H6C4.34315 14.5 3 15.8431 3 17.5V19" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M9.5 11.5C11.1569 11.5 12.5 10.1569 12.5 8.5C12.5 6.84315 11.1569 5.5 9.5 5.5C7.84315 5.5 6.5 6.84315 6.5 8.5C6.5 10.1569 7.84315 11.5 9.5 11.5Z" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M16 5.7C17.2 6.05 18 7.17 18 8.5C18 9.83 17.2 10.95 16 11.3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M21 19V17.5C21 16.16 20.1 15 18.8 14.7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export function DotsVerticalIcon(props: IconProps) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="1" />
      <circle cx="12" cy="5" r="1" />
      <circle cx="12" cy="19" r="1" />
    </svg>
  );
}

export function XLogoIcon(props: IconProps) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...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 LinkedInFilledIcon(props: IconProps) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    </svg>
  );
}

export function MailIcon(props: IconProps) {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...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 SmallArrowRightIcon(props: IconProps) {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M5 12h14" />
      <path d="M12 5l7 7-7 7" />
    </svg>
  );
}