From fdb6456207bc536f2ebe7d01fe99adaec32badc1 Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Sat, 26 Sep 2026 02:14:52 +0200
Subject: [PATCH] feat(ui): Leerer Warenkorb zeigt verfuegbare Honige

Bisher stand dort nur ein Satz und ein Knopf zum Shop. Jetzt steht der
Hinweis als Spalte links, daneben bis zu zwei aktuell verfuegbare
Produkte (Honig zuerst) - dasselbe Muster wie "Aktuelle Ernte" auf der
Startseite. Nutzt die bereits geladenen availableProducts.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/app/warenkorb/warenkorb-content.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/app/warenkorb/warenkorb-content.tsx b/src/app/warenkorb/warenkorb-content.tsx
index 8c4fc99..2ab8804 100644
--- a/src/app/warenkorb/warenkorb-content.tsx
+++ b/src/app/warenkorb/warenkorb-content.tsx
@@ -56,6 +56,9 @@ export function WarenkorbContent({
   const crossSellProducts = availableProducts
     .filter((product) => !cartProductIds.has(product.id))
     .slice(0, CROSS_SELL_LIMIT);
+  // Fuer den leeren Warenkorb: Honig zuerst, sonst was gerade verfuegbar ist.
+  const honeyFirst = availableProducts.filter((product) => product.category === "HONIG");
+  const emptyCartSuggestions = (honeyFirst.length > 0 ? honeyFirst : availableProducts).slice(0, 2);
 
   // Siehe checkout-form.tsx: ohne diese Weiche flackert kurz die
   // "leer"-Meldung auf, bevor der Cart-Store aus localStorage nachliest.
@@ -69,11 +72,22 @@ export function WarenkorbContent({
         <SectionHeading title={t.cartPage.title} />
 
         {items.length === 0 ? (
-          <div className="mt-14">
-            <p className="text-ink/70">{t.cart.empty}</p>
-            <LinkButton href="/shop" className="mt-6">
-              {t.cartPage.goToShop}
-            </LinkButton>
+          // Leerer Warenkorb ist kein Endpunkt: daneben stehen die aktuell
+          // verfuegbaren Honige, statt nur eines Satzes und eines Knopfs.
+          <div className="mt-14 grid gap-12 lg:grid-cols-12 lg:gap-16">
+            <div className="lg:col-span-4">
+              <p className="font-serif text-2xl leading-snug text-forest">{t.cart.empty}</p>
+              <LinkButton href="/shop" variant="secondary" className="mt-6">
+                {t.cartPage.goToShop}
+              </LinkButton>
+            </div>
+            {emptyCartSuggestions.length > 0 ? (
+              <div className="grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2 lg:col-span-8">
+                {emptyCartSuggestions.map((product, index) => (
+                  <ProductCard key={product.id} product={product} index={index} />
+                ))}
+              </div>
+            ) : null}
           </div>
         ) : (
           <div className="mt-14 grid lg:grid-cols-3 gap-14">