import React from 'react';
import { Link, useLocation } from 'react-router-dom';

const FleetTeaser: React.FC = () => {
  const location = useLocation();
  const isEnglish = location.pathname.startsWith('/en');
  const prefix = isEnglish ? '/en' : '';

  return (
    <section className="py-20 bg-white">
      <div className="container mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              {isEnglish ? 'Own vehicle fleet and equipment' : 'Собственный автопарк и техника'}
            </h2>
            <p className="text-gray-600 mb-4">
              {isEnglish
                ? 'We operate drilling rigs, off-road vehicles, special-purpose trucks and auxiliary equipment, allowing us to mobilise quickly and work in challenging conditions.'
                : 'В нашем распоряжении буровые установки, вездеходы, спецтранспорт и вспомогательная техника, которые позволяют быстро выходить на объект и работать в сложных условиях.'}
            </p>
            <p className="text-gray-600 mb-6">
              {isEnglish
                ? 'This shortens mobilisation time, reduces downtime risks and gives you confidence that the work will be completed on schedule.'
                : 'Это сокращает сроки мобилизации, снижает риски простоев и даёт вам уверенность в том, что работы будут выполнены в оговоренные сроки.'}
            </p>
            <Link
              to={`${prefix}/fleet`}
              className="inline-flex items-center px-6 py-3 bg-brand-orange text-white font-bold rounded-lg hover:bg-orange-600 transition-colors"
            >
              {isEnglish ? 'View our fleet' : 'Посмотреть автопарк'}
            </Link>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="rounded-2xl overflow-hidden shadow-lg">
              <img
                src="/media/cars/33725959_1920_q70.webp"
                alt="Техника ГеоВектор"
                className="w-full h-full object-cover"
                loading="lazy"
              />
            </div>
            <div className="rounded-2xl overflow-hidden shadow-lg translate-y-6">
              <img
                src="/media/cars/33725970_1920_q70.webp"
                alt="Спецтранспорт ГеоВектор"
                className="w-full h-full object-cover"
                loading="lazy"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FleetTeaser;