import Link from 'next/link'
import { FaInstagram, FaYoutube, FaTiktok } from 'react-icons/fa'

export default function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-content">
          <div className="footer-section">
            <h3>doing-it</h3>
            <p>IT Weiterbildung und Schulungen</p>
            <p style={{ fontSize: '14px', color: 'var(--color-text-secondary)', marginTop: '15px' }}>
              Doing-IT – ein Projekt von{' '}
              <a href="https://matzefixit.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)' }}>
                matzefixit
              </a>
              {' '}&{' '}
              <a href="https://hoerter-tech.de" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--color-red)' }}>
                hoerter-tech
              </a>
            </p>
          </div>

          <div className="footer-section">
            <h4>Kontakt</h4>
            <a href="mailto:info@doing-it.de">info@doing-it.de</a>
            <Link href="/kontakt" style={{ display: 'block', marginTop: '10px' }}>
              Kontaktformular
            </Link>
          </div>

          <div className="footer-section">
            <h4>Social Media</h4>
            <div className="footer-social">
              <a href="https://www.instagram.com/doing_it_de" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <FaInstagram style={{ fontSize: '18px' }} /> Instagram
              </a>
              <a href="https://www.youtube.com/@doing-IT-de" target="_blank" rel="noopener noreferrer" aria-label="YouTube" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <FaYoutube style={{ fontSize: '18px' }} /> YouTube
              </a>
              <a href="https://www.tiktok.com/@doing_it_de" target="_blank" rel="noopener noreferrer" aria-label="TikTok" style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                <FaTiktok style={{ fontSize: '18px' }} /> TikTok
              </a>
            </div>
          </div>

          <div className="footer-section">
            <h4>Navigation</h4>
            <Link href="/">Startseite</Link>
            <Link href="/quereinsteiger">Quereinsteiger</Link>
            <Link href="/unternehmen">Unternehmen</Link>
            <Link href="/quereinsteiger/kurse">Kurskatalog</Link>
            <a href="https://wiki.doing-it.de" target="_blank" rel="noopener noreferrer">
              Wiki
            </a>
          </div>

          <div className="footer-section">
            <h4>Rechtliches</h4>
            <Link href="/impressum">Impressum</Link>
            <Link href="/datenschutz">Datenschutzerklärung</Link>
            <Link href="/kontakt">Kontakt</Link>
          </div>
        </div>

        <div className="footer-bottom">
          <p>&copy; {new Date().getFullYear()} doing-it. Alle Rechte vorbehalten.</p>
        </div>
      </div>
    </footer>
  )
}