import { motion } from 'framer-motion';
import { Github, Linkedin, Mail, MapPin } from 'lucide-react';
import { useCVData } from '../admin/hooks/CVContext';

export default function Hero() {
  const { data } = useCVData();
  const { personal } = data;
  
  return (
    <section className="min-h-screen flex items-center justify-center px-6 py-20">
      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="max-w-3xl text-center"
      >
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
          className="w-32 h-32 mx-auto mb-8 rounded-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center text-white text-4xl font-bold"
        >
          {personal.name.split(' ').map(n => n[0]).join('')}
        </motion.div>
        
        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
          {personal.name}
        </h1>
        
        <h2 className="text-xl md:text-2xl text-primary-600 font-medium mb-4">
          {personal.title}
        </h2>
        
        <div className="flex items-center justify-center gap-2 text-slate-500 mb-6">
          <MapPin size={18} />
          <span>{personal.location}</span>
        </div>
        
        <p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto">
          {personal.intro}
        </p>
        
        <div className="flex justify-center gap-4">
          <a
            href={`mailto:${personal.email}`}
            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
          >
            <Mail size={20} />
            <span>Email</span>
          </a>
          <a
            href={personal.github}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
          >
            <Github size={20} />
            <span>GitHub</span>
          </a>
          <a
            href={personal.linkedin}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
          >
            <Linkedin size={20} />
            <span>LinkedIn</span>
          </a>
        </div>
      </motion.div>
    </section>
  );
}