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

export function WorldMapSection() {
  return (
    <section className="relative bg-gray-50 py-20 lg:py-32">
      <Container>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="mb-12"
        >
          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
            Mycelium Network is Live.
          </h2>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Globe */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, 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>

          {/* Stats Cards */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.3 }}
              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
            >
              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">CORES</p>
              <div className="mt-2 text-3xl font-bold text-gray-900">
                <CountUpNumber end={54958} />
              </div>
              <p className="mt-2 text-sm text-gray-600">
                Total Central Processing Unit Cores available on the grid.
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.4 }}
              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
            >
              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">NODES</p>
              <div className="mt-2 text-3xl font-bold text-gray-900">
                <CountUpNumber end={1493} />
              </div>
              <p className="mt-2 text-sm text-gray-600">
                Total number of nodes on the grid.
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.5 }}
              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
            >
              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">SSD CAPACITY</p>
              <div className="mt-2 text-3xl font-bold text-gray-900">
                <CountUpNumber end={5388956} />
              </div>
              <p className="mt-2 text-sm text-gray-600">
                Total GB amount of storage (SSD, HDD, & RAM) on the grid.
              </p>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: 0.6 }}
              className="rounded-2xl bg-white border border-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow"
            >
              <p className="text-sm font-semibold uppercase tracking-wide text-cyan-500">COUNTRIES</p>
              <div className="mt-2 text-3xl font-bold text-gray-900">
                <CountUpNumber end={44} />
              </div>
              <p className="mt-2 text-sm text-gray-600">
                Total number of countries with active nodes.
              </p>
            </motion.div>
          </div>
        </div>
      </Container>
    </section>
  )
}