"use client"

import { motion, useInView } from "framer-motion"
import { useRef } from "react"
import Link from "next/link"
import { ArrowRight } from "lucide-react"

const skills = [
  { name: "Next.js", level: 90 },
  { name: "React", level: 92 },
  { name: "WordPress", level: 97 },
  { name: "AI Automation", level: 94 },
  { name: "OBS / VMIX", level: 95 },
  { name: "Video Editing", level: 88 },
]

function SkillBar({ name, level, index }: { name: string; level: number; index: number }) {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: "-50px" })

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, x: -20 }}
      animate={isInView ? { opacity: 1, x: 0 } : {}}
      transition={{ delay: index * 0.1 }}
      className="space-y-2"
    >
      <div className="flex justify-between items-center">
        <span className="text-foreground font-medium">{name}</span>
        <span className="text-primary font-mono text-sm">{level}%</span>
      </div>
      <div className="h-2 bg-secondary rounded-full overflow-hidden">
        <motion.div
          initial={{ width: 0 }}
          animate={isInView ? { width: `${level}%` } : {}}
          transition={{ duration: 1, delay: index * 0.1, ease: "easeOut" }}
          className="h-full bg-gradient-to-r from-primary to-emerald-400 rounded-full"
        />
      </div>
    </motion.div>
  )
}

export function MyStack() {
  return (
    <section className="px-6 md:px-12 lg:px-24 py-24">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 items-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <p className="text-primary text-sm tracking-widest mb-2">EXPERTISE</p>
            <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-6">My Stack</h2>
            <p className="text-muted-foreground leading-relaxed mb-8">
              Over 9 years of experience working with a diverse set of technologies 
              and tools. From modern web frameworks to AI automation platforms, 
              I bring expertise that spans the full digital spectrum.
            </p>
            <Link
              href="/about"
              className="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors group"
            >
              <span>View all skills</span>
              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </Link>
          </motion.div>

          <div className="space-y-6">
            {skills.map((skill, index) => (
              <SkillBar key={skill.name} {...skill} index={index} />
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}