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

export default function MeetTheTeam() {
  return (
    <Section className="relative py-24 md:py-32 overflow-hidden">
      <div className="absolute inset-0 z-0">
        <Image 
          src="/uploads/2024/12/DSC07655-Large.webp" 
          alt="KLZ Team" 
          fill
          className="object-cover"
          unoptimized
        />
        <div className="absolute inset-0 bg-gradient-to-r from-neutral-dark/90 to-neutral-dark/40" />
      </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">Meet the team behind KLZ</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">
              At KLZ, our team is the power behind the cables. From seasoned experts like Michael and Klaus to a dedicated group of planners, logistics specialists, and customer support professionals, every member plays a vital role. Together, we combine decades of experience, innovative thinking, and a shared commitment to delivering reliable energy solutions.
            </p>
          </div>
          
          <Button href="/team" variant="primary" size="lg">
            Checkout our team
          </Button>
        </div>
      </Container>
    </Section>
  );
}