import Image from "next/image";

import CommonBanner from "../../../components/CommonBanner";
import Badge from "../../../components/ui/Badge";
import Button from "../../../components/ui/Button";
import CtaSection from "../../../components/CtaSection";

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

const useCases: UseCase[] = [
  { title: "Media verification for newsrooms", icon: "/images/news.svg" },
  { title: "Fraud prevention for financial institutions", icon: "/images/marketing.svg" },
  { title: "Authenticity checks for e‑commerce listings", icon: "/images/research.svg" },
  { title: "Compliance support for regulated industries", icon: "/images/compliance.svg" },
];

export default function ForCompaniesPage() {
  return (
    <main>
      <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>

        <CommonBanner
          badge="AI ANALYZER"
          title='Bring Transparency To <span class="text-gradient">Visual Content At Scale</span>'
          description="Help your teams identify AI-generated images across supported platforms, reduce misinformation risks, and make faster content decisions with AI-powered image verification."
          buttonText="Get Access Key"
          className="pt-34 pb-12 sm:pt-40 sm:pb-16 md:pt-48 md:pb-20"
        />

        <section className="py-8 sm:py-10 md:py-12 2xl:py-section">
          <div className="container-1655">
            <div className="gradient4 overflow-hidden rounded-3xl px-5 py-8 text-white sm:px-6 md:py-12 lg:px-0 2xl:rounded-[40px] 2xl:py-25">
              <div className="container-k">
                <div className="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
                  <div className="text-center md:text-left max-w-195">
                    <Badge className="bg-white!">WHO WE ARE</Badge>

                    <h2 className="mt-4 2xl:mt-5 font-heading text-white text-center text-2xl font-medium capitalize leading-tight lg:text-3xl 2xl:text-5xl 2xl:leading-14.5">
                      Why Companies Use KleboAi
                    </h2>
                  </div>

                  <div className="rounded-xl bg-white px-6 py-5 text-center shadow-button w-auto mx-auto md:ms-auto md:mr-0 md:max-w-52.5 md:px-8 md:py-6">
                    <p className="text-sm font-semibold text-heading">
                      Verify with
                    </p>
                    <p className="mt-2 text-2xl font-bold text-gradient">
                      KleboAi
                    </p>
                  </div>
                </div>

                <div className="my-8 h-px w-full bg-white/35 sm:my-10 lg:my-12.5" />
                    <p className="text-base leading-7 text-white sm:text-lg md:text-xl text-center md:text-left">
                    Organisations face increasing challenges verifying the
                    authenticity of digital content. KleboAi provides real-time
                    detection of AI-generated images and videos, helping companies
                    maintain trust, reduce misinformation risks, and protect brand
                    integrity.
                    </p>
              </div>
            </div>
          </div>
        </section>
      </div>

      <section className="py-8 sm:py-10 md:py-12 2xl:py-section">
        <div className="container-k">
          <div className="grid gap-6 md:grid-cols-12 md:gap-6 xl:gap-12">
            <div className="md:col-span-7 text-center md:text-left">
              <Badge>GROW YOUR CONNECTIONS</Badge>

              <h2 className="mt-4 2xl:mt-5 font-heading text-heading text-2xl font-medium capitalize leading-tight lg:text-3xl 2xl:text-5xl 2xl:leading-14.5">
                Join The{" "}
                <span className="text-gradient">
                  KleboAi Member Network
                </span>
              </h2>

              <div className="mt-4 max-w-176 space-y-4 text-base leading-7 text-heading sm:text-lg md:mt-5 md:text-xl">
                <p>
                  Commercial websites can become part of the KleboAi trusted-site
                  network by registering their domain in the KleboAi extension
                  member list.
                </p>

                <p>
                  By including the “Verify with Klebo” icon on your pages, your
                  users can check the authenticity of images and videos as they
                  browse.
                </p>

                <p>
                  The result is higher trust, reduced misinformation risk, and a
                  stronger reputation for authenticity across your digital
                  ecosystem.
                </p>
              </div>
            </div>

            <div className="md:col-span-5">
              <div className="flex h-full items-center justify-center lg:justify-end">
                <Image
                  src="/images/kleboai-img.svg"
                  alt="KleboAi Trusted Partner"
                  width={430}
                  height={430}
                  className="w-full max-w-[280px] sm:max-w-[360px] lg:max-w-[430px]"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-8 text-center sm:py-10 md:py-12 2xl:py-section">
        <div className="container-k">
          <Badge>USE CASES</Badge>

          <h2 className="mx-auto max-w-180 mt-4 2xl:mt-5 font-heading text-heading text-2xl font-medium capitalize leading-tight lg:text-3xl 2xl:text-5xl 2xl:leading-14.5">
            Built For Teams That Need{" "}
            <span className="text-gradient">Trusted Visual Content</span>
          </h2>

          <div className="mx-auto mt-10 grid gap-4 sm:grid-cols-2 lg:mt-14 xl:mt-25 lg:grid-cols-4 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>

                <p className="text-base font-medium leading-6 text-heading md:text-xl">
                  {item.title}
                </p>
              </div>
            ))}
          </div>

          <Button className="mt-10 lg:mt-14 xl:mt-25">
            Contact Enterprise Team
          </Button>
        </div>
      </section>

      <CtaSection
        title="Ready To Bring More Transparency To Visual Content?"
        description="Help your team identify AI-generated images faster and make more informed decisions."
        buttonText="Schedule a Demo"
        image="/images/company-cta.png"
        imageClassName="!h-auto !top-auto !bottom-0 !translate-y-0 2xl:!max-w-2xl"
      />
    </main>
  );
}