import { motion } from 'framer-motion';
import { Github, Linkedin, Mail, Youtube } from 'lucide-react';

const socialLinks = [
  { name: 'YouTube', icon: Youtube, url: 'https://www.youtube.com/@DJorySev', description: 'Watch my content' },
  { name: 'GitHub', icon: Github, url: 'https://github.com/JorySeverijnse', description: 'Browse my code' },
  { name: 'Gitea', icon: Github, url: 'https://git.severijnse.eu/explore/repos', description: 'Self-hosted Git' },
  { name: 'LinkedIn', icon: Linkedin, url: 'https://www.linkedin.com/in/jory-s-5481ab256', description: 'Connect professionally' },
  { name: 'Gmail', icon: Mail, url: 'mailto:joryseverijnse@gmail.com', description: 'Personal email' },
  { name: 'Email', icon: Mail, url: 'mailto:jory@severijnse.eu', description: 'Domain email' },
];

const Links = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="h-full flex flex-col"
    >
      <h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong mb-2">
        Links
      </h1>
      
      <p className="font-pixel text-foreground/80 mb-6">
        Connect with me across the web:
      </p>

      <div className="flex-1 grid grid-cols-2 sm:grid-cols-3 gap-3 content-start">
        {socialLinks.map((link, index) => {
          const Icon = link.icon;
          return (
            <motion.a
              key={link.name}
              href={link.url}
              target="_blank"
              rel="noopener noreferrer"
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: index * 0.05 }}
              className="flex flex-col items-center justify-center gap-2 p-4 border border-primary/30 hover:border-primary transition-all duration-300 hover:box-glow hover:bg-primary/10 rounded-lg"
            >
              <Icon className="w-8 h-8 text-primary" />
              <span className="font-minecraft text-sm text-primary text-glow">
                {link.name}
              </span>
              <span className="font-pixel text-[10px] text-muted-foreground text-center">
                {link.description}
              </span>
            </motion.a>
          );
        })}
      </div>

      {/* ASCII Art */}
      <pre className="font-mono text-[8px] md:text-[10px] text-primary/30 leading-tight text-center mt-4 select-none">
{`     .---.
    /     \\
    \\.@-@./
    /\` \\_/ \`\\
   //  _ _  \\\\
  | \\     /  |
   \\|  \\|/  |/
    \`._/_\\_.'"connect with me"`}
      </pre>
    </motion.div>
  );
};

export default Links;
