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

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

  const teamMembers = [
    {
      name: 'Klaus Mintel',
      role: 'Founder & CEO',
      image: 'https://klz-cables.com/wp-content/uploads/2024/12/DSC07963-Large.webp',
      quote: 'Sometimes all it takes is a clear head and a good cable to make the world a little better.',
      bio: 'Klaus is the man with the experience, bringing perspective and calm to the table—even when cable chaos threatens to take over. With impressive industry knowledge and a network as solid as our cables, he ensures everything runs smoothly. Klaus isn’t just a problem solver; he’s a strategic thinker who knows how to get to the point with a touch of humor.',
      linkedin: 'https://www.linkedin.com/in/klaus-mintel-b80a8b193/'
    },
    {
      name: 'Michael Bodemer',
      role: 'Technical Director',
      image: 'https://klz-cables.com/wp-content/uploads/2024/12/DSC07768-Large.webp',
      quote: 'Challenges exist to be solved, not to debate how complicated they are.',
      bio: 'Michael Bodemer is the go-to guy when things get complicated—and let’s face it, that’s often the case with cable networks. With sharp insight and a knack for practical solutions, Michael is one of our key players. He’s not just detail-oriented; he’s a driving force—whether it’s in planning, customer interactions, or securing the best cables for every project.',
      linkedin: 'https://www.linkedin.com/in/michael-bodemer-33b493122/'
    }
  ];

  return (
    <div className="flex flex-col min-h-screen">
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden bg-neutral-dark">
        <div className="absolute inset-0 z-0">
          <Image 
            src="https://klz-cables.com/wp-content/uploads/2024/12/DSC07655-Large.webp" 
            alt="KLZ Team" 
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-black/80 to-black/40" />
        </div>
        
        <Container className="relative z-10 text-center text-white max-w-4xl">
          <h1 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight">
            The bright sparks behind the power
          </h1>
          <p className="text-xl md:text-2xl text-neutral-light">
            We connect energy, expertise, and innovation to power a greener future.
          </p>
        </Container>
      </section>

      {/* Team Members Section */}
      <Section className="bg-white">
        <Container>
          <div className="space-y-24">
            {teamMembers.map((member, idx) => (
              <div key={idx} className={`flex flex-col md:flex-row gap-12 items-center ${idx % 2 === 1 ? 'md:flex-row-reverse' : ''}`}>
                <div className="w-full md:w-1/2 relative aspect-[4/3] rounded-lg overflow-hidden shadow-lg">
                  <Image 
                    src={member.image} 
                    alt={member.name} 
                    fill 
                    className="object-cover"
                  />
                </div>
                <div className="w-full md:w-1/2 space-y-6">
                  <h2 className="text-4xl font-bold text-primary">{member.name}</h2>
                  <blockquote className="text-2xl font-medium italic text-text-primary border-l-4 border-primary pl-6 py-2">
                    "{member.quote}"
                  </blockquote>
                  <p className="text-lg text-text-secondary leading-relaxed">
                    {member.bio}
                  </p>
                  <a 
                    href={member.linkedin} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="inline-flex items-center text-primary font-bold hover:text-primary-dark transition-colors group border-2 border-primary px-6 py-3 rounded-full hover:bg-primary hover:text-white"
                  >
                    Check {member.name.split(' ')[0]}'s LinkedIn
                    <span className="ml-2 group-hover:translate-x-1 transition-transform">&rarr;</span>
                  </a>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Manifesto Section */}
      <Section className="bg-neutral-dark text-white">
        <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">Our manifesto</h2>
            </div>
            <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8">
              {[
                { title: 'Competence', desc: 'Decades of experience and Europe-wide know-how combined with commitment and new ideas.' },
                { title: 'Availability', desc: 'Always there for you - no waiting, no delays, just fast and reliable support.' },
                { title: 'Solutions', desc: 'Solutions require a lot of questions. We ask them. You, the manufacturer and ourselves.' },
                { title: 'Logistics', desc: 'Monitoring production, regular exchanges, freight tracking, customs clearance - our everyday life.' },
                { title: 'Open to new things', desc: 'We listen. From the inquiry, through the offer, to delivery. What can be done better needs to be discussed.' },
                { title: 'Reliability', desc: 'We deliver what we promise – every time, without fail.' }
              ].map((item, idx) => (
                <div key={idx} className="bg-white/5 p-6 rounded-lg border border-white/10 hover:bg-white/10 transition-colors">
                  <div className="text-primary font-mono text-xl mb-4">0{idx + 1}</div>
                  <h3 className="text-xl font-bold mb-3">{item.title}</h3>
                  <p className="text-white/70">{item.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </Container>
      </Section>

      {/* Gallery Section */}
      <Section className="bg-neutral-dark py-0 pb-24">
        <Container>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              'https://klz-cables.com/wp-content/uploads/2024/12/DSC07539-Large-600x400.webp',
              'https://klz-cables.com/wp-content/uploads/2024/12/DSC07460-Large-600x400.webp',
              'https://klz-cables.com/wp-content/uploads/2024/12/DSC07469-Large-600x400.webp',
              'https://klz-cables.com/wp-content/uploads/2024/12/DSC07433-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>
  );
}