import Image from "next/image";
import Link from "next/link";
import { AddToCartButton } from "./AddToCartButton";
import { Reveal } from "./Reveal";
import { getSpotlightProduct, getShippingSettings } from "../lib/payload";
import { formatPrice, discountPercent } from "../lib/format";

/**
 * Product teaser for whichever product is marked `spotlight` in Payload
 * (defaults to none — the section just doesn't render until one is set),
 * placed after the Werkzeuge section (not right after the Hero — that
 * already has its own primary CTA, the 7-Tage-Challenge, and a second
 * strong purchase CTA competing with it there would dilute focus).
 * Werkzeuge already introduces the flagship tool as a concept with an
 * "Entdecken" link; this is the natural next step — a concrete way to buy
 * it, right where interest was just built, rather than dropped at the
 * very top before the page has earned any trust. Not derived from a
 * Figma frame (page-home never had this section) — a deliberate,
 * code-only addition, styled to match /todo-cards' pricing panel.
 * Headline/copy/photo are the product's own dedicated spotlight* fields
 * (deliberately separate from its plain catalog name/description/image —
 * see Products.ts), not duplicated here as hardcoded literals.
 */
export async function ProductSpotlight() {
  const [product, shipping] = await Promise.all([getSpotlightProduct(), getShippingSettings()]);
  if (!product) return null;

  const image = product.spotlightImage || product.image;
  const discount = discountPercent(product.price, product.compareAtPrice);

  return (
    // id="spotlight" — the Navbar's "Shop" link becomes an anchor to this
    // section instead of navigating to /shop whenever exactly 1 product is
    // active (see Navbar.tsx/layout.tsx).
    <section id="spotlight" className="w-full bg-bg-base py-12 md:py-16 px-[var(--layout-padding-x)]">
      <Reveal className="max-w-[75rem] mx-auto rounded-md flex flex-col md:flex-row gap-8 md:gap-12 items-center p-6 md:p-10">
        <div className="group relative w-full md:w-[23.75rem] md:shrink-0 aspect-[410/227] rounded-sm overflow-hidden">
          <Image
            src={image}
            alt={product.name}
            fill
            sizes="(min-width: 768px) 380px, 100vw"
            className="object-cover transition-transform duration-500 group-hover:scale-105"
          />
          {discount !== null && (
            <span className="absolute top-3 left-3 rounded-full bg-brand px-2.5 py-1 text-label font-bold text-text-primary">
              -{discount}%
            </span>
          )}
        </div>

        <div className="flex flex-col gap-4 items-start flex-1 min-w-0 w-full">
          <p className="font-bold text-h-small text-brand">{product.spotlightEyebrow || "Neu im Shop"}</p>
          <p
            className="font-semibold text-h-section text-text-primary"
            style={{ fontFamily: "var(--font-lora)" }}
          >
            {product.spotlightHeadline || product.name}
          </p>
          <p className="text-body text-text-body">
            {product.spotlightText || product.description}
          </p>
          <div className="flex flex-col gap-1 items-start">
            <div className="flex gap-2 items-baseline">
              {discount !== null && (
                <p className="text-body text-text-muted line-through">{formatPrice(product.compareAtPrice!)}</p>
              )}
              <p className="font-bold text-h3 text-text-primary">{formatPrice(product.price)}</p>
              <p className="text-label text-text-muted">inkl. MwSt. zzgl. Versand</p>
            </div>
            <p className="text-label text-text-muted">
              Lieferzeit: {shipping.totalDays.min}–{shipping.totalDays.max} Werktage innerhalb Deutschlands
            </p>
          </div>
          <div className="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
            {/* No className override — the section's bg is bg-bg-base now
                (matches Tools/Blog above/below), same as AddToCartButton's
                own default styling/ring-offset, so no override is needed
                here. */}
            <AddToCartButton label="In den Warenkorb" productId={product.id} />
            {product.href && (
              <Link
                href={product.href}
                className="inline-flex items-center justify-center px-6 py-[0.8125rem] rounded-sm border border-border text-body font-bold text-text-primary whitespace-nowrap hover:border-brand hover:text-brand active:scale-[0.97] transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base"
              >
                Mehr erfahren
              </Link>
            )}
          </div>
        </div>
      </Reveal>
    </section>
  );
}
