'use client';

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

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-[300px] w-full overflow-hidden md:h-[500px] xl:h-[700px]'>
        <Image
          src='/oriyo_bg.jpeg'
          alt='Gas Station Network'
          fill
          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 mx-auto'>
            <div className='max-w-lg space-y-4 text-white'>
              <div className='animate-fade animate-duration-[3000ms] animate-ease-in-out'>
                <h1 className='text-2xl font-bold tracking-tight sm:text-4xl md:text-6xl'>
                  {t('home.hero.title')}
                </h1>
              </div>
              <p className='text-lg text-gray-200'>
                {t('home.hero.description')}
              </p>
              <div className='flex gap-4'>
                <Link href='#'>
                  <Button className='bg-red-600 hover:bg-red-700'>
                    {t('common.buttons.findStation')}{' '}
                    <MapPin className='ml-2 h-4 w-4' />
                  </Button>
                </Link>
                <Link href='#'>
                  <Button variant='outline' className='animate-pulse'>
                    {t('common.buttons.learnMore')}
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
