Wabenhain/src/app/ernten/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import { Container, SectionHeading } from "@/components/ui";
import { ContentImage } from "@/components/content-image";
import { ScrollReveal } from "@/components/scroll-reveal";
import { HexMark } from "@/components/honeycomb";
import { getHarvests } from "@/lib/data";
import { formatMonthYear } from "@/lib/format";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";
import { PageOutro } from "@/components/page-outro";

export const metadata: Metadata = {
  title: "Unsere Ernten",
  description: "Alle bisherigen Wabenhain-Ernten im Überblick — jede mit eigenem Charakter.",
  alternates: { canonical: "/ernten" },
};

// Siehe Begruendung in app/page.tsx.
export const dynamic = "force-dynamic";

export default async function ErntenPage() {
  const locale = await getLocale();
  const t = getDictionary(locale);
  const harvests = await getHarvests();
  const byYear = harvests.reduce<Record<number, typeof harvests>>((acc, h) => {
    acc[h.year] = [...(acc[h.year] ?? []), h];
    return acc;
  }, {});
  const years = Object.keys(byYear).map(Number).sort((a, b) => b - a);

  return (
    <div className="py-20">
      <Container>
        <ScrollReveal>
          <SectionHeading level="h1" title={t.erntenPage.title} />
        </ScrollReveal>

        <div className="mt-16 space-y-24">
          {years.map((year) => (
            <div key={year}>
              <ScrollReveal>
                {/* Jahrgang wie auf dem Etikett: grosse Zahl, auslaufende Linie. */}
                <div className="mb-8 flex items-center gap-6">
                  <h2 className="font-serif text-6xl md:text-7xl leading-none text-honey-dark tabular-nums">{year}</h2>
                  <span aria-hidden="true" className="h-px flex-1 bg-gradient-to-r from-honey/50 to-transparent" />
                </div>
              </ScrollReveal>
              <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-14">
                {byYear[year].map((harvest, i) => (
                  <ScrollReveal key={harvest.id} delay={(i % 3) * 0.08}>
                    <Link
                      href={`/ernten/${harvest.year}/${encodeURIComponent(harvest.type)}`}
                      className="group block"
                    >
                      <span className="relative block overflow-hidden rounded-lg transition-[transform,box-shadow] duration-500 ease-[var(--ease-arrive)] group-hover:-translate-y-1 group-hover:shadow-[0_28px_50px_-24px_rgba(36,53,43,0.5)]">
                        <ContentImage
                          src={harvest.images[0] || null}
                          alt={harvest.type}
                          tone="forest"
                          className="aspect-[4/3] w-full transition-transform duration-700 ease-[var(--ease-arrive)] group-hover:scale-[1.05]"
                          label={formatMonthYear(harvest.harvestDate, locale)}
                          sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
                        />
                        <span
                          aria-hidden="true"
                          className="pointer-events-none absolute inset-0 -translate-x-full bg-[linear-gradient(115deg,transparent_30%,rgba(228,207,164,0.3)_48%,rgba(184,138,68,0.15)_55%,transparent_70%)] transition-transform duration-1000 ease-[var(--ease-arrive)] group-hover:translate-x-full motion-reduce:hidden"
                        />
                      </span>
                      <div className="mt-5 flex items-start justify-between gap-4">
                        <div>
                          <h3 className="link-draw inline pb-0.5 font-serif text-2xl text-forest">{harvest.type}</h3>
                          <p className="mt-2 flex items-center gap-2 text-sm text-ink/65">
                            <HexMark className="h-2 w-2 text-honey" />
                            {t.erntenPage.batchCount(harvest.batches.length)}
                          </p>
                        </div>
                        <svg
                          aria-hidden="true"
                          viewBox="0 0 24 24"
                          className="mt-2 h-4 w-4 flex-shrink-0 text-forest transition-transform duration-300 ease-[var(--ease-arrive)] group-hover:translate-x-1"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="1.6"
                        >
                          <path d="M4 12h15M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
                        </svg>
                      </div>
                    </Link>
                  </ScrollReveal>
                ))}
              </div>
            </div>
          ))}
          {years.length === 0 ? (
            <p className="text-ink/70">{t.erntenPage.emptyText}</p>
          ) : null}
        </div>
      </Container>
      <PageOutro
        ariaLabel={t.pageOutro.ariaLabel}
        links={[
          { href: "/herkunft", label: t.nav.origin, text: t.pageOutro.originText },
          { href: "/shop", label: t.nav.shop, text: t.pageOutro.shopText },
        ]}
      />
    </div>
  );
}