www_projectmycelium_com/src/pages/pods/PodsBento.tsx

"use client";

import { Eyebrow, H3, P } from "@/components/Texts";
import DataControl  from "./animations/DataControl";
import Connectivity from "./animations/Connectivity";
import Security from "./animations/Security";
import Resilience from "./animations/Resilience";

const deterministicCards = [
  {
    id: "intro",
    eyebrow: "BENEFITS",
    title: "Runs on Your Own Infrastructure",
    description:
      "Each Pod lives on your own hardware or on trusted local nodes in the Mycelium Network. There is no central cloud and no company in the middle. You are not uploading your life to the cloud. You are running it yourself.",
    animation: null,
    colSpan: "lg:col-span-3",
    rowSpan: "lg:row-span-1",
    custom: true,
    noBorder: true,
  },

  {
    id: "data",
    label: "Data Control",
    title: "Your Data Lives on Your Pods",
    description:
      "Full control of where your data is stored and how it’s shared.",
    animation: <DataControl className="lg:-mt-12" />,
    colSpan: "lg:col-span-3",
    rowSpan: "lg:row-span-1",
    rounded: "lg:rounded-tr-4xl max-lg:rounded-t-4xl",
    innerRounded:
      "lg:rounded-tr-[calc(2rem+1px)] max-lg:rounded-t-[calc(2rem+1px)]",
  },

  {
    id: "connectivity",
    label: "Connectivity",
    title: "Direct Pod-to-Pod Networking",
    description:
      "Direct connections between Pods for faster, private communication.",
    animation: <Connectivity className="lg:-mt-12" />,
    colSpan: "lg:col-span-2",
    rowSpan: "lg:row-span-1",
    rounded: "lg:rounded-bl-4xl max-lg:rounded-b-4xl",
    innerRounded:
      "lg:rounded-bl-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
  },

  {
    id: "security",
    label: "Security",
    title: "No One Can Spy or Shut You Down",
    description:
      "Independence from corporate servers or cloud outages.",
    animation: <Security className="lg:-mt-12" />,
    colSpan: "lg:col-span-2",
    rowSpan: "lg:row-span-1",
    rounded: "",
    innerRounded: "",
  },

  {
    id: "resilience",
    label: "Resilience",
    title: "Resilient Even if Nodes Disconnect",
    description:
      "Continuous availability even if one node disconnects.",
    animation: <Resilience className="lg:-mt-12" />,
    colSpan: "lg:col-span-2",
    rowSpan: "lg:row-span-1",
    rounded: "lg:rounded-br-4xl max-lg:rounded-b-4xl",
    innerRounded:
      "lg:rounded-br-[calc(2rem+1px)] max-lg:rounded-b-[calc(2rem+1px)]",
  },
];

export function PodsBento() {
  return (
    <section className="relative w-full bg-[#121212] overflow-hidden">
      {/* TOP LINE */}
      <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-8 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-2 pb-6">
          {deterministicCards.map((card) => (
            <div
              key={card.id}
              className={`relative flex flex-col ${card.colSpan} ${card.rowSpan} transition-transform duration-300 hover:scale-102 group`}
            >
              {/* DISABLE OUTER WRAPPER ON INTRO CARD */}
              {!card.noBorder && (
                <div
                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111111] ${card.rounded} group-hover:bg-linear-to-br from-gray-900 to-gray-800`}
                />
              )}

              <div
                className={`relative flex lg:h-90 flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.innerRounded}`}
              >
                {/* ANIMATION */}
                {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" />
                )}

                {/* TEXT AREA */}
                <div className="px-8 pt-4 pb-6">
                  {card.custom ? (
                    <>
                      <Eyebrow className="text-cyan-500">
                        {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>
                    </>
                  ) : (
                    <>
                      {card.label && (
                        <p className="text-xs uppercase tracking-[0.16em] text-cyan-500">
                          {card.label}
                        </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-300">
                        {card.description}
                      </p>
                    </>
                  )}
                </div>
              </div>

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

      {/* BOTTOM LINE */}
      <div className="w-full border-b border-gray-800" />
      <div className="max-w-7xl mx-auto py-6 border-x border-gray-800 border-t-0 border-b-0" />
    </section>
  );
}