/**
 * Abstrakter, hochwertiger Bild-Platzhalter (Farbverlauf + feine Linientextur)
 * fuer Bereiche, in denen echte Produkt-/Naturfotografie noch fehlt. Bewusst
 * ohne Comic-Motive oder Wabenmuster-Kitsch, passend zur Markenpalette.
 */
export function PlaceholderImage({
  className = "",
  tone = "forest",
  label,
}: {
  className?: string;
  tone?: "forest" | "cream" | "honey";
  label?: string;
}) {
  const gradients: Record<string, string> = {
    forest: "from-[#1a271f] via-[#24352b] to-[#3a4d3f]",
    cream: "from-[#efe8d8] via-[#f4efe5] to-[#e2d9c4]",
    honey: "from-[#8a6832] via-[#b88a44] to-[#c9a468]",
  };

  return (
    <div
      className={`relative overflow-hidden bg-gradient-to-br ${gradients[tone]} ${className}`}
    >
      <svg
        className="absolute inset-0 w-full h-full opacity-[0.15]"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <pattern id="lines" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M0 40L40 0" stroke="currentColor" strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#lines)" />
      </svg>
      {label ? (
        <span
          className={`absolute bottom-4 left-4 right-4 truncate text-[11px] tracking-wide-caps ${
            tone === "cream" ? "text-forest/50" : "text-cream/50"
          }`}
        >
          {label}
        </span>
      ) : null}
    </div>
  );
}