"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { useEffect } from "react";
import { HeroDataStreamEffect } from "@/components/hero-data-stream-effect";

export function Hero() {
    useEffect(() => {
        // Initialize AOS
        if (typeof window !== "undefined") {
            const AOS = require("aos");
            AOS.init({
                duration: 1000,
                once: true,
            });
        }
    }, []);

    return (
        <section className="relative py-20 mb-14 overflow-visible">
            <HeroDataStreamEffect />
            <svg className="absolute inset-0 w-full h-full -z-10 scale-[330%]">
                <image
                    href="/images/pattern-header.svg"
                    width="100%"
                    height="100%"
                    preserveAspectRatio="xMidYMid slice"
                />
            </svg>
            <div className="container mx-auto px-6 relative">
                <div className="max-w-4xl mx-auto space-y-6">
                    <h1
                        className="hero-header text-5xl md:text-7xl font-extralight text-center uppercase space-y-2"
                        data-aos="fade-up"
                        data-aos-delay="200"
                    >
                        <div>Artiv8</div>
                        <div className="font-pp-mondwest font-normal">Multi-Agent</div>
                        <div className="font-pp-mondwest font-normal">Framework</div>
                    </h1>
                    <p
                        className="text-xl max-w-2xl text-center font-semi-light mx-auto"
                        data-aos="fade-up"
                        data-aos-delay="300"
                    >
                        Orchestrate AI agents with unparalleled precision. Build scalable, intelligent applications that
                        push the boundaries of what's possible.
                    </p>
                    <div className="flex" data-aos="fade-up" data-aos-delay="400">
                        <Link href="https://github.com/barudak21/artivate" passHref className="mx-auto">
                            <Button
                                size="lg"
                                className="bg-[#5e51ec] hover:bg-[#5e51ec]/60 text-white uppercase text-sm font-fk-grotesk-mono font-normal py-3 px-12"
                            >
                                Learn More
                            </Button>
                        </Link>
                    </div>
                    <div data-aos="fade-up" data-aos-delay="500">
                        <img src="/images/pixel-arrow.svg" alt="Arrow" className="mx-auto mt-20 animate-bounce" />
                    </div>
                </div>
            </div>
            <img
                src="/images/3d-hero.webp"
                alt="3D"
                className="absolute z-50 -bottom-[100px] left-12 w-[300px]"
                data-aos="fade-up"
                data-aos-delay="600"
            />
        </section>
    );
}