einfach-produktiv/app/components/Tools.tsx

import Link from "next/link";
import { Reveal, RevealGroup, RevealItem } from "./Reveal";

const tools = [
  {
    icon: { src: "/icon-rocket.svg", w: "3.375rem", h: "4.122rem", transform: "-scale-y-100" },
    title: "Mini-Challenge",
    description: "In 7 Tagen zu mehr Klarheit. Kleine Gewohnheiten, die Großes bewirken.",
    cta: { label: "Starten", href: "/challenge" },
  },
  {
    icon: { src: "/icon-todo.svg", w: "3rem", h: "3.879rem", transform: "-scale-y-100" },
    title: "ToDo-Karten",
    description: "Das Werkzeug für Fokus im Alltag. bringe Struktur in deine Aufgaben und gewinne Zeit zurück.",
    cta: { label: "Entdecken", href: "/todo-cards" },
  },
  {
    icon: { src: "/icon-newsletter.svg", w: "3rem", h: "2.579rem", transform: "-rotate-4 -scale-y-100" },
    title: "Impulse & Tipps",
    description: "Wöchentliche Impulse mit konkreten Ideen und erprobten Tipps für weniger Reibung und mehr Leichtigkeit.",
    cta: { label: "Anmelden", href: "/newsletter" },
  },
];

export function Tools() {
  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">
          Meine Werkzeuge
        </p>
        <p
          className="font-semibold text-text-primary text-h-section"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          Werkzeuge für einen leichteren Alltag.
        </p>
      </Reveal>

      {/* Tools grid — 3 cols md+, stacked below md; internal icon+text layout
          stays horizontal at every size, only the outer span changes */}
      <RevealGroup className="grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-[var(--layout-grid-gap)] px-[var(--layout-padding-x)] w-full">
        {tools.map((tool) => (
          <RevealItem
            key={tool.title}
            className="md:col-span-4 flex gap-8 items-start rounded-md transition-transform duration-300 hover:-translate-y-1"
          >
            {/* Icon */}
            <div className="flex items-center justify-center shrink-0">
              <div className={tool.icon.transform}>
                <div className="relative" style={{ width: tool.icon.w, height: tool.icon.h }}>
                  <img
                    alt=""
                    src={tool.icon.src}
                    className="absolute inset-0 w-full h-full"
                  />
                </div>
              </div>
            </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-start gap-4 min-w-0 text-text-primary [word-break:break-word]">
              <div className="flex flex-col gap-4 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>
              <Link
                href={tool.cta.href}
                className="font-bold leading-normal text-body whitespace-nowrap hover:text-brand transition-colors"
              >
                → {tool.cta.label}
              </Link>
            </div>
          </RevealItem>
        ))}
      </RevealGroup>

    </div>
  );
}