'use client';

import Link from 'next/link';
import Image from 'next/image';
import { useLanguage } from '@/context/LanguageContext';
import Button from '@/components/ui/Button';

export default function HeroSection() {
  const { t } = useLanguage();

  return (
    <section className="bg-gradient-to-br from-white via-secondary-gray to-white">
      <div className="container-page py-16 md:py-24">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-balance" style={{ color: '#002F44' }}>
              {t('home.hero.title')}
            </h1>
            <p className="mt-6 text-xl" style={{ color: '#002F44' }}>
              {t('home.hero.subtitle')}
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <Link href="/events">
                <Button size="lg">
                  {t('home.hero.cta')}
                </Button>
              </Link>
              <Link href="/community">
                <Button variant="outline" size="lg">
                  {t('common.learnMore')}
                </Button>
              </Link>
            </div>
          </div>
          
          {/* Hero Image Grid */}
          <div className="relative">
            <div className="grid grid-cols-2 gap-4">
                <div className="space-y-4">
                  <div className="relative rounded-card h-32 flex items-center justify-center overflow-hidden">
                    <Image
                      src="/images/2026-01-29 13.10.08.jpg"
                      alt="Spanglish language exchange social event in Asunción"
                      fill
                      sizes="(max-width: 1024px) 50vw, 25vw"
                      className="object-cover"
                      priority
                      fetchPriority="high"
                    />
                </div>
                <div className="relative rounded-card h-48 overflow-hidden">
                  <Image
                    src="/images/2026-01-29 13.10.23.jpg"
                    alt="English and Spanish language practice session in Asunción"
                    fill
                    sizes="(max-width: 1024px) 50vw, 25vw"
                    className="object-cover"
                    loading="lazy"
                  />
                </div>
              </div>
              <div className="space-y-4 pt-8">
                <div className="relative rounded-card h-48 overflow-hidden">
                  <Image
                    src="/images/2026-01-29 13.10.16.jpg"
                    alt="Spanglish community meetup in Paraguay"
                    fill
                    sizes="(max-width: 1024px) 50vw, 25vw"
                    className="object-cover"
                    loading="lazy"
                  />
                </div>
                <div className="relative rounded-card h-32 overflow-hidden">
                  <Image
                    src="/images/2026-01-29 13.09.59.jpg"
                    alt="Language exchange group practicing English and Spanish"
                    fill
                    sizes="(max-width: 1024px) 50vw, 25vw"
                    className="object-cover"
                    loading="lazy"
                  />
                </div>
              </div>
            </div>
            {/* Decorative elements */}
            <div className="absolute -top-4 -left-4 w-24 h-24 bg-primary-yellow/30 rounded-full blur-2xl" />
            <div className="absolute -bottom-4 -right-4 w-32 h-32 bg-secondary-blue/20 rounded-full blur-2xl" />
          </div>
        </div>
      </div>
    </section>
  );
}
