import Link from 'next/link'
import { footerNav, site } from '@/lib/site'
import {
  IconEnvelope,
  IconFacebook,
  IconInstagram,
  IconLinkedin,
  IconLocation,
  IconPhone,
  IconTwitter,
} from './Icons'

export default function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <h3 className="footer-heading">Elérhetőség</h3>
            <p>
              <IconLocation /> {site.city}
            </p>
            <p>
              <a href={site.phoneHref}>
                <IconPhone /> {site.phone}
              </a>
            </p>
            <p>
              <a href={`mailto:${site.email}`}>
                <IconEnvelope /> {site.email}
              </a>
            </p>

            <h3 className="footer-heading" style={{ marginTop: '2.5rem' }}>
              Követés
            </h3>
            <div className="footer-social">
              <a href={site.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook">
                <IconFacebook />
              </a>
              <a href={site.facebookPage} target="_blank" rel="noopener noreferrer" aria-label="Facebook oldal">
                <IconTwitter />
              </a>
              <a href={site.facebookPage} target="_blank" rel="noopener noreferrer" aria-label="Instagram">
                <IconInstagram />
              </a>
              <a href={site.facebookPage} target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
                <IconLinkedin />
              </a>
            </div>
          </div>

          <div>
            <h3 className="footer-heading">Navigáció</h3>
            <ul>
              {footerNav.map((item) => (
                <li key={item.href}>
                  <Link href={item.href}>{item.label}</Link>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h3 className="footer-heading">Facebook</h3>
            {/*
              Az eredeti oldal itt a Facebook Page plugint ágyazta be (~200 kB
              külső szkript + követőkód). Helyette saját kártya, ami ugyanoda visz.
            */}
            <a
              className="fb-card"
              href={site.facebookPage}
              target="_blank"
              rel="noopener noreferrer"
            >
              <span className="fb-card-icon" aria-hidden="true">
                <IconFacebook size={26} />
              </span>
              <span className="fb-card-text">
                <strong>Böszörményi Kovács Zsolt</strong>
                <em>Esküvői, angol-magyar ceremóniamester</em>
              </span>
              <span className="fb-card-cta">Kövesd Facebookon →</span>
            </a>
          </div>
        </div>

        <div className="footer-bottom">
          <p>
            Copyright &copy; {new Date().getFullYear()} Minden jog fenntartva |{' '}
            <a href={site.url}>zsoltiacm.hu</a> | Fejlesztette:{' '}
            <a href="https://webron.hu" target="_blank" rel="noopener noreferrer">
              <span style={{ color: 'rgb(132,155,89)' }}>Web</span>
              <span style={{ color: 'rgb(188,237,72)' }}>ron</span>
            </a>
          </p>
        </div>
      </div>
    </footer>
  )
}