import { motion, Variants } from "framer-motion";
import FullPageImage from "../components/fullPageImage";

interface Project {
    id: number;
    title: string;
    description: string;
    techStack: string[];
    image: string; // Ensure these images exist in public/ or use placeholders
    links: {
        demo?: string;
        repo?: string;
    };
}

const PROJECTS: Project[] = [
    {
        id: 1,
        title: "Digital Resume",
        description: "A fully responsive, glassmorphic portfolio site built to showcase my skills and experience. Features animated page transitions, typing effects, and a dynamic map component.",
        techStack: ["React", "TypeScript", "Framer Motion", "Vite"],
        image: "/digitCode.jpg",
        links: {
            repo: "https://github.com/Bayda77/resume-site",
            demo: "https://portfolio.sashabayda.ca"
        }
    },
];

const containerVariants: Variants = {
    hidden: { opacity: 0 },
    visible: {
        opacity: 1,
        transition: {
            staggerChildren: 0.15
        }
    }
};

const cardVariants: Variants = {
    hidden: { y: 50, opacity: 0 },
    visible: {
        y: 0,
        opacity: 1,
        transition: {
            type: "spring",
            stiffness: 100,
            damping: 12
        }
    }
};

export default function Projects() {
    return (
        <div style={{ position: "relative", width: "100%", minHeight: "100vh" }}>
            <div className="mainContentBlock" style={{ width: "100%", minWidth: "100vw", maxWidth: "100vw", paddingTop: "20px", paddingBottom: "10px", boxSizing: "border-box", display: "flex", justifyContent: "center", position: "relative", zIndex: 1 }}>
                <div className="projects-container">
                    <motion.h1
                        className="projects-title"
                        initial={{ y: -30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ duration: 0.8, ease: "easeOut" }}
                    >
                        Featured Projects
                    </motion.h1>

                    <motion.div
                        className="projects-grid"
                        variants={containerVariants}
                        initial="hidden"
                        animate="visible"
                    >
                        {PROJECTS.map((project) => (
                            <motion.div
                                key={project.id}
                                className="project-card"
                                variants={cardVariants}
                                whileHover={{ y: -10, transition: { duration: 0.2 } }}
                            >
                                <div className="project-image-container">
                                    <img
                                        src={project.image}
                                        alt={project.title}
                                        className="project-image"
                                    />
                                </div>
                                <div className="project-header">
                                    <h2 className="project-name">{project.title}</h2>
                                </div>

                                <div className="project-tech-stack">
                                    {project.techStack.map(tech => (
                                        <span key={tech} className="tech-chip">{tech}</span>
                                    ))}
                                </div>

                                <p className="project-description">
                                    {project.description}
                                </p>

                                <div className="project-links">
                                    {project.links.demo && (
                                        <a href={project.links.demo} className="project-link" target="_blank" rel="noopener noreferrer">
                                            Live Demo <span>→</span>
                                        </a>
                                    )}
                                    {project.links.repo && (
                                        <a href={project.links.repo} className="project-link" target="_blank" rel="noopener noreferrer">
                                            GitHub <span>↗</span>
                                        </a>
                                    )}
                                </div>
                            </motion.div>
                        ))}
                    </motion.div>
                </div>
            </div>
            <FullPageImage
                src="/20251111_224823.jpg"
                alt="projects background"
                credit="Sasha Bayda"
                isFixed={true}
            />
        </div>
    );
}