"use client";
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";
import { useModal } from "../../../lib/modal-system/ModalContext";
import TrustedClientsSection from "../../../components/home/TrustedClientsSection";
import CustomLink from "../../../components/ui/CustomLink";

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() {
  const { openModal } = useModal();
  return (
    <main>
      <div className="relative overflow-hidden pt-36 md:pt-40 xl:pt-44 2xl:pt-48 animated-bg">
       
        <div className="bg-grid" />
        <div className="bg-light" />

        {/* Floating lights */}
        <div className="bg-orb-purple" />
        {/* <div className="bg-orb-blue" /> */}
        <div className="animated-bg-content">

        <CommonBanner
          badge="AI ANALYZER"
          title='For <span class="text-gradient">Companies</span>'
          description="AI‑Generated Content Transparency for Your Organisation"
          className="pb-12 sm:pb-16 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 font-medium capitalize leading-tight text-2xl lg:text-3xl 2xl:text-4xl 2xl:leading-11">
                      Why Companies Use KleboAi
                    </h2>
                  </div>

                  <CustomLink
                    href={"mailto:info@klebo.com"}
                    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>
                  </CustomLink>
                </div>

                <div className="my-4 h-px w-full bg-white/35 sm:my-6 lg:my-8" />
                <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-medium capitalize leading-tight text-2xl lg:text-3xl 2xl:text-4xl 2xl:leading-11">
                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 md:mt-5 md:text-lg">
                <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>

            <CustomLink
              href={"mailto:info@klebo.com"}
              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>
            </CustomLink>
          </div>
        </div>
      </section>
      </div>

      <section className="py-8 text-center sm:py-10 md:py-12 2xl:py-section bg-purple-100/50 relative overflow-hidden">
      <div className="bg-grid" />
        <div className="container-k">
          <Badge>USE CASES</Badge>

          <h2 className="mx-auto max-w-180 mt-4 2xl:mt-5 font-heading text-heading font-medium capitalize leading-tight text-2xl lg:text-3xl 2xl:text-4xl 2xl:leading-11">
            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
            onClick={() => openModal("CONTACT_US", {})}
            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"
        onButtonClick={() => openModal("CONTACT_US", {})}
        image="/images/company-cta.png"
        imageClassName="!h-auto !top-auto !bottom-0 !translate-y-0 2xl:!max-w-2xl"
      />

      <section className="text-center">
        <div className="container-k">
          <CustomLink
            href="https://drive.google.com/file/d/1DrZknXy7vgAgWWLyxuFxvg_7imeGVtU0/view?usp=sharing"
            target="_blank"
          >
            <Button>Corporate White paper</Button>
          </CustomLink>
        </div>
      </section>

      <TrustedClientsSection />
    </main>
  );
}