UI improvements for multisplit inquiry workflow

2026-07-05 23:08:06 +02:00
parent 00533ffb1f
commit ebe048c13c
3 changed files with 360 additions and 32 deletions
@@ -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<Metadata> {
+  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<string, any> = {
+    '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 (
+    <main className="bg-slate-50 min-h-screen">
+      {/* Breadcrumb */}
+      <div className="bg-white border-b border-border">
+        <div className="max-w-5xl mx-auto px-4 py-3">
+          <nav className="flex items-center gap-1.5 text-xs text-text-muted">
+            <Link href="/" className="hover:text-accent transition-colors">Strona główna</Link>
+            <span>/</span>
+            <Link href="/sklep" className="hover:text-accent transition-colors">Sklep</Link>
+            <span>/</span>
+            <Link href="/sklep?category=multisplit" className="hover:text-accent transition-colors">Multisplit</Link>
+            <span>/</span>
+            <span className="text-primary font-medium truncate max-w-[200px]">{product.name}</span>
+          </nav>
+        </div>
+      </div>
+
+      <div className="max-w-5xl mx-auto px-4 py-10">
+        <Link href="/sklep?category=multisplit" className="inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-accent transition-colors mb-6">
+          <ArrowLeft className="size-4" /> Wróć do multisplitów
+        </Link>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10">
+          {/* Lewa — zdjęcie + specyfikacja */}
+          <div className="flex flex-col gap-4">
+            <div className="bg-white rounded-2xl border border-border p-6">
+              <div className="flex items-center justify-between mb-4">
+                <span className="text-xs font-bold text-white bg-accent px-2.5 py-1 rounded-full">Multisplit</span>
+                <span className="text-xs text-text-muted">{product.brand}</span>
+              </div>
+              <div className="relative w-full h-56 mb-4 bg-slate-100 rounded-xl flex items-center justify-center">
+                {product.image && !product.image.includes('placeholder') ? (
+                  <Image
+                    src={product.image}
+                    alt={product.name}
+                    fill
+                    className="object-contain"
+                  />
+                ) : (
+                  <div className="flex flex-col items-center gap-2 text-text-muted">
+                    <Wind className="size-12 text-slate-300" />
+                    <span className="text-xs">Zdjęcie wkrótce</span>
+                  </div>
+                )}
+              </div>
+              <h1 className="text-lg font-extrabold text-primary font-heading mb-1">{product.name}</h1>
+              {product.shortDescription && (
+                <p className="text-sm text-text-muted">{product.shortDescription}</p>
+              )}
+            </div>
+
+            {/* Kluczowe parametry */}
+            <div className="bg-white rounded-2xl border border-border p-5">
+              <h2 className="text-sm font-bold text-primary mb-3">Kluczowe parametry</h2>
+              <div className="grid grid-cols-2 gap-3">
+                {keySpecs.map(key => {
+                  const val = product.specs?.[key];
+                  if (!val) return null;
+                  const Icon = specIcons[key] || Zap;
+                  return (
+                    <div key={key} className="flex items-start gap-2 p-3 bg-slate-50 rounded-xl">
+                      <Icon className="size-4 text-accent shrink-0 mt-0.5" />
+                      <div>
+                        <p className="text-xs text-text-muted">{key}</p>
+                        <p className="text-sm font-bold text-primary">{val}</p>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Wycena indywidualna info */}
+            <div className="bg-accent/10 border border-accent/20 rounded-2xl p-5">
+              <p className="text-sm font-bold text-accent mb-1">Wycena indywidualna</p>
+              <p className="text-xs text-text-muted leading-relaxed">
+                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.
+              </p>
+              <a href={`tel:${companyDetails.phoneRaw}`} className="inline-flex items-center gap-1.5 mt-3 text-sm font-bold text-accent hover:underline">
+                <Phone className="size-4" /> {companyDetails.phone}
+              </a>
+            </div>
+          </div>
+
+          {/* Prawa — formularz */}
+          <div>
+            <div className="bg-white rounded-2xl border border-border p-6">
+              <h2 className="text-base font-extrabold text-primary font-heading mb-1">
+                Zapytaj o wycenę
+              </h2>
+              <p className="text-sm text-text-muted mb-6">
+                Wypełnij formularz — skontaktujemy się w ciągu 24 godzin z bezpłatną wyceną montażu.
+              </p>
+              <MultisplitContactForm productName={product.name} productSku={product.sku} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
@@ -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<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    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 (
+      <div className="flex flex-col items-center justify-center gap-3 py-12 text-center">
+        <div className="size-12 bg-green-100 rounded-full flex items-center justify-center">
+          <Check className="size-6 text-green-600" />
+        </div>
+        <p className="font-bold text-primary">Zapytanie wysłane!</p>
+        <p className="text-sm text-text-muted">Oddzwonimy w ciągu 24 godzin z bezpłatną wyceną.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Produkt info */}
+      <div className="bg-slate-50 rounded-xl px-4 py-3 text-xs text-text-muted">
+        Zapytanie dotyczy: <span className="font-bold text-primary">{productName}</span>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-medium text-primary">Imię i nazwisko *</label>
+          <input name="name" value={form.name} onChange={handle}
+            placeholder="Jan Kowalski"
+            className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-medium text-primary">Telefon *</label>
+          <input name="phone" value={form.phone} onChange={handle}
+            placeholder="+48 600 000 000"
+            className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-medium text-primary">Email</label>
+          <input name="email" value={form.email} onChange={handle}
+            placeholder="[email protected]"
+            className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <label className="text-xs font-medium text-primary">Miasto *</label>
+          <input name="city" value={form.city} onChange={handle}
+            placeholder="Wrocław"
+            className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none" />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-primary">Ile pomieszczeń do klimatyzacji?</label>
+        <select name="rooms" value={form.rooms} onChange={handle}
+          className="h-10 px-3 text-sm border border-border rounded-xl focus:border-accent outline-none bg-white">
+          <option value="2">2 pomieszczenia</option>
+          <option value="3">3 pomieszczenia</option>
+          <option value="4">4 pomieszczenia</option>
+          <option value="5">5 pomieszczeń</option>
+        </select>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-primary">Dodatkowe informacje (opcjonalnie)</label>
+        <textarea name="message" value={form.message} onChange={handle}
+          rows={3}
+          placeholder="Np. metraż pomieszczeń, typ budynku, piętro..."
+          className="px-3 py-2.5 text-sm border border-border rounded-xl focus:border-accent outline-none resize-none" />
+      </div>
+
+      <label className="flex items-start gap-2.5 cursor-pointer">
+        <div className="relative mt-0.5">
+          <input
+            type="checkbox"
+            name="consent"
+            checked={form.consent}
+            onChange={handle}
+            className="sr-only"
+          />
+          <div className={`size-4 rounded border-2 flex items-center justify-center transition-colors ${
+            form.consent ? 'bg-accent border-accent' : 'bg-white border-slate-300'
+          }`}>
+            {form.consent && (
+              <svg viewBox="0 0 10 8" className="size-2.5" fill="none">
+                <path d="M1 4L3.5 6.5L9 1" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            )}
+          </div>
+        </div>
+        <span className="text-xs text-text-muted leading-relaxed">
+          Wyrażam zgodę na przetwarzanie moich danych osobowych w celu obsługi zapytania przez ThermCool. *
+        </span>
+      </label>
+
+      {error && <p className="text-xs text-red-500">{error}</p>}
+
+      <button
+        onClick={submit}
+        disabled={loading}
+        className="flex items-center justify-center gap-2 h-11 bg-accent text-white font-bold rounded-xl text-sm hover:bg-accent/90 transition-colors disabled:opacity-60"
+      >
+        {loading ? <Loader2 className="size-4 animate-spin" /> : null}
+        {loading ? 'Wysyłanie...' : 'Wyślij zapytanie o wycenę'}
+      </button>
+    </div>
+  );
+}
@@ -146,43 +146,61 @@ export function ProductCard({ product }: ProductCardProps) {

        {/* Cena + CTA */}
        <div className="mt-auto pt-2 flex items-end justify-between gap-2">
-          {product.price !== null ? (
-            <div>
-              <p className="text-lg font-bold text-primary font-heading leading-none">
-                {product.price.toLocaleString('pl-PL')} zł
-              </p>
-              <p className="text-xs text-text-muted mt-0.5">brutto</p>
-            </div>
-          ) : (
-            <div className="flex items-center gap-1 text-accent">
-              <Phone className="size-3.5" />
-              <span className="text-sm font-semibold">Zapytaj o cenę</span>
-            </div>
-          )}
-
-          {product.price !== null ? (
-            added ? (
+          {product.category === 'multisplit' ? (
+            // Multisplit — zawsze formularz zapytania
+            <>
+              <div className="flex items-center gap-1 text-accent">
+                <Phone className="size-4" />
+                <span className="text-sm font-semibold">Wycena indywidualna</span>
+              </div>
              <Link
-                href="/koszyk"
-                className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-green-500 text-white hover:bg-green-600 transition-colors shrink-0"
+                href={`/zapytanie-multisplit/${product.slug}`}
                onClick={e => e.stopPropagation()}
              >
-                <ShoppingCart className="size-3.5" /> Zobacz koszyk
+                <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-accent text-white hover:bg-accent/90 transition-colors shrink-0">
+                  Zapytaj o wycenę
+                </button>
              </Link>
-            ) : (
-              <button
-                onClick={handleAddToCart}
-                className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-accent text-white hover:bg-accent/90 transition-colors shrink-0"
-              >
-                <ShoppingCart className="size-3.5" /> Do koszyka
-              </button>
-            )
+            </>
+          ) : product.price !== null ? (
+            // Split z ceną — koszyk
+            <>
+              <div>
+                <p className="text-lg font-bold text-primary font-heading leading-none">
+                  {product.price.toLocaleString('pl-PL')} zł
+                </p>
+                <p className="text-xs text-text-muted mt-0.5">brutto</p>
+              </div>
+              {added ? (
+                <Link
+                  href="/koszyk"
+                  className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-green-500 text-white hover:bg-green-600 transition-colors shrink-0"
+                  onClick={e => e.stopPropagation()}
+                >
+                  <ShoppingCart className="size-3.5" /> Zobacz koszyk
+                </Link>
+              ) : (
+                <button
+                  onClick={handleAddToCart}
+                  className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-accent text-white hover:bg-accent/90 transition-colors shrink-0"
+                >
+                  <ShoppingCart className="size-3.5" /> Do koszyka
+                </button>
+              )}
+            </>
          ) : (
-            <Link href="/kontakt">
-              <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-primary text-white hover:bg-primary/90 transition-colors shrink-0">
-                Zapytaj
-              </button>
-            </Link>
+            // Split bez ceny — zapytaj
+            <>
+              <div className="flex items-center gap-1 text-accent">
+                <Phone className="size-3.5" />
+                <span className="text-sm font-semibold">Zapytaj o cenę</span>
+              </div>
+              <Link href="/kontakt" onClick={e => e.stopPropagation()}>
+                <button className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold bg-primary text-white hover:bg-primary/90 transition-colors shrink-0">
+                  Zapytaj
+                </button>
+              </Link>
+            </>
          )}
        </div>
      </div>