"use client";

import CountUp from "react-countup";
import React from "react";
import { Button } from "@/components/Button";
import { H2, P } from "@/components/Texts";

export function GridStats() {
  return (
        <div
      id="grid-stats"
      className="py-24 relative -top-20 "
      style={{
        backgroundImage: "url(/images/benefits.webp)",
        backgroundSize: "cover",
        backgroundPosition: "center",
      }}
    >
      <div className="max-w-2xl px-6 lg:max-w-7xl lg:px-6">
        <div className="grid grid-cols-1 gap-16 lg:grid-cols-3">
          {/* Column 1: Title & Description */}
          <div className="flex flex-col space-y-10">
            <div>
              <H2 color="light">
                Robust Infrastructure for your Intellegence Needs
              </H2>
              <P color="light" className="mt-6">
                Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
              </P>
              <Button className="mt-8" variant="outline" href="https://threefold.io/build" >Explore TFGrid →</Button>
            </div>
          </div>

          {/* Column 2: StatCards */}
          <div className="flex flex-col space-y-10">
            <StatCard
              label="Dedicated Hosting"
              description="Run LLMs, VLMs, and diffusion models on single-tenant GPUs with private endpoints. Bring your own weights or deploy from a curated library of open models."
            />
            <StatCard
              label="Data Sovereignty"
              description="Mycelium nodes run on trusted infrastructure you own or choose, ensuring that no third party can access, train on, or monetize your data."
            />
          </div>

          {/* Column 3: StatCards */}
          <div className="flex flex-col space-y-10 justify-start mt-20">
            <StatCard
              label="Seamless Scalability"
              description="Mycelium’s decentralized infrastructure dynamically allocates compute, storage, and bandwidth across the network, so your AI workloads remain fast and resilient even under heavy demand."
            />
            <StatCard
              label="Composable Agent Ecosystem"
              description="Mix and match agents for every part of your workflow: data ingestion, cleaning, orchestration, analysis, and reporting."
            />
          </div>
        </div>
      </div>
    </div>
  );
}

// 🧱 Stat Card Component
function StatCard({
  label,
  description,
  className = "border border-white/10 hover:border-white/40 hover:bg-black/40",
}: {
  label: string;
  description: string;
  className?: string;
}) {
  return (
    <div
      className={`relative flex flex-col overflow-hidden rounded-3xl bg-gray-900/75 shadow-md shadow-gray-900/5 p-8 transition-all duration-300 ease-out hover:scale-105 ${className}`}
      style={{
        filter: 'brightness(1)',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.filter = 'brightness(0.8)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.filter = 'brightness(1)';
      }}
    >
      <h3 className="text-lg font-semibold text-white" style={{ textShadow: '0 0 12px rgba(255, 255, 255, 0.4), 0 0 24px rgba(255, 255, 255, 0.2)' }}>{label}</h3>
      <p className="mt-2 text-sm font-light text-pretty text-white lg:text-base">
        {description}
      </p>
    </div>
  );
}
