import { getTranslations } from 'next-intl/server';
import { Linkedin, Github, ChevronDown } from 'lucide-react';
import Image from 'next/image';

const Hero = async () => {
  const t = await getTranslations('pages.home.hero');

  return (
    <section id="home" className="relative h-screen max-h-screen text-white overflow-hidden">
      {/* Hero Image - Full Width */}
      <div className="absolute inset-0">
        <Image
          src="/hero-portrait.jpg"
          alt="Damjan Savić"
          fill
          sizes="100vw"
          className="object-cover object-top md:object-left"
          priority
        />
      </div>

      {/* Desktop: Gradient on left side */}
      <div className="hidden md:block absolute inset-y-0 left-0 w-1/2 bg-gradient-to-r from-zinc-950 via-zinc-950 via-60% to-transparent z-10" />

      {/* Mobile: Gradient at bottom for text */}
      <div className="md:hidden absolute inset-x-0 bottom-0 h-[60%] bg-gradient-to-t from-zinc-950 via-zinc-950/80 via-40% to-transparent z-10 pointer-events-none" />

      {/* Social Links - Top */}
      <div className="absolute top-8 left-6 sm:left-12 lg:left-20 flex gap-4 z-30">
        <a
          href="https://www.linkedin.com/in/damjan-savi%C4%87-720288127/"
          target="_blank"
          rel="noopener noreferrer"
          className="group text-zinc-400 hover:text-white transition-colors"
          aria-label="LinkedIn"
        >
          <Linkedin className="transform transition-transform group-hover:scale-110" size={22} />
        </a>
        <a
          href="https://github.com/damjan1996"
          target="_blank"
          rel="noopener noreferrer"
          className="group text-zinc-400 hover:text-white transition-colors"
          aria-label="GitHub"
        >
          <Github className="transform transition-transform group-hover:scale-110" size={22} />
        </a>
      </div>

      {/* Main Content - Bottom on mobile, left on desktop */}
      <div className="relative z-20 h-full flex flex-col justify-end md:justify-center items-center md:items-start px-6 sm:px-12 lg:px-20 pb-24 md:pb-0">
        <div className="max-w-3xl space-y-4 md:space-y-6 text-center md:text-left">
          <p className="text-zinc-400 text-sm sm:text-base tracking-[0.3em] uppercase">
            {t('title')}
          </p>

          <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold tracking-tight">
            {t('name')}
            <span className="animate-pulse text-white/80">|</span>
          </h1>

          <p className="text-zinc-300 text-base sm:text-lg lg:text-xl max-w-lg leading-relaxed">
            {t('description')}
          </p>

          {/* CTA Buttons */}
          <div className="flex flex-wrap justify-center md:justify-start gap-3 sm:gap-4 pt-2 sm:pt-4">
            <a
              href="mailto:info@damjan-savic.com"
              className="px-6 sm:px-8 py-2.5 sm:py-3 bg-white text-zinc-900 font-medium rounded-full hover:bg-zinc-200 transition-colors text-sm sm:text-base"
            >
              {t('cta')}
            </a>
            <a
              href="#projects"
              className="px-6 sm:px-8 py-2.5 sm:py-3 border border-zinc-600 text-white rounded-full hover:bg-zinc-800 transition-colors text-sm sm:text-base"
            >
              {t('navigation.projects')}
            </a>
          </div>

          {/* Navigation Links - Hidden on mobile */}
          <nav className="hidden sm:flex gap-8 pt-4 text-sm uppercase tracking-wider">
            <a
              href="#experience"
              className="text-zinc-400 hover:text-white transition-colors"
            >
              {t('navigation.experience')}
            </a>
            <a
              href="#skills"
              className="text-zinc-400 hover:text-white transition-colors"
            >
              {t('navigation.skills')}
            </a>
            <a
              href="#about"
              className="text-zinc-400 hover:text-white transition-colors"
            >
              {t('navigation.about')}
            </a>
          </nav>
        </div>
      </div>

      {/* Scroll Indicator - Hidden on mobile */}
      <div className="hidden sm:block absolute bottom-8 left-1/2 -translate-x-1/2 z-20 animate-bounce">
        <ChevronDown className="text-zinc-400" size={28} />
      </div>
    </section>
  );
};

export default Hero;