export default function Hero() {
	const scrollToSection = (sectionId) => {
		const element = document.getElementById(sectionId);
		if (element) {
			element.scrollIntoView({ behavior: "smooth" });
		}
	};

	return (
		<div className="relative h-screen flex items-center justify-center overflow-hidden">
			{/* Background Image */}
			<div 
				className="absolute inset-0 bg-cover bg-center bg-no-repeat"
				style={{ backgroundImage: "url('./main.jpg')" }}
			>
				<div className="absolute inset-0 bg-black bg-opacity-50"></div>
			</div>

			{/* Content */}
			<div className="relative z-10 text-center text-white max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
				<h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
					Projektowanie
					<span className="block text-blue-400">i Realizacja</span>
					<span className="block text-2xl md:text-4xl font-medium mt-2">Instalacji Elektrycznych</span>
				</h1>
				
				<p className="text-xl md:text-2xl mb-8 text-gray-200 max-w-3xl mx-auto">
					Kompleksowe usługi elektryczne - od projektu po pełną realizację. 
					Ponad 20 lat doświadczenia, zaufało nam już ponad 4000 klientów.
				</p>

				<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
					<button 
						onClick={() => scrollToSection("uslugi")}
						className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300 transform hover:scale-105 shadow-lg"
					>
						Nasze Usługi
					</button>
					<button 
						onClick={() => scrollToSection("kontakt")}
						className="border-2 border-white text-white hover:bg-white hover:text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300"
					>
						Skontaktuj się
					</button>
				</div>

				{/* Stats */}
				<div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
					<div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-4">
						<div className="text-3xl font-bold text-blue-400">20+</div>
						<div className="text-sm text-gray-300">Lat doświadczenia</div>
					</div>
					<div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-4">
						<div className="text-3xl font-bold text-blue-400">4000+</div>
						<div className="text-sm text-gray-300">Projektów</div>
					</div>
					<div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-4">
						<div className="text-3xl font-bold text-blue-400">100%</div>
						<div className="text-sm text-gray-300">Zadowolenia</div>
					</div>
					<div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-lg p-4">
						<div className="text-3xl font-bold text-blue-400">24/7</div>
						<div className="text-sm text-gray-300">Wsparcie</div>
					</div>
				</div>
			</div>

			{/* Scroll indicator */}
			<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
				<button 
					onClick={() => scrollToSection("uslugi")}
					className="text-white hover:text-blue-400 transition-colors duration-300"
				>
					<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
						<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
					</svg>
				</button>
			</div>
		</div>
	);
}