"use client";
import Image from "next/image";
import { JSX } from "react";
import img1 from "@/assets/images/feature-1.svg";
import img2 from "@/assets/images/feature-2.svg";
import img3 from "@/assets/images/feature-3.svg";
import img4 from "@/assets/images/feature-4.svg";
import img5 from "@/assets/images/feature-5.svg";

interface IFeature {
  img: JSX.Element;
  title: string;
  description: string;
}

export default function FeaturesSection() {
  const features: IFeature[] = [
    {
      img: <Image src={img1} alt="" />,
      title: "Feature 01",
      description:
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    },
    {
      img: <Image src={img2} alt="" />,
      title: "Feature 02",
      description:
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    },
    {
      img: <Image src={img3} alt="" />,
      title: "Feature 03",
      description:
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    },
    {
      img: <Image src={img4} alt="" />,
      title: "Feature 04",
      description:
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    },
    {
      img: <Image src={img5} alt="" />,
      title: "Feature 05",
      description:
        "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    },
  ];

  return (
    <section id="features">
      <div className="relative mx-auto container max-w-[1110px] pt-48 px-8">
        <p className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]">
          Key Features
        </p>

        <h2 className="mb-3 font-serif text-4xl font-bold text-white">
          The Intelligence Layer for BNB Smart Chain
        </h2>

        <p className="mb-12 text-white/75">
          Collano is an advanced, open-source platform that seamlessly
          integrates state-of-the-art language <br /> models with BNB Smart
          Chain technology. We&apos;ve created an intelligent interface that
          understands your <br /> needs and executes complex blockchain
          operations with unprecedented ease.
        </p>

        <div className="grid grid-cols-4 gap-5">
          {features.map((feature, index) => {
            return (
              <div
                key={index}
                className={`${
                  index === 4 ? "col-span-4 px-12" : "px-5"
                } py-8 border border-white/10 hover:border-[#09C04C] bg-white/10 hover:bg-[#09C04C]/10 rounded-xl flex ${
                  index !== 4 ? "flex-col" : ""
                } items-center gap-5 duration-200`}
              >
                {feature.img}

                <div
                  className={`flex flex-col ${
                    index !== 4 ? "items-center" : ""
                  }`}
                >
                  <h3
                    className={`mb-2 font-serif text-2xl font-bold  text-white`}
                  >
                    {feature.title}
                  </h3>

                  <p
                    className={`${
                      index !== 4 ? "text-center" : ""
                    } text-white/75`}
                  >
                    {feature.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
