import { motion } from 'framer-motion';
import { PrimaryButton } from '../../../components/ui/PrimaryButton';

export const ImpactBanner = () => {
  return (
    <section className="relative overflow-hidden rounded-3xl bg-white shadow-subtle">
      <div className="absolute inset-0 -z-10">
        <img
          src="/images/mesh2.gif"
          alt=""
          className="h-full w-full object-cover opacity-50"
        />
        <div className="absolute inset-0 bg-gradient-to-br from-white via-white/80 to-white/40 backdrop-blur" />
      </div>
      <motion.div
        initial={{ opacity: 0, y: 28 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        className="px-6 py-12 text-center sm:px-10 lg:px-16 lg:py-16"
      >
        <h2 className="text-3xl font-semibold text-ink sm:text-4xl">Designed for Real-World Impact</h2>
        <p className="mx-auto mt-5 max-w-3xl text-base text-slate-600 sm:text-lg">
          GeoMind enables enterprises and infrastructure providers to run secure, profitable,
          efficient, and sovereign clouds anywhere.
        </p>
        <div className="mt-8 flex justify-center">
          <PrimaryButton to="/usecases">Use Cases</PrimaryButton>
        </div>
      </motion.div>
    </section>
  );
};