import Image from "next/image";
import Link from "next/link";
import { Reveal } from "../../components/Reveal";
import { getProductBySlug } from "../../lib/payload";

// Replaces the page's final price/buy bar entirely (explicit choice —
// Hero.tsx already has the primary buy CTA, this page doesn't need a
// second one at the very bottom too). Same "Passend dazu" card markup as
// blog/[slug]/page.tsx's own related-product card. Driven by
// Products.relatedProduct (2026-08-25, same field/pattern as
// Posts.relatedProduct, just product->product instead of post->product) —
// reusable on any product page by passing that page's own product slug,
// not hardcoded to "todo-karten" like the first version of this component.
export async function PasstDazu({ productSlug }: { productSlug: string }) {
  const product = await getProductBySlug(productSlug);
  const related = product?.relatedProduct;
  if (!related?.href) return null;

  return (
    <section className="w-full bg-bg-base px-[var(--layout-padding-x)] py-12 sm:py-16">
      <Reveal className="max-w-[48rem] mx-auto">
        <Link
          href={related.href}
          className="group flex items-center gap-4 sm:gap-6 border border-border rounded-md px-5 py-5 sm:px-9 sm:py-7 hover:border-brand transition-colors"
        >
          <div className="relative w-16 h-[4.6875rem] shrink-0 rounded-sm overflow-hidden">
            <Image alt="" src={related.image} fill sizes="64px" className="object-cover" />
          </div>
          <div className="flex-1 min-w-0 flex flex-col gap-2.5">
            <p className="font-bold text-[0.8125rem] text-brand">Passt dazu:</p>
            <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 w-full">
              <div className="flex flex-col gap-2 items-start w-full sm:w-[19rem] sm:shrink-0">
                <p
                  className="font-semibold text-[1.375rem] text-text-primary sm:whitespace-nowrap"
                  style={{ fontFamily: "var(--font-lora)" }}
                >
                  {related.name}
                </p>
                <p className="text-[0.9375rem] text-text-muted leading-[1.45]">{related.descriptionText}</p>
              </div>
              <span className="flex items-center gap-1.5 font-bold text-[0.875rem] text-text-primary whitespace-nowrap mt-1 sm:mt-0">
                Entdecken
                <svg
                  viewBox="0 0 20 20"
                  className="size-3.5 transition-transform duration-200 group-hover:translate-x-1"
                  fill="none"
                  aria-hidden="true"
                >
                  <path d="M4 10h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
            </div>
          </div>
        </Link>
      </Reveal>
    </section>
  );
}
