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

export default function Footer() {
  return (
    <footer className="border-t border-line">
      <div className="h-1 w-full brand-gradient" />
      <div className="mx-auto max-w-6xl px-6 py-10">
        <div className="grid gap-8 md:grid-cols-4">
          <div>
            <div className="flex items-center gap-3">
              <Image src="/logo.png" alt="Craft2Prints" width={64} height={64} className="h-14 w-14 object-contain" />
              <span className="font-script text-4xl leading-none">Craft2Prints</span>
            </div>
            <p className="mt-3 max-w-xs text-sm text-muted">
              Ink it. Print it. Love it. Every piece made to order, from your own design.
            </p>
            <a
              href="https://www.facebook.com/Needlestocrafts"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Craft2Prints on Facebook"
              className="mt-5 inline-flex items-center gap-2 border border-line px-4 py-2.5 text-sm font-medium text-ink transition-colors hover:border-splash-blue hover:bg-splash-blue hover:text-paper"
            >
              <svg viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6 shrink-0">
                <path d="M22 12a10 10 0 1 0-11.5 9.87v-6.98H7.9V12h2.6V9.8c0-2.6 1.55-4.03 3.92-4.03 1.13 0 2.32.2 2.32.2v2.55h-1.3c-1.29 0-1.69.8-1.69 1.62V12h2.88l-.46 2.89h-2.42v6.98A10 10 0 0 0 22 12z" />
              </svg>
              Follow us on Facebook
            </a>
          </div>
          <div className="text-sm text-muted">
            <p className="tag-label mb-3 text-ink">Made to order</p>
            <p>Printed after you check out — nothing sits on a shelf first.</p>
          </div>
          <div className="text-sm text-muted">
            <p className="tag-label mb-3 text-ink">Contact</p>
            <p>sales@craft2prints.co.uk</p>
            <Link href="/contact" className="mt-2 inline-block text-clay hover:text-clay-dark">
              Contact us
            </Link>
          </div>
          <div className="text-sm text-muted">
            <p className="tag-label mb-3 text-ink">Stay in the loop</p>
            <p>New templates and the occasional offer — no spam.</p>
            <NewsletterForm />
          </div>
        </div>
        <div className="mt-10 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted">
          <p>© {new Date().getFullYear()} Craft2Prints.</p>
          <nav className="flex flex-wrap gap-x-4 gap-y-1">
            <Link href="/privacy" className="hover:text-ink">
              Privacy
            </Link>
            <Link href="/cookies" className="hover:text-ink">
              Cookies
            </Link>
            <Link href="/terms" className="hover:text-ink">
              Terms
            </Link>
            <Link href="/returns" className="hover:text-ink">
              Returns
            </Link>
          </nav>
        </div>
      </div>
    </footer>
  );
}
