import { motion, Variants } from "framer-motion";

interface SkillCategory {
    category: string;
    skills: string[];
}

interface ProfessionalSkill {
    skill: string;
    description: string;
}

const TECHNICAL_SKILLS: SkillCategory[] = [
    {
        category: "Languages",
        skills: ["JavaScript (ES6+)", "TypeScript", "Python", "Java", "C", "C++", "Lua", "HTML", "CSS", "SQL"]
    },
    {
        category: "Frameworks/Libraries",
        skills: ["React", "Express.js", "Django REST Framework", "AWS Lambda"]
    },
    {
        category: "Databases",
        skills: ["PostgreSQL (SQL Based)", "CouchDB (No-SQL Based)"]
    },
    {
        category: "DevOps & Tools",
        skills: ["Docker", "CircleCI", "Git (CLI)", "Postman", "AWS CDK", "Linux CLI"]
    },
    {
        category: "AWS Technologies",
        skills: ["S3", "Cloudfront", "Route 53", "API Gateway", "Lambda", "RDS", "VPC", "ECS", "SQS"]
    },
    {
        category: "Concepts",
        skills: ["RESTful APIs", "Agile/Scrum", "MVC Architecture", "Cloud Deployment", "Responsive Design"]
    }
];

const PROFESSIONAL_SKILLS: ProfessionalSkill[] = [
    {
        skill: "Customer Service & Sales",
        description: "Clear communication and coordination with customers and clients"
    },
    {
        skill: "Technical Support",
        description: "Diagnosing and resolving hardware/software issues across all major devices."
    },
    {
        skill: "Web Development",
        description: "WordPress plugin development, front-end design, and site optimization."
    },
    {
        skill: "Scripting & Programming",
        description: "JavaScript, Python, HTML/CSS, Git, and NPM package management."
    },
    {
        skill: "Collaboration & Problem-Solving",
        description: "Working effectively with diverse teams to meet deadlines and ensure quality results."
    },
    {
        skill: "Adaptability",
        description: "Quickly learning new tools, technologies, and processes in dynamic work environments."
    }
];

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

const itemVariants: Variants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
        y: 0,
        opacity: 1,
        transition: { type: "spring", stiffness: 100 }
    }
};

export default function Skills() {
    return (
        <div className="mainContentBlock" style={{ minWidth: "66vw", alignItems: "center" }}>
            <div style={{ height: "30px" }}></div>
            <motion.div
                className="skills-container"
                variants={containerVariants}
                initial="hidden"
                animate="visible"
                style={{ width: "100%", maxWidth: "1000px", padding: "0 20px" }}
            >
                <motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
                    <h2 style={{ color: "white", borderBottom: "1px solid rgba(255,255,255,0.2)", paddingBottom: "10px", marginBottom: "25px" }}>
                        Technical Skills
                    </h2>
                    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "25px" }}>
                        {TECHNICAL_SKILLS.map((category) => (
                            <motion.div
                                key={category.category}
                                style={{
                                    background: "rgba(255, 255, 255, 0.07)",
                                    backdropFilter: "blur(10px)",
                                    border: "1px solid rgba(255, 255, 255, 0.15)",
                                    borderRadius: "12px",
                                    padding: "20px",
                                }}
                                whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.12)" }}
                            >
                                <h3 style={{ color: "white", marginTop: 0, marginBottom: "15px", fontSize: "1.2rem" }}>{category.category}</h3>
                                <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
                                    {category.skills.map((skill) => (
                                        <span
                                            key={skill}
                                            style={{
                                                background: "rgba(255, 255, 255, 0.15)",
                                                color: "rgba(255, 255, 255, 0.9)",
                                                padding: "6px 12px",
                                                borderRadius: "20px",
                                                fontSize: "0.85rem",
                                                fontWeight: 500,
                                                border: "1px solid rgba(255, 255, 255, 0.1)"
                                            }}
                                        >
                                            {skill}
                                        </span>
                                    ))}
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </motion.div>

                <motion.div variants={itemVariants} style={{ marginBottom: "50px" }}>
                    <h2 style={{ color: "white", borderBottom: "1px solid rgba(255,255,255,0.2)", paddingBottom: "10px", marginBottom: "25px" }}>
                        Professional Skills
                    </h2>
                    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "20px" }}>
                        {PROFESSIONAL_SKILLS.map((skill) => (
                            <motion.div
                                key={skill.skill}
                                style={{
                                    background: "rgba(255, 255, 255, 0.05)",
                                    backdropFilter: "blur(5px)",
                                    border: "1px solid rgba(255, 255, 255, 0.1)",
                                    borderRadius: "12px",
                                    padding: "20px",
                                    display: "flex",
                                    flexDirection: "column",
                                    gap: "8px"
                                }}
                                whileHover={{ x: 5, backgroundColor: "rgba(255, 255, 255, 0.08)" }}
                            >
                                <h3 style={{ color: "#fff", margin: 0, fontSize: "1.1rem" }}>{skill.skill}</h3>
                                <p style={{ color: "rgba(255, 255, 255, 0.7)", margin: 0, fontSize: "0.95rem", lineHeight: "1.5" }}>
                                    {skill.description}
                                </p>
                            </motion.div>
                        ))}
                    </div>
                </motion.div>
            </motion.div>
        </div>
    );
}