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

const ABOUT_TEXT = "Hi! I'm Sasha Bayda, a passionate developer focused on creating beautiful and functional web experiences. With a background in computer science and a keen eye for design, I strive to bridge the gap between technology and user-centric solutions. When I'm not coding, you can find me exploring the outdoors, experimenting with new recipes, or indulging in photography. Feel free to explore my projects and get in touch if you'd like to collaborate or learn more about my work!" + "\n\n" + "Thank you for visiting my digital resume site. I look forward to connecting with you!";

const JANE_TEXT = "Outside of work, I enjoy spending time with my girlfriend, family and friends. Doing things such as cooking, watching shows or movies, gaming, snowboarding, or just relaxing with a glass of something warm.";

const HOMELAB_TEXT = "I love hosting my own applications and learning new technologies. Right now I host my own gitea server to host my own git repositories and host my own 'runners', immich to host my own photo gallery, and a beszel to monitor all of my applications with a dashboards, graphs and webhook alerts."


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="/dapperSasha.jpg"
                        imageAlt="profile"
                        text={ABOUT_TEXT}
                    />


                    <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 style={{ marginTop: "40px" }}>
                        <BioSection
                            imageSrc="/janepic.jpg, fampic.jpg, gangpic.jpg"
                            imageAlt="profile"
                            text={JANE_TEXT}
                            reversed={true}
                        />
                    </div>
                    <div style={{ marginTop: "40px" }}>
                        <BioSection
                            imageSrc="/beszel.png"
                            imageAlt="profile"
                            text={HOMELAB_TEXT}
                            reversed={false}
                        />
                    </div>
                </div>
            </motion.div>
        </div>
    );
}