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

export function SiteHeader() {
  return (
    <header className="border-b border-rule bg-paper/80 backdrop-blur-sm">
      <div className="mx-auto flex max-w-3xl items-center justify-between px-4 py-5 sm:px-6">
        <Link
          href="https://fci.coop"
          className="group flex items-center gap-4 focus:outline-none"
          aria-label="Food Co-op Initiative — fci.coop"
        >
          <Image
            src="/fci-logo.png"
            alt="Food Co-op Initiative"
            width={130}
            height={105}
            priority
            className="h-12 w-auto sm:h-14"
          />
          <span className="hidden text-[11px] uppercase tracking-[0.18em] text-ink-mute sm:inline-block sm:border-l sm:border-rule sm:pl-4">
            Co-op Check-in
          </span>
        </Link>
        <nav aria-label="Primary">
          <Link
            href="https://fci.coop"
            className="font-body text-sm text-ink-soft hover:text-leaf-700 transition-colors px-2 py-1"
          >
            fci.coop ↗
          </Link>
        </nav>
      </div>
    </header>
  );
}

export function SiteFooter() {
  return (
    <footer className="mt-auto border-t border-rule bg-paper-2/60">
      <div className="mx-auto max-w-3xl px-4 py-7 sm:px-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-baseline sm:justify-between">
          <p className="font-display text-sm italic text-ink-soft">
            &ldquo;A grocery co-op begins with people who decide to feed each other well.&rdquo;
          </p>
          <p className="text-xs text-ink-mute">
            Need a fresh link? Contact your engagement coordinator.
          </p>
        </div>
        <p className="mt-4 text-xs text-ink-mute leading-relaxed">
          Your responses go directly to your co-op&apos;s record. Nothing is shared with third
          parties. This page is only reachable through a personalized link issued to you.
        </p>
      </div>
    </footer>
  );
}