'use client';

import { motion } from 'framer-motion';
import { Terminal, Globe2, Code2 } from 'lucide-react';
import { useTranslations } from 'next-intl';

const Hero = () => {
  const t = useTranslations('pages.about.hero');

  const getLanguages = () => {
    try {
      const languages = t.raw('languages');
      return typeof languages === 'object' ? Object.entries(languages) : [];
    } catch {
      return [];
    }
  };

  const scrollToSkills = () => {
    const skillsSection = document.getElementById('skills');
    if (skillsSection) {
      skillsSection.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <section className="relative min-h-screen text-white overflow-hidden">
      <div className="flex flex-col items-center justify-center min-h-screen px-4 relative z-10">
        {/* Title */}
        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-white text-3xl font-bold tracking-wider mb-4"
        >
          {t('title')}
        </motion.h1>

        {/* Description */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="max-w-3xl text-center mb-12"
        >
          <p className="text-zinc-400 text-lg mb-8">
            {t('description')}
          </p>
        </motion.div>

        {/* Expertise Areas */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.3 }}
          className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"
        >
          <div className="flex flex-col items-center p-6 border border-zinc-800 rounded-lg bg-zinc-900/50">
            <Terminal className="h-8 w-8 mb-4 text-white" />
            <h3 className="text-lg font-semibold mb-2">
              {t('expertise.processAutomation.title')}
            </h3>
            <p className="text-zinc-400 text-center text-sm">
              {t('expertise.processAutomation.description')}
            </p>
          </div>
          <div className="flex flex-col items-center p-6 border border-zinc-800 rounded-lg bg-zinc-900/50">
            <Globe2 className="h-8 w-8 mb-4 text-white" />
            <h3 className="text-lg font-semibold mb-2">
              {t('expertise.systemIntegration.title')}
            </h3>
            <p className="text-zinc-400 text-center text-sm">
              {t('expertise.systemIntegration.description')}
            </p>
          </div>
          <div className="flex flex-col items-center p-6 border border-zinc-800 rounded-lg bg-zinc-900/50">
            <Code2 className="h-8 w-8 mb-4 text-white" />
            <h3 className="text-lg font-semibold mb-2">
              {t('expertise.customDevelopment.title')}
            </h3>
            <p className="text-zinc-400 text-center text-sm">
              {t('expertise.customDevelopment.description')}
            </p>
          </div>
        </motion.div>

        {/* Languages */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.4 }}
          className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4"
        >
          {getLanguages().map(([key, value]) => (
            <div
              key={key}
              className="flex flex-col items-center p-3 border border-zinc-800 rounded-lg bg-zinc-900/50 hover:bg-zinc-800/50 transition-colors"
            >
              <span className="text-white font-medium">{value as string}</span>
            </div>
          ))}
        </motion.div>

        {/* About Me Link */}
        <motion.button
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.5 }}
          onClick={scrollToSkills}
          className="mt-8 px-6 py-3 bg-white text-zinc-900 rounded-lg font-medium hover:bg-zinc-100 transition-colors"
        >
          {t('aboutMe')}
        </motion.button>
      </div>
    </section>
  );
};

export default Hero;
