"use client";

import { motion } from "motion/react";
import { MagicCard } from "@/components/magicui/magic-card";
import { TextReveal } from "@/components/magicui/text-reveal";

export default function About() {
  return (
    <section id="about" className="py-20 px-4">
      <div className="max-w-6xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-6">Sobre Mim</h2>
        </motion.div>

        <div className="grid md:grid-cols-2 gap-12 items-center">
          {/* Main Description */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
          >
            <div className="p-8 space-y-6">
              <TextReveal>
                Desenvolvedor Full-Stack com 3+ anos de experiência,
                especializado em soluções web modernas e inovadoras. Cursando
                Engenharia da Computação, com conhecimentos em computação em
                nuvem e inteligência artificial. Busco constantemente novos
                desafios onde possa aplicar minha paixão por tecnologia e
                resolver problemas de forma criativa.
              </TextReveal>

              <TextReveal>
                Meu objetivo é entregar soluções de alta qualidade, sempre
                priorizando colaboração, ética e inovação. Acredito no poder da
                tecnologia para fazer a diferença e estou comprometido com o
                aprendizado contínuo e a excelência técnica.
              </TextReveal>
            </div>
          </motion.div>

          {/* Soft Skills */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            viewport={{ once: true }}
            className="space-y-6"
          >
            <h3 className="text-2xl font-semibold mb-6 text-cyan-400">
              Soft Skills
            </h3>

            <div className="space-y-4">
              {[
                { skill: "Comunicação", level: 90 },
                { skill: "Trabalho em Equipe", level: 85 },
                // { skill: "Resolução de Problemas", level: 95 },
                { skill: "Aprendizado Contínuo", level: 90 },
                { skill: "Adaptabilidade", level: 85 },
              ].map((item) => (
                <div key={item.skill} className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-300">{item.skill}</span>
                    <span className="text-cyan-400">{item.level}%</span>
                  </div>
                  <div className="w-full bg-white/10 rounded-full h-2">
                    <div
                      className="bg-gradient-to-r from-cyan-400 to-blue-500 h-2 rounded-full transition-all duration-1000"
                      style={{ width: `${item.level}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-8">
              <h4 className="text-lg font-semibold mb-4 text-blue-400">
                Destaques
              </h4>
              <ul className="space-y-2 text-gray-300">
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
                  3+ anos de experiência
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
                  Engenheiro da Computação
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
                  Conhecimento em Cloud e IA
                </li>
                <li className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-400 rounded-full" />
                  Ampla gama de conhecimentos
                </li>
              </ul>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}