"use client";

import { useState } from "react";
import { SectionHeading } from "../common/SectionHeading";
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?: {
    title: string;
    description: string;
    icon: string;
    href?: string;
  }[];
  title?: string;
  subtitle?: string;
  eyebrow?: string;
}

export function ServicesGrid({
  services = defaultServices,
  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-white border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow={eyebrow}
          title={title}
          subtitle={subtitle}
          align="center"
        />

        <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>
  );
}