'use client';

import { Percent } from 'lucide-react';
import Image from 'next/image';

import { Container } from '@/shared/components/container';
import { useTextController } from '@/shared/language/hooks/use-text-controller';
import { useMediaController } from '@/shared/media/hooks/use-media-controller';

interface Benefit {
  title: string;
  description: string;
}

const benefits: Array<Benefit> = [
  {
    title: 'Экономия',
    description: 'Скидки и бонусы для постоянных клиентов',
  },
  {
    title: 'Удобство',
    description: 'Быстрая оплата и обслуживание',
  },
  {
    title: 'Качество',
    description: 'Гарантированно высокое качество топлива',
  },
  {
    title: 'Дополнительные услуги',
    description: 'Кафе, магазины и другие услуги на наших заправках',
  },
];

export const BenefitsSection = () => {
  const { t } = useTextController();
  const { m } = useMediaController();

  return (
    <section className='bg-gray-50'>
      <Container>
        <div className='grid items-center gap-12 md:grid-cols-2'>
          <div
            data-aos='fade-right'
            data-aos-duration='4000'
            className='order-2 md:order-1'
          >
            <div className='mb-4 inline-flex items-center justify-center rounded-full bg-red-100 p-2'>
              <Percent className='h-6 w-6 text-red-600' />
            </div>
            <h2 className='mb-6 text-3xl font-bold tracking-tight sm:text-4xl'>
              {t('clients.benefits.title')}
            </h2>
            <p className='mb-6 text-gray-600'>
              {t('clients.benefits.subtitle')}
            </p>
            <div className='space-y-4'>
              {benefits.map(({ title, description }) => {
                return (
                  <div key={title} className='flex items-start'>
                    <div className='mt-1 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-red-600'>
                      <span className='text-xs text-white'>✓</span>
                    </div>
                    <div className='ml-3'>
                      <h3 className='text-lg font-medium'>{title}</h3>
                      <p className='text-gray-600'>{description}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div
            data-aos='fade-up'
            className='relative order-1 h-[400px] overflow-hidden rounded-xl shadow-xl md:order-2'
          >
            <Image
              src={
                m('clients.third-section.banner') ||
                '/placeholder.svg?height=400&width=600&text=Преимущества+для+клиентов'
              }
              alt='Преимущества для клиентов'
              fill
              className='object-cover'
            />
          </div>
        </div>
      </Container>
    </section>
  );
};
