"use client";

import type { SVGProps } from "react";
import { InfiniteSlider } from "./infinite-slider";

const logos: { name: string; Icon: React.ComponentType<SVGProps<SVGSVGElement>> }[] = [
  { name: "Vercel", Icon: VercelLogo },
  { name: "Stripe", Icon: StripeLogo },
  { name: "GitHub", Icon: GitHubLogo },
  { name: "Linear", Icon: LinearLogo },
  { name: "Supabase", Icon: SupabaseLogo },
  { name: "Clerk", Icon: ClerkLogo },
  { name: "Resend", Icon: ResendLogo },
  { name: "Planetscale", Icon: PlanetscaleLogo },
];

export function LogoStrip() {
  return (
    <section className="relative w-full border-border border-b py-10 md:py-14">
      <p className="mb-8 text-center font-medium text-muted-foreground/60 text-xs uppercase tracking-widest">
        Trusted by industry leaders
      </p>

      <div className="relative">
        <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-20 bg-gradient-to-r from-background to-transparent sm:w-32" />
        <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-20 bg-gradient-to-l from-background to-transparent sm:w-32" />

        <InfiniteSlider gap={48} speed={60} speedOnHover={20}>
          {logos.map((logo) => (
            <div
              key={logo.name}
              className="flex shrink-0 items-center justify-center px-2"
            >
              <logo.Icon className="h-6 w-auto text-foreground opacity-40 transition-opacity duration-300 hover:opacity-80 sm:h-7" />
            </div>
          ))}
        </InfiniteSlider>
      </div>
    </section>
  );
}

function VercelLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 283 64" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>Vercel</title>
      <path d="M141.68 16.25c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zm-39.34 3.5c0-7.04 3.85-14 10.92-14 3.67 0 6.69 1.79 8.59 4.37l6.84-4.84C115.39 15.02 110.15 12 104.02 12c-13.28 0-21.82 10.17-21.82 22s8.54 22 21.82 22c6.13 0 11.37-3.02 15.21-7.78l-6.84-4.84c-1.9 2.58-4.92 4.37-8.59 4.37-7.07 0-10.92-6.96-10.92-14zM281.7 4.4h-10.36v47.2h10.36V4.4zm-51.56 0v47.2h10.36V34.88h14.14v-8.88h-14.14V13.28h18.14V4.4h-28.5zm-31.38 0h-10.36v47.2h28.5v-8.88h-18.14V4.4zM27 0L0 48h54L27 0zm109.73 4.4l-17.47 47.2h10.86l3.17-9.1h19.88l3.17 9.1h10.86l-17.47-47.2h-13zm-1.98 30.1l6.97-19.94 6.97 19.94h-13.94z" />
    </svg>
  );
}

function StripeLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 60 25" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>Stripe</title>
      <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 GitHubLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 98 96" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>GitHub</title>
      <path fillRule="evenodd" 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" />
    </svg>
  );
}

function LinearLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 100 100" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>Linear</title>
      <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 SupabaseLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 109 113" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>Supabase</title>
      <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 ClerkLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 77 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>Clerk</title>
      <path d="M35.848 4.857a.626.626 0 0 0-.626.625v13.234a.626.626 0 0 0 .626.626h2.18a.626.626 0 0 0 .625-.626V5.482a.626.626 0 0 0-.626-.625h-2.18zm25.986 5.27a.626.626 0 0 0-.625.598c-.075 1.614-.8 2.587-2.053 2.587-1.35 0-2.12-1.151-2.12-3.194s.77-3.169 2.12-3.169c1.253 0 1.978.973 2.053 2.587a.626.626 0 0 0 .625.599h2.12a.626.626 0 0 0 .626-.654C64.36 6.204 62.206 4 59.156 4c-3.35 0-5.41 2.407-5.41 6.118s2.06 6.142 5.41 6.142c3.05 0 5.204-2.204 5.424-5.48a.626.626 0 0 0-.626-.653h-2.12zm-12.59-5.27a.626.626 0 0 0-.625.626v5.895c0 1.376-.72 2.227-2.044 2.227-1.3 0-2.019-.851-2.019-2.227V5.482a.626.626 0 0 0-.626-.625h-2.18a.626.626 0 0 0-.625.626v6.219c0 2.932 1.773 4.558 4.85 4.558 1.35 0 2.345-.5 2.869-1.226v.224a.626.626 0 0 0 .626.626h1.955a.626.626 0 0 0 .626-.626V5.482a.626.626 0 0 0-.626-.625h-2.18zM72.37 4.857a.626.626 0 0 0-.625.625v4.87h-.15L67.996 5.07a.626.626 0 0 0-.508-.213h-2.06a.626.626 0 0 0-.626.626v9.776a.626.626 0 0 0 .626.625h2.18a.626.626 0 0 0 .625-.626v-4.87h.15l3.6 5.283a.626.626 0 0 0 .508.213h2.06a.626.626 0 0 0 .625-.625V5.482a.626.626 0 0 0-.625-.625h-2.18z" />
      <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 ResendLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 56 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>Resend</title>
      <path d="M0 1h5.76c1.52 0 2.74.44 3.52 1.2C10.08 2.98 10.48 4 10.48 5.3c0 1.76-.96 3.06-2.56 3.7L10.72 15H7.68L5.12 9.5H2.72V15H0V1zm5.52 6.24c1.44 0 2.28-.72 2.28-1.96S6.96 3.28 5.52 3.28H2.72v3.96h2.8zM14.96 9.64c.16 1.84 1.32 2.92 3.04 2.92 1.28 0 2.12-.52 2.72-1.32l1.88 1.32c-1.04 1.36-2.52 2.2-4.68 2.2-3.48 0-5.64-2.4-5.64-5.84 0-3.32 2.12-5.84 5.4-5.84 3.44 0 5.36 2.72 5.04 6.56h-7.76zm4.84-2.12c-.12-1.72-1.12-2.8-2.6-2.8-1.48 0-2.52.96-2.8 2.8h5.4zM26.68 12.48c.96.12 1.56-.08 1.88-.56.28-.44.4-.92.4-2.04V3.36h2.72v6.8c0 1.72-.32 2.84-.96 3.64-.84 1-2.16 1.36-3.56 1.16l-.48-2.48zM32.16 9c0-3.4 2.36-5.92 5.72-5.92S43.6 5.6 43.6 9s-2.36 5.76-5.72 5.76S32.16 12.4 32.16 9zm8.8 0c0-2.04-1.2-3.48-3.08-3.48-1.88 0-3.08 1.44-3.08 3.48s1.2 3.32 3.08 3.32c1.88 0 3.08-1.28 3.08-3.32zM45.76 1h2.72v5.24c.72-1.16 1.96-2.08 3.68-2.08C54.56 4.16 56 5.72 56 8.52V15h-2.72V9.08c0-1.68-.84-2.68-2.28-2.68-1.4 0-2.52 1.04-2.52 2.76V15h-2.72V1z" />
    </svg>
  );
}

function PlanetscaleLogo(props: SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...props}>
      <title>Planetscale</title>
      <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>
  );
}
Social Proof Vercel

Social Proof Vercel
