import Image from "next/image";
import Badge from "../ui/Badge";

interface Feature {
  icon: string;
  title: string;
  description: string;
}

const features: Feature[] = [
  {
    icon: "/images/click.svg",
    title: "One-Click Detection",
    description:
      "No uploads, screenshots, or complex steps. Just click Analyze AI.",
  },
  {
    icon: "/images/score.svg",
    title: "AI Confidence Score",
    description: "See how likely an image is AI-generated.",
  },
  {
    icon: "/images/target.svg",
    title: "Works Across Websites",
    description: "Analyze images while browsing normally.",
  },
  {
    icon: "/images/browser.svg",
    title: "Browser-Native Detection",
    description:
      "Analyze images instantly without leaving this page.",
  },
  {
    icon: "/images/check.svg",
    title: "Instant Results",
    description: "Get analysis in seconds.",
  },
  {
    icon: "/images/extension.svg",
    title: "Browser Extension",
    description:
      "Works seamlessly with your setup—no extra software needed.",
  },
];

export default function FeaturesSection() {
  return (
    <section className="py-8 md:py-12 2xl:py-section">
      <div className="container-1655">
        <div className="gradient4 overflow-hidden rounded-3xl py-8 md:py-12 2xl:rounded-[40px] 2xl:py-section">
          <div className="container-k">
            <div className="mx-auto max-w-4xl text-center">
              <Badge>Features</Badge>

              <h2 className="font-heading mt-5 text-center text-xl font-medium capitalize leading-tight text-white sm:text-2xl md:text-3xl lg:text-5xl lg:leading-14.5">
                Everything You Need To Verify AI Images
              </h2>
            </div>

            <div className="mt-15 grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-0 xl:grid-cols-3">
              {features.map((feature) => (
                <div
                  key={feature.title}
                  className="
                    feature-card
                    group
                    relative
                    rounded-2xl
                    border border-white/50
                    p-4
                    sm:rounded-none
                    sm:border-0
                    sm:p-5
                    xl:p-7
                    sm:max-xl:[&:not(:nth-child(2n))]:border-r
                    sm:max-xl:[&:not(:nth-last-child(-n+2))]:border-b
                    xl:[&:not(:nth-child(3n))]:border-r
                    xl:[&:nth-child(-n+3)]:border-b
                  "
                >
                  <div className="feature-icon-circle mb-4 items-center lg:mb-6">
                    <Image
                      src={feature.icon}
                      alt={feature.title}
                      width={28}
                      height={28}
                      className="h-7 w-7"
                    />
                  </div>

                  <h3 className="font-body text-xl font-medium leading-7 text-white">
                    {feature.title}
                  </h3>

                  <p className="font-body mt-2.5 text-base font-normal leading-[140%] text-white md:text-xl">
                    {feature.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}