import Link from "next/link";

import { navigation } from "@/shared/config/navigation/navigation";
import { sociallinks } from "@/shared/config/social-links/links";
import styles from "@/static/footer/footer.module.css";

const Footer = () => {
  const telegram = sociallinks.find(
    (link) => link.label.toLowerCase() === "telegram"
  );
  const github = sociallinks.find(
    (link) => link.label.toLowerCase() === "github"
  );

  return (
    <footer id="contact" className={styles.footer} data-scroll-section>
      <span className={styles.watermark} aria-hidden="true">
        Autli
      </span>

      <div className="page-container">
        <div className={styles.cta}>
          <p className={styles.eyebrow}>контакты</p>

          <h2 className={styles.title}>
            Есть проект?
            <br />
            <span className={styles.titleAccent}>Напиши мне</span>
          </h2>

          <p className={styles.text}>
            Отвечаю обычно в течение дня. Расскажи, что хочешь сделать, — я
            помогу с идеей, оценкой и реализацией.
          </p>

          <div className={styles.actions}>
            <a
              href={telegram?.href}
              target="_blank"
              rel="noreferrer"
              className={styles.button}
            >
              Написать в Telegram
              <span aria-hidden="true">↗</span>
            </a>

            <a
              href={github?.href}
              target="_blank"
              rel="noreferrer"
              className={styles.buttonGhost}
            >
              GitHub
              <span aria-hidden="true">↗</span>
            </a>
          </div>
        </div>

        <div className={styles.bottom}>
          <span className={styles.wordmark}>Autli</span>

          <nav className={styles.nav} aria-label="Навигация в подвале">
            <ul>
              {navigation.map((item) => (
                <li key={item.href}>
                  <Link href={item.href}>{item.label}</Link>
                </li>
              ))}
            </ul>
          </nav>

          <p className={styles.copy}>
            © {new Date().getFullYear()} Egorov Nikita
          </p>
        </div>
      </div>
    </footer>
  );
};

export default Footer;