import React from 'react';
import { SectionHeading } from '../common/SectionHeading';
import { ShieldCheck, Clock, ThumbsUp, HeartHandshake } from 'lucide-react';

const values = [
  {
    title: 'Najwyższa jakość',
    description: 'Nie idziemy na kompromisy. Stosujemy wyłącznie sprawdzone materiały i urządzenia renomowanych producentów.',
    icon: ThumbsUp
  },
  {
    title: 'Terminowość',
    description: 'Szanujemy Twój czas. Każde zlecenie realizujemy zgodnie z ustalonym harmonogramem.',
    icon: Clock
  },
  {
    title: 'Bezpieczeństwo',
    description: 'Posiadamy wszystkie niezbędne uprawnienia (m.in. F-Gaz, SEP) oraz pełne ubezpieczenie OC firmy.',
    icon: ShieldCheck
  },
  {
    title: 'Długofalowe relacje',
    description: 'Zależy nam na zaufaniu. Po skończonym montażu czy remoncie oferujemy pełną opiekę serwisową.',
    icon: HeartHandshake
  }
];

export function ValuesGrid() {
  return (
    <section className="py-16 md:py-24 bg-slate-50 border-y border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="Dlaczego my"
          title="Nasze wartości"
          subtitle="Zasady, którymi kierujemy się w codziennej pracy z naszymi klientami."
          align="center"
        />

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mt-16">
          {values.map((val, idx) => {
            const Icon = val.icon;
            return (
              <div key={idx} className="bg-white p-8 rounded-2xl border border-border text-center hover:shadow-lg transition-shadow duration-300">
                <div className="mx-auto w-16 h-16 bg-accent/10 text-accent rounded-2xl flex items-center justify-center mb-6 transform -rotate-3 hover:rotate-0 transition-transform">
                  <Icon className="w-8 h-8" />
                </div>
                <h3 className="text-xl font-bold text-primary font-heading mb-3">{val.title}</h3>
                <p className="text-text-muted leading-relaxed text-sm">{val.description}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}