www_projectmycelium_com/src/pages/agents/AgentBento.tsx

"use client";

import { Eyebrow, H3, P } from "@/components/Texts";
import AgentCoordination from "./animations/AgentCoordination";
import DeterministicExecution from "./animations/DeterministicExecution";
import Fungistor from "./animations/Fungistor";
import Herodb from "./animations/Herodb";
import MOSSandboxes from "./animations/MOSSandboxes";
import MyceliumMesh from "./animations/MyceliumMesh";

const bentos: {
  id: string;
  eyebrow?: string;
  title: string;
  subtitle?: string;
  description: string;
  animation: React.ComponentType | null;
  colSpan: string;
  rowSpan: string;
  custom?: boolean;
  noBorder?: boolean;
}[] = [
  {
    id: "core",
    eyebrow: "ARCHITECTURE",
    title: "Intelligence Fabric",
    description:
      "The sovereign substrate for autonomous AI. Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution.",
    animation: null,
    colSpan: "lg:col-span-3",
    rowSpan: "lg:row-span-1",
    custom: true,
    noBorder: true,
  },

  // ✅ Updated Bento Cards
  {
    id: "fungistor",
    title: "FungiStor",
    subtitle: "Long-Term AI Memory",
    description:
      "Erasure coding + compression slash storage bloat by up to 10× vs basic replication. Source-encrypted shards are geo-dispersed—lose pieces, rebuild perfectly from a quorum.",
    animation: Fungistor,
    colSpan: "lg:col-span-3",
    rowSpan: "lg:row-span-1",
  },
  {
    id: "herodb",
    title: "HeroDB",
    subtitle: "Active AI Memory",
    description:
      "Multimodal vector+keyword retrieval makes RAG feel instant across text, image, audio. Time-aware, policy-guarded context keeps results fresh while access stays governed.",
    animation: Herodb,
    colSpan: "lg:col-span-3",
    rowSpan: "lg:row-span-1",
  },
  {
    id: "mos",
    title: "MOS Sandboxes",
    subtitle: "Secure Agent Workspaces",
    description:
      "Attested, signed workspaces spin up ≈5s worldwide—ready to execute. Hardware isolation and scoped egress: run hard, tear down clean, zero residue.",
    animation: MOSSandboxes,
    colSpan: "lg:col-span-3",
    rowSpan: "lg:row-span-1",
  },
  {
    id: "mesh",
    title: "Mycelium Mesh",
    subtitle: "Secure Communication Network",
    description:
      "A private, public-key fabric with self-healing multi-path routing. Glides through NATs and firewalls—direct, low-latency, no middlemen.",
    animation: MyceliumMesh,
    colSpan: "lg:col-span-2",
    rowSpan: "lg:row-span-1",
  },
  {
    id: "deterministic",
    title: "Deterministic Deployment",
    subtitle: "Verifiable Code Execution",
    description:
      "Declare intent, get a hash; remote attestation proves that is what runs. Reproducible builds, signed artifacts, immutable logs—supply chain, sealed.",
    animation: DeterministicExecution,
    colSpan: "lg:col-span-2",
    rowSpan: "lg:row-span-1",
  },
  {
    id: "agent-coordination",
    title: "Agent Coordination",
    subtitle: "Sovereign Workflow Management",
    description:
      "Your private agent conducts swarms of specialists in parallel. Policies fan out work; human checkpoints keep you in command.",
    animation: AgentCoordination,
    colSpan: "lg:col-span-2",
    rowSpan: "lg:row-span-1",
  },
];

export function AgentBento() {
  return (
    <section className="relative w-full bg-[#121212] overflow-hidden">
      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
      <div className="w-full border-t border-l border-r border-gray-800" />

      <div className="mx-auto bg-[#111111] max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-800">
        <div className="grid grid-cols-1 gap-6 pt-6 lg:grid-cols-6 lg:grid-rows-3 pb-6">
          {bentos.map((card) => (
            <div
              key={card.id}
              className={`relative ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
            >
              {!card.noBorder && (
                <div
                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] `}
                />
              )}

              <div
                className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] `}
              >
                {card.animation ? (
                  <div className="lg:h-64 h-48 w-full overflow-hidden bg-transparent flex items-center justify-center">
                    <div className="w-full h-full object-cover"><card.animation /></div>
                  </div>
                ) : (
                  <div className="h-48 w-full flex items-center justify-center bg-transparent" />
                )}

                <div className="px-8 pt-4 pb-6">
                  {card.custom ? (
                    <>
                      {card.eyebrow && <Eyebrow>{card.eyebrow}</Eyebrow>}
                      <H3 className="mt-2 text-white">{card.title}</H3>
                      <P className="mt-4 max-w-lg text-gray-200">{card.description}</P>
                    </>
                  ) : (
                    <>
                     {/* ✅ NEW SUBTITLE */}
                      <p className="text-sm text-cyan-400">{card.subtitle}</p>

                      <p className="mt-1 text-lg font-medium lg:text-xl tracking-tight text-white">
                        {card.title}
                      </p>

                     

                      <p className="mt-1 max-w-lg text-sm/6 text-gray-200">
                        {card.description}
                      </p>
                    </>
                  )}
                </div>
              </div>

              {!card.noBorder && (
                <div
                  className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 `}
                />
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}