import { Award, FileText, ShieldCheck, Sparkles } from "lucide-react";
import { companyDetails } from "@/content/company";

export function WhyUs() {
  const advantages = [
    {
      icon: Award,
      title: "Uprawnienia F-Gaz i certyfikaty",
      description: "Posiadamy wszystkie wymagane certyfikaty UDT oraz autoryzacje wiodących producentów klimatyzacji.",
    },
    {
      icon: FileText,
      title: "Jasna wycena bez ukrytych kosztów",
      description: "Przed montażem otrzymujesz pełny kosztorys. Ceny podane w ofercie są cenami ostatecznymi.",
    },
    {
      icon: ShieldCheck,
      title: "Gwarancja i wsparcie serwisowe",
      description: "Zapewniamy pełną opiekę pogwarancyjną oraz coroczne przeglądy zachowujące gwarancję producenta.",
    },
    {
      icon: Sparkles,
      title: "Czystość i dbałość o detale",
      description: "Pracujemy z użyciem odkurzaczy przemysłowych. Po montażu zostawiamy pomieszczenia idealnie czyste.",
    },
  ];

  return (
    <section className="py-16 md:py-24 bg-slate-50 border-t border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
          {/* Left Column: Title, Intro and Statistics */}
          <div className="lg:col-span-5 flex flex-col gap-6">
            <div>
              <span className="text-xs md:text-sm font-semibold uppercase tracking-wider text-cta font-heading">
                Dlaczego ThermCool
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-primary font-heading leading-tight mt-2">
                Zaufany partner w instalacjach domowych
              </h2>
              <p className="text-sm md:text-base text-text-muted mt-4 leading-relaxed">
                Stawiamy na najwyższą jakość wykonania, terminowość oraz bezkompromisowe bezpieczeństwo. Pomagamy na każdym kroku — od wyboru odpowiedniego urządzenia, poprzez załatwienie dotacji, aż po finalny montaż i regularny serwis.
              </p>
            </div>

            {/* Stats Counters Grid */}
            <div className="grid grid-cols-2 gap-6 mt-6 border-t border-border pt-8">
              {companyDetails.stats.map((stat, idx) => (
                <div key={idx} className="flex flex-col">
                  <span className="text-3xl md:text-4xl font-extrabold text-primary font-heading">
                    {stat.value}
                  </span>
                  <span className="text-xs md:text-sm text-text-muted mt-1 leading-snug">
                    {stat.label}
                  </span>
                </div>
              ))}
            </div>
          </div>

          {/* Right Column: Advantages Grid */}
          <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6">
            {advantages.map((adv, idx) => {
              const Icon = adv.icon;
              return (
                <div
                  key={idx}
                  className="p-6 rounded-xl bg-white border border-border hover:shadow-md transition-shadow flex flex-col gap-4"
                >
                  <div className="size-12 rounded-lg bg-accent-light text-accent flex items-center justify-center shrink-0">
                    <Icon className="size-6" />
                  </div>
                  <div>
                    <h3 className="text-base font-bold text-primary font-heading">
                      {adv.title}
                    </h3>
                    <p className="text-xs md:text-sm text-text-muted mt-1.5 leading-relaxed">
                      {adv.description}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}