Uporzadkowanie nawigacji i formularzy: ukrycie O nas, ulepszenie kalkulatora i uproszczenie zgloszenia awarii

components/kalkulator/KalkulatorClient.tsx

@@ -33,7 +33,7 @@ function calculatePower(m2: number, floor: string, sun: string, building: string
 
 // Szacunkowy koszt montażu
 function estimateInstall(pipes: string, rooms: number): { min: number; max: number } {
-  const base = rooms === 1 ? 1200 : rooms === 2 ? 2800 : rooms === 3 ? 4200 : 5500;
+  const base = rooms === 1 ? 1400 : rooms === 2 ? 2400 : rooms === 3 ? 3200 : 3800;
   const pipeExtra = pipes === 'short' ? 0 : pipes === 'medium' ? 300 : pipes === 'long' ? 700 : 1200;
   return { min: base + pipeExtra, max: base + pipeExtra + 600 };
 }
@@ -332,7 +332,7 @@ export function KalkulatorClient({ products }: Props) {
               </div>
               {deviceType === 'pompa' && !pumpFormSent && (
                 <div className="mt-4 p-5 bg-white border border-border rounded-2xl flex flex-col gap-4">
-                  <p className="text-sm font-bold text-primary">Wypełnij formularz — oddzwonimy z bezpłatną wyceną</p>
+                  <p className="text-sm font-bold text-primary">Wypełnij formularz — oddzwonimy w celu ustalenia terminu bezpłatnej i niezobowiązującej wizji lokalnej</p>
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                     <div>
                       <label className="text-xs font-medium text-primary mb-1 block">Imię i nazwisko *</label>
@@ -382,6 +382,9 @@ export function KalkulatorClient({ products }: Props) {
                   >
                     Wyślij zapytanie o pompę ciepła
                   </button>
+                  <p className="text-xs text-text-muted text-center mt-2">
+                    Wizja lokalna jest bezpłatna i niezobowiązująca. Oddzwaniamy w ciągu 24 godzin.
+                  </p>
                 </div>
               )}
 
@@ -407,17 +410,30 @@ export function KalkulatorClient({ products }: Props) {
                 </div>
               </div>
 
-              <div>
-                <label className="text-sm font-semibold text-primary mb-3 block">
-                  Powierzchnia pomieszczenia: <span className="text-accent">{m2} m²</span>
-                </label>
-                <input
-                  type="range" min={10} max={100} step={5} value={m2}
-                  onChange={e => setM2(Number(e.target.value))}
-                  className="w-full accent-accent"
-                />
-                <div className="flex justify-between text-xs text-text-muted mt-1">
-                  <span>10 m²</span><span>100 m²</span>
+              <div className="flex flex-col gap-1.5">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-text-muted">Powierzchnia</span>
+                  <span className="text-xs font-bold text-primary bg-accent/10 px-2 py-0.5 rounded-md">{m2} m²</span>
+                </div>
+                <div className="relative h-5 flex items-center">
+                  <div className="absolute w-full h-1.5 bg-slate-200 rounded-full" />
+                  <div
+                    className="absolute h-1.5 bg-accent rounded-full"
+                    style={{ width: `${((m2 - 10) / 90) * 100}%` }}
+                  />
+                  <input
+                    type="range" min={10} max={100} step={5} value={m2}
+                    onChange={e => setM2(Number(e.target.value))}
+                    className="absolute w-full h-1.5 opacity-0 cursor-pointer z-10"
+                  />
+                  <div
+                    className="absolute size-4 bg-white border-2 border-accent rounded-full shadow-md pointer-events-none"
+                    style={{ left: `calc(${((m2 - 10) / 90) * 100}% - 8px)` }}
+                  />
+                </div>
+                <div className="flex justify-between text-xs text-text-muted">
+                  <span>10 m²</span>
+                  <span>100 m²</span>
                 </div>
                 <div className="mt-3 p-3 bg-blue-50 rounded-xl text-sm text-blue-700 font-medium">
                   Wymagana moc: ok. <strong>{requiredPower} kW</strong>
@@ -585,6 +601,30 @@ export function KalkulatorClient({ products }: Props) {
                 Szacowany koszt montażu dla Twojej konfiguracji:
                 <strong className="ml-1">{installCost.min.toLocaleString('pl-PL')}–{installCost.max.toLocaleString('pl-PL')} zł</strong>
               </div>
+
+              <div className="mt-3 p-4 bg-blue-50 border border-blue-200 rounded-xl">
+                <p className="text-sm font-semibold text-blue-900 mb-1">📐 Chcesz dokładną wycenę?</p>
+                <p className="text-xs text-blue-800 leading-relaxed">
+                  Skontaktuj się z nami — wycena jest <strong>bezpłatna i niezobowiązująca</strong>. 
+                  Aby przyspieszyć wycenę, wyślij nam zdjęcia:
+                </p>
+                <ul className="mt-2 flex flex-col gap-1">
+                  {[
+                    'Miejsca gdzie ma wisieć jednostka wewnętrzna',
+                    'Ściany przez które przejdzie instalacja',
+                    'Miejsca gdzie stanie jednostka zewnętrzna',
+                    'Skrzynki elektrycznej (bezpieczniki)',
+                  ].map((item, i) => (
+                    <li key={i} className="flex items-start gap-2 text-xs text-blue-800">
+                      <span className="text-blue-500 shrink-0">→</span>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+                <a href="/kontakt" className="mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-white bg-accent px-3 py-1.5 rounded-lg hover:bg-accent/90 transition-colors">
+                  Wyślij zdjęcia i zapytaj o wycenę →
+                </a>
+              </div>
             </div>
           )}
 
@@ -601,18 +641,30 @@ export function KalkulatorClient({ products }: Props) {
                 </div>
               </div>
 
-              <div>
-                <div className="flex justify-between items-center mb-3">
-                  <label className="text-sm font-semibold text-primary">Budżet całkowity</label>
-                  <span className="text-lg font-extrabold text-accent font-heading">{budget.toLocaleString('pl-PL')} zł</span>
+              <div className="flex flex-col gap-1.5">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-text-muted">Budżet</span>
+                  <span className="text-xs font-bold text-primary bg-accent/10 px-2 py-0.5 rounded-md">{budget.toLocaleString('pl-PL')} zł</span>
                 </div>
-                <input
-                  type="range" min={3000} max={25000} step={500} value={budget}
-                  onChange={e => setBudget(Number(e.target.value))}
-                  className="w-full accent-accent"
-                />
-                <div className="flex justify-between text-xs text-text-muted mt-1">
-                  <span>3 000 zł</span><span>25 000 zł</span>
+                <div className="relative h-5 flex items-center">
+                  <div className="absolute w-full h-1.5 bg-slate-200 rounded-full" />
+                  <div
+                    className="absolute h-1.5 bg-accent rounded-full"
+                    style={{ width: `${((budget - 3000) / 22000) * 100}%` }}
+                  />
+                  <input
+                    type="range" min={3000} max={25000} step={500} value={budget}
+                    onChange={e => setBudget(Number(e.target.value))}
+                    className="absolute w-full h-1.5 opacity-0 cursor-pointer z-10"
+                  />
+                  <div
+                    className="absolute size-4 bg-white border-2 border-accent rounded-full shadow-md pointer-events-none"
+                    style={{ left: `calc(${((budget - 3000) / 22000) * 100}% - 8px)` }}
+                  />
+                </div>
+                <div className="flex justify-between text-xs text-text-muted">
+                  <span>3 000 zł</span>
+                  <span>25 000 zł</span>
                 </div>
               </div>