Wabenhain/src/app/charge/[code]/page.tsx

import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { Container } from "@/components/ui";
import { ContentImage } from "@/components/content-image";
import { ScrollReveal } from "@/components/scroll-reveal";
import { TrustBadges } from "@/components/trust-badges";
import { ShieldIcon } from "@/components/account-ui";
import { ProductTeaserLink } from "@/components/product-card";
import { getBatchByCode } from "@/lib/data";
import { formatDate } from "@/lib/format";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

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

export async function generateMetadata(
  props: PageProps<"/charge/[code]">
): Promise<Metadata> {
  const { code } = await props.params;
  return { title: `Charge ${code}`, alternates: { canonical: `/charge/${code}` } };
}

/**
 * Chargen-Seite, die ueber den QR-Code auf jedem Wabenhain-Glas erreichbar
 * ist (wabenhain.com/charge/{code}). Zeigt Herkunft, Erntezeitraum und
 * Abfuelldatum der konkreten Charge, aus der das Glas stammt — der Moment,
 * in dem jemand mit dem Glas in der Hand die Herkunftsangaben nachprueft.
 */
export default async function BatchPage(props: PageProps<"/charge/[code]">) {
  const locale = await getLocale();
  const t = getDictionary(locale);
  const { code } = await props.params;
  const batch = await getBatchByCode(code);
  if (!batch) notFound();

  const steps = [
    { label: t.chargePage.stepHarvest, value: formatDate(batch.harvest.harvestDate, locale) },
    { label: t.chargePage.stepFilling, value: formatDate(batch.fillDate, locale) },
    { label: t.chargePage.stepBestBefore, value: formatDate(batch.bestBeforeDate, locale) },
  ];
  // Eigene Chargenfotos (z.B. Etikett/Abfuellung dieser konkreten Charge)
  // gehen PRO Slot vor, falls gepflegt — sonst faellt genau dieser Slot auf
  // das entsprechende Erntebild zurueck. Bewusst NICHT alles-oder-nichts:
  // wer nur ein Chargenfoto pflegt, soll nicht das zweite (Standort-)Bild
  // verlieren, nur weil die Charge kein zweites eigenes Foto hat.
  const displayImages = [
    batch.images[0] ?? batch.harvest.images[0] ?? null,
    batch.images[1] ?? batch.harvest.images[1] ?? null,
  ];

  return (
    <div className="py-20">
      <Container className="max-w-3xl">
        <ScrollReveal>
          <div className="flex items-center gap-2 text-honey-dark">
            <ShieldIcon />
            <span className="tracking-wide-caps text-xs">{t.chargePage.verifiedBatch}</span>
          </div>
          <h1 className="mt-3 text-4xl md:text-5xl text-forest">
            {batch.harvest.type} {batch.harvest.year}
          </h1>
          <p className="mt-4 text-sm text-ink/70">{t.chargePage.provenanceNote(batch.code)}</p>
        </ScrollReveal>

        <div className="mt-10 grid sm:grid-cols-2 gap-6">
          <ScrollReveal>
            <ContentImage
              src={displayImages[0] ?? null}
              alt={`${batch.harvest.type} ${batch.harvest.year}`}
              tone="honey"
              className="aspect-square"
              label={`${batch.harvest.type} ${batch.harvest.year}`}
              sizes="(min-width: 640px) 50vw, 100vw"
            />
          </ScrollReveal>
          <ScrollReveal delay={0.1}>
            <ContentImage
              src={displayImages[1] ?? null}
              alt={batch.harvest.location}
              tone="forest"
              className="aspect-square"
              label={batch.harvest.location}
              sizes="(min-width: 640px) 50vw, 100vw"
            />
          </ScrollReveal>
        </div>

        <ScrollReveal className="mt-14">
          <div className="grid grid-cols-3 gap-4">
            {steps.map((step, i) => (
              <div key={step.label} className="relative">
                <div className="flex items-center">
                  <span className="flex-shrink-0 w-2 h-2 rounded-full bg-honey" />
                  {i < steps.length - 1 ? (
                    <span className="ml-1 h-px flex-1 bg-ink/15" aria-hidden="true" />
                  ) : null}
                </div>
                <p className="mt-3 text-xs tracking-wide-caps text-ink/70">{step.label}</p>
                <p className="mt-1 text-forest">{step.value}</p>
              </div>
            ))}
          </div>
        </ScrollReveal>

        <ScrollReveal className="mt-10 border-t border-ink/10 pt-8">
          <p className="text-sm tracking-wide-caps text-ink/70 mb-2">{t.chargePage.regionLabel}</p>
          <p className="text-ink/80">{batch.harvest.location}</p>
          <p className="mt-6 text-ink/70 leading-relaxed">{batch.harvest.description}</p>
        </ScrollReveal>

        <TrustBadges className="mt-10 pt-8 border-t border-ink/10" />

        {batch.products.length > 0 ? (
          <div className="mt-14 border-t border-ink/10 pt-10">
            <ScrollReveal>
              <p className="text-sm tracking-wide-caps text-ink/70 mb-6">{t.chargePage.fromThisBatch}</p>
            </ScrollReveal>
            <div className="grid sm:grid-cols-2 gap-6">
              {batch.products.map((product) => (
                <ProductTeaserLink
                  key={product.id}
                  slug={product.slug}
                  name={product.name}
                  image={product.images[0] ?? null}
                />
              ))}
            </div>
          </div>
        ) : null}
      </Container>
    </div>
  );
}