import { motion } from 'framer-motion';
import { Cloud, LayoutDashboard, Radio, Share2, Wifi } from 'lucide-react';
import { GlassCard } from '../ui/GlassCard';
import { SectionShell } from '../ui/SectionShell';
import { GridBackground } from '../ui/BackgroundEffects';

const cards = [
  { title: 'Cloud Based', icon: Cloud, desc: 'Multi-tenant cloud dengan high availability & elastic scale.' },
  { title: 'Real-Time Tracking', icon: Wifi, desc: 'Event stream sub-detik dari reader ke dashboard.' },
  { title: 'RFID Automation', icon: Radio, desc: 'Workflow otomatis mengurangi sentuhan manual.' },
  { title: 'Enterprise Integration', icon: Share2, desc: 'HIS, ERP, WMS — API-first & message bus ready.' },
  { title: 'Analytics Dashboard', icon: LayoutDashboard, desc: 'KPI operasional, SLA, dan anomaly detection.' },
  { title: 'IoT Connected', icon: Radio, desc: 'Edge gateway untuk hybrid on-prem & cloud sync.' },
];

export function About() {
  return (
    <section id="about" className="relative overflow-hidden py-20 md:py-28">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent via-nebula/40 to-transparent" />
      <GridBackground />
      <SectionShell
        eyebrow="About"
        title="RFID Terintegrasi, Online, Enterprise-Ready"
        subtitle="Kami menyediakan sistem RFID terintegrasi berbasis online untuk membantu rumah sakit dan perusahaan melakukan tracking, tracing, inventory, dan monitoring secara real-time — dengan arsitektur cloud-native dan keamanan kelas enterprise."
      >
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {cards.map((c, i) => (
            <GlassCard key={c.title} hover>
              <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-cyan-500/15 text-cyan-300">
                <c.icon className="h-5 w-5" />
              </div>
              <h3 className="mt-4 font-display text-lg font-semibold text-white">{c.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-slate-400">{c.desc}</p>
              <motion.div
                className="mt-4 h-px w-full bg-gradient-to-r from-transparent via-cyan-400/40 to-transparent"
                initial={{ scaleX: 0 }}
                whileInView={{ scaleX: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.1 * i, duration: 0.6 }}
              />
            </GlassCard>
          ))}
        </div>
      </SectionShell>
    </section>
  );
}
