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

export default function WhatWeDo() {
  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">What we do</h2>
              <p className="text-xl text-text-secondary">
                We ensure that the electricity flows – with quality-tested cables. From low voltage up to high voltage.
              </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: 'Supply to energy suppliers, wind and solar parks, industry and trade',
                desc: 'We support your projects from 1 to 220 kV, from simple NYY to high-voltage cables with segment conductors and aluminum sheaths, with a particular focus on medium-voltage cables.'
              },
              {
                num: '02',
                title: 'Supply of cables whose quality is certified',
                desc: 'Cables are products that have to function 100%. For decades, often 80 to 100 years. Our cables are not only approved by VDE. The most well-known energy suppliers trust us.'
              },
              {
                num: '03',
                title: 'We deliver on time because we know the consequences for you',
                desc: 'Wind farm North Germany, coordinates XYZ, delivery Wednesday 2-4 p.m., no unloading option. Yes, we know that. We organize the logistics with a back office team that has up to 20 years of cable experience.'
              },
              {
                num: '04',
                title: 'The cable alone is not the solution',
                desc: 'Stony ground? Perhaps a thicker outer sheath would be better? Damp ground? Can there be transverse watertight protection? We think for you and ask questions.'
              }
            ].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>
  );
}