import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import PageAnimations from "@/components/PageAnimations";
import PortfolioList from "@/components/PortfolioList";
import Link from "next/link";

export const metadata = {
    title: "Portfolio | Aasi Tech",
    description: "Explore our latest digital solutions, case studies, and successful projects across web development, mobile apps, and UX/UI design.",
};

export default function PortfolioPage() {
    return (
        <>
            <Navbar />

            {/* Portfolio Hero */}
            <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 bg-dark-bg overflow-hidden">
                {/* Background Details */}
                <div className="absolute inset-0 bg-[url('/images/grid-pattern.svg')] opacity-5"></div>
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-primary/20 blur-[120px] rounded-full pointer-events-none"></div>

                <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                    <div className="max-w-3xl mx-auto text-center gsap-fade-up">
                        <span className="text-primary font-bold tracking-wider uppercase text-sm mb-4 inline-block bg-primary/10 px-4 py-1.5 rounded-full border border-primary/20">
                            Our Work
                        </span>
                        <h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white mb-6 leading-tight">
                            Digital Excellence in <span className="gradient-text">Action</span>
                        </h1>
                        <p className="text-lg md:text-xl text-text-light-muted mb-10 leading-relaxed">
                            Explore our portfolio of successful projects where we've helped businesses transform their ideas into powerful digital experiences.
                        </p>
                    </div>
                </div>
            </section>

            <PortfolioList />

            {/* CTA Section */}
            <section className="py-20 bg-white relative overflow-hidden">
                <div className="absolute right-0 bottom-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>

                <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                    <div className="bg-dark-surface rounded-[2rem] p-10 md:p-16 text-center shadow-2xl relative overflow-hidden border border-border-dark">
                        <div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent opacity-60"></div>

                        <div className="relative z-10 max-w-2xl mx-auto gsap-fade-up">
                            <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">Have a project in mind?</h2>
                            <p className="text-lg text-text-light-muted mb-8">
                                Let's collaborate to build something extraordinary. Our team is ready to bring your vision to life.
                            </p>
                            <Link href="/contact" className="btn-primary inline-flex items-center gap-2 text-lg px-8 py-4">
                                Start a Project
                                <span className="material-symbols-outlined">arrow_forward</span>
                            </Link>
                        </div>
                    </div>
                </div>
            </section>

            <Footer />
            <PageAnimations />
        </>
    );
}
