import Link from 'next/link';
import Image from 'next/image';

export function Footer() {
  return (
    <footer className="border-t border-gray-200 bg-white">
      {/* Newsletter */}
      <div className="border-b border-gray-200">
        <div className="mx-auto max-w-7xl px-4 py-12 text-center">
          <h3 className="font-serif text-2xl">Stay Connected</h3>
          <p className="mt-2 text-sm text-gray-600">
            Subscribe for updates on new work, exhibitions, and events
          </p>
          <form className="mx-auto mt-6 flex max-w-md gap-2">
            <input
              type="email"
              placeholder="Your email address"
              className="flex-1 border border-gray-300 px-4 py-2 text-sm focus:border-gray-900 focus:outline-none"
              required
            />
            <button
              type="submit"
              className="bg-gray-900 px-6 py-2 text-sm font-medium uppercase tracking-wider text-white hover:bg-gray-700"
            >
              Subscribe
            </button>
          </form>
        </div>
      </div>

      {/* Main footer */}
      <div className="mx-auto max-w-7xl px-4 py-12">
        <div className="grid gap-8 md:grid-cols-4">
          {/* Brand */}
          <div className="md:col-span-2">
            <Link href="/">
              <Image
                src="/images/logo.png"
                alt="Katheryn Trenshaw"
                width={180}
                height={50}
                className="h-12 w-auto"
              />
            </Link>
            <p className="mt-4 max-w-md text-sm text-gray-600">
              Passionate Presence Center for Creative Expression.
              Artist, teacher, and facilitator offering transformative
              experiences through art and personal development.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="text-sm font-medium uppercase tracking-wider">Explore</h4>
            <ul className="mt-4 space-y-2 text-sm text-gray-600">
              <li>
                <Link href="/store" className="hover:text-gray-900">Store</Link>
              </li>
              <li>
                <Link href="/events" className="hover:text-gray-900">Events</Link>
              </li>
              <li>
                <Link href="/in-your-own-skin" className="hover:text-gray-900">In Your Own Skin</Link>
              </li>
              <li>
                <Link href="/about" className="hover:text-gray-900">About</Link>
              </li>
              <li>
                <Link href="/contact" className="hover:text-gray-900">Contact</Link>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="text-sm font-medium uppercase tracking-wider">Connect</h4>
            <ul className="mt-4 space-y-2 text-sm text-gray-600">
              <li>
                <a href="mailto:post@ktrenshaw.com" className="hover:text-gray-900">
                  Email
                </a>
              </li>
              <li>
                <a href="https://instagram.com/katheryn_trenshaw" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">
                  Instagram
                </a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC37yzOhJTfAFGxI_0fL-kUA" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">
                  YouTube
                </a>
              </li>
              <li>
                <a href="https://www.facebook.com/KatherynTrenshawRadicalWellbeing" target="_blank" rel="noopener noreferrer" className="hover:text-gray-900">
                  Facebook
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Copyright */}
        <div className="mt-12 border-t border-gray-200 pt-8 text-center text-xs text-gray-500">
          <p>
            &copy; {new Date().getFullYear()} Katheryn Trenshaw. All rights reserved.
          </p>
          <p className="mt-1">
            All images and writing are copyright protected.
          </p>
        </div>
      </div>
    </footer>
  );
}
