import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { Wind, LayoutGrid, Sparkles, ArrowRight } from 'lucide-react';

import { cn } from '@/lib/utils';

const acTypes = [
  {
    title: 'Klimatyzatory SPLIT',
    image: '/images/services/split.webp',
    description: 'Najpopularniejsze rozwiązanie do jednego pomieszczenia. Składa się z jednej jednostki wewnętrznej i jednej zewnętrznej.',
    icon: Wind,
    subtypes: ['Ścienne', 'Konsolowe', 'Kasetonowe', 'Kanałowe'],
    link: '/sklep?category=scienne',
  },
  {
    title: 'Systemy MULTISPLIT',
    image: '/images/services/split.webp',
    description: 'Idealne do chłodzenia całego domu. Do jednej jednostki zewnętrznej można podłączyć od 2 do 5 jednostek wewnętrznych.',
    icon: LayoutGrid,
    subtypes: ['Dla 2 pomieszczeń', 'Dla 3 pomieszczeń', 'Dla 4-5 pomieszczeń', 'Mieszane typy jednostek'],
    link: '/sklep?category=multisplit',
  },
  {
    title: 'Pozostałe rozwiązania',
    image: '/images/services/kasetonowe.webp',
    description: 'Specjalistyczne urządzenia łączące funkcje chłodzenia z zaawansowanym grzaniem lub oczyszczaniem powietrza.',
    icon: Sparkles,
    subtypes: ['Z funkcją ogrzewania (do -25°C)', 'Z zaawansowanym oczyszczaczem', 'Klimatyzatory przenośne', 'Klimatyzatory bez jednostki zewn.'],
    link: '/sklep',
  },
];

export const AcTypesSection = () => {
  return (
    <section className="py-16 bg-gray-50">
      <div className="container mx-auto px-4 md:px-8 max-w-7xl">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <h2 className="text-3xl font-bold text-primary mb-4">Rodzaje klimatyzatorów</h2>
          <p className="text-gray-600">
            Dobierzemy rozwiązanie idealnie dopasowane do Twoich potrzeb, niezależnie od tego czy chłodzisz jedno pomieszczenie, czy cały dom.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {acTypes.map((type, idx) => {
            const Icon = type.icon;
            return (
              <div key={idx} className="bg-white rounded-xl shadow-sm border border-gray-100 p-8 flex flex-col h-full hover:shadow-md transition-shadow">
                <div className="relative w-full h-44 rounded-xl overflow-hidden mb-4">
                  <Image src={type.image} alt={type.title} fill className="object-cover" />
                </div>
                <div className="w-14 h-14 bg-accent/10 rounded-xl flex items-center justify-center mb-6 text-accent">
                  <Icon className="w-7 h-7" />
                </div>
                <h3 className="text-xl font-bold text-primary mb-3">{type.title}</h3>
                <p className="text-gray-600 mb-6 text-sm flex-grow">
                  {type.description}
                </p>
                
                <ul className="space-y-2 mb-8">
                  {type.subtypes.map((subtype, sIdx) => (
                    <li key={sIdx} className="flex items-center text-sm text-gray-700">
                      <div className="w-1.5 h-1.5 rounded-full bg-accent mr-3"></div>
                      {subtype}
                    </li>
                  ))}
                </ul>
                
                <Link 
                  href={type.link}
                  className={cn("btn btn-outline btn-primary bg-white w-full justify-between group mt-auto")}
                >
                  Sprawdź modele
                  <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                </Link>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};