"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 stats = [
  { description: "Lorem ipsum dolor sit amet consectetur.", value: "+35k" },
  { description: "Lorem ipsum dolor sit amet consectetur.", value: "+96m" },
  { description: "Lorem ipsum dolor sit amet consectetur.", value: "88%" },
  { description: "Lorem ipsum dolor sit amet consectetur.", value: "24.5m" },
];

const logos = [
  {
    icon: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296407/icon_06.svg",
    name: "GitLab",
  },
  {
    icon: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296406/icon_01.svg",

    name: "Clearbit",
  },
  {
    icon: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296405/icon_04.svg",

    name: "coda",
  },
  {
    icon: "https://res.cloudinary.com/dvwtcsh5v/image/upload/v1770296406/icon_02.svg",

    name: "dokey.",
  },
];

export default function Component() {
  return (
    <section className="relative w-full overflow-hidden bg-white py-44 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="89"
          viewBox="0 0 218 89"
          width="218"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g clipPath="url(#clip0_452_3433)">
            <path
              d="M632.397 459.26C647.052 348.921 622.275 239.669 560.008 189.103C487.521 130.236 364.226 150.899 193.185 341.956C266.688 -373.405 -89.0201 381.43 -3.18972 43.599"
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="40"
            />
          </g>
          <defs>
            <clipPath id="clip0_452_3433">
              <rect fill="white" height="89" width="218" />
            </clipPath>
          </defs>
        </svg>
      </div>

      <div className="relative z-10 mx-auto max-w-6xl px-6 lg:px-0">
        <div className="grid grid-cols-1 items-start gap-12 lg:grid-cols-12">
          <div className="col-span-5 space-y-6">
            <Badge
              className="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" />
              Beam Stats
            </Badge>

            <h2 className="font-medium text-4xl text-neutral-900 tracking-tight sm:text-5xl dark:text-neutral-100">
              Cnippet empowers extraordinary teams.
            </h2>

            <Button className="roundedLg border-blue-700 bg-blue-700 px-6 py-2 font-medium text-white hover:bg-blue-800">
              Read Customer Stories
            </Button>
          </div>

          <div className="col-span-7 flex items-center justify-center lg:justify-end">
            <div className="grid grid-cols-2 divide-neutral-200 dark:divide-neutral-700">
              {logos.map((logo, index) => (
                <div
                  className={`flex items-center justify-center p-7 text-neutral-900 dark:border-black dark:bg-neutral-800 dark:text-neutral-100 ${index === 0 && "border-r border-b"} ${index === 1 && "border-b"} ${index === 2 && "border-r"}`}
                  key={logo.name}
                >
                  <Image
                    alt=""
                    className="w-40"
                    height={720}
                    src={logo.icon}
                    width={1080}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat) => (
            <div
              className="rounded-2xl bg-gray-100 p-8 text-center dark:bg-neutral-800"
              key={stat.value}
            >
              <h3 className="mb-3 font-semibold text-4xl! text-neutral-900 tracking-tight dark:text-neutral-100">
                {stat.value}
              </h3>
              <p className="text-neutral-600 text-sm dark:text-neutral-400">
                {stat.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Logo

Cnippet empowers extraordinary teams.

+35k

+96m

88%

24.5m
