import { H3, P, Eyebrow, Small } from "@/components/Texts";

const highlights = [
  {
    label: "Local Execution",
    title: "Agents run entirely inside your environment.",
    description:
      "Models, logic, and memory stay within your own trusted hardware—never behind third-party APIs.",
  },
  {
    label: "Mesh Connectivity",
    title: "They communicate peer-to-peer across trusted nodes.",
    description:
      "Agents form direct encrypted paths between environments, without relays or central servers.",
  },
  {
    label: "Private Data Access",
    title: "They use your data without sending it elsewhere.",
    description:
      "Your datasets, embeddings, and context never leave your boundaries—processing stays local.",
  },
  {
    label: "Portability",
    title: "They move with you, not with a cloud provider.",
    description:
      "Agents follow your devices, networks, and workflows, remaining sovereign across every location.",
  },
];

export function CloudPros() {
  return (
    <section className="relative w-full bg-[#FDFDFD] overflow-hidden">
      {/* Top spacing line */}
      <div className="max-w-7xl bg-[#FDFDFD] 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" />

      {/* Intro Block */}
      <div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-100">
        <div className="px-8 py-12 max-w-4xl">
          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
            Cloud Advantages
          </Eyebrow>

          <H3 className="mt-4  text-black">
            Why It’s Different
          </H3>

          <P className="mt-4 text-gray-700  leading-relaxed">
            Most AI systems run on centralized clouds, where the models, data, and
            logic operate behind third-party APIs. Mycelium Agents flip that
            architecture, running entirely inside your environment so control,
            privacy, and autonomy stay with you.
          </P>
        </div>

        {/* Grid */}
        <div className="grid lg:grid-cols-4">
          {highlights.map((item) => (
            <div
              key={item.title}
              className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
            >
              {/* Glow */}
              <div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />

              <div className="relative">
                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-600">
                  {item.label}
                </Small>

                <h3 className="mt-4 text-lg font-semibold leading-tight text-black">
                  {item.title}
                </h3>

                <p className="mt-4 text-sm leading-relaxed text-gray-600">
                  {item.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Bottom spacing */}
      <div className="w-full border-b border-gray-100 bg-[#FDFDFD]" />
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
    </section>
  );
}