import React from 'react';
import { Wind, Droplets, Mountain } from 'lucide-react';

const pumpTypes = [
  {
    title: 'Powietrze - Woda',
    description: 'Najpopularniejsze rozwiązanie. Urządzenie pobiera energię z powietrza zewnętrznego i przekazuje ją do wodnej instalacji grzewczej (kaloryfery, podłogówka) oraz podgrzewa wodę użytkową.',
    forWho: 'Idealne do nowych domów i większości termomodernizacji (wymiana pieca).',
    icon: Droplets,
  },
  {
    title: 'Powietrze - Powietrze',
    description: 'Działają na zasadzie klimatyzatorów. Ogrzewają bezpośrednio powietrze w pomieszczeniu, bez udziału instalacji wodnej. Szybko nagrzewają i posiadają funkcję chłodzenia.',
    forWho: 'Świetne jako dodatkowe źródło ciepła, do domków letniskowych i mniejszych przestrzeni.',
    icon: Wind,
  },
  {
    title: 'Gruntowe',
    description: 'Pobierają ciepło z wnętrza ziemi za pomocą kolektorów. Zapewniają najwyższą i najbardziej stabilną wydajność niezależnie od mrozów na zewnątrz.',
    forWho: 'Dla inwestorów z dużą działką, oczekujących najwyższej niezawodności i gotowych na wyższe koszty początkowe.',
    icon: Mountain,
  },
];

export const HeatPumpTypes = () => {
  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 pomp ciepła</h2>
          <p className="text-gray-600">
            Wybór odpowiedniej technologii zależy od uwarunkowań Twojego budynku, wielkości działki oraz budżetu.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {pumpTypes.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="flex items-center gap-4 mb-6">
                  <div className="w-12 h-12 bg-primary/5 rounded-xl flex items-center justify-center text-primary">
                    <Icon className="w-6 h-6" />
                  </div>
                  <h3 className="text-xl font-bold text-primary">{type.title}</h3>
                </div>
                
                <p className="text-gray-600 mb-6 text-sm flex-grow">
                  {type.description}
                </p>
                
                <div className="bg-gray-50 rounded-lg p-4 mt-auto">
                  <h4 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Dla kogo?</h4>
                  <p className="text-sm text-gray-700 font-medium">{type.forWho}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};