"use client";

import { motion } from "framer-motion";
import { Sparkles } from "lucide-react";

export default function AboutSasium() {
  return (
    <section className="py-16 lg:py-24 bg-white relative">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#2563eb]/10 text-[#2563eb] text-sm font-medium mb-6"
        >
          <Sparkles size={18} />
          About Sasium
        </motion.div>
        <motion.h2
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-3xl sm:text-4xl font-bold text-[#0f172a] mb-6"
        >
          Who We Are
        </motion.h2>
        <motion.p
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="text-lg sm:text-xl text-[#64748b] leading-relaxed max-w-3xl mx-auto"
        >
          Sasium is a technology company building secure smart-ticketing systems
          for modern public transport. Our solutions combine Android POS
          hardware, identity verification, and cloud analytics to transform
          transportation infrastructure.
        </motion.p>
      </div>
    </section>
  );
}
