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

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

  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">
            The bright sparks behind the power
          </h5>
          <h2 className="text-3xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-tight">
            We connect energy, expertise, and innovation to power a greener future.
          </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">Michael Bodemer</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">
              "Challenges exist to be solved, not to debate how complicated they are."
            </h2>
            <div className="w-12 h-1 bg-white mb-8" />
            <p className="text-lg leading-relaxed opacity-90 mb-8">
              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.
            </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"
            >
              Check Michael's 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="Michael Bodemer" 
              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/medium-voltage-1920x400.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">A Legacy of Excellence in Every Connection</h3>
              <div className="space-y-6 text-lg opacity-90">
                <p>
                  At KLZ, our expertise is built on generations of dedication to the energy industry. With decades of hands-on experience, we’ve grown alongside the evolution of cable technology, combining traditional craftsmanship with modern innovation. Each project we take on reflects a deep understanding of what it takes to create lasting, reliable energy solutions.
                </p>
                <p>
                  Paired with historic illustrations from the industry’s early days, our story is a reminder of how far cables have come – and how much care has always gone into connecting the world.
                </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="Klaus Mintel" 
              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">Klaus Mintel</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">
              "Sometimes all it takes is a clear head and a good cable to make the world a little better."
            </h2>
            <div className="w-12 h-1 bg-white mb-8" />
            <p className="text-lg leading-relaxed opacity-90 mb-8">
              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.
            </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"
            >
              Check 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">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. Production partners up to 525 kV and the most modern systems, test laboratories and ready to invest in the future.' },
                { title: 'Availability', desc: 'Always there for you - no waiting, no delays, just fast and reliable support. Maybe it\'s because we love what we do.' },
                { title: 'Solutions', desc: 'Solutions require a lot of questions. We ask them. You, the manufacturer and ourselves. If you don\'t ask questions, you\'ll pay for it later. We need to prevent that.' },
                { title: 'Logistics', desc: 'Monitoring production, regular exchanges, freight tracking, customs clearance, reloading, paying attention to the delivery time tunnel, invoices, delivery notes - our everyday life. We have the right team for it.' },
                { 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. If you don\'t adapt your processes, you\'ll no longer be on the highway at some point. Instead, you\'ll end up in a dead end.' },
                { title: 'Reliability', desc: 'We deliver what we promise – every time, without fail.' }
              ].map((item, 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">{item.title}</h3>
                  <p className="text-text-secondary">{item.desc}</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-4 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'
            ].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>
  );
}