import Image from "next/image";
import { HiSparkles } from "react-icons/hi2";

import SectionTitle from "./SectionTitle";
import Button from "../ui/Button";

export default function LiveDemo() {
  return (
    <section className="py-8 md:py-12 2xl:py-section">
      <div className="container-k">
        <SectionTitle
          badge="Demo"
          title={'Live <span class="text-gradient">Demo</span>'}
        >
          This example shows how KleboAI overlays an AI-likelihood score on
          images in real time.
        </SectionTitle>

        <div className="glass relative mx-auto mt-6 max-w-6xl overflow-hidden rounded-3xl p-2 sm:mt-8 sm:p-3 md:mt-10 lg:mt-8">
          <Image
            src="/images/live-demo.jpg"
            width={1000}
            height={430}
            alt="Live demo"
            className="aspect-[16/10] w-full rounded-2xl object-cover object-top sm:aspect-[18/10] md:aspect-[21/10]"
          />

          <div className="absolute bottom-5 right-5 sm:bottom-6 sm:right-6 lg:bottom-8 lg:right-8">
            <Button icon={<HiSparkles size={18} />}>
              Analyse AI
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}