'use client'

import { Globe } from "@/components/ui/Globe"
import { motion } from "framer-motion"
import { P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
import { CountUpNumber } from '@/components/CountUpNumber'
import { DarkCard } from "@/components/ui/cards";

export function WorldMap() {
  return (
    <div className="relative min-h-screen w-full overflow-hidden top-0 flex py-12 flex-col">
      {/* Background video */}
      <video
        autoPlay
        loop
        muted
        playsInline
        className="absolute inset-0 w-full h-full object-cover"
      >
        <source src="/videos/benefits.mp4" type="video/mp4" />
      </video>

      {/* Dark overlay */}
      <div className="absolute inset-0 bg-black/10" />

      {/* Content */}
      <div className="relative z-10 flex flex-col h-full px-8 md:px-16 py-12">
        {/* Title + Subtitle */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.3 }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          className="max-w-xl"
        >
          <Eyebrow color="accent">Decentralized Network</Eyebrow>
          <SectionHeader color="light">Project Mycelium is Live.</SectionHeader>
          <P className=" mt-4" color="light">
            Project Mycelium enables anyone to deploy
            their own Internet infrastructure, anywhere.
          </P>
        </motion.div>

        {/* Bottom Layout: Globe + Cards */}
        <div className="mt-8 flex flex-1 flex-col lg:flex-row items-center lg:items-stretch gap-x-10">
          {/* Globe Left Column */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true, amount: 0.3 }}
            transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
            className="flex-1 flex items-center justify-center"
          >
            <div className="relative w-[450px] h-[450px] md:w-[600px] md:h-[600px]">
              <Globe className="absolute inset-0 w-full h-full left-0 lg:-left-24" />
            </div>
          </motion.div>

          {/* Cards Right Column */}
          <div className="relative flex-1 lg:h-auto h-[700px] flex flex-col lg:block items-center gap-y-4 mt-8 lg:mt-0">
            <motion.div
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, amount: 0.3 }}
              transition={{ duration: 0.5, delay: 0.4, ease: "easeOut" }}
              className="lg:absolute lg:top-12 lg:-left-12 w-80"
            >
              <DarkCard>
                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">CORES</CT></div>
                <div><CountUpNumber end={54958} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                <CP color="light" className="mt-2 text-sm">
                  Total Central Processing Unit Cores available on the grid.
                </CP>
              </DarkCard>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, amount: 0.3 }}
              transition={{ duration: 0.5, delay: 0.5, ease: "easeOut" }}
              className="lg:absolute lg:-top-10 lg:right-0 w-80"
            >
              <DarkCard>
                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">NODES</CT></div>
                <div><CountUpNumber end={1493} className="mt-4 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                <CP color="light" className="mt-2 text-sm">
                  Total number of nodes on the grid.
                </CP>
              </DarkCard>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, amount: 0.3 }}
              transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
              className="lg:absolute lg:bottom-28 lg:-left-12 w-80"
            >
              <DarkCard>
                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">SSD CAPACITY</CT></div>
                <div><CountUpNumber end={5388956} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                <CP color="light" className="mt-2 text-sm">
                  Total GB amount of storage (SSD, HDD, & RAM) on the grid.
                </CP>
              </DarkCard>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, amount: 0.3 }}
              transition={{ duration: 0.5, delay: 0.7, ease: "easeOut" }}
              className="lg:absolute lg:top-47 lg:right-0 w-80"
            >
              <DarkCard>
                <div><CT color="light" className="uppercase tracking-wide [text-shadow:0_0_12px_var(--color-cyan-500)]">COUNTRIES</CT></div>
                <div><CountUpNumber end={44} className="mt-2 text-3xl font-bold text-white [text-shadow:0_0_12px_var(--color-cyan-500)]" /></div>
                <CP color="light" className="mt-2 text-sm">
                  Total number of countries with active nodes.
                </CP>
              </DarkCard>
            </motion.div>
          </div>
        </div>
      </div>

      {/* Radial fade overlay */}
      <div className="pointer-events-none absolute inset-0 h-full bg-[radial-gradient(circle_at_50%_200%,rgba(0,0,0,0.2),rgba(255,255,255,0))]" />
    </div>
  )
}