static-site/components/templates/services.js

import { useState } from "react";

export default function Services() {
	const [activeService, setActiveService] = useState(0);

	const services = [
		{
			id: 0,
			title: "Projektowanie i Realizacja Sieci",
			description: "Kompleksowe usługi od projektu po wykonanie sieci elektroenergetycznych niskiego i średniego napięcia",
			icon: (
				<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
				</svg>
			),
			image: "/images/1.jpg",
			features: [
				"Projektowanie sieci napowietrznych i kablowych",
				"Wykonawstwo sieci elektrycznych",
				"Budowa stacji transformatorowych",
				"Realizacja przyłączy elektroenergetycznych"
			]
		},
		{
			id: 1,
			title: "Instalacje Elektryczne",
			description: "Pełen zakres usług - projektowanie i montaż instalacji elektrycznych w obiektach mieszkalnych i przemysłowych",
			icon: (
				<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
				</svg>
			),
			image: "/images/2.jpg",
			features: [
				"Projektowanie i montaż oświetlenia",
				"Instalacje gniazd wtykowych",
				"Wykonanie systemów alarmowych",
				"Realizacja automatyki budynkowej"
			]
		},
		{
			id: 2,
			title: "Nadzory Inwestorskie",
			description: "Profesjonalny nadzór nad realizacją inwestycji elektrycznych na każdym etapie wykonania",
			icon: (
				<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
					<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
				</svg>
			),
			image: "/images/3.jpg",
			features: [
				"Nadzór autorski projektów",
				"Nadzór inwestorski realizacji",
				"Kontrola jakości wykonania",
				"Odbiory techniczne i rozruch"
			]
		},
		{
			id: 3,
			title: "Pomiary i Ekspertyzy",
			description: "Kompleksowe pomiary elektryczne, ekspertyzy techniczne i certyfikacja instalacji",
			icon: (
				<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
					<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
				</svg>
			),
			image: "/images/4.jpg",
			features: [
				"Pomiary rezystancji uziemień",
				"Pomiary ochronne instalacji",
				"Ekspertyzy i audyty techniczne",
				"Protokoły pomiarowe i certyfikaty"
			]
		}
	];

	return (
		<section id="uslugi" className="py-20 bg-gray-50">
			<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
				{/* Header */}
				<div className="text-center mb-16">
					<h2 className="text-4xl font-bold text-gray-900 mb-4">
						Nasze Usługi
					</h2>
					<p className="text-xl text-gray-600 max-w-3xl mx-auto">
						Oferujemy kompleksowe usługi elektryczne - od projektowania przez realizację 
						po nadzory i pomiary. Każdy projekt wykonujemy z najwyższą starannością od A do Z.
					</p>
				</div>

				<div className="grid lg:grid-cols-2 gap-12 items-center">
					{/* Services List */}
					<div className="space-y-6">
						{services.map((service, index) => (
							<div
								key={service.id}
								className={`p-6 rounded-xl cursor-pointer transition-all duration-300 ${
									activeService === index
										? "bg-blue-600 text-white shadow-xl transform scale-105"
										: "bg-white text-gray-700 hover:bg-gray-100"
								}`}
								onClick={() => setActiveService(index)}
							>
								<div className="flex items-start space-x-4">
									<div className={`flex-shrink-0 ${
										activeService === index ? "text-blue-200" : "text-blue-600"
									}`}>
										{service.icon}
									</div>
									<div className="flex-1">
										<h3 className="text-xl font-semibold mb-2">
											{service.title}
										</h3>
										<p className={`text-sm ${
											activeService === index ? "text-blue-100" : "text-gray-600"
										}`}>
											{service.description}
										</p>
									</div>
								</div>
							</div>
						))}
					</div>

					{/* Service Details */}
					<div className="bg-white rounded-2xl shadow-xl overflow-hidden">
						<div className="relative h-64">
							<img
								src={services[activeService].image}
								alt={services[activeService].title}
								className="w-full h-full object-cover"
							/>
							<div className="absolute inset-0 bg-black bg-opacity-40"></div>
							<div className="absolute bottom-6 left-6 text-white">
								<h3 className="text-2xl font-bold mb-2">
									{services[activeService].title}
								</h3>
							</div>
						</div>
						
						<div className="p-8">
							<p className="text-gray-600 mb-6">
								{services[activeService].description}
							</p>
							
							<h4 className="font-semibold text-gray-900 mb-4">
								Zakres usług:
							</h4>
							<ul className="space-y-2">
								{services[activeService].features.map((feature, index) => (
									<li key={index} className="flex items-center text-gray-600">
										<svg className="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
										</svg>
										{feature}
									</li>
								))}
							</ul>
						</div>
					</div>
				</div>
			</div>
		</section>
	);
}