import type { Metadata } from 'next';
import Link from 'next/link';
import Image from 'next/image';
import { Check, Phone, Wrench, ArrowRight, ShieldCheck, Clock, Star } from 'lucide-react';
import { companyDetails } from '@/content/company';

export const metadata: Metadata = {
  title: 'Montaż klimatyzacji Wrocław — split, multisplit | ThermCool',
  description: 'Profesjonalny montaż klimatyzacji we Wrocławiu i na Dolnym Śląsku. Uprawnienia F-Gaz, estetyczna instalacja, gwarancja 2 lata. Bezpłatna wycena — zadzwoń!',
  alternates: { canonical: '/montaz-klimatyzacji' },
  openGraph: {
    title: 'Montaż klimatyzacji Wrocław | ThermCool',
    description: 'Montaż klimatyzatorów split i multisplit z uprawnieniami F-Gaz. Wrocław i Dolny Śląsk. Bezpłatna wycena.',
  },
};

const faqItems = [
  {
    q: 'Ile kosztuje montaż klimatyzacji we Wrocławiu?',
    a: 'Koszt montażu klimatyzatora split zaczyna się od 1200 zł i obejmuje montaż jednostki wewnętrznej i zewnętrznej, wykonanie trasy freonowej do 3 mb, podłączenie elektryczne i uruchomienie. Montaż multisplit (kilka pomieszczeń) wyceniamy indywidualnie. Przed każdą realizacją wystawiamy bezpłatną wycenę.',
  },
  {
    q: 'Jak długo trwa montaż klimatyzacji?',
    a: 'Standardowy montaż jednostki split w jednym pomieszczeniu zajmuje 3-5 godzin. Montaż systemu multisplit (2-4 jednostki) to zazwyczaj pełny dzień roboczy. Po zakończeniu prac sprzątamy i zostawiamy pomieszczenie w idealnym porządku.',
  },
  {
    q: 'Czy montaż wymaga pozwolenia na budowę?',
    a: 'W zdecydowanej większości przypadków montaż klimatyzatora split nie wymaga pozwolenia na budowę — wystarczy zgłoszenie. Wyjątkiem mogą być budynki zabytkowe lub objęte ochroną konserwatora. W razie wątpliwości doradzimy co zrobić.',
  },
  {
    q: 'Trasa freonowa w bruździe czy w korytku?',
    a: 'Oferujemy oba rozwiązania. Bruzda w ścianie (90 zł/mb) daje estetyczniejszy efekt — rury są niewidoczne. Korytko PCV (80 zł/mb) jest tańsze i szybsze w montażu. Doradzamy najlepsze rozwiązanie po oględzinach miejsca montażu.',
  },
  {
    q: 'Gdzie montujecie jednostkę zewnętrzną?',
    a: 'Jednostkę zewnętrzną montujemy na konsoli ściennej, dachu, balkonie lub gruncie — w zależności od warunków budynku. Zawsze dbamy o stabilność mocowania, minimalizację hałasu i estetykę instalacji.',
  },
  {
    q: 'Czy przyjeżdżacie poza Wrocław?',
    a: 'Tak, obsługujemy cały Dolny Śląsk — Legnicę, Wałbrzych, Jelenią Górę, Lubin, Świdnicę, Dzierżoniów i okoliczne miejscowości. Koszt dojazdu ustalamy indywidualnie.',
  },
];

const ETAPY = [
  { n: '01', title: 'Bezpłatna wycena', desc: 'Przyjeżdżamy lub rozmawiamy zdalnie. Oceniamy warunki montażu i doradzamy dobór urządzenia.' },
  { n: '02', title: 'Zakup urządzenia', desc: 'Możesz kupić klimatyzator u nas lub dostarczyć własny. Pracujemy z wszystkimi markami.' },
  { n: '03', title: 'Montaż', desc: 'Ekipa montażowa wykonuje instalację w uzgodnionym terminie. Sprzątamy po sobie.' },
  { n: '04', title: 'Uruchomienie i szkolenie', desc: 'Uruchamiamy urządzenie, sprawdzamy szczelność i pokazujemy jak obsługiwać klimatyzator.' },
  { n: '05', title: 'Gwarancja', desc: '2 lata gwarancji na montaż. Jesteśmy do dyspozycji w razie pytań i serwisu.' },
];

export default function MontazKlimatyzacjiPage() {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    name: 'Montaż klimatyzacji Wrocław',
    provider: {
      '@type': 'HVACBusiness',
      name: companyDetails.name,
      telephone: companyDetails.phone,
      address: {
        '@type': 'PostalAddress',
        addressLocality: companyDetails.address.city,
        addressRegion: companyDetails.address.region,
        addressCountry: 'PL',
      },
    },
    areaServed: { '@type': 'AdministrativeArea', name: 'Dolny Śląsk' },
    description: 'Profesjonalny montaż klimatyzacji split, multisplit i kasetonowych na Dolnym Śląsku z uprawnieniami F-Gaz.',
    offers: {
      '@type': 'Offer',
      priceCurrency: 'PLN',
      price: '1200',
      priceSpecification: { '@type': 'UnitPriceSpecification', price: '1200', priceCurrency: 'PLN', name: 'Montaż klimatyzatora split od' },
    },
    mainEntityOfPage: {
      '@type': 'FAQPage',
      mainEntity: faqItems.map(f => ({
        '@type': 'Question',
        name: f.q,
        acceptedAnswer: { '@type': 'Answer', text: f.a },
      })),
    },
  };

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <main>
        {/* Hero */}
        <section className="relative text-white py-24 md:py-32 overflow-hidden">
          <Image
            src="/images/services/instalacja_klimatyzacji.webp"
            alt="Montaż klimatyzacji Wrocław"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-primary/50" />
          <div className="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 bg-white/10 rounded-full text-sm font-medium mb-6">
              <Wrench className="size-4" />
              Montaż z uprawnieniami F-Gaz
            </div>
            <h1 className="text-3xl md:text-5xl font-extrabold font-heading leading-tight mb-6">
              Montaż klimatyzacji Wrocław<br />
              <span className="text-accent">estetycznie i z gwarancją</span>
            </h1>
            <p className="text-lg text-white/80 mb-8 max-w-2xl">
              Montujemy klimatyzatory split, multisplit i kanałowe na terenie Wrocławia i całego Dolnego Śląska.
              Uprawnienia F-Gaz, estetyczna instalacja, sprzątanie po montażu — i 2 lata gwarancji.
            </p>

            <div className="flex flex-col sm:flex-row gap-4">
              <a href={`tel:${companyDetails.phoneRaw}`}>
                <button className="flex items-center gap-2 px-6 py-3 bg-accent text-white rounded-xl font-bold hover:bg-accent/90 transition-colors">
                  <Phone className="size-5" /> Zadzwoń: {companyDetails.phone}
                </button>
              </a>
              <Link href="/kalkulator">
                <button className="flex items-center gap-2 px-6 py-3 bg-white/10 text-white rounded-xl font-bold hover:bg-white/20 transition-colors border border-white/20">
                  Dobierz urządzenie <ArrowRight className="size-5" />
                </button>
              </Link>
            </div>
          </div>
        </section>

        {/* Wyróżniki */}
        <section className="py-16 bg-white">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl font-extrabold text-primary font-heading mb-8">Dlaczego warto wybrać ThermCool?</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12">
              {[
                { icon: ShieldCheck, title: 'Uprawnienia F-Gaz', desc: 'Posiadamy wymagane prawem certyfikaty F-Gaz uprawniające do pracy z czynnikami chłodniczymi R32 i R410A.' },
                { icon: Star, title: 'Estetyczna instalacja', desc: 'Ukryte korytka, schludne przewerty, brak widocznych rur — dbamy o wygląd pomieszczenia po montażu.' },
                { icon: Clock, title: 'Terminowość', desc: 'Realizujemy montaże w ustalonym terminie. Przyjeżdżamy punktualnie i kończymy w deklarowanym czasie.' },
                { icon: ShieldCheck, title: '2 lata gwarancji na montaż', desc: 'Gwarantujemy jakość wykonanej instalacji przez 2 lata. Jakikolwiek problem z montażem — naprawiamy bezpłatnie.' },
                { icon: Wrench, title: 'Wszystkie marki', desc: 'Montujemy klimatyzatory Daikin, Mitsubishi Electric, Gree, Rotenso, LG, Samsung, Haier i innych producentów.' },
                { icon: Check, title: 'Sprzątanie po montażu', desc: 'Po zakończeniu prac zbieramy gruz, kurz i opakowania. Zostawiamy pomieszczenie w takim stanie jak zastaliśmy.' },
              ].map((item, i) => {
                const Icon = item.icon;
                return (
                  <div key={i} className="flex gap-3 p-4 bg-slate-50 rounded-xl">
                    <Icon className="size-5 text-accent shrink-0 mt-0.5" />
                    <div>
                      <p className="font-bold text-primary text-sm">{item.title}</p>
                      <p className="text-xs text-text-muted mt-0.5">{item.desc}</p>
                    </div>
                  </div>
                );
              })}
            </div>

            {/* Typy montażu */}
            <h2 className="text-2xl font-extrabold text-primary font-heading mb-6">Rodzaje montażu</h2>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              {[
                { title: 'Klimatyzator split', desc: 'Jedna jednostka zewnętrzna + jedna wewnętrzna. Idealne do jednego pokoju lub małego mieszkania. Od 1200 zł.' },
                { title: 'System multisplit', desc: 'Jedna jednostka zewnętrzna obsługuje 2-5 pomieszczeń. Ekonomiczne rozwiązanie dla domów i biur. Wycena indywidualna.' },
                { title: 'Klimatyzator kasetonowy', desc: 'Montowany w suficie podwieszanym. Równomierne chłodzenie dużych przestrzeni biurowych i handlowych.' },
              ].map((t, i) => (
                <div key={i} className="bg-white border border-border rounded-2xl p-5">
                  <h3 className="font-bold text-primary text-sm mb-2">{t.title}</h3>
                  <p className="text-xs text-text-muted leading-relaxed">{t.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Etapy montażu */}
        <section className="py-16 bg-slate-50">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl font-extrabold text-primary font-heading mb-8">Jak wygląda montaż krok po kroku?</h2>
            <div className="flex flex-col gap-4">
              {ETAPY.map((e, i) => (
                <div key={i} className="flex gap-4 p-5 bg-white rounded-2xl border border-border">
                  <div className="size-10 rounded-xl bg-accent text-white flex items-center justify-center font-extrabold text-sm shrink-0">
                    {e.n}
                  </div>
                  <div>
                    <p className="font-bold text-primary mb-1">{e.title}</p>
                    <p className="text-sm text-text-muted leading-relaxed">{e.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Cennik */}
        <section className="py-16 bg-white">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl font-extrabold text-primary font-heading mb-2">Cennik montażu</h2>
            <p className="text-text-muted text-sm mb-8">Ceny netto. Do cen doliczany jest VAT 23%. Ostateczna wycena po oględzinach miejsca montażu.</p>
            <div className="bg-slate-50 rounded-2xl border border-border overflow-hidden">
              {[
                { label: 'Montaż klimatyzatora split (1 pomieszczenie)', cena: 'od 1200 zł' },
                { label: 'Montaż systemu multisplit (2 jednostki)', cena: 'od 2800 zł' },
                { label: 'Montaż systemu multisplit (3 jednostki)', cena: 'od 3800 zł' },
                { label: 'Trasa freonowa — korytko PCV', cena: '80 zł/mb' },
                { label: 'Trasa freonowa — bruzda w ścianie', cena: '90 zł/mb' },
                { label: 'Konsola ścienna jednostki zewnętrznej', cena: 'od 120 zł' },
                { label: 'Montaż kasetonowy', cena: 'wycena indywidualna' },
              ].map((r, i) => (
                <div key={i} className={`flex items-center justify-between px-5 py-4 gap-4 ${i > 0 ? 'border-t border-border' : ''}`}>
                  <span className="text-sm text-primary">{r.label}</span>
                  <span className="text-sm font-bold text-primary whitespace-nowrap">{r.cena}</span>
                </div>
              ))}
            </div>
            <div className="mt-6 text-center">
              <Link href="/kontakt">
                <button className="inline-flex items-center gap-2 px-6 py-3 bg-accent text-white font-bold rounded-xl text-sm hover:bg-accent/90 transition-colors">
                  Zapytaj o bezpłatną wycenę <ArrowRight className="size-4" />
                </button>
              </Link>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section className="py-16 bg-slate-50">
          <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="text-2xl font-extrabold text-primary font-heading mb-8">Często zadawane pytania</h2>
            <div className="flex flex-col gap-4">
              {faqItems.map((item, i) => (
                <details key={i} className="group bg-white rounded-xl border border-border overflow-hidden">
                  <summary className="flex items-center justify-between p-5 cursor-pointer font-semibold text-primary text-sm list-none">
                    {item.q}
                    <ArrowRight className="size-4 text-text-muted group-open:rotate-90 transition-transform shrink-0 ml-3" />
                  </summary>
                  <div className="px-5 pb-5 text-sm text-text-muted leading-relaxed border-t border-border pt-4">
                    {item.a}
                  </div>
                </details>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="py-16 bg-primary text-white">
          <div className="max-w-2xl mx-auto px-4 text-center">
            <h2 className="text-2xl font-extrabold font-heading mb-4">
              Chcesz zamontować klimatyzację we Wrocławiu?
            </h2>
            <p className="text-white/80 mb-8">
              Zadzwoń po bezpłatną wycenę — odpowiadamy szybko i przyjeżdżamy w całym Dolnym Śląsku.
            </p>
            <a href={`tel:${companyDetails.phoneRaw}`}>
              <button className="flex items-center gap-2 px-8 py-4 bg-accent text-white rounded-xl font-bold text-lg hover:bg-accent/90 transition-colors mx-auto">
                <Phone className="size-5" /> {companyDetails.phone}
              </button>
            </a>
          </div>
        </section>
      </main>
    </>
  );
}