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

components/forms/ContactForm.tsx

@@ -21,6 +21,7 @@ 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 [files, setFiles] = useState<File[]>([]);
 
   const {
     register,
@@ -199,6 +200,39 @@ export function ContactForm() {
         {errors.message && <p className="text-red-500 text-xs font-medium">{errors.message.message}</p>}
       </div>
 
+      {/* Załączniki */}
+      <div className="flex flex-col gap-1.5">
+        <label className="text-sm font-medium text-primary">
+          Załącz zdjęcia <span className="text-text-muted font-normal">(opcjonalnie)</span>
+        </label>
+        <label className="flex flex-col items-center justify-center gap-2 border-2 border-dashed border-border rounded-xl p-6 cursor-pointer hover:border-accent hover:bg-accent/5 transition-colors">
+          <input
+            type="file"
+            multiple
+            accept="image/*,.pdf"
+            className="sr-only"
+            onChange={(e) => setFiles(Array.from(e.target.files || []))}
+          />
+          <svg xmlns="http://www.w3.org/2000/svg" className="size-8 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 00-2 2z" />
+          </svg>
+          <span className="text-sm text-text-muted text-center">
+            Kliknij aby wybrać zdjęcia lub przeciągnij tutaj<br />
+            <span className="text-xs">JPG, PNG, WEBP, PDF — maks. 10 MB każdy</span>
+          </span>
+          {files.length > 0 && (
+            <div className="flex flex-wrap gap-2 mt-2">
+              {files.map((f, i) => (
+                <span key={i} className="text-xs bg-accent/10 text-accent px-2 py-1 rounded-md font-medium">
+                  {f.name}
+                </span>
+              ))}
+            </div>
+          )}
+        </label>
+        <p className="text-xs text-text-muted">Zdjęcia miejsca montażu znacznie przyspieszają wycenę.</p>
+      </div>
+
       {/* RODO */}
       <div className="space-y-2">
         <div className="flex items-start gap-3 cursor-pointer" onClick={() => setConsent(!consent)}>