feat: complete website implementation

components/shop/ProductInfo.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Product } from '@/types/types';
+import { formatCurrency } from '@/lib/utils';
+import { useCartStore } from '@/lib/cart-store';
+import { ShoppingCart, Heart, Scale, ShieldCheck, Truck, Clock, AlertCircle, Wrench, ChevronDown, Check, Zap, Volume2, ThermometerSun, Settings, ArrowRightLeft, Sun, Mail, Info, Snowflake, CreditCard } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+interface ProductInfoProps {
+  product: Product;
+}
+
+export function ProductInfo({ product }: ProductInfoProps) {
+  const router = useRouter();
+  const addItem = useCartStore((state) => state.addItem);
+  
+  // Wariant
+  const hasVariants = product.variants && product.variants.length > 0;
+  const defaultVariant = hasVariants ? product.variants![0] : null;
+  const [selectedVariant, setSelectedVariant] = useState(defaultVariant);
+  const [hoursPerDay, setHoursPerDay] = useState<number>(1);
+
+  // Aktualnie wybrana cena
+  const currentPrice = selectedVariant ? selectedVariant.price : product.price;
+  const currentPriceWithInstall = selectedVariant ? selectedVariant.priceWithInstall : product.priceWithInstall;
+  const currentPower = selectedVariant ? selectedVariant.power : product.power;
+  const currentLabel = selectedVariant ? selectedVariant.label : undefined;
+
+  const [addedMessage, setAddedMessage] = useState('');
+
+  // Kalkulator energii
+  const costPerKwh = 1.15; // Przykładowy koszt 1 kWh w PLN
+  const consumptionCooling = currentPower / 4;
+  const consumptionHeating = currentPower / 3.8;
+  const costHourCooling = consumptionCooling * costPerKwh;
+  const costHourHeating = consumptionHeating * costPerKwh;
+
+  const monthlyCostCooling = costHourCooling * hoursPerDay * 30;
+  const monthlyCostHeating = costHourHeating * hoursPerDay * 30;
+
+  const handleAddToCart = (withInstall: boolean) => {
+    addItem({
+      slug: product.slug,
+      name: product.name,
+      brand: product.brand,
+      image: product.image || '/hero.jpg',
+      power: currentPower,
+      label: currentLabel,
+      price: currentPrice,
+      priceWithInstall: currentPriceWithInstall || currentPrice,
+      withInstall
+    });
+
+    setAddedMessage(withInstall ? 'Dodano z montażem' : 'Dodano do koszyka');
+    setTimeout(() => setAddedMessage(''), 3000);
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex justify-between items-start mb-2">
+        <span className="text-sm font-bold text-text-muted uppercase tracking-wider">{product.brand}</span>
+        <div className="flex items-center gap-2 text-text-muted">
+          <button className="btn btn-ghost btn-circle btn-sm hover:text-accent" aria-label="Dodaj do listy życzeń">
+            <Heart className="w-5 h-5" />
+          </button>
+          <button className="btn btn-ghost btn-circle btn-sm hover:text-accent" aria-label="Porównaj">
+            <ArrowRightLeft className="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+
+      <h1 className="text-3xl md:text-4xl font-extrabold text-primary font-heading leading-tight mb-4">
+        {product.name}
+      </h1>
+
+      {/* Cechy skrócone */}
+      {product.features && (
+        <div className="flex flex-wrap gap-2 mb-8">
+          {product.features.map((feat, idx) => (
+            <span key={idx} className="bg-slate-100 text-text-muted text-xs font-semibold px-2.5 py-1 rounded-md border border-border">
+              {feat}
+            </span>
+          ))}
+        </div>
+      )}
+
+      {/* Wybór Wariantu */}
+      {hasVariants && (
+        <div className="mb-6">
+          <span className="block text-xs font-semibold text-text-muted uppercase tracking-wider mb-3">Wybierz wariant mocy:</span>
+          <div className="flex flex-wrap gap-2">
+            {product.variants!.map((variant, idx) => (
+              <button
+                key={idx}
+                onClick={() => setSelectedVariant(variant)}
+                className={`px-4 py-2 rounded-lg border text-sm font-bold transition-all ${
+                  selectedVariant?.label === variant.label
+                    ? 'border-primary bg-primary text-white shadow-md'
+                    : 'border-border bg-white text-text-muted hover:border-primary/50 hover:text-primary'
+                }`}
+              >
+                {variant.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Szybka specyfikacja z ikonami */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6 text-sm">
+        <div className="flex items-center gap-2 text-primary font-semibold">
+          <Snowflake className="w-4 h-4 text-accent" />
+          <span>{product.specs?.["Klasa energetyczna chłodzenie/grzanie"]?.split("/")[0]?.trim() || "A++"}</span>
+        </div>
+        {product.heating !== false && (
+          <div className="flex items-center gap-2 text-primary font-semibold">
+            <Sun className="w-4 h-4 text-orange-500" />
+            <span>{product.specs?.["Klasa energetyczna chłodzenie/grzanie"]?.split("/")[1]?.trim() || "A+"}</span>
+          </div>
+        )}
+        <div className="flex items-center gap-2 text-primary font-semibold">
+          <Zap className="w-4 h-4 text-yellow-500" />
+          <span>{(currentPower / 4).toFixed(2)} kW/h</span>
+        </div>
+        <div className="flex items-center gap-2 text-primary font-semibold">
+          <Zap className="w-4 h-4 text-yellow-500" />
+          <span>{currentPower} kW</span>
+        </div>
+      </div>
+
+      {/* Szczegółowa specyfikacja skrócona (lista) */}
+      <ul className="space-y-2.5 mb-8 text-sm text-text-muted">
+        <li className="flex gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+          <span><strong className="text-primary font-semibold">Wydajność chłodnicza:</strong> {(currentPower).toFixed(2)} kW</span>
+        </li>
+        {product.heating !== false && (
+          <li className="flex gap-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+            <span><strong className="text-primary font-semibold">Wydajność grzewcza:</strong> {(currentPower * 1.1).toFixed(2)} kW</span>
+          </li>
+        )}
+        <li className="flex gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+          <span><strong className="text-primary font-semibold">Średnie zużycie energii (chłodzenie/grzanie):</strong> {(consumptionCooling).toFixed(2)} / {(consumptionHeating).toFixed(2)} kW</span>
+        </li>
+        <li className="flex gap-2 flex-col">
+          <div className="flex gap-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+            <span><strong className="text-primary font-semibold">Szacunkowy koszt energii – 1 h (chłodzenie/grzanie):</strong> {costHourCooling.toFixed(2)} / {costHourHeating.toFixed(2)} zł</span>
+          </div>
+          <div className="ml-3.5 mt-2 p-4 bg-white rounded-xl border border-border shadow-sm inline-block w-full max-w-sm">
+            <div className="flex items-center justify-between gap-4 mb-3">
+              <span className="text-sm font-medium text-text-muted">Ile godzin dziennie używasz?</span>
+              <input 
+                type="number" 
+                min="1" 
+                max="24" 
+                value={hoursPerDay} 
+                onChange={(e) => setHoursPerDay(Number(e.target.value) || 1)}
+                className="w-16 px-2 py-1.5 text-sm font-bold text-center border border-border rounded-lg outline-none focus:border-primary transition-colors"
+              />
+            </div>
+            <div className="text-xs text-text-muted leading-relaxed">
+              Twój miesięczny koszt wyniesie: <br />
+              <strong className="text-primary font-bold">Chłodzenie {monthlyCostCooling.toFixed(2)} zł</strong> / <strong className="text-primary font-bold">Grzanie {monthlyCostHeating.toFixed(2)} zł</strong>
+            </div>
+          </div>
+        </li>
+        <li className="flex gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+          <span><strong className="text-primary font-semibold">SEER / SCOP:</strong> {product.specs?.["SEER / SCOP"] || "6.10 / 4.00"}</span>
+        </li>
+        <li className="flex gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+          <span><strong className="text-primary font-semibold">Klasa energetyczna (chłodzenie/grzanie):</strong> {product.specs?.["Klasa energetyczna chłodzenie/grzanie"] || "A++ / A+"}</span>
+        </li>
+        <li className="flex gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+          <span><strong className="text-primary font-semibold">Poziom głośności jednostki wewnętrznej:</strong> {product.specs?.["Poziom hałasu min/max (dB)"] || "24–38 dB"}</span>
+        </li>
+        <li className="flex gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+          <span><strong className="text-primary font-semibold">Zakres pracy - chłodzenie:</strong> {product.specs?.["Zakres temperatur zewnętrznych - chłodzenie"] || "-15~43 °C"}</span>
+        </li>
+        <li className="flex gap-2">
+          <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+          <span><strong className="text-primary font-semibold">Czas gwarancji:</strong> 5 lat</span>
+        </li>
+        {product.features && (
+          <li className="flex gap-2">
+            <span className="w-1.5 h-1.5 rounded-full bg-accent mt-2 shrink-0"></span>
+            <span><strong className="text-primary font-semibold">Funkcje:</strong> {product.features.join(", ")}</span>
+          </li>
+        )}
+      </ul>
+
+      {/* Dostępność i Kontakt */}
+      <div className="flex items-center gap-6 py-4 border-y border-border mb-8">
+        <div className="flex items-center gap-2">
+          <div className="w-3.5 h-3.5 rounded-full bg-green-500 shadow-sm shadow-green-200"></div>
+          <span className="text-sm font-medium text-primary">Dostępny od ręki</span>
+        </div>
+        <Link href="/kontakt" className="flex items-center gap-2 text-text-muted hover:text-primary transition-colors">
+          <Mail className="w-4 h-4" />
+          <span className="text-sm">Zapytaj o produkt</span>
+        </Link>
+      </div>
+
+      {/* Ceny i CTA */}
+      <div className="bg-slate-50 p-6 rounded-2xl border border-border mb-8 space-y-6">
+        
+        {/* Cena z montażem (Promowana) */}
+        {currentPriceWithInstall && (
+          <div className="flex flex-col gap-3 pb-6 border-b border-border/50">
+            <div className="flex justify-between items-end flex-wrap gap-4">
+              <div>
+                <span className="flex items-center gap-1 text-text-muted text-xs font-semibold mb-1 uppercase tracking-wider">
+                  Cena z montażem dla konsumenta (8% VAT) <Info className="w-3 h-3" />
+                </span>
+                <div className="flex items-baseline gap-2">
+                  <span className="text-3xl font-extrabold text-primary font-heading">{formatCurrency(currentPriceWithInstall)}</span>
+                </div>
+                <div className="text-xs text-accent font-medium mt-1">Darmowa wycena</div>
+              </div>
+              <button onClick={() => handleAddToCart(true)} className="btn btn-primary text-white">
+                <ShoppingCart className="w-4 h-4 mr-2" />
+                Kup z montażem
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Cena bez montażu */}
+        <div className="flex justify-between items-end flex-wrap gap-4">
+          <div>
+            <span className="block text-text-muted text-xs font-semibold mb-1 uppercase tracking-wider">Cena urządzenia bez montażu (23% VAT)</span>
+            <div className="text-xl font-bold text-primary font-heading">{formatCurrency(currentPrice)}</div>
+          </div>
+          <button onClick={() => handleAddToCart(false)} className="btn btn-outline btn-primary bg-white">
+            Do koszyka
+          </button>
+        </div>
+
+        {/* Feedback o dodaniu */}
+        {addedMessage && (
+          <div className="flex items-center gap-2 text-sm font-bold text-green-600 bg-green-50 p-3 rounded-lg border border-green-200 animate-in fade-in slide-in-from-top-2">
+            <Check className="w-4 h-4" />
+            {addedMessage}. <button onClick={() => router.push('/koszyk')} className="underline hover:text-green-800">Przejdź do koszyka</button>
+          </div>
+        )}
+      </div>
+
+      {/* Atuty */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div className="flex flex-col items-center text-center p-4 bg-white rounded-xl border border-border">
+          <Truck className="w-6 h-6 text-accent mb-2" />
+          <span className="text-xs font-bold text-primary">Darmowa dostawa</span>
+          <span className="text-[10px] text-text-muted">na terenie Polski</span>
+        </div>
+        <div className="flex flex-col items-center text-center p-4 bg-white rounded-xl border border-border">
+          <ShieldCheck className="w-6 h-6 text-accent mb-2" />
+          <span className="text-xs font-bold text-primary">5 lat gwarancji</span>
+          <span className="text-[10px] text-text-muted">na urządzenie i montaż</span>
+        </div>
+        <div className="flex flex-col items-center text-center p-4 bg-white rounded-xl border border-border">
+          <Settings className="w-6 h-6 text-accent mb-2" />
+          <span className="text-xs font-bold text-primary">Pełne wsparcie</span>
+          <span className="text-[10px] text-text-muted">na każdym etapie</span>
+        </div>
+      </div>
+    </div>
+  );
+}