import Link from "next/link";
import { Button } from "@/components/ui/button";

interface CTAProps {
    imageWidth?: number;
    imageHeight?: number;
}

export function CTA({ imageWidth = 970, imageHeight = 446 }: CTAProps) {
    return (
        <section className="relative py-20 text-[#060606] bg-[#101014]">
            <div className="container mx-auto px-4">
                <div className="relative p-8 overflow-hidden h-[446px]" data-aos="zoom-in" data-aos-duration="1000">
                    <svg
                        className="absolute inset-0 mx-auto animate-pulse"
                        style={{ animationDuration: "3s" }}
                        width={imageWidth}
                        height={imageHeight}
                        viewBox={`0 0 ${imageWidth} ${imageHeight}`}
                        preserveAspectRatio="none"
                    >
                        <image
                            href="/images/documentation-box.svg"
                            width="100%"
                            height="100%"
                            preserveAspectRatio="none"
                        />
                    </svg>
                    <div className="relative z-10 text-center space-y-6 flex flex-col justify-center items-center h-full">
                        <h2
                            className="text-3xl md:text-5xl font-extralight uppercase max-w-xs mx-auto"
                            data-aos="fade-up"
                            data-aos-delay="200"
                        >
                            View <span className="font-pp-mondwest font-normal">Documents</span>
                        </h2>
                        <p className="text-xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="300">
                            For a comprehensive understanding of our framework, including technical specifications and
                            integration guides, please refer to our detailed documentation. These resources are designed
                            to assist you in effectively utilizing Artiv8 for your projects.
                        </p>
                        <div data-aos="fade-up" data-aos-delay="400">
                            <Link href="https://github.com/barudak21/artivate" passHref>
                                <Button
                                    size="lg"
                                    className="bg-[#101014] hover:bg-[#101014]/80 px-12 text-sm text-white"
                                >
                                    LEARN MORE
                                </Button>
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
            <img
                src="/images/3d-cta.webp"
                alt="3D"
                className="absolute z-50 top-0 right-10 w-[200px]"
                data-aos="fade-up"
            />
        </section>
    );
}