import { LightbulbIcon, ShieldCheckIcon, ZapIcon, UsersIcon } from "@/components/Icons";

export default function Values() {
  const values = [
    { Icon: LightbulbIcon, title: "Innowacja", description: "Zawsze szukamy nowoczesnych i sprawdzonych rozwiązań." },
    { Icon: ShieldCheckIcon, title: "Zaufanie", description: "Transparentność i rzetelność w każdym kroku współpracy." },
    { Icon: ZapIcon, title: "Efektywność", description: "Maksymalizujemy wyniki przy minimalnym wysiłku." },
    { Icon: UsersIcon, title: "Partnerstwo", description: "Jesteśmy Twoim partnerem — nie tylko dostawcą." },
  ];

  return (
    <section className="py-20 px-4 bg-gray-900">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-14">
          <h2 className="text-4xl font-bold text-white mb-4">Nasze wartości</h2>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {values.map((v) => (
            <div key={v.title} className="bg-gray-800 border border-gray-700 rounded-xl p-6 text-center hover:border-cyan-500/50 transition-colors">
              <div className="w-8 h-8 text-cyan-400 mx-auto mb-4">
                <v.Icon />
              </div>
              <h3 className="text-lg font-semibold text-white mb-2">{v.title}</h3>
              <p className="text-gray-300 text-sm leading-relaxed">{v.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}