import Image from "next/image";
import Link from "next/link";

const portfolioProjects = [
    {
        title: "FinTech Dashboard",
        category: "UX Design & React Development",
        description: "A comprehensive financial dashboard providing real-time data visualization and secure transaction management for enterprise clients.",
        image: "/images/portfolio/fintech-dashboard.png",
        link: "/portfolio/case-study"
    },
    {
        title: "E-Commerce Platform",
        category: "Full Stack Development",
        description: "A headless commerce solution delivering unmatched speed and seamless shopping experiences across all devices and platforms.",
        image: "/images/portfolio/ecommerce-platform.png",
        link: "/portfolio/case-study"
    },
    {
        title: "Data Analytics Tool",
        category: "Big Data & Visualization",
        description: "An advanced analytics tool turning complex datasets into actionable insights with interactive charts and custom reporting.",
        image: "/images/portfolio/data-analytics.png",
        link: "/portfolio/case-study"
    },
    {
        title: "Telehealth App",
        category: "Mobile App Development",
        description: "A secure, HIPAA-compliant mobile application connecting patients with healthcare professionals for virtual consultations.",
        image: "/images/portfolio/telehealth-app.png",
        link: "/portfolio/case-study"
    }
];

export default function Portfolio() {
    return (
        <section className="py-24 lg:py-32 bg-light-bg relative overflow-hidden" id="portfolio">
            {/* Background elements */}
            <div className="absolute top-0 right-0 w-1/3 h-1/3 bg-primary/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/3 pointer-events-none" />
            <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-primary/5 rounded-full blur-[120px] translate-y-1/3 -translate-x-1/4 pointer-events-none" />

            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="flex flex-col md:flex-row md:justify-between md:items-end mb-16 gsap-fade-up">
                    <div className="max-w-2xl">
                        <span className="text-primary font-bold tracking-wider uppercase text-sm mb-3 flex items-center gap-2">
                            <span className="w-8 h-px bg-primary"></span>
                            Our Work
                        </span>
                        <h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-text-main leading-tight">
                            Featured <span className="gradient-text">Projects</span>
                        </h2>
                        <p className="mt-4 text-text-muted text-lg lg:text-xl max-w-xl">
                            Explore our recent digital solutions that drive growth, enhance user experience, and transform businesses.
                        </p>
                    </div>
                    <Link className="hidden md:inline-flex items-center gap-2 text-text-main font-semibold hover:text-primary transition-colors group mt-6 md:mt-0" href="/portfolio">
                        View All Projects
                        <span className="material-symbols-outlined transform group-hover:translate-x-1 transition-transform">arrow_forward</span>
                    </Link>
                </div>

                <div className="grid md:grid-cols-2 gap-8 lg:gap-12 gsap-stagger">
                    {portfolioProjects.map((project, index) => (
                        <div key={index} className="card-modern group flex flex-col h-full rounded-[2rem] overflow-hidden bg-white shadow-card hover:shadow-hover transition-all duration-300">
                            {/* Image Container */}
                            <Link href={project.link} className="relative aspect-[4/3] w-full block overflow-hidden">
                                <Image
                                    src={project.image}
                                    alt={project.title}
                                    fill
                                    className="object-cover transition-transform duration-700 group-hover:scale-105"
                                    sizes="(max-width: 768px) 100vw, 50vw"
                                />
                                {/* Overlay overlay */}
                                <div className="absolute inset-0 bg-dark-bg/10 group-hover:bg-dark-bg/0 transition-colors duration-500 z-10"></div>
                                {/* Category Badge Floating */}
                                <div className="absolute top-6 left-6 z-20">
                                    <span className="bg-white/90 backdrop-blur-md text-text-main px-4 py-1.5 rounded-full text-xs font-bold tracking-wide shadow-sm">
                                        {project.category}
                                    </span>
                                </div>
                            </Link>

                            {/* Content */}
                            <div className="p-8 lg:p-10 flex flex-col flex-grow">
                                <h3 className="text-2xl font-bold text-text-main mb-3 group-hover:text-primary transition-colors">
                                    <Link href={project.link}>{project.title}</Link>
                                </h3>
                                <p className="text-text-muted text-base lg:text-lg mb-8 flex-grow leading-relaxed">
                                    {project.description}
                                </p>

                                <div className="mt-auto pt-6 border-t border-border-light relative overflow-hidden">
                                    <Link
                                        href={project.link}
                                        className="inline-flex items-center gap-2 font-bold text-text-main group-hover:text-primary transition-colors"
                                    >
                                        Case Study
                                        <span className="material-symbols-outlined text-lg transform group-hover:translate-x-1 transition-transform">
                                            arrow_right_alt
                                        </span>
                                    </Link>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

                <div className="md:hidden mt-12 text-center">
                    <Link
                        className="btn-primary inline-flex items-center justify-center gap-2 isolate relative overflow-hidden group px-6 py-3"
                        href="/portfolio"
                    >
                        <span className="relative z-10 flex items-center gap-2 w-full h-full justify-center">
                            View All Projects
                            <span className="material-symbols-outlined text-sm">arrow_forward</span>
                        </span>
                        <div className="absolute inset-0 bg-gradient-to-r from-primary-light to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-[-1]" />
                    </Link>
                </div>
            </div>
        </section>
    );
}
