import { motion } from 'framer-motion';
import { technologies } from '../../data/content';
import { SectionShell } from '../ui/SectionShell';

export function Technology() {
  return (
    <section id="technology" className="relative py-20 md:py-28">
      <div className="absolute inset-0 bg-gradient-to-b from-nebula/25 to-transparent" />
      <SectionShell
        eyebrow="Stack"
        title="Technology Foundation"
        subtitle="Arsitektur modern yang mendukung skala enterprise dan compliance rumah sakit."
      >
        <div className="flex flex-wrap justify-center gap-3">
          {technologies.map((t, i) => (
            <motion.span
              key={t}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.04 }}
              whileHover={{ scale: 1.05, boxShadow: '0 0 24px rgba(34,211,238,0.2)' }}
              className="rounded-2xl border border-white/10 bg-gradient-to-br from-slate-900/90 to-slate-950/90 px-5 py-3 text-sm font-medium text-slate-200 shadow-inner"
            >
              {t}
            </motion.span>
          ))}
        </div>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="mx-auto mt-12 max-w-3xl rounded-2xl border border-cyan-500/20 bg-cyan-500/[0.06] p-6 text-center text-sm text-slate-400"
        >
          Edge gateway mendukung offline-first sync · message queue untuk burst scan · observability OpenTelemetry-ready
          · secrets vault &amp; key rotation terjadwal.
        </motion.div>
      </SectionShell>
    </section>
  );
}
