export default function About() {
	return (
		<section id="onas" className="py-20 bg-white">
			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				<div className="grid lg:grid-cols-2 gap-16 items-center">
					{/* Content */}
					<div>
						<h2 className="text-4xl font-bold text-gray-900 mb-6">
							O firmie Wastpol
						</h2>
						
						<div className="space-y-6 text-gray-600">
							<p className="text-lg leading-relaxed">
								Jesteśmy firmą oferującą kompleksowe usługi elektryczne z ponad 20-letnim 
								doświadczeniem. Realizujemy pełen zakres prac - od projektowania przez 
								wykonawstwo po nadzory i pomiary instalacji elektrycznych.
							</p>
							
							<p className="text-lg leading-relaxed">
								Przez lata naszej działalności zaprojektowaliśmy i zrealizowaliśmy ponad 4000 
								projektów dla klientów w całej Polsce. Nasze doświadczenie obejmuje zarówno 
								instalacje domowe, jak i złożone projekty przemysłowe i infrastrukturalne.
							</p>
						</div>

						{/* Key Features */}
						<div className="mt-10 grid md:grid-cols-2 gap-6">
							<div className="flex items-start space-x-3">
								<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
									<svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
									</svg>
								</div>
								<div>
									<h4 className="font-semibold text-gray-900">Doświadczenie</h4>
									<p className="text-gray-600">Ponad 20 lat na rynku</p>
								</div>
							</div>

							<div className="flex items-start space-x-3">
								<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
									<svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
									</svg>
								</div>
								<div>
									<h4 className="font-semibold text-gray-900">Kompleksowość</h4>
									<p className="text-gray-600">Od projektu do realizacji</p>
								</div>
							</div>

							<div className="flex items-start space-x-3">
								<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
									<svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
									</svg>
								</div>
								<div>
									<h4 className="font-semibold text-gray-900">Terminowość</h4>
									<p className="text-gray-600">Dotrzymujemy ustalonych terminów</p>
								</div>
							</div>

							<div className="flex items-start space-x-3">
								<div className="flex-shrink-0 w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
									<svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
									</svg>
								</div>
								<div>
									<h4 className="font-semibold text-gray-900">Zespół</h4>
									<p className="text-gray-600">Wykwalifikowani specjaliści</p>
								</div>
							</div>
						</div>

						{/* CTA */}
						<div className="mt-10">
							<button 
								onClick={() => {
									const element = document.getElementById("kontakt");
									if (element) element.scrollIntoView({ behavior: "smooth" });
								}}
								className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105"
							>
								Skontaktuj się z nami
							</button>
						</div>
					</div>

					{/* Stats & Image */}
					<div className="space-y-8">
						{/* Main Image */}
						<div className="relative rounded-2xl overflow-hidden shadow-xl">
							<img
								src="/images/0.jpg"
								alt="Wastpol - realizacje projektów"
								className="w-full h-96 object-cover"
							/>
							<div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
							<div className="absolute bottom-6 left-6 text-white">
								<h3 className="text-xl font-semibold">Kompleksowe realizacje</h3>
								<p className="text-blue-200">Projektowanie i wykonawstwo od 2002 roku</p>
							</div>
						</div>

						{/* Achievement Stats */}
						<div className="bg-gradient-to-br from-blue-600 to-blue-800 rounded-2xl p-8 text-white">
							<h3 className="text-2xl font-bold mb-6 text-center">Nasze osiągnięcia</h3>
							
							<div className="grid grid-cols-2 gap-6">
								<div className="text-center">
									<div className="text-3xl font-bold text-blue-200 mb-2">4000+</div>
									<div className="text-sm text-blue-100">Zrealizowanych projektów</div>
								</div>
								<div className="text-center">
									<div className="text-3xl font-bold text-blue-200 mb-2">20+</div>
									<div className="text-sm text-blue-100">Lat doświadczenia</div>
								</div>
								<div className="text-center">
									<div className="text-3xl font-bold text-blue-200 mb-2">500+</div>
									<div className="text-sm text-blue-100">Zadowolonych klientów</div>
								</div>
								<div className="text-center">
									<div className="text-3xl font-bold text-blue-200 mb-2">100%</div>
									<div className="text-sm text-blue-100">Terminowych realizacji</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
}