'use client';

import { motion, useMotionValue, useTransform, useAnimation, PanInfo, AnimatePresence } from 'motion/react';
import { useState, useEffect } from 'react';
import { getLieferandoAffiliateUrl } from '@/lib/affiliate';
import { formatCuisineDisplay } from '@/lib/cuisine';
import { normalizeAddressDisplay } from '@/lib/format-address';
import { useTranslation } from '@/lib/i18n/context';

export interface RestaurantCard {
  id: number | string;
  name: string;
  imageUrl: string;
  isSymbolImage: boolean;
  cuisine?: string;
  openingStatus?: string;
  isOpen?: boolean | null;
  sponsored?: boolean;
  discountText?: string;
  disclaimerText?: string;
  address?: string;
  city?: string;
  postalCode?: string;
  suburb?: string;
  phone?: string;
  website?: string;
  openingHoursRaw?: string;
  lat?: number;
  lon?: number;
  reservationUrl?: string;
  lieferandoUrl?: string;
}

interface SwipeCardStackProps {
  cards: RestaurantCard[];
  onSwipe: (cardId: number | string, direction: 'yes' | 'no' | 'veto') => void;
  onStackEmpty?: () => void;
  onUndo?: () => boolean | Promise<boolean>;
  canUndo?: boolean;
  vetosExhausted?: boolean;
  vetosRemaining?: number;
  resetKey?: string | number;
  sessionCode?: string;
  jokerCard?: React.ReactNode;
}

type OutboundClickType = 'maps' | 'call' | 'reservation' | 'order' | 'website';

const VetoShieldIcon = ({ className = 'w-6 h-6', ...props }: React.SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
    {...props}
  >
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
    <path d="m9 9 6 6" />
    <path d="m15 9-6 6" />
  </svg>
);

function trackOutboundClick(sessionCode: string | undefined, restaurantId: number | string | undefined, clickType: OutboundClickType) {
  if (!sessionCode) return;
  const payload = JSON.stringify({ sessionCode, restaurantId, clickType });
  try {
    if (navigator.sendBeacon) {
      const blob = new Blob([payload], { type: 'application/json' });
      navigator.sendBeacon('/api/track', blob);
    } else {
      fetch('/api/track', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: payload,
        keepalive: true,
      }).catch(() => {});
    }
  } catch {
    // Tracking ist rein informativ - niemals den Nutzerfluss stoeren.
  }
}

export function SwipeCardStack({
  cards, onSwipe, onStackEmpty, onUndo, canUndo, vetosExhausted, vetosRemaining, resetKey, sessionCode, jokerCard,
}: SwipeCardStackProps) {
  const { t, locale } = useTranslation();
  const [topIndex, setTopIndex] = useState(0);
  const [exitDirection, setExitDirection] = useState<'yes' | 'no' | 'veto' | null>(null);
  const [detailCard, setDetailCard] = useState<RestaurantCard | null>(null);
  const [undoing, setUndoing] = useState(false);
  const [showVetoLimitHint, setShowVetoLimitHint] = useState(false);

  const visibleCards = cards.slice(topIndex, topIndex + 3);
  const topCard = visibleCards[0];
  const jokerStackPosition = Math.min(visibleCards.length, 3);

  useEffect(() => {
    if (cards.length > 0 && topIndex >= cards.length) {
      onStackEmpty?.();
    }
  }, [topIndex, cards.length, onStackEmpty]);

  useEffect(() => {
    setTopIndex(0);
    // eslint-disable-next-line react-hooks/exhaustive-deps -- bewusst NUR resetKey, nicht cards
  }, [resetKey]);

  useEffect(() => {
    if (!showVetoLimitHint) return;
    const timer = setTimeout(() => setShowVetoLimitHint(false), 2200);
    return () => clearTimeout(timer);
  }, [showVetoLimitHint]);

  function triggerSwipe(dir: 'yes' | 'no' | 'veto') {
    if (!topCard) return;
    if (dir === 'veto' && vetosExhausted) {
      setShowVetoLimitHint(true);
      return;
    }
    setExitDirection(dir);
  }

  function handleExitComplete(cardId: number | string, dir: 'yes' | 'no' | 'veto') {
    onSwipe(cardId, dir);
    setTopIndex((prev) => prev + 1);
    setExitDirection(null);
  }

  async function handleUndoClick() {
    if (!onUndo || undoing || topIndex === 0) return;
    setUndoing(true);
    try {
      const ok = await onUndo();
      if (ok) {
        setTopIndex((prev) => Math.max(0, prev - 1));
      }
    } finally {
      setUndoing(false);
    }
  }

  const undoDisabled = !onUndo || topIndex === 0 || undoing || canUndo === false;

  return (
    <div className="flex flex-col items-center gap-4 w-full h-full">
      <div className="relative w-full max-w-sm mx-auto flex-1 min-h-0">
        {visibleCards.length === 0 && !jokerCard && (
          <div className="absolute inset-0 flex items-center justify-center text-neutral-400 text-center px-6">
            {t.swipeCard.noMoreRestaurants}
          </div>
        )}
        {jokerCard && (
          <div
            className="absolute inset-0 z-0"
            style={{
              transform: `scale(${1 - jokerStackPosition * 0.07}) translateY(${jokerStackPosition * 20}px) translateX(${jokerStackPosition === 0 ? 0 : jokerStackPosition % 2 === 1 ? 14 : -14}px) rotate(${jokerStackPosition === 0 ? 0 : jokerStackPosition % 2 === 1 ? 3 : -3}deg)`,
            }}
          >
            {jokerCard}
          </div>
        )}
        {visibleCards
          .map((card, i) => (
            <SwipeCard
              key={card.id}
              card={card}
              stackPosition={i}
              isTop={i === 0}
              forcedExit={i === 0 ? exitDirection : null}
              onSwipe={(dir) => handleExitComplete(card.id, dir)}
              locale={locale}
              t={t}
            />
          ))
          .reverse()}
      </div>

      <AnimatePresence>
        {showVetoLimitHint && (
          <motion.p
            initial={{ opacity: 0, y: -6 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0 }}
            className="text-xs text-amber-400 font-medium -mt-2"
          >
            {t.swipeCard.noVetosLeft}
          </motion.p>
        )}
      </AnimatePresence>

      {topCard && (
        <div className="flex gap-3.5 items-center shrink-0">
          <button
            onClick={handleUndoClick}
            disabled={undoDisabled}
            className={`w-11 h-11 rounded-full bg-neutral-800 flex items-center justify-center border-2 active:scale-90 transition-transform disabled:opacity-30 disabled:active:scale-100 ${
              undoDisabled ? 'text-neutral-300 border-white/20' : 'text-violet-400 border-violet-400'
            }`}
            aria-label={t.swipeCard.undoAriaLabel}
            title={t.swipeCard.undoTitle}
          >
            <svg viewBox="0 0 24 24" className="w-5 h-5" aria-hidden="true">
              <path
                d="M9 8L4 12l5 4M4 12h11a5 5 0 0 0 0-10h-1"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>

          <button
            onClick={() => triggerSwipe('no')}
            className="w-16 h-16 rounded-full bg-neutral-800 text-red-400 flex items-center justify-center border-2 border-red-400 active:scale-90 transition-transform"
            aria-label={t.swipeCard.noAriaLabel}
          >
            <svg viewBox="0 0 24 24" className="w-6 h-6" aria-hidden="true">
              <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
              <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
            </svg>
          </button>

          <button
            onClick={() => triggerSwipe('veto')}
            disabled={vetosExhausted}
            className="relative w-12 h-12 rounded-full bg-neutral-800 text-amber-500 flex items-center justify-center border-2 border-amber-500 active:scale-90 transition-transform disabled:opacity-30 disabled:active:scale-100"
            aria-label={t.swipeCard.vetoAriaLabel}
          >
            <VetoShieldIcon className="w-5 h-5" />
            {typeof vetosRemaining === 'number' && (
              <span className="absolute -bottom-1 -right-1 h-[18px] w-[18px] min-w-[18px] px-0.5 rounded-full bg-neutral-950 border border-amber-500 text-amber-500 text-[10px] font-bold flex items-center justify-center leading-none">
                {vetosRemaining}
              </span>
            )}
          </button>

          <button
            onClick={() => triggerSwipe('yes')}
            className="w-16 h-16 rounded-full bg-neutral-800 text-green-400 flex items-center justify-center border-2 border-green-400 active:scale-90 transition-transform"
            aria-label={t.swipeCard.yesAriaLabel}
          >
            <svg viewBox="0 0 24 24" className="w-6 h-6" aria-hidden="true">
              <path
                d="M6 13l4 4 8-9"
                fill="none"
                stroke="currentColor"
                strokeWidth="2.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>

          <button
            onClick={() => topCard && setDetailCard(topCard)}
            disabled={!topCard}
            className="w-11 h-11 rounded-full bg-neutral-800 text-neutral-300 flex items-center justify-center border-2 border-white/50 active:scale-90 transition-transform disabled:opacity-30"
            aria-label={t.swipeCard.detailsAriaLabel}
            title={t.swipeCard.detailsTitle}
          >
            <span className="text-sm font-bold">i</span>
          </button>
        </div>
      )}

      <AnimatePresence>
        {detailCard && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-40 bg-neutral-950"
            onClick={() => setDetailCard(null)}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.97 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.97 }}
              transition={{ type: 'spring', stiffness: 260, damping: 26 }}
              onClick={(e) => e.stopPropagation()}
              className="absolute inset-0 flex flex-col overflow-y-auto"
            >
              <div className="relative h-64 w-full overflow-hidden shrink-0">
                {detailCard.imageUrl ? (
                  <img
                    src={detailCard.imageUrl}
                    alt=""
                    className="w-full h-full object-cover"
                    draggable={false}
                  />
                ) : (
                  <div className="w-full h-full bg-neutral-800 flex items-center justify-center text-neutral-500 text-sm">
                    {t.swipeCard.noImageAvailable}
                  </div>
                )}
                <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-neutral-950 to-transparent" />
                <button
                  type="button"
                  onClick={() => setDetailCard(null)}
                  className="absolute top-4 right-4 h-10 w-10 rounded-full bg-black text-white flex items-center justify-center border border-white/20"
                  aria-label={t.swipeCard.closeAriaLabel}
                >
                  <svg viewBox="0 0 24 24" className="w-5 h-5" aria-hidden="true">
                    <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
                    <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
                  </svg>
                </button>
              </div>

              <div className="flex-1 px-5 pb-8 pt-4 max-w-md mx-auto w-full">
                <h3 className="text-2xl font-bold mb-2">{detailCard.name}</h3>

                <div className="flex flex-wrap gap-2 mb-3">
                  {formatCuisineDisplay(detailCard.cuisine, locale).map((label) => (
                    <span
                      key={label}
                      className="text-xs font-semibold px-3 py-1 rounded-full bg-yumder-pink text-white"
                    >
                      {label}
                    </span>
                  ))}
                  {detailCard.website && (
                    <span className="text-xs font-semibold px-3 py-1 rounded-full bg-yumder-teal text-black">
                      {t.swipeCard.websiteBadge}
                    </span>
                  )}
                  {detailCard.openingStatus && (
                    <span
                      className={`text-xs font-semibold px-3 py-1 rounded-full border ${
                        detailCard.isOpen
                          ? 'text-neutral-900 border-yumder-teal bg-yumder-teal'
                          : 'text-white border-red-500 bg-red-500'
                      }`}
                    >
                      {detailCard.openingStatus}
                    </span>
                  )}
                </div>

                {detailCard.address && (
                  <p className="text-sm text-neutral-300 mb-3">
                    {normalizeAddressDisplay(detailCard.address, detailCard.postalCode, detailCard.city, detailCard.suburb)}
                  </p>
                )}

                {detailCard.openingHoursRaw && (
                  <p className="text-xs text-neutral-500 mb-4">{detailCard.openingHoursRaw}</p>
                )}

                <div className="flex flex-col gap-2 mt-2">
                  {detailCard.lieferandoUrl && (
                    <a
                      href={getLieferandoAffiliateUrl({
                        restaurantId: detailCard.id,
                        name: detailCard.name,
                        city: detailCard.city,
                        lieferandoUrl: detailCard.lieferandoUrl,
                      })}
                      target="_blank"
                      rel="noreferrer noopener"
                      onClick={() => trackOutboundClick(sessionCode, detailCard.id, 'order')}
                      className="text-sm bg-gradient-to-r from-orange-500 to-amber-500 text-white font-semibold px-4 py-3 rounded-full text-center shadow-[0_0_16px_rgba(249,115,22,0.4)]"
                    >
                      {t.swipeCard.orderButton}
                    </a>
                  )}

                  {(detailCard.phone || detailCard.website) && (
                    <div className="grid grid-cols-2 gap-2">
                      {detailCard.phone && (
                        <a
                          href={`tel:${detailCard.phone.replace(/\s/g, '')}`}
                          onClick={() => trackOutboundClick(sessionCode, detailCard.id, 'call')}
                          className="flex items-center justify-center gap-2 text-sm bg-yumder-teal text-black font-semibold px-4 py-3 rounded-full text-center"
                        >
                          <svg viewBox="0 0 24 24" className="w-4 h-4" aria-hidden="true">
                            <path
                              d="M6 2h4l2 5-2.5 1.5a11 11 0 0 0 5 5L16 11l5 2v4a2 2 0 0 1-2 2C10.5 19 5 13.5 5 4a2 2 0 0 1 1-2z"
                              fill="currentColor"
                            />
                          </svg>
                          {t.swipeCard.callButton}
                        </a>
                      )}
                      {detailCard.website && (
                        <a
                          href={detailCard.website}
                          target="_blank"
                          rel="noreferrer"
                          onClick={() => trackOutboundClick(sessionCode, detailCard.id, 'website')}
                          className="flex items-center justify-center gap-2 text-sm border border-white/20 text-neutral-100 px-4 py-3 rounded-full text-center"
                        >
                          <svg viewBox="0 0 24 24" className="w-4 h-4" aria-hidden="true">
                            <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" strokeWidth="1.8" />
                            <path
                              d="M3 12h18M12 3c2.5 2.5 4 6 4 9s-1.5 6.5-4 9c-2.5-2.5-4-6-4-9s1.5-6.5 4-9z"
                              fill="none"
                              stroke="currentColor"
                              strokeWidth="1.8"
                            />
                          </svg>
                          {t.swipeCard.websiteButton}
                        </a>
                      )}
                    </div>
                  )}

                  {detailCard.reservationUrl && (
                    <a
                      href={detailCard.reservationUrl}
                      target="_blank"
                      rel="noreferrer"
                      onClick={() => trackOutboundClick(sessionCode, detailCard.id, 'reservation')}
                      className="text-sm bg-gradient-to-r from-yumder-pink to-pink-500 text-white font-semibold px-4 py-3 rounded-full text-center shadow-[0_0_16px_rgba(254,60,114,0.4)]"
                    >
                      {t.swipeCard.reservationButton}
                    </a>
                  )}
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

function SwipeCard({
  card,
  stackPosition,
  isTop,
  forcedExit,
  onSwipe,
  locale,
  t,
}: {
  card: RestaurantCard;
  stackPosition: number;
  isTop: boolean;
  forcedExit: 'yes' | 'no' | 'veto' | null;
  onSwipe: (d: 'yes' | 'no' | 'veto') => void;
  locale: 'de' | 'en';
  t: ReturnType<typeof useTranslation>['t'];
}) {
  const openingPillClasses =
    card.isOpen === true
      ? 'text-neutral-900 bg-yumder-teal border border-yumder-teal'
      : card.isOpen === false
      ? 'text-white bg-red-500 border border-red-500'
      : 'text-neutral-300 bg-neutral-700 border border-white/10';
  const [showDisclaimer, setShowDisclaimer] = useState(false);
  const [imgBroken, setImgBroken] = useState(false);
  const x = useMotionValue(0);
  const y = useMotionValue(0);
  const rotate = useTransform(x, [-200, 200], [-15, 15]);
  const yesOpacity = useTransform(x, [20, 120], [0, 1]);
  const noOpacity = useTransform(x, [-120, -20], [1, 0]);
  const vetoOpacity = useTransform(y, [20, 120], [0, 1]);
  const controls = useAnimation();

  useEffect(() => {
    setImgBroken(false);
  }, [card.imageUrl, card.id]);

  async function playExit(dir: 'yes' | 'no' | 'veto') {
    const targets: Record<string, any> = {
      yes: { x: 600, rotate: 25, opacity: 0 },
      no: { x: -600, rotate: -25, opacity: 0 },
      veto: { y: 700, opacity: 0 },
    };
    await controls.start({ ...targets[dir], transition: { duration: 0.4 } });
    onSwipe(dir);
  }

  useEffect(() => {
    if (forcedExit && isTop) {
      playExit(forcedExit);
    }
  }, [forcedExit]);

  function handleDragEnd(_: any, info: PanInfo) {
    if (info.offset.y > 140 && Math.abs(info.offset.x) < 100) playExit('veto');
    else if (info.offset.x > 120) playExit('yes');
    else if (info.offset.x < -120) playExit('no');
  }

  function handleDisclaimerTap(e: React.MouseEvent | React.TouchEvent) {
    e.stopPropagation();
    setShowDisclaimer((prev) => !prev);
  }

  const cardFrameClasses = card.sponsored
    ? 'bg-neutral-900 border-2 border-amber-400/70 shadow-[0_0_35px_rgba(251,191,36,0.35)]'
    : 'bg-neutral-900 border border-white/10';

  const stackScale = 1 - stackPosition * 0.07;
  const stackOffsetY = stackPosition * 20;
  const stackOffsetX = stackPosition === 0 ? 0 : stackPosition % 2 === 1 ? 14 : -14;
  const stackRotate = stackPosition === 0 ? 0 : stackPosition % 2 === 1 ? 3 : -3;

  const cuisineLabels = formatCuisineDisplay(card.cuisine, locale);
  const displayAddress = normalizeAddressDisplay(card.address, card.postalCode, card.city, card.suburb);

  return (
    <motion.div
      className={`absolute inset-0 rounded-2xl overflow-hidden shadow-2xl select-none touch-none ${cardFrameClasses}`}
      style={isTop ? { x, y, rotate } : undefined}
      animate={
        !isTop
          ? { scale: stackScale, y: stackOffsetY, x: stackOffsetX, rotate: stackRotate }
          : controls
      }
      drag={isTop}
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
      dragElastic={0.8}
      onDragEnd={isTop ? handleDragEnd : undefined}
      whileTap={isTop ? { cursor: 'grabbing' } : undefined}
    >
      {!imgBroken && card.imageUrl ? (
        <img
          src={card.imageUrl}
          alt=""
          draggable={false}
          onError={() => setImgBroken(true)}
          className="w-full h-full object-cover pointer-events-none select-none bg-neutral-800"
        />
      ) : (
        <div className="w-full h-full bg-neutral-800 flex items-center justify-center text-neutral-500 text-sm px-6 text-center">
          {t.swipeCard.noImageAvailable}
        </div>
      )}

      {card.sponsored && (
        <div className="absolute inset-0 bg-gradient-to-b from-amber-400/15 via-transparent to-transparent pointer-events-none" />
      )}

      {card.isSymbolImage && !card.sponsored && (
        <span className="absolute top-3 left-3 bg-black text-xs px-2 py-1 rounded">
          {t.swipeCard.symbolBadge}
        </span>
      )}

      {card.sponsored && (
        <span className="absolute top-3 left-3 flex items-center gap-1.5 bg-gradient-to-r from-amber-400 to-yellow-300 text-black text-xs font-bold px-3 py-1.5 rounded-full shadow-[0_0_15px_rgba(251,191,36,0.6)]">
          <span className="h-1.5 w-1.5 rounded-full bg-black/70" />
          {t.swipeCard.sponsoredBadge}
        </span>
      )}

      {card.sponsored && card.disclaimerText && (
        <button
          onClick={handleDisclaimerTap}
          onPointerDown={(e) => e.stopPropagation()}
          className="absolute top-3 right-3 h-7 w-7 rounded-full bg-black text-amber-300 text-sm font-bold flex items-center justify-center border border-amber-300/40 active:scale-90 transition-transform"
          aria-label={t.swipeCard.legalDisclaimerAriaLabel}
        >
          *
        </button>
      )}

      <AnimatePresence>
        {showDisclaimer && card.disclaimerText && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={handleDisclaimerTap}
            onPointerDown={(e) => e.stopPropagation()}
            className="absolute inset-0 z-10 bg-black/80 backdrop-blur-sm flex items-center justify-center p-6"
          >
            <p className="text-sm text-amber-200 leading-relaxed text-center">
              * {card.disclaimerText}
            </p>
          </motion.div>
        )}
      </AnimatePresence>

      {isTop && (
        <>
          <motion.div
            style={{ opacity: yesOpacity }}
            className="absolute top-10 left-4 border-[6px] border-green-400 text-green-400 text-4xl font-black uppercase px-4 py-2 rounded-lg rotate-[-15deg]"
          >
            {t.swipeCard.yesAriaLabel}
          </motion.div>
          <motion.div
            style={{ opacity: noOpacity }}
            className="absolute top-10 right-4 border-[6px] border-red-400 text-red-400 text-4xl font-black uppercase px-4 py-2 rounded-lg rotate-[15deg]"
          >
            {t.swipeCard.noAriaLabel}
          </motion.div>
          <motion.div
            style={{ opacity: vetoOpacity }}
            className="absolute bottom-24 inset-x-0 flex justify-center"
          >
            <span className="border-[6px] border-amber-500 text-amber-500 text-4xl font-black uppercase px-4 py-2 rounded-lg">
              {t.swipeCard.vetoAriaLabel}
            </span>
          </motion.div>
        </>
      )}

      <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/90 to-transparent p-4">
        {card.sponsored && card.discountText && (
          <span className="inline-flex items-center gap-1 bg-black/70 text-amber-300 text-sm font-semibold px-2.5 py-1 rounded-md mb-2">
            {card.discountText}
            {card.disclaimerText && <span className="text-amber-300/80">*</span>}
          </span>
        )}
        <h3 className="text-lg font-bold mb-1">{card.name}</h3>

        {/* UPDATE (Layout-Umbau): Zeile 1 = Kuechenstil-Chips + neue
            Lieferando-Pille am Ende (nur sichtbar, wenn lieferandoUrl
            befuellt ist). Zeile 2 = Webseite-Badge + Oeffnungszeiten-Pille
            zusammen. Vorher liefen alle drei Badge-Typen in einer einzigen
            flex-wrap-Zeile, was bei Karten mit vielen Chips + Symbolbild +
            Gesponsert-Badge schnell ueberladen wirkte. Getrennte Container
            statt einem gemeinsamen erzwingen die gewuenschte Zeilenaufteilung
            zuverlaessig, unabhaengig von Textlaenge/Kartenbreite. */}
        <div className="flex items-center gap-2 flex-wrap mb-1.5">
          {cuisineLabels.map((label) => (
            <span
              key={label}
              className={`text-xs font-semibold px-3 py-1 rounded-full ${
                card.sponsored ? 'bg-amber-400 text-black' : 'bg-yumder-pink text-white'
              }`}
            >
              {label}
            </span>
          ))}
          {card.lieferandoUrl && (
            <span className="text-xs font-semibold px-3 py-1 rounded-full bg-[#FF8000] text-white">
              Lieferando
            </span>
          )}
        </div>
        <div className="flex items-center gap-2 flex-wrap mb-2">
          {card.website && (
            <span className="text-xs font-semibold px-3 py-1 rounded-full bg-yumder-teal text-black">
              {t.swipeCard.websiteBadge}
            </span>
          )}
          {card.openingStatus && (
            <span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${openingPillClasses}`}>
              {card.openingStatus}
            </span>
          )}
        </div>
        {displayAddress && (
          <p className="text-xs text-neutral-300 truncate mb-1">{displayAddress}</p>
        )}
      </div>
    </motion.div>
  );
}