import { motion } from 'framer-motion';

export const UseCasesHero = () => {
  return (
    <section className="relative overflow-hidden rounded-3xl text-white">
      <img
        src="/images/uscase_BG.png"
        alt=""
        className="absolute inset-0 h-full w-full object-cover"
      />
      <div className="absolute inset-0 bg-gradient-to-br from-[#0f172a]/80 via-[#1e1b4b]/70 to-[#312e81]/80" />
      <motion.div
        initial={{ opacity: 0, y: 32 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="relative z-10 px-6 py-20 sm:px-10 lg:px-16 lg:py-24"
      >
        <p className="text-xs font-semibold uppercase tracking-[0.35em] text-white">
          Real World Applications
        </p>
        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
          Designed for Real-World Impact
        </h1>
        <p className="mt-6 max-w-3xl text-base text-white/75 sm:text-lg">
          GeoMind empowers organizations to deploy secure, efficient, and sovereign cloud and AI
          infrastructure anywhere. From enterprises to governments, our use cases demonstrate how
          next-generation datacenters generate value, ensure sovereignty, and support modern AI,
          cloud, and edge workloads.
        </p>
      </motion.div>
    </section>
  );
};