"use client";
import Image from "next/image";

import CommonBanner from "../../../components/CommonBanner";
import CtaSection from "../../../components/CtaSection";
import { useModal } from "../../../lib/modal-system/ModalContext";

export default function AboutPage() {
  const { openModal } = useModal();
  return (
    <>
      <div className="relative overflow-hidden pt-36 md:pt-40 xl:pt-44 2xl:pt-48">
        <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="ABOUT US"
          title='Bringing More <span class="text-gradient">Transparency To Digital Images</span>'
          description="As AI-generated content becomes increasingly realistic, distinguishing between authentic and synthetic images has never been more challenging. AI Analyzer helps individuals, researchers, businesses, and content teams make more informed decisions by providing fast and accessible AI image detection."
          mission="Our mission: make AI-generated content easier to identify and understand."
        />

        <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-2 2xl:gap-15">
              <div className="glass-card-shadow rounded-xl 2xl:rounded-2xl p-4 xl:p-8 2xl:px-15">
                <div className="shadow-button absolute top-3 right-3 xl:top-4 xl:right-4 2xl:top-6 2xl:right-6 rounded-lg bg-white p-2 2xl:px-6 2xl:py-5 text-center">
                  <p className="text-sm font-semibold text-heading">
                    Verify with
                  </p>

                  <p className="text-gradient mt-1 text-xl font-bold">
                    KleboAi
                  </p>
                </div>

                <h2 className="max-w-65 font-heading text-xl md:text-2xl xl:text-4xl font-semibold leading-tight text-heading 2xl::text-5xl">
                  Who <br />
                  <span className="text-gradient">We Are</span>
                </h2>

                <p className="mt-4 xl:mt-6 2xl:mt-7.5 text-base leading-7 text-heading lg:text-lg">
                  KleboAi was created to help people understand the origins of
                  the digital content they encounter every day. As AI-generated
                  media becomes more realistic, transparency becomes essential.
                </p>
              </div>

              <div className="glass-card-shadow rounded-xl 2xl:rounded-2xl p-4 xl:p-8 2xl:px-15">
                <h2 className="max-w-65 font-heading text-xl md:text-2xl xl:text-4xl font-semibold leading-tight text-heading">
                  Our <br />
                  <span className="text-gradient">Vision</span>
                </h2>

                <p className="mt-4 xl:mt-6 2xl:mt-7.5 text-base leading-7 text-heading lg:text-lg">
                  We believe in a future where humans and AI coexist with
                  clarity, trust, and accountability. Our tools empower users,
                  journalists, researchers, and organisations to identify
                  synthetic media instantly.
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>

      <CtaSection
        title="Have questions or want to collaborate?"
        description="Start identifying AI-generated images in seconds and gain greater clarity into the content you encounter online."
        buttonText="Contact Us"
        onButtonClick={() => openModal("CONTACT_US", {})}
        image="/images/cta-2.png"
      />
    </>
  );
}
