import { motion } from "framer-motion";
import TypingText from "../components/animatedTyping";
import { useState } from "react";
import "../styles/pages/home.css";

const welcomeText = `Hello! My name is Sasha Bayda and welcome to my digital resume site!

Here you will find some of my projects, skills, contact information and any information I couldn't fit into my resume.

Feel free to explore and learn more about me and if something isn't answered, don't hesitate to reach out via the links found below!`;

const HOVER_TEXTS: { [key: string]: string } = {
    "Email": "Drop me a line! I'm always open to new opportunities and interesting conversations.",
    "Phone": "Prefer a mix of voice? Give me a call or text.",
    "LinkedIn": "Let's connect professionally. View my full experience and network.",
    "GitHub": "Dive into my code. See what I'm building and how I solve problems.",
    "Portfolio": "See more of my work in action on my portfolio site."
};

const CONTACT_LINKS = [
    { label: "Email", url: "mailto:sasha.bayda@outlook.com" },
    { label: "Phone", url: "tel:+13069217145" },
    { label: "LinkedIn", url: "https://www.linkedin.com/in/sasha-bayda/" },
    { label: "GitHub", url: "https://github.com/Bayda77" },
    { label: "Portfolio", url: "https://portfolio.sashabayda.ca" },
];

export default function Home() {
    const [displayedText, setDisplayedText] = useState(welcomeText);

    return (
        <div className="mainContentBlock">
            <div className="home-container">
                <motion.div
                    className="hero-profile-container"
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.8, ease: "easeOut" }}
                >
                    <img
                        src="/1647091917916.png"
                        alt="Sasha Bayda"
                        className="hero-profile-img"
                    />
                </motion.div>

                <div className="hero-content">
                    <div className="hero-name">
                        <TypingText
                            text="Sasha Bayda"
                            msPerChar={120}
                            delayMs={100}
                            textAlign="center"
                        />
                    </div>

                    <motion.p
                        className="hero-bio"
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 1, delay: 2.0 }}
                    >
                        {displayedText}
                    </motion.p>

                    <div className="hero-socials">
                        {CONTACT_LINKS.map((link, index) => (
                            <motion.a
                                key={index}
                                href={link.url}
                                className="hero-social-link"
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{
                                    duration: 0.5,
                                    delay: 2.5 + (index * 0.1),
                                    ease: "easeOut"
                                }}
                                onMouseEnter={() => setDisplayedText(HOVER_TEXTS[link.label] || welcomeText)}
                                onMouseLeave={() => setDisplayedText(welcomeText)}
                            >
                                {link.label}
                            </motion.a>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}