---
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>