'use client';

import { useState } from 'react';

export default function Footer() {
  const [email, setEmail] = useState('');

  const handleNewsletterSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Newsletter subscription:', email);
    alert('Thank you for subscribing!');
    setEmail('');
  };

  return (
    <footer className="bg-slate-800 text-white py-12 md:py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
          {/* Brand Section */}
          <div>
            <h3 className="text-2xl font-bold mb-4">Multilingual Family Space</h3>
            <p className="text-slate-300 mb-6">
              Guiding bilingual families and language learners on their multilingual journey.
            </p>
          </div>

          {/* Newsletter Section */}
          <div>
            <h4 className="text-lg font-semibold mb-4">Stay Connected</h4>
            <form onSubmit={handleNewsletterSubmit} className="space-y-3">
              <input
                type="email"
                placeholder="Email*"
                required
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full px-4 py-2 rounded-lg bg-slate-700 border border-slate-600 text-white placeholder-slate-400 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none"
              />
              <div className="flex items-center space-x-2">
                <input
                  type="checkbox"
                  id="subscribe"
                  defaultChecked
                  className="w-4 h-4 text-orange-600 bg-slate-700 border-slate-600 rounded focus:ring-orange-500"
                />
                <label htmlFor="subscribe" className="text-sm text-slate-300">
                  Yes, subscribe me to your newsletter.
                </label>
              </div>
              <button
                type="submit"
                className="w-full bg-orange-600 text-white px-6 py-2 rounded-lg hover:bg-orange-700 transition-colors font-medium"
              >
                Subscribe
              </button>
            </form>
          </div>

          {/* Contact Info */}
          <div>
            <h4 className="text-lg font-semibold mb-4">Contact Data</h4>
            <div className="space-y-2 text-slate-300">
              <p>monika@polishlessonsamsterdam.com</p>
              <p>(+31) 682 773 830</p>
              <p className="mt-4">Comsuo Professional</p>
              <p>KVK nr. 72903422</p>
              <p>BTW ID NL002462839B89</p>
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="mt-8 pt-8 border-t border-slate-700 text-center text-sm text-slate-400">
          <p>Copyright 2025. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

