"use client";

import {
  ServerIcon,
  ShieldCheckIcon,
  BoltIcon,
  GlobeAltIcon,
} from "@heroicons/react/24/solid";

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

const podCards = [
  {
    id: "intro",
    eyebrow: "Capabilities",
    title: "What is a Pod?",
    description: null,
    icon: null,
    custom: true,
    noBorder: true,
    colSpan: "lg:col-span-4",
  },
  {
    id: "home",
    title: "Your private digital home on the decentralized internet",
    description:
      "Your Pod is a private digital home where apps, data, and identity live independently of Big Tech and central servers.",
    icon: ServerIcon,
  },
  {
    id: "control",
    title: "An always-on space you fully control",
    description:
      "A dedicated, always-on environment you fully command — your own sovereign slice of the network that never goes offline.",
    icon: ShieldCheckIcon,
  },
  {
    id: "tools",
    title: "Runs communication, storage, and collaboration tools",
    description:
      "Runs your communication, storage, and collaboration tools in a secure local environment without reliance on outside platforms.",
    icon: BoltIcon,
  },
  {
    id: "networking",
    title: "Fully encrypted, federated peer-to-peer network",
    description:
      "Encrypted, federated peer-to-peer networking that links your Pod directly with trusted devices without intermediaries.",
    icon: GlobeAltIcon,
  },
];

export function PodsWhat() {
  return (
    <section className="relative w-full bg-[#121212] overflow-hidden">
      {/* Top horizontal line */}
      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
      <div className="w-full border-t border-l border-r border-gray-800" />

      {/* Content container */}
      <div className="mx-auto bg-[#111111] max-w-7xl px-6 lg:px-10 border border-t-0 border-b-0 border-gray-800">

        {/* 4-column grid */}
        <div className="grid grid-cols-1 gap-12 pt-12 lg:grid-cols-4 pb-20">
          {podCards.map((card) => {
            const Icon = card.icon;

            return (
              <div
                key={card.id}
                className={`${card.colSpan || ""} flex flex-col ${
                  card.custom ? "" : "transition-transform duration-300 hover:scale-[1.02]"
                }`}
              >
                {/* Custom Intro Card */}
                {card.custom ? (
                  <>
                    <Eyebrow>{card.eyebrow}</Eyebrow>
                    <H3 className="mt-2 text-white">{card.title}</H3>
                  </>
                ) : (
                  <>
                    {/* TITLE WITH ICON (matching the TL example) */}
                    <dt className="flex items-center gap-x-3 text-base font-semibold text-white">
                      {Icon && <Icon className="h-6 w-6 text-cyan-500" aria-hidden="true" />}
                      {card.title}
                    </dt>

                    {/* DESCRIPTION */}
                    <dd className="mt-4 text-base text-gray-300">
                      {card.description}
                    </dd>
                  </>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Bottom border */}
      <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>
  );
}