import { motion } from "framer-motion";

const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.6 },
};

const staggerContainer = {
  animate: {
    transition: {
      staggerChildren: 0.1,
    },
  },
};

export const Projects = () => {
  return (
    <motion.section
      id="projects"
      className="projects"
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6 }}
    >
      <motion.h2
        variants={fadeInUp}
        initial="initial"
        whileInView="animate"
        viewport={{ once: true }}
      >
        My Projects
      </motion.h2>
      <motion.div
        className="project-grid"
        variants={staggerContainer}
        initial="initial"
        whileInView="animate"
        viewport={{ once: true }}
      >
        <motion.div
          className="project-card"
          variants={fadeInUp}
          whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
          onClick={() => window.open("https://app.powerbi.com/view?r=eyJrIjoiZWVlNmI0MzUtMmVlOC00OTY4LWExODAtYzljYThjNjU5M2JkIiwidCI6ImE5ZjM5NjdkLTQwOWItNDNmNy05MjQ2LTY2YjljNTQzYTRkNSJ9", "_blank")}

        >
          <motion.div
            className="project-image"
            style={{ backgroundImage: "url('/projects/robert-de-niro-project.jpg')" }}
            whileHover={{ scale: 1.05, transition: { duration: 0.2 }}}
          />
          <h3>Robert De Niro: A Data-Driven Filmography</h3>
          <p>
            An interactive deep dive into Robert De Niro&apos;s film career through a crunching the data from Movie Database APIs. 
          </p>
          <div className="project-tech">
            <span>SQL</span>
            <span>Python</span>
            <span>PowerBI</span>
          </div>
        </motion.div>

        <motion.div
          className="project-card"
          variants={fadeInUp}
          whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias"  }}
          onClick={() => window.open("https://app.powerbi.com/view?r=eyJrIjoiMTdmMzVlNGMtYzhkMS00OTFkLWIwYzEtZmY2ODIyYjJkOGY1IiwidCI6ImE5ZjM5NjdkLTQwOWItNDNmNy05MjQ2LTY2YjljNTQzYTRkNSJ9&pageName=b178d00c0c03a7a3409e", "_blank")}
        >
          <motion.div
            className="project-image"
            style={{
              backgroundImage: "url('/projects/little-dictionary-of-fashion.jpg')",
            }}
            whileHover={{ scale: 1.05 }}
            transition={{ duration: 0.2 }}
          />
          <h3>Little Dictionary of Fashion by Christian Dior</h3>
          <p>
            An interactive Power BI applet allowing for exploration of Christian Dior&apos;s fashion from the 50s.
          </p>
          <div className="project-tech">
            <span>Python</span>
            <span>PowerBI</span>
          </div>
        </motion.div>

        <motion.div
          className="project-card"
          variants={fadeInUp}
          whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
          onClick={() => window.open("https://github.com/millyz2023/Brown-Housing-Notification/", "_blank")}
        >
          <motion.div
            className="project-image"
            style={{
              backgroundImage: "url('/projects/brown-housing-notifications.jpg')",
            }}
            whileHover={{ scale: 1.05 }}
            transition={{ duration: 0.2 }}
          />
          <h3>Brown Housing Notifications</h3>
          <p>
            A python script that scrapes Brown University&apos;s off-campus housing website and sends notifications via email when new housing options become available.
          </p>
          <div className="project-tech">
            <span>Python</span>
            <span>RESTful APIs</span>
            <span>SMTP</span>
          </div>
        </motion.div>

        <motion.div
          className="project-card"
          variants={fadeInUp}
          whileHover={{ y: -10, transition: { duration: 0.2 }, cursor: "alias" }}
          onClick={() => window.open("https://github.com/millyz2023/Find-your-flight", "_blank")}
        >
          <motion.div
            className="project-image"
            style={{ backgroundImage: "url('/projects/find-your-flight.jpg')" }}
            whileHover={{ scale: 1.05, transition: { duration: 0.2 }}}
          />
          <h3>Find Your Flight</h3>
          <p>
            Uses the Flight Search APIs to ease the process of making a perfect travel plan.
          </p>
          <div className="project-tech">
            <span>Python</span>
            <span>RESTful APIs</span>
          </div>
        </motion.div>
      </motion.div>
    </motion.section>
  );
};