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

export const TechnologyHero = () => {
  return (
    <section className="relative overflow-hidden rounded-3xl text-white">
      <img
        src="/images/hometech.jpg"
        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]/75" />
      <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">
          Technology
        </p>
        <h1 className="mt-6 text-3xl font-semibold leading-tight sm:text-4xl lg:text-5xl">
          The Foundation of the Next-Generation Datacenter
        </h1>
        <p className="mt-6 max-w-3xl text-base text-white/75 sm:text-lg">
          GeoMind combines hardware and revolutionary software to deliver secure, scalable, and
          sovereign cloud and AI infrastructure. Built for efficiency, sustainability, and
          profitability, it empowers organizations to run workloads, scale globally, and monetize
          excess capacity.
        </p>
        <div className="mt-10">
          <PrimaryButton to="/usecases">Use Cases</PrimaryButton>
        </div>
      </motion.div>
    </section>
  );
};