"use client";

import { motion } from "framer-motion";
import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
import { H2, P, SectionHeader } from "@/components/Texts";
import { FadeIn } from "./FadeIn";
import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';

export function StackSectionLight() {
  return (
    <section className="relative w-full overflow-hidden py-24 lg:py-40">
      {/* === Background Layer === */}
      <div className="absolute inset-0 -z-10 bg-[#FAFAFA]">
        {/* Dotted Glow Background */}
        <DottedGlowBackground
          gap={15}
          radius={2}
          color="rgba(0,0,0,0.4)"
          glowColor="rgba(0,170,255,0.85)"
          opacity={0.2}
        />
        {/* Faint 3D grid floor */}
        <div className="absolute inset-0 flex items-end justify-center overflow-hidden">
          <div className="w-[200vw] h-[200vh] bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:60px_60px] [transform:perspective(800px)_rotateX(70deg)] origin-bottom opacity-50" />
        </div>
      </div>

      {/* === Content === */}
      <div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center">
        {/* Left Column - Text */}
        <div className="text-center lg:text-left">
          <FadeIn>
            <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
              The Mycelium Stack
            </SectionHeader>
          </FadeIn>

          <FadeIn>
            <P color="dark" className="mt-6 text-lg leading-relaxed text-gray-600">
              Built with Mycelium technology, our AI infrastructure ensures
              unbreakable networks, complete data sovereignty, ultra-secure
              agent-human communication, and unhackable data storage systems.
            </P>
          </FadeIn>
        </div>

        {/* Right Column - Animated Stack */}
        <div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative">
          <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"
            >
              <StackedCubesLight />
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}