import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useTranslations, useLocale } from 'next-intl';
import { Section, Container, Button } from '../../components/ui';

export default function MeetTheTeam() {
  const t = useTranslations('Home.meetTheTeam');
  const locale = useLocale();

  return (
    <Section className="relative py-24 md:py-32 overflow-hidden">
      <div className="absolute inset-0 z-0">
        <Image 
          src="/uploads/2024/12/DSC08036-Large.webp" 
          alt="KLZ Team" 
          fill
          className="object-cover"
          unoptimized
        />
        <div className="absolute inset-0 bg-[#263336] bg-gradient-to-r from-[#263336] via-[#263336]/25 to-transparent opacity-100" />
      </div>
      
      <Container className="relative z-10">
        <div className="max-w-2xl text-white">
          <div className="flex items-center gap-4 mb-6">
            <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-white/20">
               {/* Placeholder for avatar if needed, or just icon */}
               <div className="w-full h-full bg-primary flex items-center justify-center">
                 <span className="font-bold">KLZ</span>
               </div>
            </div>
            <h2 className="text-3xl font-bold">{t('title')}</h2>
          </div>
          
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 mb-8 border border-white/10">
            <p className="text-lg leading-relaxed">
              {t('description')}
            </p>
          </div>
          
          <Button href={`/${locale}/team`} variant="primary" size="lg">
            {t('cta')}
          </Button>
        </div>
      </Container>
    </Section>
  );
}