'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 style={{ backgroundColor: '#00171F' }} className="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="mb-6" style={{ color: '#EED2CC' }}>
              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 text-white outline-none"
                style={{ backgroundColor: '#7D6E5E', borderColor: '#7D6E5E', color: '#FBF7F4' }}
                placeholder="Email*"
                onFocus={(e) => { e.target.style.borderColor = '#EED2CC'; e.target.style.boxShadow = '0 0 0 2px rgba(238, 210, 204, 0.3)'; }}
                onBlur={(e) => { e.target.style.borderColor = '#7D6E5E'; e.target.style.boxShadow = 'none'; }}
              />
              <div className="flex items-center space-x-2">
                <input
                  type="checkbox"
                  id="subscribe"
                  defaultChecked
                  className="w-4 h-4 rounded"
                  style={{ accentColor: '#7D6E5E', backgroundColor: '#7D6E5E', borderColor: '#7D6E5E' }}
                />
                <label htmlFor="subscribe" className="text-sm" style={{ color: '#EED2CC' }}>
                  Yes, subscribe me to your newsletter.
                </label>
              </div>
              <button
                type="submit"
                style={{ backgroundColor: '#00171F' }}
                className="w-full text-white px-6 py-2 rounded-lg hover:opacity-90 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" style={{ color: '#EED2CC' }}>
              <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 text-center text-sm" style={{ borderTopColor: '#7D6E5E', color: '#EED2CC' }}>
          <p>Copyright 2025. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}