'use client';

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

import { useLanguage } from '@/shared/language';
import { Button } from '@/shared/shadcn-ui/button';

export const HeroSection = () => {
  const { t } = useLanguage();

  return (
    <section className='relative'>
      <div className='relative h-[500px] w-full overflow-hidden'>
        <Image
          src='/placeholder.svg?height=500&width=1920'
          alt='Gas Station Network'
          width={1920}
          height={500}
          className='object-cover'
          priority
        />
        <div className='absolute inset-0 flex items-center bg-gradient-to-r from-black/70 to-black/30'>
          <div className='container'>
            <div className='max-w-lg space-y-4 text-white'>
              <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl'>
                {t('home.hero.title')}
              </h1>
              <p className='text-lg text-gray-200'>
                {t('home.hero.description')}
              </p>
              <div className='flex gap-4'>
                <Button className='bg-red-600 hover:bg-red-700'>
                  {t('common.buttons.findStation')}{' '}
                  <MapPin className='ml-2 h-4 w-4' />
                </Button>
                <Button
                  variant='outline'
                  className='border-white text-white hover:bg-white/10'
                >
                  {t('common.buttons.learnMore')}
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};