import {
  ShieldCheck,
  SlidersHorizontal,
  Smartphone,
  Sparkles,
} from "lucide-react";
import Reveal from "@/components/reveal";

const FEATURES = [
  {
    icon: SlidersHorizontal,
    title: "Komplett anpassbar",
    text: "Beschriftungen, Optionen und Antworten – alles passt sich deiner Entscheidung an und bleibt automatisch gespeichert.",
    tint: "bg-[#e6f7f0] text-[#0d7a57]",
  },
  {
    icon: ShieldCheck,
    title: "Direkt loslegen",
    text: "Kein Login und keine E-Mail-Adresse nötig. Tool öffnen, Entscheidung treffen – fertig.",
    tint: "bg-[#e6f7f0] text-[#0d7a57]",
  },
  {
    icon: Smartphone,
    title: "Überall dabei",
    text: "Ob Handy, Tablet oder Desktop: Der Entscheidomat fühlt sich auf jedem Gerät butterweich an.",
    tint: "bg-[#e6f7f0] text-[#0d7a57]",
  },
  {
    icon: Sparkles,
    title: "Liebe zum Detail",
    text: "Physikalische Spins, feine 3D-Animationen und Soundeffekte machen jede Entscheidung zum kleinen Erlebnis.",
    tint: "bg-[#e6f7f0] text-[#0d7a57]",
  },
];

export default function Features() {
  return (
    <section id="features" className="relative scroll-mt-20 py-24 sm:py-32">
      <div className="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">
            Warum Entscheidomat?
          </p>
          <h2 className="mt-3 text-4xl font-semibold tracking-[-0.02em] sm:text-5xl">
            Weil Entscheiden auch{" "}
            <em className="font-display italic text-[#0d7a57]">schön</em> sein kann.
          </h2>
          <p className="mt-4 text-lg leading-relaxed text-ink-soft">
            Keine langweiligen Standard-Tools mehr. Hier bekommst du Zufall mit
            Stil – und trotzdem blitzschnell und ohne Hürden.
          </p>
        </Reveal>

        <div className="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {FEATURES.map((feature, i) => (
            <Reveal key={feature.title} delay={i * 0.08}>
              <div className="group h-full rounded-3xl border border-line bg-surface p-7 shadow-soft transition-all duration-300 hover:-translate-y-1.5 hover:shadow-lift">
                <div
                  className={`flex h-12 w-12 items-center justify-center rounded-2xl ${feature.tint} transition-transform duration-300 group-hover:scale-110 group-hover:-rotate-6`}
                >
                  <feature.icon className="h-6 w-6" strokeWidth={2.1} />
                </div>
                <h3 className="mt-5 font-display text-lg font-semibold tracking-tight">
                  {feature.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-ink-soft">
                  {feature.text}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}