www_projectmycelium_com/src/pages/agents/AgentUseCase.tsx

"use client";

import { Eyebrow,  P, CT, CP, H3} from "@/components/Texts";
import {
  CpuChipIcon,
  GlobeAltIcon,
  LockClosedIcon,
  ArrowPathIcon,
  ShieldCheckIcon,
} from "@heroicons/react/24/solid";

const networkUseCases = [
  {
    isIntro: true,
    eyebrow: "WHAT IT ENABLES",
    title: "What It Enables",
    description:
      "The framework gives you full control over where agents live, how they connect, and what data they use.",
  },
  {
    title: "Run agents on your own hardware",
    description:
      "Deploy AI processes on laptops, homelabs, edge nodes, or full clusters with no cloud dependency.",
    icon: CpuChipIcon,
  },
  {
    title: "Connect them over the secure Mycelium network",
    description:
      "Agents communicate privately across homes, clouds, countries, and environments in one address space.",
    icon: GlobeAltIcon,
  },
  {
    title: "Keep data and memory private by default",
    description:
      "Your datasets, tools, prompts, embeddings, and memory stay local unless you choose otherwise.",
    icon: LockClosedIcon,
  },
  {
    title: "Build workflows across cloud + edge",
    description:
      "Orchestrate multi-node jobs, pipelines, and real-time systems that live anywhere in your infrastructure.",
    icon: ArrowPathIcon,
  },
  {
    title: "Operate securely in regulated contexts",
    description:
      "Run agents in sectors requiring strict data residency, verified identity, and controlled connectivity.",
    icon: ShieldCheckIcon,
  },
  {
    title: "Blend local + remote intelligence",
    description:
      "Let lightweight agents run locally while offloading heavy tasks to trusted nodes, maintaining privacy and performance balance.",
    icon: CpuChipIcon,
  },
];

export function AgentUsecase() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-transparent">
      {/* Top horizontal spacing line */}
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
      <div className="w-full border-t border-l border-r border-gray-100" />

      {/* Main framed section */}
      <div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
        <div className="mx-auto max-w-3xl sm:text-center px-6 lg:px-8">
          {/* Intro block (from isIntro item) */}
          {networkUseCases[0].isIntro && (
            <>
              <Eyebrow className="text-cyan-500">{networkUseCases[0].eyebrow}</Eyebrow>
              <H3
                className="mt-4 text-gray-900"
              >
                {networkUseCases[0].title}
              </H3>
              <P className="mt-4 text-lg text-gray-600">
                {networkUseCases[0].description}
              </P>
            </>
          )}
        </div>

        {/* Grid of features (excluding intro) */}
        <ul
          role="list"
          className="mx-auto mt-8 max-w-6xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-y-10 px-6"
        >
          {networkUseCases.slice(1).map((item, idx) => (
            <li
              key={idx}
              className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-[1.03] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
            >
              {/* Icon */}
              {item.icon && (
                <div className="h-10 w-10 mb-2 flex items-center justify-center rounded-xl bg-gray-100">
                  <item.icon className="h-6 w-6 text-cyan-500" />
                </div>
              )}

              {/* Title */}
              <CT className="leading-normal text-gray-900">
                {item.title}
              </CT>

              {/* Description */}
              <CP className="mt-2 text-gray-600 text-sm leading-snug">
                {item.description}
              </CP>
            </li>
          ))}
        </ul>
      </div>

      {/* Bottom horizontal line */}
      <div className="w-full border-b border-gray-100" />
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
    </section>
  );
}