"use client";

import { motion } from "framer-motion";
import { Reveal, Stagger, staggerItem } from "@/components/reveal";
import { features } from "@/data/features";

export function Features() {
  return (
    <section id="features" className="section-pad relative">
      <div className="container">
        <div className="mx-auto max-w-2xl text-center">
          <Reveal>
            <span className="eyebrow">Everything you need</span>
          </Reveal>
          <Reveal delay={0.1}>
            <h2 className="mt-5 text-3xl font-bold tracking-tight text-ink-900 sm:text-5xl dark:text-white">
              One platform, every conversation tool
            </h2>
          </Reveal>
          <Reveal delay={0.15}>
            <p className="mt-4 text-lg text-ink-600 dark:text-white/60">
              From your first broadcast to a fully automated support desk, every feature
              lives in one workspace built for teams that move fast.
            </p>
          </Reveal>
        </div>

        <Stagger className="mt-16 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {features.map((feature) => {
            const Icon = feature.icon;
            return (
              <motion.div
                key={feature.title}
                variants={staggerItem}
                whileHover={{ y: -6 }}
                transition={{ type: "spring", stiffness: 300, damping: 20 }}
                className="group relative overflow-hidden rounded-3xl border border-ink-900/8 bg-white p-6 shadow-card transition-shadow duration-300 hover:shadow-glow-sm dark:border-white/10 dark:bg-white/[0.03] dark:shadow-card-dark"
              >
                <div className="absolute -right-8 -top-8 h-24 w-24 rounded-full bg-whatsapp/10 blur-2xl transition-all duration-500 group-hover:bg-whatsapp/20" />
                <div className="relative flex h-11 w-11 items-center justify-center rounded-2xl bg-gradient-to-br from-whatsapp to-whatsapp-dark text-white shadow-glow-sm">
                  <Icon className="h-5 w-5" strokeWidth={2.25} />
                </div>
                <h3 className="relative mt-5 text-base font-semibold text-ink-900 dark:text-white">
                  {feature.title}
                </h3>
                <p className="relative mt-2 text-sm leading-relaxed text-ink-500 dark:text-white/50">
                  {feature.description}
                </p>
              </motion.div>
            );
          })}
        </Stagger>
      </div>
    </section>
  );
}