'use client';

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';
import { AppStoreButtons } from '@/shared/components/app-store-buttons';

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

  return (
    <section className='bg-gray-50 py-16 sm:py-24 overflow-hidden'>
      <Container>
        <div className='flex flex-col items-center text-center space-y-8'>
          <div className='space-y-4'>
            <h2 className='text-3xl sm:text-4xl font-bold tracking-tight text-gray-900'>
              {t('common.name')} всегда с вами
            </h2>
            <p className='text-lg text-gray-600 max-w-2xl mx-auto'>
              Заправляйтесь быстрее, копите баллы и следите за акциями в нашем мобильном приложении. Ваш верный помощник на дорогах Таджикистана.
            </p>
          </div>
          
          <AppStoreButtons className='justify-center' />

          <div className='flex flex-wrap items-center justify-center gap-6 text-sm font-medium text-gray-500'>
            <div className='flex items-center gap-1.5 transition-colors hover:text-red-600'>
              <svg className='w-5 h-5 text-green-500' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
              </svg>
              Бонусная карта в телефоне
            </div>
            <div className='flex items-center gap-1.5 transition-colors hover:text-red-600'>
              <svg className='w-5 h-5 text-green-500' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
              </svg>
              История заправок
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
};