"use client";

import Image from "next/image";
import Badge from "../../../components/ui/Badge";
import SectionTitle from "../../../components/home/SectionTitle";
import AiRiskCard from "../../../components/detect-ai-generated-images/AiRiskCard";
import FaqSection, { FaqItem } from "../../../components/FaqSection";
import DetectorPanel from "../../../components/detect-ai-generated-images/DetectorPanel";

interface UseCase {
  title: string;
  icon: string;
  discription: string;
}

const useCases: UseCase[] = [
  {
    title: "Simple to Use",
    icon: "/images/use.svg",
    discription:
      "No technical know-how needed; just drop in your file or easily paste a link, and get a clear, instant result within seconds.",
  },
  {
    title: "Precision at Every Pixel",
    icon: "/images/precision.svg",
    discription:
      "KleboAi examines fine details most tools skip, spotting subtle artifacts and inconsistencies that reveal an image's true origin.",
  },
  {
    title: "Works on Any Image Type",
    icon: "/images/any-img.svg",
    discription:
      "From portraits to product shots to screenshots, our platform handles every format and delivers a reliable result every time.",
  },
];
const items = [
  {
    title: "Fake News and Misinformation",
    description:
      "One fake photo is all it takes to shift public opinion before anyone checks it. Misinformation spreads fast, especially on social media. Verify the image with KleboAi, before you trust it or share it.",
    image: "/images/fake-news.svg",
  },
  {
    title: "Dating and Catfishing Scams",
    description:
      "Not every profile photo belongs to the person behind the account, and scammers rely on that going unnoticed. Run any photo through our AI image analyzer before you invest time or your feelings.",
    image: "/images/dating.svg",
  },
  {
    title: "Stolen Art and Fake Credit",
    description:
      "AI art can copy an artist's style so closely that credit gets lost along the way, making it harder for artists to protect their income. Check with KleboAi before you publish or pay for someone's work.",
    image: "/images/fake-credit.svg",
  },
];

const faq: FaqItem[] = [
  {
    question: "What does KleboAi do exactly?",
    answer:
      "KleboAi checks any image you upload and tells you whether it's AI-generated or human-made. It works across images created by all major AI tools.",
  },
  {
    question: "How accurate is the KleboAi AI image detector?",
    answer:
      "KleboAi is built to be reliable across a wide range of images, using detection models trained to recognize patterns from major AI generators.",
  },
  {
    question: "What types of images can I upload to KleboAi?",
    answer:
      "KleboAi supports a wide range of image types, from personal photos and product shots to digital art and screenshots, in standard formats like JPG and PNG.",
  },
  {
    question: "Does KleboAi store the images I upload?",
    answer:
      "No, KleboAi doesn't keep your images. Each upload is analyzed once to generate a result, and nothing is saved or retained on our servers afterward.",
  },
];

export default function DetectAiGeneratedImagesPage() {
  return (
    <>
      <div className="relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <Image
            src="/images/common-banner-bg.png"
            alt="Hero Background"
            fill
            priority
            className="object-cover"
          />
        </div>

        <section className="relative pt-36 md:pt-40 xl:pt-44 pb-12 sm:pb-16 md:pb-20 2xl:pb-section 2xl:pt-48">
          <div className="container-k relative z-10">
            <div className="grid lg:grid-cols-2 gap-10">
              <div className="flex flex-col items-center text-center lg:text-left lg:items-start justify-center order-2 lg:order-1">
                <Badge>AI detect generated images</Badge>

                <h1 className="mx-auto mt-4 max-w-4xl font-heading text-heading text-3xl font-medium leading-tight sm:mt-6 lg:text-4xl 2xl:mt-10">
                  Is This Image AI-Generated?{" "}
                  <span className="text-gradient">KleboAi</span> Knows in
                  Seconds
                </h1>
                <p className="mx-auto mt-5 max-w-204 text-base leading-7 text-text xl:text-lg ">
                  KleboAi is an advanced AI detector that checks any image in
                  seconds and tells you whether it's AI-generated or human-made.
                  Upload a photo or video and get an instant percentage
                  breakdown, powered by detection models trained across major
                  generators. See the real source behind any content before you
                  trust it, backed by a clear confidence score.
                </p>
              </div>
              <DetectorPanel />
            </div>
          </div>
        </section>
        <section className="py-8 md:py-12 2xl:py-section">
          <div className="container-k">
            <SectionTitle
              badge="Advanced AI Image Detection Tool"
              title={
                "Smart AI Image and   <span class='text-gradient'>Deepfake Detector </span> That's Hard to Fool"
              }
              className="max-w-3xl!"
            >
              Generative AI tools improve constantly, and so do the fakes they
              produce. KleboAi's detection engine evolves right along with them,
              giving you reliable results even as new image and deepfake
              generators enter the market.
            </SectionTitle>
            <div className="mx-auto mt-8 grid gap-4 sm:grid-cols-2 lg:mt-10 xl:mt-15 lg:grid-cols-3 lg:gap-0">
              {useCases.map((item, index) => (
                <div
                  key={item.title}
                  className={`
                          rounded-2xl border-2 border-border/30 px-4 py-6 lg:px-6 lg:py-0 text-center
                          lg:rounded-none lg:border-y-0 lg:border-r-0
                          ${index !== 0 ? "lg:border-l" : "lg:border-l-0"}
                        `}
                >
                  <div className="step-icon-circle shadow-icon mx-auto mb-5 sm:mb-6">
                    <Image
                      src={item.icon}
                      alt={item.title}
                      width={26}
                      height={26}
                    />
                  </div>
                  <h3 className="font-body text-lg font-medium leading-7 text-heading">
                    {item.title}
                  </h3>
                  <h3 className="mt-2.5 text-base leading-[140%] text-text">
                    {item.discription}
                  </h3>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>

      <section className="py-8 sm:py-10 md:py-12 2xl:py-section">
        <div className="container-k">
          <div className="mx-auto max-w-5xl text-center">
            <Badge>Where Verification Matters</Badge>

            <h2 className="mt-4 2xl:mt-5  mx-auto max-w-4xl font-heading text-heading  text-center text-2xl font-medium capitalize leading-tight lg:text-3xl 2xl:text-4xl 2xl:leading-11 ">
              Think Before You Trust: Where Our
              <span className="text-gradient">AI Image</span> Checker Matters
            </h2>

            <div className=" mt-5 text-base text-text lg:text-lg 2xl:text-xl 2xl:leading-7">
              <p>
                As AI-generated images get more convincing, the ways they get
                misused keep growing right along with them. KleboAi checks the
                image for you first, so you know what's real before you trust
                it.
              </p>
            </div>
          </div>
          <div className="mt-10 md:mt-20 space-y-10 md:space-y-15">
            {items.map((item, index) => (
              <AiRiskCard
                key={item.title}
                {...item}
                reverse={index % 2 === 1}
              />
            ))}
          </div>
        </div>
      </section>
      <section className="py-8 sm:py-10 md:py-12 2xl:py-section">
        <div className="container-k">
          <SectionTitle
            badge="FAQ"
            className="max-w-2xl!"
            title={
              'The Questions You are  <span class="text-gradient">Probably Asking</span> Us'
            }
          ></SectionTitle>

          <FaqSection />
        </div>
      </section>
    </>
  );
}