"use client";

import { StackedCubes } from "@/components/ui/StackedCubes";
import { H2, P } from '@/components/Texts';
import { FadeIn } from "./FadeIn";

export function StackSectionPreview() {

  return (
        <section className="w-full bg-transparent lg:px-0 py-12 lg:py-24 px-6 relative">
      <div className="mx-auto max-w-7xl">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-16 items-center lg:items-start">
          {/* Left Column - Text (1/3 width) */}
                    <div className="text-center lg:text-left lg:col-span-1 order-1 lg:order-1">
            <FadeIn>
              <H2 className="">
                The Mycelium Stack
              </H2>
            </FadeIn>
            
            <FadeIn>
              <P className="mx-auto mt-8 max-w-3xl" color="light">
                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 - Stacked Cubes (2/3 width) */}
          <div className="lg:col-span-2 flex items-center justify-center lg:justify-start order-2 lg:order-2 mt-8 lg:mt-0">
            <FadeIn>
              <StackedCubes />
            </FadeIn>
          </div>
        </div>
      </div>
    </section>
  );
}