import { MapPin } from 'lucide-react';
import Image from 'next/image';
import '../../src/app/globals.css'

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

export const HeroSection = () => {
  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 mx-auto'>
            <div className='max-w-lg space-y-4 text-white'>
              <div className='flex tracking-in-expand'>
                <h1 className='text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl '>
                  Сеть современных заправок в Таджикистане
                </h1>
              </div>
              <p className='text-lg text-gray-200'>
                Качественное топливо, удобное расположение и отличный сервис для
                наших клиентов
              </p>
              <div className='flex gap-4'>
                <Button className='bg-red-600 hover:bg-red-700'>
                  Найти заправку <MapPin className='ml-2 h-4 w-4' />
                </Button>
                <Button variant='outline' className='animate-pulse'
                >
                  Узнать больше
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};