import Link from "next/link";

export function SiteHeader() {
  return (
    <header className="border-b border-stone-200 bg-white">
      <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-4 sm:px-6">
        <Link
          href="https://fci.coop"
          className="flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-leaf-500/40 rounded"
        >
          <Logo />
          <span className="flex flex-col leading-tight">
            <span className="font-semibold text-stone-900">Food Co-op Initiative</span>
            <span className="text-xs text-stone-600">Co-op Check-in</span>
          </span>
        </Link>
        <nav aria-label="Primary">
          <Link
            href="https://fci.coop"
            className="text-sm font-medium text-stone-700 hover:text-leaf-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-leaf-500/40 rounded px-2 py-1"
          >
            fci.coop ↗
          </Link>
        </nav>
      </div>
    </header>
  );
}

export function SiteFooter() {
  return (
    <footer className="mt-auto border-t border-stone-200 bg-stone-50">
      <div className="mx-auto max-w-5xl px-4 py-6 sm:px-6 text-sm text-stone-600">
        <p>
          Securely connected to your co-op&apos;s record. Your data goes only to your CRM —
          nothing is shared with third parties.
        </p>
        <p className="mt-1">
          Questions? Contact your engagement coordinator for a fresh link or to update your records.
        </p>
      </div>
    </footer>
  );
}

/**
 * Inline SVG logo placeholder. Distinctive but neutral until the user supplies
 * the actual fci.coop logo asset to drop into /public.
 *
 * Geometry: a stylized "co-op leaf" — three overlapping leaf shapes forming a
 * loose cooperative motif. Pure CSS color so it adapts to dark/light themes.
 */
function Logo() {
  return (
    <svg
      width="40"
      height="40"
      viewBox="0 0 40 40"
      role="img"
      aria-label="Food Co-op Initiative"
      className="text-leaf-700"
    >
      <circle cx="20" cy="20" r="19" fill="currentColor" opacity="0.08" />
      <path
        d="M20 6 C 24 12, 30 14, 30 20 C 30 26, 24 30, 20 30 C 16 30, 10 26, 10 20 C 10 14, 16 12, 20 6 Z"
        fill="currentColor"
        opacity="0.85"
      />
      <path
        d="M20 11 C 22 15, 26 17, 26 20 C 26 23, 22 26, 20 26 C 18 26, 14 23, 14 20 C 14 17, 18 15, 20 11 Z"
        fill="white"
        opacity="0.9"
      />
      <circle cx="20" cy="20" r="2" fill="currentColor" />
    </svg>
  );
}
