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

const Hero: React.FC = () => {
  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">
            Инженерные изыскания,
            <br />
            <span className="text-brand-orange">проектирование</span> и 
            <br />
            <span className="text-brand-orange">строительство</span>
          </h1>
          <p className="text-gray-300 text-lg md:text-xl mb-12 max-w-3xl mx-auto leading-relaxed">
            ООО «ГеоВектор» — профессиональные решения для вашего проекта от изысканий до сдачи объекта. 
            Современное оборудование, опытные специалисты и соблюдение всех норм и стандартов.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Link 
              to="/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"
            >
              Рассчитать стоимость проекта
            </Link>
            <Link 
              to="/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"
            >
              Наши услуги
            </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) => (
            <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">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Hero;