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

export default function WhatWeDo() {
  const t = useTranslations('Home.whatWeDo');

  return (
    <Section className="bg-white">
      <Container>
        <div className="sticky-narrative-container">
          <div className="sticky-narrative-sidebar">
            <div className="lg:sticky lg:top-32">
              <Heading level={2} subtitle={t('expertise')} className="text-primary-dark">
                {t('title')}
              </Heading>
              <p className="text-base md:text-lg text-text-secondary leading-relaxed">
                {t('subtitle')}
              </p>
              <div className="mt-8 md:mt-12 p-6 md:p-8 bg-saturated/10 rounded-2xl border border-saturated/10">
                <p className="text-saturated font-bold text-base md:text-base italic">
                  "{t('quote')}"
                </p>
              </div>
            </div>
          </div>
          <div className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-x-8 md:gap-x-12 gap-y-12 md:gap-y-20">
            {[0, 1, 2, 3].map((idx) => (
              <div key={idx} className="group">
                <div className="flex items-center gap-4 mb-4 md:mb-6">
                  <span className="flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-saturated text-white font-bold text-base md:text-lg shadow-lg shadow-saturated/20 group-hover:scale-110 transition-transform">
                    {idx + 1}
                  </span>
                  <div className="h-px flex-grow bg-neutral-medium" />
                </div>
                <h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-primary-dark group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
                <p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </Section>
  );
}