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

export default function MeetTheTeam({ data }: { data?: any }) {
  const t = useTranslations('Home.meetTheTeam');
  const teamT = useTranslations('Team');
  const locale = useLocale();

  return (
    <Section className="relative py-32 md:py-48 overflow-hidden">
      <div className="absolute inset-0 z-0">
        <Image
          src="/uploads/2024/12/DSC08036-Large.webp"
          alt={data?.subtitle || t('subtitle')}
          fill
          className="object-cover scale-105 animate-slow-zoom"
          sizes="100vw"
          quality={100}
        />
        <div className="absolute inset-0 bg-primary/70 mix-blend-multiply" />
        <div className="absolute inset-0 bg-gradient-to-t from-primary via-primary/20 to-transparent" />
      </div>

      <Container className="relative z-10">
        <div className="max-w-3xl text-white animate-slide-up">
          <Heading level={2} subtitle={data?.subtitle || t('subtitle')} className="text-white mb-8">
            <span className="text-white">{data?.title || t('title')}</span>
          </Heading>

          <div className="relative mb-12">
            <div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
            <p className="text-xl md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
              "{data?.description || t('description')}"
            </p>
          </div>

          <div className="flex flex-wrap gap-8 items-center">
            <Button href={`/${locale}/team`} variant="accent" size="xl" className="group">
              {data?.ctaLabel || t('cta')}
              <span className="ml-3 transition-transform group-hover:translate-x-2">&rarr;</span>
            </Button>

            <div className="flex items-center gap-4">
              <div className="flex -space-x-4">
                <div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
                  <Image
                    src="/uploads/2024/12/DSC07768-Large.webp"
                    alt={teamT('michael.name')}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="w-14 h-14 rounded-full border-4 border-primary overflow-hidden relative">
                  <Image
                    src="/uploads/2024/12/DSC07963-Large.webp"
                    alt={teamT('klaus.name')}
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
              <span className="text-white/60 font-bold text-xs md:text-sm uppercase tracking-widest">
                {data?.networkLabel || t('andNetwork')}
              </span>
            </div>
          </div>
        </div>
      </Container>
    </Section>
  );
}