'use client';

import Link from 'next/link';
import Image from 'next/image';
import { useState } from 'react';
import { api } from '@/lib/api';

export default function Footer() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState<'idle' | 'loading' | 'done' | 'error'>('idle');
  const [message, setMessage] = useState('');

  async function subscribe(e: React.FormEvent) {
    e.preventDefault();
    setStatus('loading');
    try {
      const res = await api.post('/newsletter/subscribe', { email });
      setMessage(res.message || 'Subscribed!');
      setStatus('done');
      setEmail('');
    } catch (err) {
      setMessage(err instanceof Error ? err.message : 'Something went wrong');
      setStatus('error');
    }
  }

  return (
    <footer className="bg-[var(--brand-blue)] text-white mt-20">
      <div className="mx-auto max-w-7xl px-4 py-14 grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
        <div>
          <div className="flex items-center gap-3 mb-4">
            <Image src="/logo.png" alt="Sons and Daughters College logo" width={44} height={44} />
            <span className="font-bold">Sons and Daughters College</span>
          </div>
          <p className="text-sm text-white/80">Ilo-Ayegunle, Ilesa, Osun State, Nigeria</p>
          <p className="text-sm text-[var(--brand-gold)] font-medium mt-1">Training Leaders From Youth Up</p>
        </div>

        <div>
          <h4 className="font-semibold mb-3">Quick Links</h4>
          <ul className="space-y-2 text-sm text-white/80">
            <li><Link href="/about">About Us</Link></li>
            <li><Link href="/admissions">Admissions</Link></li>
            <li><Link href="/result-checker">Result Checker</Link></li>
            <li><Link href="/news">News</Link></li>
            <li><Link href="/contact">Contact</Link></li>
          </ul>
        </div>

        <div>
          <h4 className="font-semibold mb-3">Contact</h4>
          <ul className="space-y-2 text-sm text-white/80">
            <li>Ilo-Ayegunle, Ilesa, Osun State</li>
            <li>info@sdcollege.example</li>
            <li>+234 800 000 0000</li>
          </ul>
        </div>

        <div>
          <h4 className="font-semibold mb-3">Stay Updated</h4>
          <p className="text-sm text-white/80 mb-3">Admission updates, school news, events and announcements.</p>
          <form onSubmit={subscribe} className="flex gap-2">
            <input
              type="email"
              required
              placeholder="Email address"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="flex-1 rounded-md px-3 py-2 text-sm text-[var(--foreground)] bg-white"
            />
            <button
              type="submit"
              disabled={status === 'loading'}
              className="rounded-md bg-[var(--brand-magenta)] px-4 py-2 text-sm font-semibold hover:opacity-90 disabled:opacity-60"
            >
              Subscribe
            </button>
          </form>
          {message && <p className="text-xs mt-2 text-white/90">{message}</p>}
        </div>
      </div>

      <div className="border-t border-white/20 py-4 text-center text-xs text-white/70">
        © {new Date().getFullYear()} Sons and Daughters College. All rights reserved. ·{' '}
        <Link href="/privacy-policy">Privacy Policy</Link> · <Link href="/terms">Terms</Link>
      </div>
    </footer>
  );
}