www_projectmycelium_com/src/pages/home/HomeArchitecture.tsx

"use client";

import { Eyebrow, H3, P } from "@/components/Texts";
import NoExtraction from "./animations/NoExtraction";
import NoControl from "./animations/NoControl";
import NoCentral from "./animations/NoCentral";
import NoSinglePoint from "./animations/NoSinglePoint";

const deterministicCards = [
  {
    id: "core",
    eyebrow: "Why It Matters",
    title: "Built for a Sovereign Digital World",
    description:
      "The modern internet still runs on centralized platforms that own the servers, shape the rules, and extract the data. Mycelium gives you a way out. You operate the infrastructure. You keep the data. You decide the boundaries.",
    animation: null,
    colSpan: "lg:col-span-3",
    rowSpan: "lg:row-span-1",
    custom: true,
    noBorder: true,
  },
  {
    id: "crypto",
    title: "No central servers.",
    description:
      "Your devices form a distributed network, eliminating reliance on centralized data centers.",
    animation: <NoCentral className="lg:-mt-12" />, // ✅ NEW
    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: "stateless",
    title: "No data extraction.",
    description:
      "You own your data. Run services and AI models on your own devices, ensuring privacy and control.",
    animation: <NoExtraction className="lg:-mt-12" />, // ✅ NEW
    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: "healing",
    title: "No single point of failure.",
    description:
      "No single entity can dictate or censor your online experience.",
    animation: <NoSinglePoint />, // ✅ NEW
    colSpan: "lg:col-span-2",
    rowSpan: "lg:row-span-1",
    rounded: "",
    innerRounded: "",
  },
  {
    id: "control",
    title: "No single point of control.",
    description:
      "Infrastructure that moves with its operators, not a corporation.",
    animation: <NoControl />, // ✅ NEW
    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 HomeArchitecture() {
  return (
    <section className="relative w-full bg-[#121212] overflow-hidden">
      {/* ✅ Top horizontal 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-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-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 wrapper on first card */}
              {!card.noBorder && (
                <div
                  className={`absolute inset-0 rounded-md border border-gray-800 bg-[#111212] ${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}`}
              >
                {/* ✅ SVG Animation instead of images */}
                {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>
                    </>
                  ) : (
                    <>
                      <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 ${card.rounded}`}
                />
              )}
            </div>
          ))}
        </div>
      </div>

      <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>
  );
}