import { motion } from 'framer-motion'
import { Globe } from '../../components/ui/Globe'
import { CountUpNumber } from '../../components/CountUpNumber'
import { Container } from '../../components/Container'

const stats = [
  { value: 54958, label: 'CPU Cores' },
  { value: 1493, label: 'Nodes' },
  { value: 5388956, label: 'GB Storage' },
  { value: 44, label: 'Countries' },
]

export function CloudHero() {
  return (
    <section className="relative bg-white py-20 lg:py-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Text Content */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
              Mycelium Cloud
            </h1>
            <p className="mt-6 text-lg lg:text-xl text-gray-600">
              Revolutionary Kubernetes platform that transforms how teams deploy and manage cloud-native applications at scale
            </p>
          </motion.div>

          {/* Globe */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="flex items-center justify-center"
          >
            <div className="relative w-full max-w-[500px] aspect-square">
              <Globe className="w-full h-full" />
            </div>
          </motion.div>
        </div>

        {/* Stats */}
        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-6">
          {stats.map((stat, index) => (
            <motion.div
              key={stat.label}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
              className="rounded-2xl bg-gray-50 border border-gray-200 p-6 text-center hover:shadow-md transition-shadow"
            >
              <div className="text-2xl lg:text-3xl font-bold text-cyan-500">
                <CountUpNumber end={stat.value} />
              </div>
              <p className="mt-2 text-sm text-gray-600">{stat.label}</p>
            </motion.div>
          ))}
        </div>
      </Container>
    </section>
  )
}