import Link from "next/link";

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: "/werkzeuge" },
  },
  {
    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-8 lg:gap-[3rem] items-start pb-10 lg:pb-[4rem] pt-8 lg:pt-[2rem] w-full bg-[#f5f0e8]">

      {/* Section header */}
      <div className="flex flex-col gap-2 items-start px-4 md:px-8 lg:px-[5rem] w-full">
        <p className="font-bold text-[#f6a701] text-[1.25rem]">
          Meine Werkzeuge
        </p>
        <p
          className="font-semibold text-[#222221]"
          style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.375rem, 2.5vw, 1.75rem)" }}
        >
          Werkzeuge für einen leichteren Alltag.
        </p>
      </div>

      {/* Tools grid: 1-col mobile → 2-col md → 3-col lg */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-[2.5rem] px-4 md:px-8 lg:px-[5rem] w-full">
        {tools.map((tool) => (
          <div key={tool.title} className="flex gap-6 items-start">

            {/* 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 */}
            <div className="flex flex-col gap-4 items-start min-w-0 text-[#222221] [word-break:break-word]">
              <div className="flex flex-col gap-3 w-full">
                <p
                  className="font-semibold leading-normal text-[1.5rem] lg:text-[1.75rem] w-full"
                  style={{ fontFamily: "var(--font-lora)" }}
                >
                  {tool.title}
                </p>
                <p className="font-normal leading-6 text-[1rem] w-full">
                  {tool.description}
                </p>
              </div>
              <Link
                href={tool.cta.href}
                className="font-bold text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors"
              >
                → {tool.cta.label}
              </Link>
            </div>

          </div>
        ))}
      </div>

    </div>
  );
}
