import React from 'react';
import { STATS } from '../constants';
import { Link, useLocation } from 'react-router-dom';

interface HeroProps {
  title?: string;
  subtitle?: string;
}

const Hero: React.FC<HeroProps> = ({ title, subtitle }) => {
  const location = useLocation();
  const isEnglish = location.pathname.startsWith('/en');
  const prefix = isEnglish ? '/en' : '';

  return (
    <div className="relative w-full min-h-screen bg-brand-dark text-white flex flex-col">
      {/* Background Image Overlay */}
      <div className="absolute inset-0 z-0">
        <img 
          src="/media/images/hero/hero-main.png" 
          alt="Construction Site" 
          className="w-full h-full object-cover opacity-40"
          loading="eager"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-brand-dark/90 via-brand-dark/50 to-brand-dark/70 animate-gradient" />
      </div>

      {/* Hero Content */}
      <div className="relative z-10 container mx-auto px-6 flex-grow flex flex-col justify-center py-32 md:py-20">
        <div className="max-w-5xl mx-auto text-center mt-10 md:mt-0">
          <h1 className="text-4xl md:text-5xl lg:text-7xl font-bold leading-tight mb-8">
            {title || (
              <>
                Инженерные изыскания и проектирование
                <br />
                для сложных и ответственных объектов
              </>
            )}
          </h1>
          <p className="text-gray-300 text-lg md:text-xl mb-12 max-w-3xl mx-auto leading-relaxed">
            {subtitle || (
              <>
                ООО «ГеоВектор» — полный комплекс инженерных изысканий и проектных решений 
                для девелоперов, промышленных предприятий и госзаказчиков в России и других странах.
              </>
            )}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Link 
              to={`${prefix}/contacts`}
              className="inline-flex items-center justify-center bg-brand-orange text-white font-bold py-4 px-8 rounded-xl hover:bg-orange-600 transition-all duration-300 shadow-lg hover:shadow-xl hover:scale-105"
            >
              {isEnglish ? 'Request a project quote' : 'Рассчитать стоимость проекта'}
            </Link>
            <Link 
              to={`${prefix}/services`}
              className="inline-flex items-center justify-center bg-white/10 backdrop-blur-sm text-white font-bold py-4 px-8 rounded-xl hover:bg-white/20 transition-all duration-300 border-2 border-white/30"
            >
              {isEnglish ? 'Our services' : 'Наши услуги'}
            </Link>
          </div>
        </div>

        {/* Stats */}
        <div className="mt-24 grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-white/10 pt-12 max-w-5xl mx-auto w-full">
          {STATS.map((stat, idx) => {
            const label = isEnglish
              ? idx === 0
                ? 'For over 10 years we have been helping organisations deliver projects of any complexity.'
                : idx === 1
                ? 'More than 20 major companies trust us with their projects.'
                : idx === 2
                ? 'Over 30 successfully completed projects in the last 3 years.'
                : stat.label
              : stat.label;

            return (
              <div key={idx} className="flex flex-col items-center text-center">
                <span className="text-4xl md:text-5xl font-bold text-brand-orange mb-2">
                  {stat.value}
                </span>
                <p className="text-gray-400 text-sm md:text-base leading-relaxed">
                  {label}
                </p>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default Hero;