import { motion } from "framer-motion";
import VisitedMap from "../components/VisitedMap";
import BioSection from "../components/BioSection";
import "../styles/pages/about.css";
import BentoGrid from "../components/BentoGrid";

const ABOUT_TEXT = "Hey, I'm Sasha! You probably know I code, but that's just one part of myself. When I step away from the screen I've got many other things that I'm interested in." + "\n\n" + "Check that out below in the Bento Grid to learn more about me!";

const VISITED_CITIES = [
    "Melfort",
    "Star City",
    "Saskatoon",
    "Regina",
    "Winnipeg",
    "Vancouver",
    "Edmonton",
    "Calgary",
    "Kyiv",
    "Torhovytsy",
    "Lviv",
    "Puerto Vallarta",
    "Havana",
    "Cancun",
    "Waikiki Beach"
];

export default function About() {
    return (
        <div className="mainContentBlock" style={{ minWidth: "66vw", display: "flex", justifyContent: "center" }}>
            <motion.div
                className="about-container"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ duration: 0.8 }}
            >
                <div style={{ width: "100%", maxWidth: "1200px" }}>
                    <motion.h1
                        className="about-title"
                        initial={{ y: -20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.2, duration: 0.6 }}
                        style={{ textAlign: "center" }}
                    >
                        About Me
                    </motion.h1>

                    <BioSection
                        imageSrc="/images/about/dapperSasha.jpg"
                        imageAlt="profile"
                        text={ABOUT_TEXT}
                    />


                    <motion.div
                        style={{ marginTop: "60px", marginBottom: "40px" }}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.6, delay: 0.8 }}
                    >
                        <h2 style={{ textAlign: "center", fontSize: "1.5rem", marginBottom: "30px", color: "rgba(255,255,255,0.9)" }}>Personal Interests</h2>
                        <BentoGrid delay={1.0} />
                    </motion.div>
                    <motion.div
                        style={{ marginTop: "40px", width: "100%" }}
                        initial={{ y: 20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.8, duration: 0.6 }}
                    >
                        <h2 style={{ textAlign: "center", fontSize: "1.5rem", marginBottom: "10px", color: "rgba(255,255,255,0.9)" }}>Places I've Visited</h2>
                        <p style={{ textAlign: "center", marginBottom: "20px", color: "rgba(255,255,255,0.7)", fontSize: "0.9rem" }}>
                            Some of the More Interesting Places I've visited, I hope to one day fill this map with more cool spots!
                        </p>
                        <VisitedMap places={VISITED_CITIES} />
                    </motion.div>
                </div>
            </motion.div>
        </div>
    );
}
