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

export default function WhyChooseUs() {
  const t = useTranslations('Home.whyChooseUs');

  return (
    <Section className="bg-neutral-light">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
          <div className="lg:col-span-4 order-1 lg:order-2">
            <div className="sticky top-32">
              <Heading level={2} subtitle={t('whyKlz')} className="text-primary-dark">
                {t('title')}
              </Heading>
              <p className="text-base md:text-lg text-text-secondary leading-relaxed">
                {t('subtitle')}
              </p>

              <ul className="mt-12 space-y-6 list-none p-0">
                {[0, 1, 2, 3].map((i) => (
                  <li key={i} className="flex items-center gap-4">
                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-accent flex items-center justify-center">
                      <svg
                        className="w-4 h-4 text-primary-dark"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={3}
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                    </div>
                    <span className="font-bold text-primary-dark text-base md:text-base">
                      {t(`features.${i}`)}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <ul className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8 order-2 lg:order-1 list-none p-0 m-0">
            {[0, 1, 2, 3].map((idx) => (
              <li
                key={idx}
                className="p-10 bg-white rounded-3xl border border-neutral-medium hover:border-accent transition-all duration-500 hover:shadow-xl group"
              >
                <div className="w-14 h-14 bg-saturated/10 rounded-2xl flex items-center justify-center mb-8 group-hover:bg-accent transition-colors duration-500">
                  <span className="text-white font-bold text-lg group-hover:text-primary-dark">
                    0{idx + 1}
                  </span>
                </div>
                <h3 className="text-xl font-bold mb-4 text-primary-dark">
                  {t(`items.${idx}.title`)}
                </h3>
                <p className="text-text-secondary text-base md:text-base leading-relaxed">
                  {t(`items.${idx}.description`)}
                </p>
              </li>
            ))}
          </ul>
        </div>
      </Container>
    </Section>
  );
}