import type { SVGProps } from "react";
import type { LogoItem } from "../components/logo-grid";
import { LogoGridSection } from "../components/logo-grid";

function VercelIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 76 65" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M37.532 0L75.064 65H0L37.532 0z" />
    </svg>
  );
}

function StripeIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 60 25" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M59.64 14.28h-8.06c.19 1.93 1.6 2.55 3.2 2.55 1.64 0 2.96-.37 4.05-.95v3.32a12.2 12.2 0 0 1-4.56.84c-4.05 0-6.83-2.11-6.83-7.07 0-4.18 2.45-7.12 6.23-7.12 3.56 0 6.05 2.53 6.05 6.65 0 .7-.06 1.27-.08 1.78zm-4.32-5.35c-1.07 0-2.04.76-2.21 2.7h4.32c0-1.7-.73-2.7-2.11-2.7zm-10.53-2.59c1.39 0 2.4.35 3.18.79l-.93 3.43c-.69-.35-1.54-.62-2.56-.62-1.7 0-2.7 1.07-2.7 3.15v7.12h-4.38V6.67h4.12l.14 1.66c.73-1.28 1.88-1.99 3.13-1.99zm-10.14.33h4.38v13.48h-4.12l-.14-1.42c-.87 1.18-2.18 1.76-3.76 1.76-3.53 0-5.83-2.83-5.83-7.07s2.44-7.08 5.96-7.08c1.34 0 2.4.42 3.17 1.15l.34-1.15v.33zm-3.06 10.42c1.52 0 2.65-1.18 2.65-3.47s-1-3.4-2.56-3.4c-1.57 0-2.65 1.18-2.65 3.46s1.07 3.4 2.56 3.4zm-8.05-6.96v9.55h-4.38v-8.35c0-1.6-.56-2.27-1.8-2.27-1.34 0-2.24.84-2.24 2.9v7.73h-4.38V6.67h4.12l.14 1.5c.95-1.23 2.27-1.84 3.83-1.84 2.9 0 4.7 1.87 4.7 5.46zm-18.31-4.32h-3.9V2.9l4.38-1V5.8h3.3v3.47h-3.3v5.5c0 1.52.62 2.02 1.64 2.02.73 0 1.3-.14 1.88-.42v3.3c-.79.45-1.88.7-3.3.7-3 0-4.7-1.68-4.7-4.87V9.27h-1.34V5.8h1.34zm-9.2 10.42c1.57 0 2.94-.65 3.9-1.82l2.63 2.34c-1.52 1.87-3.87 2.9-6.67 2.9C5.22 20.14 2 17 2 12.53S5.08 4.85 9.66 4.85c4.05 0 7.2 2.94 7.2 7.42 0 .62-.06 1.27-.14 1.78H6.53c.37 2.21 1.84 3.08 3.5 3.08zM6.39 11.6h6.2c-.2-2.04-1.23-3.2-2.97-3.2-1.64 0-2.83 1.1-3.22 3.2z" />
    </svg>
  );
}

function GitHubIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        clipRule="evenodd"
        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
        fillRule="evenodd"
      />
    </svg>
  );
}

function LinearIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M1.22541 61.5228c-.2225-.9485.6428-1.8138 1.5913-1.5765l13.4135 3.3578c.7872.197 1.3547.8781 1.3985 1.6852.172 3.1614.8819 6.2774 2.0944 9.1903.2025.4865.1583 1.0434-.1286 1.4885l-7.7133 11.5695c-.5286.7929-1.6027.8982-2.2614.2395C4.57 82.4327 1.4426 76.3198.4228 69.3857c-.3498-2.3773-.4832-4.8368-.3028-7.2865.0438-.5949.0655-1.1432.1054-1.5764zm16.3945 23.9613L7.5653 94.4743c-.4997.4463-.0673 1.2716.595 1.1352 3.8568-.7944 7.5369-2.1572 10.9483-3.9826.4872-.2608.6867-.8649.4451-1.3611l-1.9337-3.9817zm71.5543-36.5357c-.1226-.5059-.1861-1.0294-.1861-1.5649V37.4102l-20.262 19.1398c-2.3044 2.1776-4.8414 4.115-7.5774 5.7754l-18.9395 11.484c-3.6397 2.2076-7.7008 3.8065-12.0258 4.6888l-11.1002 2.2648c-.9698.1979-1.3322 1.3726-.5782 1.8807 2.8825 1.9416 6.0137 3.5457 9.3382 4.7589 5.1 1.8842 10.8142 2.8975 16.7561 2.8975 28.2763 0 51.191-22.9148 51.191-51.191 0-5.942-1.0133-11.6543-2.8975-16.9654-1.2133-3.4238-2.8174-6.6523-4.7589-9.6266-.5081-.7539-1.6827-.3915-1.8807.5782l-2.2648 11.1002c-.8823 4.3249-2.4812 8.386-4.6887 12.0257l-11.4841 18.9396c-1.6604 2.736-3.5978 5.273-5.7754 7.5773L26.1461 85.1003h9.9732c.5355 0 1.059.0635 1.5648.1861 5.4894 1.3289 11.2851 2.0401 17.2516 2.0401 18.1898 0 34.6653-6.9987 47.0163-18.4364.3277-.3038.1753-.845-.2624-.9337z" />
    </svg>
  );
}

function SupabaseIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 109 113" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627L99.1935 40.0627C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z"
        fillOpacity="0.5"
      />
      <path d="M63.7076 110.284C60.8481 113.885 55.0502 111.912 54.9813 107.314L53.9738 40.0627H99.1935C107.384 40.0627 111.952 49.5228 106.859 55.9374L63.7076 110.284Z" />
      <path
        d="M45.317 2.07103C48.1765 -1.53037 53.9745 0.442937 54.0434 5.041L54.4849 72.2922H9.83113C1.64038 72.2922 -2.92775 62.8321 2.16513 56.4175L45.317 2.07103Z"
        fillOpacity="0.5"
      />
    </svg>
  );
}

function ClerkIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M19.5 3.29a1.007 1.007 0 0 0-1.091-.22l-3.026 1.237a1.007 1.007 0 0 0-.512 1.395l.006.012a8.4 8.4 0 0 1 .898 3.768 8.412 8.412 0 0 1-3.375 6.739 1.007 1.007 0 0 0-.166 1.47l2.058 2.36c.37.424 1.01.486 1.453.14A13.07 13.07 0 0 0 21 9.483a13.04 13.04 0 0 0-1.5-6.193z" />
      <path
        d="M12.464 17.512a3.946 3.946 0 0 1-3.94-3.94 3.92 3.92 0 0 1 1.382-3 1.007 1.007 0 0 0 .166-1.47l-2.058-2.36a1.007 1.007 0 0 0-1.453-.14A8.867 8.867 0 0 0 3.34 13.57a9.118 9.118 0 0 0 8.468 9.088 9.07 9.07 0 0 0 6.508-2.017 1.007 1.007 0 0 0 .09-1.49l-2.144-2.144a1.007 1.007 0 0 0-1.205-.176 3.93 3.93 0 0 1-2.594.681z"
        fillOpacity="0.5"
      />
    </svg>
  );
}

function ResendIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M2.023 0H1v24h3.996V14.13h3.168L13.76 24h4.47L12.236 13.698C15.252 12.96 17.28 10.598 17.28 7.2c0-4.56-3.024-7.2-7.872-7.2H2.023zm3.973 10.8V3.36h3.384c2.304 0 3.648 1.2 3.648 3.72s-1.344 3.72-3.648 3.72H5.996z" />
    </svg>
  );
}

function TailwindIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 54 33" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        clipRule="evenodd"
        d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
        fillRule="evenodd"
      />
    </svg>
  );
}

function NextjsIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="none" viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg" {...props}>
      <mask height={180} id="nj" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width={180} x={0} y={0}>
        <circle cx={90} cy={90} fill="black" r={90} />
      </mask>
      <g mask="url(#nj)">
        <circle cx={90} cy={90} fill="currentColor" r={87} stroke="currentColor" strokeWidth={6} />
        <path
          d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
          fill="url(#nj0)"
        />
        <rect fill="url(#nj1)" height={72} width={12} x={115} y={54} />
      </g>
      <defs>
        <linearGradient gradientUnits="userSpaceOnUse" id="nj0" x1={109} x2={144.5} y1={116.5} y2={160.5}>
          <stop stopColor="var(--background, #fff)" />
          <stop offset={1} stopColor="var(--background, #fff)" stopOpacity={0} />
        </linearGradient>
        <linearGradient gradientUnits="userSpaceOnUse" id="nj1" x1={121} x2={120.799} y1={54} y2={106.875}>
          <stop stopColor="var(--background, #fff)" />
          <stop offset={1} stopColor="var(--background, #fff)" stopOpacity={0} />
        </linearGradient>
      </defs>
    </svg>
  );
}

function OpenAIIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
    </svg>
  );
}

function PlanetscaleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M128 0C57.308 0 0 57.308 0 128c0 70.692 57.308 128 128 128 70.692 0 128-57.308 128-128C256 57.308 198.692 0 128 0zm83.118 130.714L130.714 211.06a83.573 83.573 0 0 1-2.666.058c-45.822 0-83.118-37.018-83.118-82.474h82.296l80.592-80.592c16.244 22.478 25.252 49.948 25.252 79.484 0 1.144-.024 2.282-.062 3.418l-.026-.24h.076z" />
    </svg>
  );
}

function TypeScriptIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M2 63.91v62.5h125v-125H2zm100.73-5a15.56 15.56 0 0 1 7.82 4.5 20.58 20.58 0 0 1 3 4.7c.02.09-5.58 3.91-9 6.25a8.58 8.58 0 0 0-2.46-2.48c-1.71-1.21-3.72-1.78-6.48-1.78-4.14 0-6.68 1.65-6.68 4.3 0 1.78 1 2.79 3.5 3.72 6.04 2.26 8.62 3.5 11.55 5.64a16.11 16.11 0 0 1 5.06 6.26 17.8 17.8 0 0 1 1.05 6.66c0 4.59-1.53 8.38-4.68 11.18-3.36 2.99-7.71 4.42-13.5 4.42a24.2 24.2 0 0 1-13.43-3.58c-2.27-1.49-4.82-4.37-5.79-6.48l10.07-5.83a11.43 11.43 0 0 0 4.4 4.89c1.68.91 3.39 1.3 5.87 1.3 4.38 0 6.93-1.72 6.93-4.65a4 4 0 0 0-2.06-3.65c-1.26-.7-2.45-1.2-6.88-3.11-6.16-2.62-8.91-4.22-11.2-6.62a15.36 15.36 0 0 1-3.2-10 14.62 14.62 0 0 1 5-11.29c3.29-2.8 7.61-4.17 13.14-4.17a22.11 22.11 0 0 1 12.63 3.52zm-36.14 6.11h11.42v36h-10v-36H56.59v-9h30z" />
    </svg>
  );
}

function FigmaIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 38 57" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z" />
      <path d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z" />
      <path d="M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z" />
      <path d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z" />
      <path d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z" />
    </svg>
  );
}

function DrizzleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M5.353 11.823a1.036 1.036 0 0 0-.395-1.422 1.063 1.063 0 0 0-1.437.399L.138 16.702a1.035 1.035 0 0 0 .395 1.422 1.063 1.063 0 0 0 1.437-.398l3.383-5.903zm8.95 0a1.036 1.036 0 0 0-.395-1.422 1.063 1.063 0 0 0-1.437.399l-3.383 5.902a1.036 1.036 0 0 0 .395 1.422 1.063 1.063 0 0 0 1.437-.398l3.383-5.903zm8.95 0a1.036 1.036 0 0 0-.395-1.422 1.063 1.063 0 0 0-1.437.399l-3.383 5.902a1.036 1.036 0 0 0 .395 1.422 1.063 1.063 0 0 0 1.437-.398l3.383-5.903zM8.736 4.575a1.036 1.036 0 0 0-.395-1.422A1.063 1.063 0 0 0 6.904 3.55l-3.383 5.903a1.036 1.036 0 0 0 .395 1.422 1.063 1.063 0 0 0 1.437-.399l3.383-5.902zm8.95 0a1.036 1.036 0 0 0-.395-1.422 1.063 1.063 0 0 0-1.437.398l-3.383 5.903a1.036 1.036 0 0 0 .395 1.422 1.063 1.063 0 0 0 1.437-.399l3.383-5.902zm8.95 0a1.036 1.036 0 0 0-.396-1.422 1.063 1.063 0 0 0-1.437.398l-3.383 5.903a1.036 1.036 0 0 0 .396 1.422 1.063 1.063 0 0 0 1.436-.399l3.384-5.902z" />
    </svg>
  );
}

function RadixIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M12 25a8 8 0 1 1 0-16v16zM12 0H4v8h8V0zM17 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
    </svg>
  );
}

function TurboIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 4a6 6 0 1 1 0 12V6z" />
    </svg>
  );
}

const iconSize = 28;

const items: LogoItem[][] = [
  [
    { name: "Vercel", icon: <VercelIcon height={iconSize} width={iconSize} /> },
    { name: "Stripe", icon: <StripeIcon height={iconSize} width={iconSize} /> },
    { name: "GitHub", icon: <GitHubIcon height={iconSize} width={iconSize} /> },
  ],
  [
    { name: "Supabase", icon: <SupabaseIcon height={iconSize} width={iconSize} /> },
    { name: "Next.js", icon: <NextjsIcon height={iconSize} width={iconSize} /> },
    { name: "OpenAI", icon: <OpenAIIcon height={iconSize} width={iconSize} /> },
    { name: "Tailwind", icon: <TailwindIcon height={iconSize} width={iconSize} /> },
    { name: "Linear", icon: <LinearIcon height={iconSize} width={iconSize} /> },
  ],
  [
    { name: "Clerk", icon: <ClerkIcon height={iconSize} width={iconSize} /> },
    { name: "TypeScript", icon: <TypeScriptIcon height={iconSize} width={iconSize} /> },
    { name: "Figma", icon: <FigmaIcon height={iconSize} width={iconSize} /> },
    { name: "Resend", icon: <ResendIcon height={iconSize} width={iconSize} /> },
    { name: "Drizzle", icon: <DrizzleIcon height={iconSize} width={iconSize} /> },
  ],
  [
    { name: "Radix", icon: <RadixIcon height={iconSize} width={iconSize} /> },
    { name: "Planetscale", icon: <PlanetscaleIcon height={iconSize} width={iconSize} /> },
    { name: "Turbo", icon: <TurboIcon height={iconSize} width={iconSize} /> },
  ],
];

export default function MarketingIntegrationsVerticalPage() {
  return (
    <main className="bg-muted dark:bg-background">
      <LogoGridSection
        cardSize={80}
        description="Seamlessly integrates with the tools and frameworks you already use, so you can ship faster without switching context."
        gap={8}
        items={items}
        title="Works with your entire stack"
      />
    </main>
  );
}