import React from 'react';
import { Section, Container } from '../../components/ui';

export default function WhyChooseUs() {
  return (
    <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">
            <div className="sticky top-24">
              <h2 className="text-5xl font-bold text-primary mb-6">Why choose us</h2>
              <p className="text-xl text-text-secondary">
                Experience prevents many mistakes, but we learn something new every day
              </p>
            </div>
          </div>
          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
            {[
              {
                num: '01',
                title: 'Expertise with depth',
                desc: 'Our team has decades of experience – far beyond the founding of KLZ in 2009. The entire team has over 100 years of cable experience, gained in a wide variety of plants, from low voltage to medium voltage to high voltage. We know what cables smell like, what the colleague at the shielding machine is responsible for how testing is carried out.'
              },
              {
                num: '02',
                title: 'Tailor-made solutions for your project',
                desc: 'When things get more complex, we involve our technical consultants. That’s where you need experts who haven’t just started their careers. You need people who read and understand standards and have sometimes been involved. We have them, and with their and our experience we differentiate ourselves from simple cable trading'
              },
              {
                num: '03',
                title: 'Reliability that keeps your projects on track',
                desc: 'Accessibility, quick response in a fast-moving world. Do you still have questions after 5 p.m.? Or at the weekend? We are always there. And that is how we have developed our partners so that as a team we can realize what you have paid for. And if something does not go well, no one hides.'
              },
              {
                num: '04',
                title: 'Sustainability without compromise',
                desc: 'We are convinced that we will leave the world better than we found it. With initiatives such as our drum return service and a clear focus on recycling, we ensure that every connection is as environmentally friendly as possible. Each of our partners has the appropriate certificates, which are increasingly expected by all customers.'
              }
            ].map((item, idx) => (
              <div key={idx} className="space-y-4">
                <span className="text-sm font-mono text-primary/60 border-b border-primary/20 pb-2 block w-fit">{item.num}</span>
                <h3 className="text-2xl font-bold">{item.title}</h3>
                <p className="text-text-secondary leading-relaxed">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}
