thermcool/components/sections/HomeServices.tsx

import Link from "next/link";
import { Wrench, Thermometer, Wind, Zap, Calendar, Phone, Check } from "lucide-react";
import { companyDetails } from "@/content/company";
import { buttonClasses } from "../ui/Button";

export function HomeServices() {
  return (
    <section className="bg-white py-16 px-4">
      <div className="bg-slate-50 max-w-7xl mx-auto rounded-[2.5rem] p-6 sm:p-10 lg:p-14">
        <div className="max-w-7xl mx-auto flex flex-col gap-8">
          <div className="mb-2">
            <div className="inline-flex items-center gap-1.5 text-[10px] font-bold text-accent uppercase tracking-widest mb-6 bg-accent/5 border border-accent/20 px-3 py-1.5 rounded-full">
              <Check className="size-3.5" />
              Cennik usług
            </div>
            <h2 className="text-3xl sm:text-5xl font-extrabold text-primary font-heading leading-tight mb-4">
              Montaż, serwis i czyszczenie klimatyzacji –<br />już od <span className="underline decoration-accent underline-offset-4">150 zł</span>
            </h2>
            <p className="text-text-muted text-sm sm:text-base max-w-2xl leading-relaxed">
              Profesjonalna obsługa, certyfikowani specjaliści i szybki czas reakcji na terenie całego Wrocławia. Zadbaj o czyste powietrze i wydajność swoich urządzeń.
            </p>
          </div>
          
          {/* Cards Grid */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            
            {/* Card 1: Montaż klimatyzacji */}
            <div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
              <div className="flex flex-col gap-6 mb-12">
                 <div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
                   <Wrench className="size-5 text-accent" />
                 </div>
                 <div>
                   <h3 className="text-xl font-bold text-primary font-heading mb-3">Montaż klimatyzacji</h3>
                   <p className="text-sm text-text-muted leading-relaxed">Profesjonalny montaż urządzeń split i multisplit. Zapewniamy estetykę wykonania i pełne uruchomienie.</p>
                 </div>
              </div>
              <div className="border-t border-border pt-5 mt-auto">
                <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
                <p className="text-xl font-extrabold text-primary">od 1400 zł</p>
              </div>
            </div>

            {/* Card 2: Czyszczenie */}
            <div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
              <div className="flex flex-col gap-6 mb-12">
                 <div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
                   <Thermometer className="size-5 text-accent" />
                 </div>
                 <div>
                   <h3 className="text-xl font-bold text-primary font-heading mb-3">Czyszczenie i odgrzybianie</h3>
                   <p className="text-sm text-text-muted leading-relaxed">Kompleksowe czyszczenie, dezynfekcja chemiczna, odgrzybianie parowe, czyszczenie filtrów.</p>
                 </div>
              </div>
              <div className="border-t border-border pt-5 mt-auto">
                <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
                <p className="text-xl font-extrabold text-primary">od 250 zł</p>
              </div>
            </div>

            {/* Card 3: Przegląd techniczny */}
            <div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
              <div className="flex flex-col gap-6 mb-12">
                 <div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
                   <Wind className="size-5 text-accent" />
                 </div>
                 <div>
                   <h3 className="text-xl font-bold text-primary font-heading mb-3">Przegląd techniczny</h3>
                   <p className="text-sm text-text-muted leading-relaxed">Sprawdzenie parametrów pracy, kontrola szczelności układu, pomiar ciśnień roboczych.</p>
                 </div>
              </div>
              <div className="border-t border-border pt-5 mt-auto">
                <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
                <p className="text-xl font-extrabold text-primary">od 150 zł</p>
              </div>
            </div>

            {/* Card 4: Uzupełnienie czynnika */}
            <div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
              <div className="flex flex-col gap-6 mb-12">
                 <div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
                   <Zap className="size-5 text-accent" />
                 </div>
                 <div>
                   <h3 className="text-xl font-bold text-primary font-heading mb-3">Uzupełnienie czynnika</h3>
                   <p className="text-sm text-text-muted leading-relaxed">Lokalizacja nieszczelności, próba ciśnieniowa azotem, dobicie czynnika chłodniczego.</p>
                 </div>
              </div>
              <div className="border-t border-border pt-5 mt-auto">
                <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
                <p className="text-xl font-extrabold text-primary">od 180 zł</p>
              </div>
            </div>

            {/* Card 5: Naprawa usterek */}
            <div className="bg-white p-8 flex flex-col rounded-2xl shadow-sm border border-border">
              <div className="flex flex-col gap-6 mb-12">
                 <div className="size-12 bg-slate-100 flex items-center justify-center shrink-0 border border-slate-200 rounded-lg">
                   <Wrench className="size-5 text-accent" />
                 </div>
                 <div>
                   <h3 className="text-xl font-bold text-primary font-heading mb-3">Naprawa usterek</h3>
                   <p className="text-sm text-text-muted leading-relaxed">Diagnoza awarii, wymiana uszkodzonych podzespołów elektroniki, sprężarek, wentylatorów.</p>
                 </div>
              </div>
              <div className="border-t border-border pt-5 mt-auto">
                <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted mb-1">Cena usługi</p>
                <p className="text-sm font-extrabold text-primary">Wycena indywidualna</p>
              </div>
            </div>

            {/* Card 6: Serwis sezonowy (Dark card) */}
            <div className="bg-[#1a2332] p-8 flex flex-col border border-[#1a2332] shadow-sm rounded-2xl">
              <div className="flex flex-col gap-6 mb-12">
                 <div className="size-12 bg-slate-800 flex items-center justify-center shrink-0 border border-slate-700 rounded-lg">
                   <Calendar className="size-5 text-accent" />
                 </div>
                 <div>
                   <h3 className="text-xl font-bold text-white font-heading mb-3">Serwis sezonowy / Abonament</h3>
                   <p className="text-sm text-white/60 leading-relaxed">Regularna opieka nad instalacją przed sezonem letnim i zimowym. Priorytetowy czas reakcji w przypadku awarii.</p>
                 </div>
              </div>
              <div className="border-t border-white/10 pt-5 mt-auto">
                <p className="text-[10px] font-bold uppercase tracking-widest text-white/60 mb-1">Cena usługi</p>
                <p className="text-xl font-extrabold text-white">od 199 zł / rok</p>
              </div>
            </div>

            {/* Card 6: Gotowy na świeże powietrze? (Full width) */}
            <div className="bg-white md:col-span-3 p-8 md:p-10 flex flex-col lg:flex-row items-start lg:items-center justify-between gap-8 border-l-[6px] border-accent rounded-2xl shadow-sm">
               <div className="max-w-2xl">
                 <h3 className="text-2xl font-bold text-primary font-heading mb-3">Gotowy na świeże powietrze?</h3>
                 <p className="text-sm text-text-muted leading-relaxed">Nasi certyfikowani technicy są dostępni od poniedziałku do soboty. Zarezerwuj termin już dziś, aby uniknąć kolejek w sezonie.</p>
               </div>
               <div className="flex flex-col sm:flex-row items-center gap-4 shrink-0 w-full lg:w-auto justify-center lg:justify-end">
                 <Link href="/kontakt" className={buttonClasses({ variant: 'primary', size: 'md' }) + ' w-fit sm:w-auto'}>
                   Umów serwis <Calendar className="size-4" />
                 </Link>
                 <Link href={`tel:${companyDetails.phoneRaw}`} className={buttonClasses({ variant: 'outline-light', size: 'md' }) + ' w-fit sm:w-auto'}>
                   <Phone className="size-4" /> Zadzwoń do nas
                 </Link>
               </div>
            </div>

          </div>
        </div>
      </div>
    </section>
  );
}