changes

components/sections/ServicesGrid.tsx

@@ -1,6 +1,12 @@
+"use client";
+
+import { useState } from "react";
 import { SectionHeading } from "../common/SectionHeading";
-import { IconCard } from "../common/IconCard";
 import { services as defaultServices } from "@/content/services";
+import Link from "next/link";
+import Image from "next/image";
+import { buttonClasses } from "@/components/ui/Button";
+import { ArrowRight } from "lucide-react";
 
 interface ServicesGridProps {
   services?: {
@@ -16,12 +22,14 @@ interface ServicesGridProps {
 
 export function ServicesGrid({
   services = defaultServices,
-  title = "Kompleksowe usługi dla Twojego domu",
-  subtitle = "Zapewniamy profesjonalne wsparcie w zakresie instalacji sanitarnych, grzewczych, chłodniczych oraz prac wykończeniowych.",
-  eyebrow = "Pełna Oferta"
+  title = "Rozwiązania dla Twojego domu i biznesu",
+  subtitle = "Wybierz kategorię usług, aby poznać szczegóły. Oferujemy kompleksowe doradztwo, montaż oraz serwis.",
+  eyebrow = "Nasze Usługi"
 }: ServicesGridProps) {
+  const [activeTab, setActiveTab] = useState(0);
+
   return (
-    <section className="py-16 md:py-24 bg-slate-50 border-t border-b border-border">
+    <section className="py-16 md:py-24 bg-white border-b border-border">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <SectionHeading
           eyebrow={eyebrow}
@@ -30,16 +38,60 @@ export function ServicesGrid({
           align="center"
         />
 
-        <div className={`grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8 mt-10 ${services.length === 2 ? 'max-w-4xl mx-auto' : 'lg:grid-cols-3'}`}>
-          {services.map((service, idx) => (
-            <IconCard
-              key={idx}
-              title={service.title}
-              description={service.description}
-              iconName={service.icon}
-              href={service.href}
-            />
-          ))}
+        <div className="mt-12 flex flex-col items-center">
+          {/* Zakładki */}
+          <div className="flex flex-wrap justify-center gap-2 md:gap-4 mb-10 bg-slate-50 p-2 rounded-2xl border border-border">
+            {services.map((service, idx) => (
+              <button
+                key={idx}
+                onClick={() => setActiveTab(idx)}
+                className={`px-4 py-2.5 md:px-6 md:py-3 rounded-xl text-sm md:text-base font-bold transition-all ${
+                  activeTab === idx
+                    ? "bg-white text-primary shadow-sm border border-border"
+                    : "text-text-muted hover:text-primary hover:bg-slate-100"
+                }`}
+              >
+                {service.title}
+              </button>
+            ))}
+          </div>
+
+          {/* Zawartość aktywnej zakładki */}
+          <div className="w-full max-w-4xl bg-slate-50 rounded-3xl p-8 md:p-12 border border-border shadow-sm">
+            {services.map((service, idx) => {
+              if (idx !== activeTab) return null;
+              
+              return (
+                <div key={idx} className="flex flex-col md:grid md:grid-cols-[2fr_3fr] gap-8 lg:gap-12 items-center animate-fade-in-up">
+                  
+                  {/* Zastąpiono sztuczną ikonę w kółku realnym zdjęciem */}
+                  <div className="w-full aspect-[4/3] relative rounded-xl overflow-hidden border border-border shadow-sm">
+                    <Image 
+                      src={`/images/services/montaz.webp`} // Placeholder obrazka z usług (można podpiąć z contentu jeśli jest)
+                      alt={service.title}
+                      fill
+                      className="object-cover"
+                    />
+                  </div>
+                  
+                  <div className="flex-1">
+                    <h3 className="text-2xl md:text-3xl font-bold text-primary font-heading mb-4">
+                      {service.title}
+                    </h3>
+                    <p className="text-base md:text-lg text-text-muted leading-relaxed mb-6">
+                      {service.description}
+                    </p>
+                    
+                    {service.href && (
+                      <Link href={service.href} className={buttonClasses({ variant: 'outline', size: 'sm' })}>
+                        Więcej szczegółów <ArrowRight className="size-4" />
+                      </Link>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
         </div>
       </div>
     </section>