entscheidomat/components/playground.tsx

"use client";

import Link from "next/link";
import {
  ArrowRight,
  CircleDashed,
  Coins,
  Dices,
  Disc3,
  Hash,
  HelpCircle,
  ListChecks,
} from "lucide-react";
import Reveal from "@/components/reveal";

const GENERATORS = [
  {
    id: "janein",
    slug: "ja-nein-generator",
    title: "Ja-Nein-Generator",
    badge: "Zwei Optionen",
    description:
      "Bestellen oder kochen? Stelle deine Frage und erhalte sofort eine zufällige Antwort mit Ja oder Nein.",
    icon: HelpCircle,
  },
  {
    id: "coin",
    slug: "muenze-werfen",
    title: "Münze werfen",
    badge: "3D Münzwurf",
    description:
      "Kino oder Couch? Wirf die Münze und entscheide zwischen Kopf oder Zahl – auch mit eigenen Beschriftungen.",
    icon: Coins,
  },
  {
    id: "wheel",
    slug: "gluecksrad",
    title: "Glücksrad online",
    badge: "Entscheidungsrad",
    description:
      "Restaurant, Film oder Name? Trage bis zu 12 Optionen ein und lass das Entscheidungsrad auswählen.",
    icon: Disc3,
  },
  {
    id: "dice",
    slug: "wuerfel-online",
    title: "Würfel online",
    badge: "Würfel-Simulator",
    description:
      "Würfle online mit Zahlen von 1 bis 6 oder beschrifte die sechs Seiten für Spiele und kleine Entscheidungen.",
    icon: Dices,
  },
  {
    id: "number",
    slug: "zufallszahl-generator",
    title: "Zufallszahl-Generator",
    badge: "Zahlenbereich",
    description:
      "Lege Minimum und Maximum fest und generiere sofort eine zufällige ganze Zahl in deinem Wunschbereich.",
    icon: Hash,
  },
  {
    id: "ball",
    slug: "magic-8-ball",
    title: "Magic 8-Ball",
    badge: "Mystisches Orakel",
    description:
      "Stelle eine spielerische Frage, schüttle den Ball und erhalte eine zufällige Antwort aus deiner eigenen Liste.",
    icon: CircleDashed,
  },
  {
    id: "list",
    slug: "namen-auslosen",
    title: "Namen & Liste auslosen",
    badge: "Gewinnspiel & Teams",
    description:
      "Ziehe Gewinner, bilde Teams oder lege eine Reihenfolge fest – mit deiner eigenen Namen- oder Optionenliste.",
    icon: ListChecks,
  },
] as const;

export default function Playground() {
  return (
    <section id="tools" className="relative scroll-mt-20 py-20 sm:py-28">
      <div className="relative mx-auto w-full max-w-6xl px-5 sm:px-8">
        <Reveal className="mx-auto max-w-2xl text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.22em] text-ink-soft">
            Die 7 Zufalls-Tools
          </p>
          <h2 className="mt-3 text-4xl font-semibold tracking-[-0.02em] sm:text-5xl">
            Wähle das Tool für deine{" "}
            <em className="font-display italic text-[#0d7a57]">Entscheidung</em>.
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-ink-soft">
            Vom schnellen Münzwurf bis zur fairen Namensauslosung: Öffne das
            Tool, das zu deiner Situation passt.
          </p>
        </Reveal>

        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {GENERATORS.map((tool, i) => {
            const Icon = tool.icon;
            const isFeatured = i === 6;

            return (
              <Reveal
                key={tool.id}
                delay={i * 0.06}
                className={isFeatured ? "sm:col-span-2 lg:col-span-1" : ""}
              >
                <Link
                  href={`/${tool.slug}`}
                  className="group relative flex h-full flex-col justify-between overflow-hidden rounded-[2rem] border border-line bg-surface p-7 sm:p-8 shadow-lift transition-all duration-300 hover:-translate-y-1.5 hover:border-[#0d7a57]/40 hover:shadow-[0_20px_45px_rgba(13,122,87,0.14)]"
                >
                  {/* Subtiler Glow-Effekt im Hintergrund der Karte */}
                  <div
                    aria-hidden
                    className="pointer-events-none absolute -right-12 -top-12 h-36 w-36 rounded-full bg-[#0d7a57]/5 blur-2xl transition-all duration-500 group-hover:scale-150 group-hover:bg-[#0d7a57]/15"
                  />

                  <div>
                    {/* Icon & Badge Header */}
                    <div className="flex items-center justify-between gap-3">
                      <div className="flex h-12 w-12 items-center justify-center rounded-2xl border border-[#0d7a57]/20 bg-[#e6f7f0] text-[#0d7a57] shadow-sm transition-all duration-300 group-hover:scale-110 group-hover:border-[#0d7a57] group-hover:bg-[#0d7a57] group-hover:text-white">
                        <Icon className="h-6 w-6" strokeWidth={2.1} />
                      </div>
                      <span className="inline-flex items-center rounded-full border border-line bg-paper px-3 py-1 text-xs font-semibold uppercase tracking-wider text-ink-soft">
                        {tool.badge}
                      </span>
                    </div>

                    {/* Titel & Beschreibung */}
                    <h3 className="mt-6 font-display text-2xl font-semibold tracking-tight text-ink transition-colors duration-200 group-hover:text-[#0d7a57]">
                      {tool.title}
                    </h3>
                    <p className="mt-2.5 text-sm leading-relaxed text-ink-soft">
                      {tool.description}
                    </p>
                  </div>

                  {/* Action Link Footer */}
                  <div className="mt-8 flex items-center justify-between border-t border-line/60 pt-4 text-xs font-semibold uppercase tracking-widest text-[#0d7a57]">
                    <span>Generator öffnen</span>
                    <div className="flex h-7 w-7 items-center justify-center rounded-full bg-[#e6f7f0] text-[#0d7a57] transition-all duration-300 group-hover:translate-x-1 group-hover:bg-[#0d7a57] group-hover:text-white">
                      <ArrowRight className="h-3.5 w-3.5" />
                    </div>
                  </div>
                </Link>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}