einfach-produktiv/app/components/Tools.tsx

import Link from "next/link";
import Image from "next/image";
import { Reveal, RevealGroup, RevealItem } from "./Reveal";
import { getWerkzeugeCards } from "../lib/payload";

// Content now lives in Payload (WerkzeugeCards collection). Icons use a
// uniform box here (object-contain) rather than the previous hardcoded
// per-card hand-tuned width/height/rotation — that only made sense for a
// fixed, known set of 3 SVGs authored upside-down for a specific
// hand-drawn look, which doesn't generalize to a real CMS field. The 3
// original icons were re-exported pre-flipped/rotated as PNGs so they
// still display correctly with plain object-contain.
export async function Tools() {
  const tools = await getWerkzeugeCards();
  if (tools.length === 0) return null;

  return (
    <div id="werkzeuge" className="flex flex-col gap-12 items-start pb-16 pt-8 w-full bg-bg-base">

      {/* Section header */}
      <Reveal className="flex flex-col gap-2 items-start px-[var(--layout-padding-x)] w-full">
        <p className="font-bold text-brand text-h-small">
          Werkzeuge
        </p>
        <p
          className="font-semibold text-text-primary text-h-section"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          Für mehr Orientierung im Alltag
        </p>
      </Reveal>

      {/* Tools grid — 3 cols sm+ (moved down from the old md: so the grid
          arrives where the fluid floor also sits), stacked below sm;
          internal icon+text layout stays horizontal at every size, only
          the outer span changes */}
      <RevealGroup className="grid grid-cols-1 sm:grid-cols-12 gap-10 sm:gap-[var(--layout-grid-gap)] px-[var(--layout-padding-x)] w-full">
        {tools.map((tool) => (
          <RevealItem
            key={tool.id}
            // Icon above text below lg (1024px) — a 3-up grid from sm
            // (640px) leaves each card too narrow for icon+text side by
            // side through the whole 640-1023px range. Centered on true
            // mobile (matches the rest of this stacked-card pattern
            // site-wide), left-aligned from sm up once there's a real
            // single-column card width to left-align within.
            className="sm:col-span-4 flex flex-col items-center text-center gap-4 sm:items-start sm:text-left lg:flex-row lg:gap-8 rounded-md transition-transform duration-300 hover:-translate-y-1"
          >
            {/* Icon — uniform box, pre-flipped/rotated source asset.
                size-14 (56px) is a fixed value at every width (14 isn't
                one of this project's fluid spacing-scale steps) — smaller
                below lg: so it doesn't dwarf the title/description text,
                which does shrink toward its own fluid floor there. Full
                56px only from lg: up — a deliberate exception to the
                site's sm: (640px) structural consolidation: the grid now
                switches to 3-up at sm:, but title/description are still
                fairly close to their own fluid floor through the whole
                640-1023px range, so the full-size icon still reads too big
                next to them there. Not re-verified visually — narrower
                exception kept as-is, same reasoning as Hero's content
                sizing. */}
            <div className="relative flex items-center justify-center shrink-0 size-11 lg:size-14">
              <Image alt="" src={tool.icon} fill sizes="(min-width: 1024px) 56px, 44px" className="object-contain" />
            </div>

            {/* Card content — self-stretch + h-full + justify-between so
                the CTA always sits at the same bottom edge across all 3
                cards, regardless of how many lines the description wraps
                to. The parent RevealItem's items-start (needed to keep the
                icon top-aligned, not stretched) otherwise stops this one
                child from filling the grid-equalized row height — matches
                the Figma card-content spec (h-full items-start
                justify-between), which the earlier implementation had
                dropped. gap-4 alongside justify-between guarantees a
                minimum text→CTA gap even for the tallest card (the one
                that defines the row height, and so has ~zero leftover
                space for justify-between to distribute on its own). */}
            <div className="flex flex-1 flex-col self-stretch h-full justify-between items-center text-center sm:items-start sm:text-left gap-4 min-w-0 text-text-primary [word-break:break-word]">
              <div className="flex flex-col gap-4 items-center sm:items-start w-full">
                <p
                  className="font-semibold leading-normal text-h-section w-full"
                  style={{ fontFamily: "var(--font-lora)" }}
                >
                  {tool.title}
                </p>
                <p className="font-normal leading-[1.5rem] text-body w-full">
                  {tool.description}
                </p>
              </div>
              {/* flex items-center + arrow as its own span, not inline text
                  — the → glyph sits low relative to the surrounding text's
                  cap-height in the font used here, off-center against the
                  label if it's just part of the same text node (fixed
                  2026-07-24, same pattern ProductGrid.tsx's "Mehr
                  erfahren" link already uses). */}
              <Link
                href={tool.ctaHref}
                className="flex items-center gap-1 font-bold leading-normal text-body whitespace-nowrap hover:text-brand transition-colors"
              >
                <span aria-hidden>→</span>
                <span>{tool.ctaLabel}</span>
              </Link>
            </div>
          </RevealItem>
        ))}
      </RevealGroup>

    </div>
  );
}