/**
 * Footer.jsx - Website footer
 *
 * Donkere achtergrond (warm-900) met workshop info,
 * contact placeholder en copyright.
 */

import { Link } from 'react-router-dom';
import { WORKSHOP_CONFIG } from '../config/workshop';

const { maxParticipants, dateFull, time, venue, email } = WORKSHOP_CONFIG;

function Footer() {
  // Huidig jaar voor copyright
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-warm-900 text-warm-300 py-12">
      <div className="container-page">
        <div className="grid md:grid-cols-3 gap-8">
          {/* Workshop info */}
          <div>
            <h3 className="font-display font-semibold text-white mb-4">
              Claude Code Hands-on Sessie
            </h3>
            <p className="text-sm leading-relaxed">
              Van nieuwsgierig naar praktisch aan de slag met Claude Code.
              Max {maxParticipants} deelnemers, persoonlijke begeleiding.
            </p>
          </div>

          {/* Volgende workshop */}
          <div>
            <h3 className="font-display font-semibold text-white mb-4">
              Volgende workshop
            </h3>
            <ul className="space-y-2 text-sm">
              <li className="flex items-center gap-2">
                <svg className="w-4 h-4 text-coral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                {dateFull}
              </li>
              <li className="flex items-center gap-2">
                <svg className="w-4 h-4 text-coral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                {time}
              </li>
              <li className="flex items-center gap-2">
                <svg className="w-4 h-4 text-coral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                {venue}
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h3 className="font-display font-semibold text-white mb-4">
              Contact
            </h3>
            <p className="text-sm leading-relaxed mb-4">
              Vragen? Mail naar{' '}
              <a href={`mailto:${email}`} className="text-coral-400 hover:text-coral-300 transition-colors">
                {email}
              </a>
              {' '}en ik help je graag!
            </p>
            <ul className="space-y-2 text-sm">
              <li>
                <a
                  href={`mailto:${email}`}
                  className="hover:text-coral-400 transition-colors flex items-center gap-2"
                >
                  <svg className="w-4 h-4 text-coral-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  {email}
                </a>
              </li>
              <li>
                <a
                  href="https://www.linkedin.com/in/frankmeeuwsen"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="hover:text-coral-400 transition-colors flex items-center gap-2"
                >
                  <svg className="w-4 h-4 text-coral-400" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                  </svg>
                  LinkedIn profiel
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Divider */}
        <div className="border-t border-warm-800 mt-10 pt-6">
          <div className="flex flex-col md:flex-row justify-between items-center gap-4">
            {/* Copyright */}
            <p className="text-sm text-warm-500">
              &copy; {currentYear} Frank Meeuwsen. Alle rechten voorbehouden.
            </p>

            {/* Links */}
            <div className="flex gap-6 text-sm">
              <Link to="/privacy" className="hover:text-coral-400 transition-colors">
                Privacy
              </Link>
              <Link to="/voorwaarden" className="hover:text-coral-400 transition-colors">
                Algemene voorwaarden
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

export default Footer;
