import { motion } from 'framer-motion';
import { Check } from 'lucide-react';
import { benefits } from '../../data/content';
import { SectionShell } from '../ui/SectionShell';
import { AnimatedCounter } from '../ui/AnimatedCounter';
import { GlassCard } from '../ui/GlassCard';

export function Benefits() {
  return (
    <section id="benefits" className="relative py-20 md:py-28">
      <SectionShell
        eyebrow="Impact"
        title="Benefit Bisnis yang Terukur"
        subtitle="Dari loss prevention hingga digital transformation — semua terhubung pada satu platform data."
      >
        <div className="mb-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {[
            { label: 'Loss Reduction', value: 47, suffix: '%', numeric: true },
            { label: 'Audit Time Saved', value: 68, suffix: '%', numeric: true },
            { label: 'Data Latency', value: 120, suffix: ' ms', numeric: true },
            { label: 'Uptime SLA', value: 0, suffix: '', numeric: false },
          ].map((s) => (
            <GlassCard key={s.label} hover={false} className="text-center">
              <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">{s.label}</p>
              <p className="mt-3 font-display text-4xl font-extrabold text-white md:text-5xl">
                {s.numeric ? (
                  <AnimatedCounter value={s.value} suffix={s.suffix} />
                ) : (
                  '99.99%'
                )}
              </p>
            </GlassCard>
          ))}
        </div>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {benefits.map((b, i) => (
            <motion.div
              key={b}
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: (i % 6) * 0.04 }}
              className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/[0.02] px-4 py-3"
            >
              <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-cyan-500/15 text-cyan-300">
                <Check className="h-4 w-4" />
              </span>
              <span className="text-sm font-medium text-slate-200">{b}</span>
            </motion.div>
          ))}
        </div>
      </SectionShell>
    </section>
  );
}
