"use client";

import Image from "next/image";

import { Icons } from "@/components/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const logos = [
  "digital",
  "docker",
  "gcp",
  "gitlab",
  "google",
  "kubernetes",
  "meta",
  "pack",
  "slack",
  "terraform",
];

export default function Component() {
  return (
    <section className="relative w-full overflow-hidden bg-gray-50 py-24 dark:bg-background">
      <div>
        <svg
          className="absolute top-0 right-20 text-neutral-100 dark:text-neutral-800"
          fill="none"
          height="149"
          viewBox="0 0 259 149"
          width="259"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_450_3432)">
            <path
              d="M-302.316 -438C-345.03 -335.213 -349.374 -223.272 -302.316 -158.312C-247.534 -82.6905 -123.092 -70.7382 91.5694 -211.017C-164.578 460.946 374.375 -176.105 204.032 128"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="40"
            />
          </g>
          <defs>
            <clipPath id="clip0_450_3432">
              <rect fill="white" height="149" width="259" />
            </clipPath>
          </defs>
        </svg>
        <svg
          className="absolute bottom-0 left-0 text-neutral-100 dark:text-neutral-800"
          fill="none"
          height="193"
          viewBox="0 0 557 193"
          width="557"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M532.397 459.432C547.052 349.092 522.275 239.841 460.008 189.274C387.521 130.408 264.226 151.071 93.1851 342.128C166.688 -373.233 -189.02 381.602 -103.19 43.7707"
            stroke="currentColor"
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="40"
          />
        </svg>
      </div>

      <div className="relative z-10 mx-auto max-w-4xl px-6 lg:px-0">
        <div className="mx-auto mb-16 grid max-w-2xl grid-cols-5 gap-6">
          {logos.map((logo, index) => {
            const k = `integration_ico${index}`;
            return (
              <Image
                alt=""
                className={`size-20 ${index % 2 === 1 && index < 5 ? "translate-y-10" : ""}  ${index % 2 === 0 && index > 5 ? "translate-y-10" : ""} object-cover`}
                height={720}
                key={k}
                src={`https://res.cloudinary.com/dvwtcsh5v/image/upload/v1771329695/${logo}.png`}
                width={1080}
              />
            );
          })}
        </div>

        <div className="flex flex-col items-center text-center">
          <Badge
            className="mb-6 border-none bg-white py-0.5 font-medium shadow dark:bg-neutral-800"
            variant="secondary"
          >
            <Icons.zap className="size-3 fill-neutral-400 text-neutral-400" />
            Integrations
          </Badge>

          <h1 className="mb-4 font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
            Integrate with favorite tools
          </h1>

          <p className="mb-8 max-w-xl text-neutral-600 dark:text-neutral-400">
            Real stories from teams transforming workflows with Beam.
          </p>

          <Button className="rounded-lg border-blue-600 bg-blue-700 px-6 py-2 font-medium text-white hover:bg-blue-600">
            Explore Integrations
          </Button>
        </div>
      </div>
    </section>
  );
}