import React from 'react';
import { useTranslations } from 'next-intl';
import { Section, Container } from '../../components/ui';

export default function WhatWeDo() {
  const t = useTranslations('Home.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-3">
            <div className="sticky top-24">
              <h2 className="text-5xl font-bold text-primary mb-6">{t('title')}</h2>
              <p className="text-xl text-text-secondary">
                {t('subtitle')}
              </p>
            </div>
          </div>
          <div className="lg:col-span-9 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
            {[0, 1, 2, 3].map((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">0{idx + 1}</span>
                <h3 className="text-2xl font-bold">{t(`items.${idx}.title`)}</h3>
                <p className="text-text-secondary leading-relaxed">{t(`items.${idx}.description`)}</p>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}