diff --git a/app/zapytanie-multisplit/[slug]/page.tsx b/app/zapytanie-multisplit/[slug]/page.tsx new file mode 100644 index 0000000..0f28dfa --- /dev/null +++ b/app/zapytanie-multisplit/[slug]/page.tsx @@ -0,0 +1,145 @@ +import { Metadata } from 'next'; +import { notFound } from 'next/navigation'; +import { getProductBySlug, getProducts } from '@/content/products'; +import { companyDetails } from '@/content/company'; +import Image from 'next/image'; +import Link from 'next/link'; +import { ArrowLeft, Phone, Zap, Wind, Volume2, Thermometer } from 'lucide-react'; +import MultisplitContactForm from '@/components/shop/MultisplitContactForm'; + +interface Props { + params: Promise<{ slug: string }>; +} + +export async function generateStaticParams() { + return getProducts() + .filter(p => p.category === 'multisplit') + .map(p => ({ slug: p.slug })); +} + +export async function generateMetadata({ params }: Props): Promise { + const { slug } = await params; + const product = getProductBySlug(slug); + if (!product) return { title: 'Produkt nie znaleziony' }; + return { + title: `Zapytaj o ${product.name} | ThermCool`, + description: `Zapytaj o wycenę systemu multisplit ${product.name}. Bezpłatna konsultacja i wycena montażu.`, + }; +} + +export default async function MultisplitInquiryPage({ params }: Props) { + const { slug } = await params; + const product = getProductBySlug(slug); + if (!product || product.category !== 'multisplit') notFound(); + + const specIcons: Record = { + 'Moc chłodnicza': Zap, + 'Moc grzewcza': Thermometer, + 'Głośność wewnętrzna (dB)': Volume2, + 'Klasa energetyczna': Wind, + }; + + const keySpecs = ['Moc chłodnicza', 'Moc grzewcza', 'Klasa energetyczna', 'Głośność wewnętrzna (dB)']; + + return ( +
+ {/* Breadcrumb */} +
+
+ +
+
+ +
+ + Wróć do multisplitów + + +
+ {/* Lewa — zdjęcie + specyfikacja */} +
+
+
+ Multisplit + {product.brand} +
+
+ {product.image && !product.image.includes('placeholder') ? ( + {product.name} + ) : ( +
+ + Zdjęcie wkrótce +
+ )} +
+

{product.name}

+ {product.shortDescription && ( +

{product.shortDescription}

+ )} +
+ + {/* Kluczowe parametry */} +
+

Kluczowe parametry

+
+ {keySpecs.map(key => { + const val = product.specs?.[key]; + if (!val) return null; + const Icon = specIcons[key] || Zap; + return ( +
+ +
+

{key}

+

{val}

+
+
+ ); + })} +
+
+ + {/* Wycena indywidualna info */} +
+

Wycena indywidualna

+

+ Cena systemu multisplit zależy od liczby pomieszczeń, długości instalacji i warunków montażu. + Wypełnij formularz — oddzwonimy z bezpłatną wyceną w ciągu 24 godzin. +

+ + {companyDetails.phone} + +
+
+ + {/* Prawa — formularz */} +
+
+

+ Zapytaj o wycenę +

+

+ Wypełnij formularz — skontaktujemy się w ciągu 24 godzin z bezpłatną wyceną montażu. +

+ +
+
+
+
+
+ ); +} diff --git a/components/shop/MultisplitContactForm.tsx b/components/shop/MultisplitContactForm.tsx new file mode 100644 index 0000000..ffe9113 --- /dev/null +++ b/components/shop/MultisplitContactForm.tsx @@ -0,0 +1,165 @@ +'use client'; + +import { useState } from 'react'; +import { Check, Loader2 } from 'lucide-react'; + +interface Props { + productName: string; + productSku: string; +} + +export default function MultisplitContactForm({ productName, productSku }: Props) { + const [form, setForm] = useState({ + name: '', + phone: '', + email: '', + city: '', + rooms: '2', + message: '', + consent: false, + }); + const [loading, setLoading] = useState(false); + const [sent, setSent] = useState(false); + const [error, setError] = useState(''); + + const handle = (e: React.ChangeEvent) => { + const { name, value, type } = e.target; + setForm(prev => ({ + ...prev, + [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value, + })); + }; + + const submit = async () => { + if (!form.name || !form.phone || !form.consent) { + setError('Wypełnij wymagane pola i zaznacz zgodę.'); + return; + } + setLoading(true); + setError(''); + try { + const res = await fetch('/api/contact', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + name: form.name, + phone: form.phone, + email: form.email, + city: form.city, + subject: `Zapytanie o multisplit: ${productName} (${productSku})`, + message: `Liczba pomieszczeń: ${form.rooms}\n\n${form.message}`, + }), + }); + if (res.ok) setSent(true); + else setError('Błąd wysyłki. Zadzwoń do nas bezpośrednio.'); + } catch { + setError('Błąd połączenia. Spróbuj ponownie.'); + } + setLoading(false); + }; + + if (sent) { + return ( +
+
+ +
+

Zapytanie wysłane!

+

Oddzwonimy w ciągu 24 godzin z bezpłatną wyceną.

+
+ ); + } + + return ( +
+ {/* Produkt info */} +
+ Zapytanie dotyczy: {productName} +
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ +