"use client";

export function AboutSolutions() {
  return (
    <section
      className="relative bg-[#121212] text-gray-200 overflow-hidden"
      style={{
        "--cell": "4rem",
        height: "74vh",
      } as React.CSSProperties}
    >
      {/* Square grid background */}
      <div
        className="absolute inset-0 z-0 grid"
        style={{
          gridTemplateColumns: "repeat(auto-fill, var(--cell))",
          gridAutoRows: "var(--cell)",
          justifyContent: "center", // ✅ centers grid horizontally
        }}
        aria-hidden="true"
      >
        {Array.from({ length: 2000 }).map((_, i) => (
          <div
            key={i}
            className="border border-[#1f1f1f] hover:bg-[#00FFD1] transition-colors duration-300 cursor-pointer"
          />
        ))}
      </div>

      {/* Foreground content aligned to the same grid */}
      <div
        className="relative z-10 grid grid-cols-[repeat(auto-fill,var(--cell))] auto-rows-[var(--cell)] gap-0 pointer-events-none w-full h-full"
        style={{
          justifyContent: "center", // ✅ centers foreground grid too
        }}
      >
        {/* Top-left card */}
        <div className="col-start-2 row-start-2 col-span-5 row-span-3 pointer-events-auto">
          <div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
            <p className="text-sm text-gray-600 leading-snug">
              Unlike traditional internet infrastructure, ThreeFold runs on a
              global mesh of independent cloud providers, individuals and
              organizations contributing compute, storage, and network power.
            </p>
          </div>
        </div>

        {/* Center card */}
        <div className="col-start-9 row-start-3 col-span-6 row-span-5 pointer-events-auto">
          <div className="bg-[#121212] w-full h-full flex items-center justify-center text-center shadow-lg">
            <p className="text-2xl md:text-3xl font-medium text-white leading-tight">
              A Decentralized Foundation for the Internet.
            </p>
          </div>
        </div>

        {/* Bottom-right card */}
        <div className="col-start-17 row-start-6 col-span-5 row-span-3 pointer-events-auto">
          <div className="bg-[#121212] w-full h-full flex items-center p-6 shadow-lg">
            <p className="text-sm text-gray-600 leading-snug">
              This physical decentralization removes bottlenecks, increases
              resilience, and protects privacy. ThreeFold is a neutral, scalable
              foundation for the next-generation internet, where digital
              sovereignty and collaboration come first.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}