import { getTranslations, getLocale } from 'next-intl/server';
import { MapPin, Briefcase, Code, Award, GraduationCap, Download } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';

const About = async () => {
  const t = await getTranslations('pages.home.about');
  const locale = await getLocale();

  const getCvUrl = () => {
    if (locale === 'de') return '/damjan_savic_cv_de.pdf';
    return '/damjan_savic_cv_en.pdf';
  };

  const highlights = [
    { icon: <MapPin className="w-4 h-4" />, label: 'Köln, Deutschland' },
    { icon: <Briefcase className="w-4 h-4" />, label: '5+ Jahre Erfahrung' },
    { icon: <Code className="w-4 h-4" />, label: 'Full-Stack Developer' },
    { icon: <Award className="w-4 h-4" />, label: 'ERP Spezialist' }
  ];

  return (
    <section id="about" className="py-24 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Content Section */}
          <div className="space-y-6 order-2 lg:order-1">
            {/* Title */}
            <div>
              <h2 className="text-4xl lg:text-5xl font-bold text-white mb-2">
                {t('title')}
              </h2>
              <div className="h-1 w-20 bg-gradient-to-r from-zinc-600 to-zinc-800 rounded-full" />
            </div>

            {/* Highlight Pills */}
            <div className="flex flex-wrap gap-3">
              {highlights.map((item, index) => (
                <div
                  key={index}
                  className="flex items-center gap-2 px-3 py-1.5 bg-zinc-800/30 backdrop-blur-sm rounded-full border border-zinc-700/50 hover:border-zinc-600 transition-colors"
                >
                  <span className="text-zinc-400">{item.icon}</span>
                  <span className="text-zinc-300 text-sm">{item.label}</span>
                </div>
              ))}
            </div>

            {/* Main Content */}
            <div className="space-y-4">
              <p className="text-zinc-300 leading-relaxed text-lg">
                {t('content')}
              </p>
            </div>

            {/* Call to Action Buttons */}
            <div className="flex flex-wrap gap-4 pt-4">
              <Link
                href={`/${locale}/about`}
                className="px-6 py-3 bg-zinc-800/50 backdrop-blur-sm hover:bg-zinc-700/50 text-white rounded-xl font-medium transition-colors duration-300 flex items-center gap-2"
              >
                <GraduationCap className="w-4 h-4" />
                {t('buttons.learnMore')}
              </Link>
              <a
                href={getCvUrl()}
                download
                className="px-6 py-3 bg-transparent hover:bg-zinc-800/30 text-zinc-300 border border-zinc-700/50 rounded-xl font-medium transition-colors duration-300 flex items-center gap-2"
              >
                <Download className="w-4 h-4" />
                {t('buttons.downloadCV')}
              </a>
            </div>
          </div>

          {/* Image Section */}
          <div className="relative order-1 lg:order-2">
            <div className="relative rounded-3xl overflow-hidden aspect-square bg-zinc-800/30 backdrop-blur-sm">
              <Image
                src="/images/gallery/frontal-smile.webp"
                alt="Damjan Savić"
                fill
                sizes="(max-width: 1024px) 100vw, 50vw"
                className="object-cover object-bottom"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default About;
