import React from 'react';
import Image from 'next/image';
import { SectionHeading } from '../common/SectionHeading';
import { companyDetails } from '@/content/company';

export function CertificatesSection() {
  return (
    <section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <SectionHeading
        eyebrow="Uprawnienia"
        title="Nasze certyfikaty"
        subtitle="Zaufaj wykwalifikowanym specjalistom. Posiadamy wszystkie licencje wymagane do profesjonalnego montażu urządzeń HVAC."
        align="center"
      />

      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-10 mt-16">
        {companyDetails.certificates.map((cert, idx) => (
          <div 
            key={idx} 
            className="group flex flex-col items-center text-center gap-4 p-6 bg-slate-50 rounded-2xl border border-border hover:border-accent/50 transition-colors"
          >
            {/* W rzeczywistości użylibyśmy obrazków. Tutaj dajemy szary prostokąt jako placeholder wg wytycznych */}
            <div className="relative w-full aspect-[4/3] bg-white rounded-lg border border-border flex items-center justify-center p-4 overflow-hidden group-hover:shadow-md transition-shadow">
              {/* Jeśli cert.image istnieje realnie, można by użyć Image, na razie tekstowy placeholder */}
              <div className="text-sm font-bold text-slate-300 font-heading">
                LOGO / CERTYFIKAT
              </div>
            </div>
            <p className="font-semibold text-primary text-sm leading-tight group-hover:text-accent transition-colors">
              {cert.name}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}