'use client'

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

const product = {
  subtitle: "BENEFITS",
  name: "Runs on Your Own Infrastructure",
  description: `
    <p>
      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.
    </p>
  `,

  details: [
    {
      label: "Data Control",
      name: "Your Data Lives on Your Pods",
      description:
        "Full control of where your data is stored and how it’s shared.",
    },
    {
      label: "Connectivity",
      name: "Direct Pod-to-Pod Networking",
      description:
        "Direct connections between Pods for faster, private communication.",
    },
    {
      label: "Security",
      name: "No One Can Spy or Shut You Down",
      description:
        "Independence from corporate servers or cloud outages.",
    },
    {
      label: "Resilience",
      name: "Resilient Even if Nodes Disconnect",
      description:
        "Continuous availability even if one node disconnects.",
    },
  ],
}

export function PodsDesign() {
  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 Section */}
      <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 mx-auto flex flex-col items-center justify-center min-h-[220px] text-center">
          
          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
            {product.subtitle}
          </Eyebrow>

          <H3 className="mt-4 text-black">
            {product.name}
          </H3>

          <P
            className="mt-4 text-gray-700 text-base leading-relaxed"
            dangerouslySetInnerHTML={{ __html: product.description }}
          />
        </div>

        {/* ▸ 4-Column Highlights Grid */}
        <div className="grid lg:grid-cols-4">
          {product.details.map((item) => (
            <div
              key={item.name}
              className="group relative overflow-hidden border border-gray-100 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
            >
              {/* Hover 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">
                
                {item.label && (
                  <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.name}
                </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>
  );
}
