import { useTranslations } from 'next-intl';
import { Section, Container } from '@/components/ui';
import Image from 'next/image';

export default function TeamPage() {
  const t = useTranslations('Team');

  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative flex items-center justify-center overflow-hidden bg-neutral-dark pt-[14%] pb-[12%]">
        <div className="absolute inset-0 z-0">
          <Image 
            src="/uploads/2024/12/DSC07655-Large.webp" 
            alt="KLZ Team" 
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-r from-[#0a0000] to-[rgba(10,10,10,0.5)] opacity-80" />
        </div>
        
        <Container className="relative z-10 text-center text-white max-w-4xl">
          <h5 className="text-xl md:text-2xl font-medium mb-4 text-primary">
            {t('hero.title')}
          </h5>
          <h2 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
            {t('hero.subtitle')}
          </h2>
        </Container>
      </section>

      {/* Michael Bodemer Section */}
      <section className="relative bg-[#011fff] text-white overflow-hidden">
        <div className="flex flex-col md:flex-row">
          <div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-8">{t('michael.name')}</h1>
            <div className="w-12 h-1 bg-white mb-8" />
            <h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
              {t('michael.quote')}
            </h2>
            <div className="w-12 h-1 bg-white mb-8" />
            <p className="text-lg leading-relaxed opacity-90 mb-8">
              {t('michael.description')}
            </p>
            <a 
              href="https://www.linkedin.com/in/michael-bodemer-33b493122/" 
              target="_blank" 
              rel="noopener noreferrer"
              className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
            >
              {t('michael.linkedin')}
              <span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
            </a>
          </div>
          <div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full">
            <Image 
              src="/uploads/2024/12/DSC07768-Large.webp" 
              alt={t('michael.name')} 
              fill 
              className="object-cover"
            />
          </div>
        </div>
      </section>

      {/* Legacy Section */}
      <section className="relative py-[10%] bg-neutral-dark text-white overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image 
            src="/uploads/2024/12/1694273920124-copy.webp" 
            alt="Legacy" 
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-[#263336] opacity-90" />
        </div>
        <Container className="relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12">
            <div className="md:col-span-5">
              <h3 className="text-3xl font-bold mb-6">{t('legacy.title')}</h3>
              <div className="space-y-6 text-lg opacity-90">
                <p>
                  {t('legacy.p1')}
                </p>
                <p>
                  {t('legacy.p2')}
                </p>
              </div>
            </div>
          </div>
        </Container>
      </section>

      {/* Klaus Mintel Section */}
      <section className="relative bg-[#011fff] text-white overflow-hidden">
        <div className="flex flex-col md:flex-row">
          <div className="w-full md:w-1/2 relative min-h-[50vh] md:min-h-full order-2 md:order-1">
            <Image 
              src="/uploads/2024/12/DSC07963-Large.webp" 
              alt={t('klaus.name')} 
              fill 
              className="object-cover"
            />
          </div>
          <div className="w-full md:w-1/2 p-12 md:p-24 flex flex-col justify-center order-1 md:order-2">
            <h1 className="text-4xl md:text-5xl font-bold mb-8">{t('klaus.name')}</h1>
            <div className="w-12 h-1 bg-white mb-8" />
            <h2 className="text-2xl md:text-3xl font-medium italic mb-8 leading-relaxed">
              {t('klaus.quote')}
            </h2>
            <div className="w-12 h-1 bg-white mb-8" />
            <p className="text-lg leading-relaxed opacity-90 mb-8">
              {t('klaus.description')}
            </p>
            <a 
              href="https://www.linkedin.com/in/klaus-mintel-b80a8b193/" 
              target="_blank" 
              rel="noopener noreferrer"
              className="inline-flex items-center text-white font-bold border-2 border-white px-6 py-3 rounded-full hover:bg-white hover:text-[#011fff] transition-colors w-fit group"
            >
              {t('klaus.linkedin')}
              <span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
            </a>
          </div>
        </div>
      </section>

      {/* Manifesto Section */}
      <Section className="bg-white text-neutral-dark">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
            <div className="lg:col-span-4">
              <h2 className="text-4xl font-bold text-primary mb-6 sticky top-24">{t('manifesto.title')}</h2>
            </div>
            <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
              {[0, 1, 2, 3, 4, 5].map((idx) => (
                <div key={idx} className="bg-neutral-light p-6 rounded-lg border border-neutral hover:border-primary transition-colors">
                  <div className="text-primary font-mono text-xl mb-4">0{idx + 1}</div>
                  <h3 className="text-xl font-bold mb-3">{t(`manifesto.items.${idx}.title`)}</h3>
                  <p className="text-text-secondary">{t(`manifesto.items.${idx}.description`)}</p>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </Section>

      {/* Gallery Section */}
      <Section className="bg-neutral-dark py-0 pb-24 pt-24">
        <Container>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            {[
              '/uploads/2024/12/DSC07539-Large-600x400.webp',
              '/uploads/2024/12/DSC07460-Large-600x400.webp',
              '/uploads/2024/12/DSC07469-Large-600x400.webp',
              '/uploads/2024/12/DSC07433-Large-600x400.webp',
              '/uploads/2024/12/DSC07387-Large-600x400.webp'
            ].map((src, idx) => (
              <div key={idx} className="relative aspect-video rounded-lg overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
                <Image src={src} alt="Team Gallery" fill className="object-cover" />
              </div>
            ))}
          </div>
        </Container>
      </Section>
    </div>
  );
}