"use client";

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

const nodeSpecs = [
  {
    id: "autonomous",
    eyebrow: "Self-Running",
    title: "Autonomous Operation",
    description: "Runs autonomously with no central control.",
    colSpan: "lg:col-span-3",
    rounded: "max-lg:rounded-t-4xl lg:rounded-tl-4xl",
    innerRounded: "max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]",
  },
  {
    id: "encrypted",
    eyebrow: "Security",
    title: "Encrypted by Default",
    description: "Fully encrypted and identity-based.",
    colSpan: "lg:col-span-3",
    rounded: "lg:rounded-tr-4xl",
    innerRounded: "lg:rounded-tr-[calc(2rem+1px)]",
  },
  {
    id: "efficient",
    eyebrow: "Performance",
    title: "Energy Efficient",
    description: "Energy-efficient and quiet, designed for 24/7 uptime.",
    colSpan: "lg:col-span-2",
    rounded: "lg:rounded-bl-4xl",
    innerRounded: "lg:rounded-bl-[calc(2rem+1px)]",
  },
  {
    id: "uptime",
    eyebrow: "Reliability",
    title: "Measured Uptime",
    description: "Automatically measures uptime and contribution.",
    colSpan: "lg:col-span-2",
    rounded: "",
    innerRounded: "",
  },
  {
    id: "fullstack",
    eyebrow: "Compatibility",
    title: "Full Mycelium Stack Support",
    description: "Supports Mycelium Network, Cloud, Pods, and Agents.",
    colSpan: "lg:col-span-2",
    rounded: "max-lg:rounded-b-4xl lg:rounded-br-4xl",
    innerRounded: "max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]",
  },
];

export function NodeSpecs() {
  return (
    <div className="bg-white py-24 sm:py-32">
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
        <Eyebrow>Node Specifications</Eyebrow>
        <H3 className="mt-2">Built for Reliability and Control</H3>
        <P className="mt-6 max-w-xl">
          Each node strengthens the network and helps build a more open, sovereign and
          distributed internet.
        </P>

        <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
          {nodeSpecs.map((item) => (
            <div key={item.id} className={`relative ${item.colSpan}`}>
              {/* BG LAYER */}
              <div
                className={`absolute inset-0 rounded-lg bg-white ${item.rounded}`}
              />

              {/* CONTENT LAYER */}
              <div
                className={`relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${item.innerRounded}`}
              >
                <div className="p-10 pt-6">
                  <h3 className="text-sm/4 font-semibold text-cyan-600">{item.eyebrow}</h3>
                  <CT className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                    {item.title}
                  </CT>
                  <CP className="mt-2 max-w-lg text-sm/6 text-gray-600">
                    {item.description}
                  </CP>
                </div>
              </div>

              {/* OUTLINE OVERLAY */}
              <div
                className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${item.rounded}`}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}