"use client";

import { cn } from "@/lib/utils";
import { H2, P } from "@/components/Texts";
import React from "react";
import { BentoGrid, MotionBentoGridItem } from "@/components/ui/bento-grid";
import { FadeIn } from "./FadeIn";

const items = [
  {
    title: 'FungiStor',
    subtitle: 'Long-Term AI Memory',
    description: 'Quantum-safe permanent storage preserving AI knowledge forever. Zero-knowledge architecture with mathematical dispersal ensures immortality.',
    video: "/videos/fungistor.mp4",
  },
  {
    title: 'HeroDB',
    subtitle: 'Active AI Memory',
    description: 'High-performance datastore for AI working memory. Multi-modal indexing enables vector search with global accessibility.',
    video: "/videos/herodb.mp4",
  },
  {
    title: 'MOS Sandboxes',
    subtitle: 'Secure Agent Workspaces',
    description: 'Lightweight isolated environments deploying globally in five seconds. Hardware-level isolation ensures maximum security for agents.',
    video: "/videos/sandbox.mp4",
  },
  {
    title: 'Mycelium Mesh',
    subtitle: 'Secure Communication Network',
    description: 'Peer-to-peer overlay network with end-to-end encryption. Self-healing shortest-path routing creates resilient agentic communication.',
    video: "/videos/mesh.mp4",
  },
  {
    title: 'Deterministic Deployment',
    subtitle: 'Verifiable Code Execution',
    description: 'Cryptographic guarantee system ensuring deployed code matches specifications. Prevents supply-chain attacks with immutable trails.',
    video: "/videos/deterministic.mp4",
  },
  {
    title: 'Agent Coordination',
    subtitle: 'Sovereign Workflow Management',
    description: 'User-centric orchestration where HERO agents coordinate worker fleets. Planetary-scale coordination with instant spawning.',
    video: "/videos/agent.mp4",
  },
  {
    title: 'Universal Interface Layer',
    subtitle: 'AI Service Gateway',
    description: 'Unified broker connecting agents to LLMs, APIs, and services. Integrated micropayments simplify development.',
    video: "/videos/universal.mp4",
  },

];

export function BentoReviews() {
  return (
    <div>
      <div className="relative isolate pt-24 pb-12 bg-black text-center w-full lg:px-0 px-4">
        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
          <div className="mx-auto max-w-5xl ">
            <H2 className="text-center">Mycelium Technologies</H2>
          </div>
        </FadeIn>
        <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
          <div className="mx-auto max-w-4xl mt-6 mb-8">
            <P className="text-center" color="primary">
            A robust infrastructure layer for autonomous AI agents, our technology stack
            delivers a secure, efficient, and intuitive platform for deploying and managing AI agents at scale.
            </P>
          </div>
        </FadeIn>
      </div>
      <BentoGrid className="max-w-8xl lg:px-12 px-4pb-12 lg:grid-cols-3">
        {items.map((item, i) => (
          <MotionBentoGridItem
            key={i}
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: false, margin: '0px 0px -100px 0px' }}
            transition={{ duration: 0.8, delay: 0.3 + i * 0.1 }}
            className={cn(i === 3 || i === 6 ? "md:col-span-2" : "")}
            rowHeight={i >= 3 ? "h-[22rem]" : ""}
            title={item.title}
            subtitle={item.subtitle}
            description={item.description}
            video={item.video}
          />
        ))}
      </BentoGrid>
    </div>
  );
}