import styles from "./Footer.module.css";
import Link from "next/link";
import {
  InstagramLogoIcon,
  LinkedinLogoIcon,
  XLogoIcon,
  FacebookLogoIcon,
} from "@phosphor-icons/react/dist/ssr";

const currentYear = new Date().getFullYear();

export default function Footer() {
  return (
    <footer className={styles.footer}>
      <div className={styles.footer__inner}>
        {/* Top: Brand + Navigation */}
        <div className={styles.footer__top}>
          {/* Brand */}
          <div className={styles.footer__brand}>
            <Link href="/" className={styles.footer__logo}>
              ENVU {/* ← Logo oder Bildkomponente hier */}
            </Link>
            <p className={styles.footer__tagline}>
              Maßgeschneiderte digitale Lösungen für Ihr Unternehmen.
            </p>
          </div>

          {/* Navigation Spalten */}
          <nav className={styles.footer__nav} aria-label="Footer Navigation">
            <div className={styles.footer__nav_group}>
              <span className={styles.footer__nav_title}>Unternehmen</span>
              <ul>
                <li>
                  <Link href="/ueberuns">Über uns</Link>
                </li>
                <li>
                  <Link href="/leistungen">Leistungen</Link>
                </li>
                <li>
                  <Link href="/kontakt">Kontakt</Link>
                </li>
              </ul>
            </div>

            <div className={styles.footer__nav_group}>
              <span className={styles.footer__nav_title}>Rechtliches</span>
              <ul>
                <li>
                  <Link href="/impressum">Impressum</Link>
                </li>
                <li>
                  <Link href="/datenschutz">Datenschutz</Link>
                </li>
              </ul>
            </div>
          </nav>
        </div>

        {/* Divider */}
        <div className={styles.footer__divider} />

        {/* Bottom: Copyright + Social */}
        <div className={styles.footer__bottom}>
          <p className={styles.footer__copy}>
            © {currentYear} ENVU. Alle Rechte vorbehalten.
          </p>

          <div className={styles.footer__social}>
            <a
              href="https://instagram.com"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Instagram"
            >
              <InstagramLogoIcon size={20} />
            </a>
            <a
              href="https://linkedin.com"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="LinkedIn"
            >
              <LinkedinLogoIcon size={20} />
            </a>
            <a
              href="https://x.com"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="X (Twitter)"
            >
              <XLogoIcon size={20} />
            </a>
            <a
              href="https://facebook.com"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Facebook"
            >
              <FacebookLogoIcon size={20} />
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}