import React, { useState } from 'react';
import { Mountain, Mail } from 'lucide-react';

export const Footer: React.FC = () => {
  const [email, setEmail] = useState('');
  const [subscribed, setSubscribed] = useState(false);

  const handleSubscribe = (e: React.FormEvent) => {
    e.preventDefault();
    if (email) {
      setSubscribed(true);
      setEmail('');
      setTimeout(() => setSubscribed(false), 3000);
    }
  };

  return (
    <footer className="bg-[var(--ink)] text-[var(--ink-inverse)] py-16">
      <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div className="flex items-center gap-2 mb-4">
            <Mountain className="w-6 h-6 text-[var(--brand-500)]" />
            <span className="text-xl font-display font-bold">Nepal 360 Recovery</span>
          </div>
          <p className="text-sm opacity-70">
            A cinematic travel journal exploring the landscapes, cultures, and trails of Nepal.
          </p>
        </div>
        <div>
          <h4 className="text-sm font-semibold uppercase tracking-wider mb-4">Explore</h4>
          <ul className="space-y-2 text-sm opacity-70">
            <li><a href="#/" className="hover:opacity-100 transition">Home</a></li>
            <li><a href="#/diagnostics" className="hover:opacity-100 transition">Diagnostics</a></li>
            <li><a href="#/incidents" className="hover:opacity-100 transition">Incidents</a></li>
            <li><a href="#/system" className="hover:opacity-100 transition">System</a></li>
          </ul>
        </div>
        <div>
          <h4 className="text-sm font-semibold uppercase tracking-wider mb-4">Regions</h4>
          <ul className="space-y-2 text-sm opacity-70">
            <li>Khumbu</li>
            <li>Annapurna</li>
            <li>Mustang</li>
            <li>Langtang</li>
          </ul>
        </div>
        <div>
          <h4 className="text-sm font-semibold uppercase tracking-wider mb-4">Newsletter</h4>
          <form onSubmit={handleSubscribe} className="flex gap-2">
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Your email"
              className="flex-1 h-10 px-3 rounded-[var(--r)] bg-[var(--ink-2)] text-[var(--ink-inverse)] placeholder:text-[var(--ink-muted)] border border-[var(--border)]"
              required
            />
            <button
              type="submit"
              className="h-10 px-4 bg-[var(--brand-500)] text-[var(--ink-inverse)] rounded-[var(--r)] hover:bg-[var(--brand-600)] transition"
            >
              <Mail className="w-4 h-4" />
            </button>
          </form>
          {subscribed && (
            <p className="text-sm text-[var(--brand-500)] mt-2">Thank you for subscribing!</p>
          )}
        </div>
      </div>
      <div className="container mx-auto px-4 mt-12 pt-8 border-t border-[var(--border)] text-center text-sm opacity-50">
        &copy; {new Date().getFullYear()} Nepal 360 Recovery. All rights reserved.
      </div>
    </footer>
  );
};