import Link from "next/link";
import { Container } from "@/components/ui";

export interface PageOutroLink {
  href: string;
  label: string;
  text: string;
}

/**
 * Abschluss einer Inhaltsseite (Imkerei, Herkunft, Ernten): zwei naechste
 * Wege als grosse Serif-Links, getrennt durch eine Linie. Ohne ihn endeten
 * diese Seiten mit dem letzten Absatz direkt vor der Fusszeile — eine
 * Sackgasse, gerade fuer Besuch, der ueber die Suche mitten einsteigt.
 */
export function PageOutro({ links, ariaLabel }: { links: PageOutroLink[]; ariaLabel: string }) {
  return (
    <nav aria-label={ariaLabel} className="mt-24 border-t border-ink/10">
      <Container className="grid md:grid-cols-2">
        {links.map((link, i) => (
          <Link
            key={link.href}
            href={link.href}
            className={`group flex items-end justify-between gap-6 py-12 md:py-16 ${
              i === 0 ? "md:pr-12" : "border-t border-ink/10 md:border-l md:border-t-0 md:pl-12"
            }`}
          >
            <span>
              <span className="block font-serif text-4xl leading-tight text-heading md:text-5xl">
                {link.label}
              </span>
              <span className="mt-3 block max-w-[40ch] text-sm leading-relaxed text-ink/65">{link.text}</span>
            </span>
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              aria-hidden="true"
              className="mb-2 h-6 w-6 flex-shrink-0 text-honey-dark transition-transform duration-500 ease-[var(--ease-arrive)] group-hover:translate-x-1.5 motion-reduce:transition-none"
            >
              <path d="M4 12h15M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </Link>
        ))}
      </Container>
    </nav>
  );
}