"use client";

import { motion } from "framer-motion";
import { StackedCubes } from "@/components/ui/StackedCubes";
import { P, Eyebrow, H3 } from "@/components/Texts";
import { FadeIn } from "@/components/ui/FadeIn";

export function StackSectionDark() {
  return (
    <section className="relative w-full bg-[#171717] overflow-hidden">
       {/* ✅ Top horizontal line with spacing */}
      <div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
      <div className="w-full border-t border-l border-r border-gray-600" />
      {/* === Background Layer === */}
      <div className="absolute inset-0 z-0 bg-transparent border-t-0 border-b-0 border-gray-600">
        {/* Central main aura */}
        <motion.div
          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
          style={{
            background:
              "radial-gradient(circle, rgba(180,255,255,0.55) 0%, rgba(0,210,255,0.35) 5%, rgba(255,255,255,0) 10%)",
            filter: "blur(140px)",
          }}
          animate={{
            opacity: [0.5, 0.8, 0.5],
            scale: [1, 1.05, 1],
          }}
          transition={{
            duration: 9,
            repeat: Infinity,
            ease: "easeInOut",
          }}
        />

        {/* Faint cyan mist in the back for depth */}
        <motion.div
          className="absolute left-[70%] top-[30%] -translate-x-1/2 -translate-y-1/2 w-[1600px] h-[1600px] rounded-full pointer-events-none"
          style={{
            background:
              "radial-gradient(circle, rgba(100,220,255,0.25) 0%, rgba(200,255,255,0.15) 20§§%, rgba(255,255,255,0) 30%)",
            filter: "blur(200px)",
          }}
          animate={{
            opacity: [0.2, 0.35, 0.2],
            scale: [1, 1.1, 1],
          }}
          transition={{
            duration: 12,
            repeat: Infinity,
            ease: "easeInOut",
            delay: 3,
          }}
        />
      </div>

      {/* === Content === */}
      <div className="relative mx-auto max-w-7xl px-6 lg:px-12 border border-t-0 border-b-0 border-gray-600 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center py-24 ">
        {/* Left Column - Text */}
        <div className="text-center lg:text-left z-10">
          <FadeIn>
            <Eyebrow color="accent">Technology Layers</Eyebrow>
            <H3 color="white" className="">
              Mycelium Stack
            </H3>
          </FadeIn>

          <FadeIn>
            <P color="dark" className="mt-6  text-gray-200">
              Mycelium unifies compute, storage, networking, and AI into a self-governing comprehensive decentralized infrastructure fabric.
            </P>
          </FadeIn>
        </div>

        {/* Right Column - Animated Stack */}
        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10 pt-10">
          <motion.div
            initial={{ y: 30, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            transition={{ duration: 1.2, ease: "easeOut" }}
            viewport={{ once: true }}
          >
            <motion.div
              animate={{
                y: [0, -10, 0],
                rotateZ: [0, 0.5, -0.5, 0],
              }}
              transition={{
                duration: 6,
                repeat: Infinity,
                ease: "easeInOut",
              }}
              className="relative"
            >
              <StackedCubes />
            </motion.div>
          </motion.div>
        </div>
      </div>
       {/* ✅ Bottom horizontal line with spacing */}
      <div className="w-full border-b  border-gray-600" />
      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
    </section>
  );
}