import Link from "next/link";
import { ThermometerSun, Home, ChevronRight, Wrench, ShieldCheck, ArrowRight } from "lucide-react";

export function PillarsSection() {
  return (
    <section className="py-16 md:py-24 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Pillar 1: Chłód i Ogrzewanie */}
          <div className="group relative rounded-2xl border border-border p-8 md:p-12 bg-slate-50 hover:bg-white hover:border-accent hover:shadow-xl transition-all duration-300 flex flex-col justify-between overflow-hidden">
            {/* Visual background gradient glow on hover */}
            <div className="absolute right-0 top-0 size-48 rounded-full bg-accent/5 filter blur-3xl opacity-0 group-hover:opacity-100 transition-opacity" />

            <div>
              <div className="inline-flex p-4 rounded-xl bg-accent-light text-accent mb-6 group-hover:scale-110 transition-transform duration-300">
                <ThermometerSun className="size-8" />
              </div>
              <h3 className="text-2xl md:text-3xl font-bold text-primary font-heading mb-4">
                Chłód i Ogrzewanie
              </h3>
              <p className="text-text-muted text-base leading-relaxed mb-8 max-w-md">
                Klimatyzacja i pompy ciepła dla Twojego domu lub biura. Oferujemy profesjonalny audyt, dobór optymalnej mocy, autoryzowany montaż i stałą opiekę serwisową.
              </p>
            </div>

            <div>
              <Link href="/klimatyzacja" className="btn btn-primary text-white flex items-center gap-2">

                  <span>Przejdź do oferty HVAC</span>
                  <ChevronRight className="size-5 group-hover:translate-x-1 transition-transform" />
                
</Link>
            </div>
          </div>

          {/* Pillar 2: Twój Dom */}
          <div className="group relative rounded-2xl border border-border p-8 md:p-12 bg-slate-50 hover:bg-white hover:border-cta hover:shadow-xl transition-all duration-300 flex flex-col justify-between overflow-hidden">
            {/* Visual background gradient glow on hover */}
            <div className="absolute right-0 top-0 size-48 rounded-full bg-cta/5 filter blur-3xl opacity-0 group-hover:opacity-100 transition-opacity" />

            <div>
              <div className="inline-flex p-4 rounded-xl bg-cta/10 text-cta mb-6 group-hover:scale-110 transition-transform duration-300">
                <Home className="size-8" />
              </div>
              <h3 className="text-2xl md:text-3xl font-bold text-primary font-heading mb-4">
                Twój Dom
              </h3>
              <p className="text-text-muted text-base leading-relaxed mb-8 max-w-md">
                Instalacje HVAC, prace wykończeniowe, instalacje hydrauliczne oraz kompleksowy serwis sprzętu chłodniczego i AGD.
              </p>
            </div>

            <div className="mt-12 text-center">
              <Link href="/uslugi-domowe" className="btn btn-outline btn-primary bg-white font-bold flex items-center gap-2 mx-auto group">

                  <span>Pełna oferta usług</span>
                  <ArrowRight className="size-4 group-hover:translate-x-1 transition-transform" />
                
</Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}