Footer, przebudowa

src/components/layout/Footer.astro

@@ -1,10 +1,75 @@
-<footer class="fuz-footer">
-  <div class="fuz-container flex flex-col md:flex-row items-center justify-between gap-3">
-    <p class="fuz-footer-text">
-      © {new Date().getFullYear()} FUZ – lokalny operator internetu i telewizji.
-    </p>
-    <p class="text-xs text-gray-400">
-      RODO • Polityka prywatności • Cookies
-    </p>
+---
+import yaml from "js-yaml";
+import fs from "fs";
+import "../../styles/footer.css";
+
+const footer = yaml.load(
+  fs.readFileSync("./src/content/site/footer.yaml", "utf8"),
+);
+---
+
+<footer
+  class="fuz-footer bg-[var(--fuz-bg)] text-[var(--fuz-text)] mt-20 border-t border-gray-200 dark:border-slate-700"
+>
+  <!-- GŁÓWNY GRID -->
+  <div class="footer-inner max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-12">
+    <!-- Kolumna 1 – Firma -->
+    <div class="footer-col space-y-3">
+      <h3 class="fuz-footer-title">{footer.company.name}</h3>
+      <p class="fuz-footer-text leading-relaxed">
+        {footer.company.address.line1}<br />
+        {footer.company.address.line2}
+      </p>
+    </div>
+
+    <!-- Kolumna 2 – Kontakt -->
+    <div class="space-y-1">
+      <h4 class="fuz-footer-title">Kontakt</h4>
+
+      {
+        footer.contact.phones.map((phone: string) => (
+          <p class="fuz-footer-text">
+            <a href={`tel:${phone.replace(/\s/g, "")}`} class="fuz-footer-link">
+              {phone}
+            </a>
+          </p>
+        ))
+      }
+
+      <p class="fuz-footer-text">
+        <a href={`mailto:${footer.contact.email}`} class="fuz-footer-link">
+          {footer.contact.email}
+        </a>
+      </p>
+    </div>
+
+    <!-- Kolumna 3 – Usługi -->
+    <div>
+      <h4 class="fuz-footer-title">Usługi</h4>
+      <ul class="space-y-1">
+        {
+          footer.services.map((item: any) => (
+            <li>
+              <a href={item.url} class="fuz-footer-link">
+                {item.name}
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  </div>
+
+  <!-- DÓŁ FOOTERA -->
+  <div
+    class="text-center py-0 text-sm text-[var(--fuz-text)] opacity-60"
+  >
+    © {new Date().getFullYear()} FUZ Adam Rojek. Wszystkie prawa zastrzeżone.
+
+    <!-- ReCAPTCHA info -->
+    <div
+      class="mt-2 fuz-footer-text text-xs opacity-70"
+      set:html={footer.recaptcha}
+    />
   </div>
 </footer>