"use client";

import CountUp from "react-countup";
import React from "react";
import { Button } from "@/components/Button";

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="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-4">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
          {/* Column 1: Title & Description */}
          <div className="flex flex-col space-y-10">
            <div>
              <h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
                Robust Infrastructure for your Intellegence Needs
              </h2>
              <p className="mt-4 sm:mt-6 text-sm font-light text-pretty text-white lg:text-base">
                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. Enjoy full control with flexible hourly pricing. Perfect for always-on inference or workloads exceeding 100K tokens per minute."
            />
            <StatCard
              label="Data Sovereignty"
              description="Keep your sensitive data fully under your control. Mycelium nodes run on trusted infrastructure you own or choose, ensuring that no third party can access, train on, or monetize your data. This makes Mycelium ideal for enterprises in regulated industries that demand compliance and privacy."
            />
          </div>

          {/* Column 3: StatCards */}
          <div className="flex flex-col space-y-10 justify-start">
            <StatCard
              label="Seamless Scalability"
              description="Scale from a single agent to hundreds without re-architecting. 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. Build an intelligent automation stack that evolves with your business needs, integrating easily with existing tools and APIs."
            />
          </div>
        </div>
      </div>
    </div>
  );
}

// 🧱 Stat Card Component
function StatCard({
  label,
  description,
  className = "",
}: {
  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>
  );
}