feat: Zaktualizuj sekcję hero, nawigację, kalkulator i formularz zgłoszenia awarii

components/forms/ContactForm.tsx

@@ -4,27 +4,27 @@ import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
-import { Loader2, CheckCircle2, AlertCircle } from 'lucide-react';
+import { Loader2, CheckCircle2, AlertCircle, Check } from 'lucide-react';
 import { submitContactForm } from '@/app/kontakt/actions';
-import { companyDetails } from "@/content/company";
 
 const contactFormSchema = z.object({
   name: z.string().min(2, "Imię musi mieć min. 2 znaki"),
   phone: z.string().min(9, "Wprowadź poprawny numer telefonu"),
-  email: z.string().email("Niepoprawny adres e-mail"),
-  subject: z.string().min(1, "Wybierz temat"),
-  message: z.string().min(10, "Wiadomość musi mieć min. 10 znaków"),
-  consent: z.boolean().refine((val) => val === true, "Zgoda RODO jest wymagana"),
+  email: z.union([z.literal(''), z.string().email("Niepoprawny adres e-mail")]).optional(),
+  city: z.string().min(1, "Wybierz miasto"),
+  subject: z.string().optional(),
+  message: z.string().optional(),
 });
 
 type ContactFormValues = z.infer<typeof contactFormSchema>;
 
 export function ContactForm() {
   const [serverState, setServerState] = useState<{ success?: boolean; message?: string } | null>(null);
+  const [consent, setConsent] = useState(false);
 
   const {
     register,
-    handleSubmit,
+    handleSubmit: hookFormSubmit,
     formState: { errors, isSubmitting },
     reset
   } = useForm<ContactFormValues>({
@@ -33,20 +33,20 @@ export function ContactForm() {
       name: '',
       phone: '',
       email: '',
+      city: '',
       subject: '',
       message: '',
-      consent: false,
     }
   });
 
   const onSubmit = async (data: ContactFormValues) => {
     setServerState(null);
     
-    // Przekształcamy dane do formatu FormData dla Server Action
     const formData = new FormData();
     Object.entries(data).forEach(([key, value]) => {
-      formData.append(key, value.toString());
+      if (value !== undefined) formData.append(key, value.toString());
     });
+    formData.append("consent", consent ? 'true' : 'false');
 
     const response = await submitContactForm(null, formData);
     
@@ -57,9 +57,19 @@ export function ContactForm() {
 
     if (response.success) {
       reset();
+      setConsent(false);
     }
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    if (!consent) {
+      e.preventDefault();
+      alert('Proszę zaznaczyć zgodę na przetwarzanie danych.');
+      return;
+    }
+    hookFormSubmit(onSubmit)(e);
+  };
+
   if (serverState?.success) {
     return (
       <div className="bg-green-50 text-green-800 p-8 rounded-2xl border border-green-200 flex flex-col items-center text-center">
@@ -77,7 +87,7 @@ export function ContactForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6 bg-white p-6 md:p-8 rounded-2xl border border-border shadow-sm">
+    <form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 md:p-8 rounded-2xl border border-border shadow-sm">
       {serverState && !serverState.success && (
         <div className="bg-red-50 text-red-800 p-4 rounded-xl border border-red-200 flex items-start gap-3">
           <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
@@ -88,10 +98,11 @@ export function ContactForm() {
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
         {/* Imię */}
         <div className="space-y-2">
-          <label htmlFor="name" className="text-sm font-semibold text-primary">Imię i nazwisko</label>
+          <label htmlFor="name" className="text-sm font-semibold text-primary">Imię i nazwisko <span className="text-red-500">*</span></label>
           <input
             {...register("name")}
             id="name"
+            required
             className={`w-full px-4 py-3 rounded-xl border ${errors.name ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50`}
             placeholder="Jan Kowalski"
             aria-invalid={errors.name ? "true" : "false"}
@@ -101,11 +112,12 @@ export function ContactForm() {
 
         {/* Telefon */}
         <div className="space-y-2">
-          <label htmlFor="phone" className="text-sm font-semibold text-primary">Telefon</label>
+          <label htmlFor="phone" className="text-sm font-semibold text-primary">Telefon <span className="text-red-500">*</span></label>
           <input
             {...register("phone")}
             id="phone"
             type="tel"
+            required
             className={`w-full px-4 py-3 rounded-xl border ${errors.phone ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50`}
             placeholder="+48 123 456 789"
           />
@@ -127,26 +139,53 @@ export function ContactForm() {
           {errors.email && <p className="text-red-500 text-xs font-medium">{errors.email.message}</p>}
         </div>
 
-        {/* Temat */}
+        {/* Miasto */}
         <div className="space-y-2">
-          <label htmlFor="subject" className="text-sm font-semibold text-primary">Temat rozmowy</label>
+          <label htmlFor="city" className="text-sm font-semibold text-primary">Miasto <span className="text-red-500">*</span></label>
           <select
-            {...register("subject")}
-            id="subject"
-            className={`w-full px-4 py-3 rounded-xl border ${errors.subject ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
+            {...register("city")}
+            id="city"
+            required
+            className={`w-full px-4 py-3 rounded-xl border ${errors.city ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
           >
-            <option value="">Wybierz temat...</option>
-            <option value="klimatyzacja">Klimatyzacja</option>
-            <option value="pompy-ciepla">Pompy ciepła</option>
-            <option value="remonty">Remonty i wykończenia</option>
-            <option value="hydraulika">Hydraulika</option>
-            <option value="serwis-agd">Serwis AGD</option>
-            <option value="inne">Inne zapytanie</option>
+            <option value="">Wybierz miasto...</option>
+            <option value="Wrocław">Wrocław</option>
+            <option value="Legnica">Legnica</option>
+            <option value="Wałbrzych">Wałbrzych</option>
+            <option value="Jelenia Góra">Jelenia Góra</option>
+            <option value="Lubin">Lubin</option>
+            <option value="Głogów">Głogów</option>
+            <option value="Świdnica">Świdnica</option>
+            <option value="Dzierżoniów">Dzierżoniów</option>
+            <option value="Oleśnica">Oleśnica</option>
+            <option value="Oława">Oława</option>
+            <option value="Trzebnica">Trzebnica</option>
+            <option value="Środa Śląska">Środa Śląska</option>
+            <option value="Inne">Inne miasto</option>
           </select>
-          {errors.subject && <p className="text-red-500 text-xs font-medium">{errors.subject.message}</p>}
+          {errors.city && <p className="text-red-500 text-xs font-medium">{errors.city.message}</p>}
         </div>
       </div>
 
+      {/* Temat */}
+      <div className="space-y-2">
+        <label htmlFor="subject" className="text-sm font-semibold text-primary">Temat rozmowy</label>
+        <select
+          {...register("subject")}
+          id="subject"
+          className={`w-full px-4 py-3 rounded-xl border ${errors.subject ? 'border-red-500 focus:ring-red-500' : 'border-border focus:border-primary focus:ring-primary/20'} outline-none focus:ring-2 transition-all bg-slate-50 appearance-none`}
+        >
+          <option value="">Wybierz temat...</option>
+          <option value="klimatyzacja">Klimatyzacja</option>
+          <option value="pompy-ciepla">Pompy ciepła</option>
+          <option value="remonty">Remonty i wykończenia</option>
+          <option value="hydraulika">Hydraulika</option>
+          <option value="serwis-agd">Serwis AGD</option>
+          <option value="inne">Inne zapytanie</option>
+        </select>
+        {errors.subject && <p className="text-red-500 text-xs font-medium">{errors.subject.message}</p>}
+      </div>
+
       {/* Wiadomość */}
       <div className="space-y-2">
         <label htmlFor="message" className="text-sm font-semibold text-primary">Wiadomość</label>
@@ -162,19 +201,17 @@ export function ContactForm() {
 
       {/* RODO */}
       <div className="space-y-2">
-        <label className="flex items-start gap-3 cursor-pointer group">
-          <div className="relative flex items-start pt-1">
-            <input
-              type="checkbox"
-              {...register("consent")}
-              className="w-5 h-5 rounded border-border text-primary focus:ring-primary focus:ring-offset-0 transition-colors"
-            />
+        <div className="flex items-start gap-3 cursor-pointer" onClick={() => setConsent(!consent)}>
+          <div className={`size-5 rounded border-2 shrink-0 mt-0.5 flex items-center justify-center transition-colors ${
+            consent ? 'bg-accent border-accent' : 'bg-white border-slate-300'
+          }`}>
+            {consent && <Check className="size-3 text-white" />}
           </div>
-          <span className="text-xs text-text-muted leading-relaxed select-none">
-            Wyrażam zgodę na przetwarzanie moich danych osobowych podanych w formularzu w celu obsługi zapytania przez firmę {companyDetails.shortName}. Zapoznałem/am się z Polityką Prywatności.
+          <input type="hidden" name="consent" value={consent ? 'true' : ''} />
+          <span className="text-sm text-text-muted leading-relaxed select-none">
+            Wyrażam zgodę na przetwarzanie moich danych osobowych podanych w formularzu w celu obsługi zapytania przez firmę ThermCool. Zapoznałem/am się z Polityką Prywatności. *
           </span>
-        </label>
-        {errors.consent && <p className="text-red-500 text-xs font-medium">{errors.consent.message}</p>}
+        </div>
       </div>
 
       <button