import Pathfinding from '@/components/Pathfinding'
import MessageBus from '@/components/MessageBus'
import ProxyDetection from '@/components/ProxyDetection'
import ProxyForwarding from '@/components/ProxyForwarding'
import ContentDistribution from '@/components/ContentDistribution'

export function Features() {
  return (
    <section id="features" className=" py-24">
      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
        <h2 className="text-base/7 font-semibold text-cyan-500">Core Components</h2>
        <p className="mt-2 max-w-4xl text-3xl lg:text-4xl font-medium tracking-tight  text-pretty text-gray-950">
          Network Capabilities
        </p>
        <p className="mt-4 max-w-xl text-lg text-gray-600">
            Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.
        </p>
        <p className="mt-2 max-w-xl text-lg text-gray-600">
Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
        </p>  
        <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
          <div className="relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
            <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
              <Pathfinding />
              <div className="p-10 pt-4">
                <h3 className="text-sm/4 font-semibold text-cyan-500">Routing</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                  Automatic pathfinding
                </p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  The Mycelium Network automatically discovers the shortest and fastest routes between nodes, 
                  ensuring optimal data flow and network efficiency without manual configuration.
                </p>
              </div>
            </div>
            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
          </div>
          <div className="relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
            <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
              <MessageBus />
              <div className="p-10 pt-4">
                <h3 className="text-sm/4 font-semibold text-cyan-500">Communication</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                  Distributed message bus
                </p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  Acts as a global message layer that lets nodes exchange information seamlessly. 
                  Enables resilient, asynchronous communication across the entire decentralized mesh.
                </p>
              </div>
            </div>
            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl" />
          </div>
          <div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
            <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
              <ProxyDetection className="h-80" />
              <div className="p-10 pt-4">
                <h3 className="text-sm/4 font-semibold text-cyan-500">Discovery</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                  Automatic proxy detection
                </p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  The system continuously scans for open SOCKS5 proxies within the network, 
                  making it effortless to find available connection points without manual setup.
                </p>
              </div>
            </div>
            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl" />
          </div>
          <div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
            <div className="absolute inset-0 rounded-lg bg-white" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
              <ProxyForwarding className="h-80" />
              <div className="p-10 pt-4">
                <h3 className="text-sm/4 font-semibold text-cyan-500">Connectivity</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                  Seamless proxy forwarding
                </p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  Local SOCKS5 connections can be forwarded through nearby nodes or remote proxies. 
                  When browsers use the local proxy, traffic moves securely through the mesh—like a built-in VPN.
                </p>
              </div>
            </div>
            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
          </div>
          <div className="relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
            <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
              <ContentDistribution className="h-80" />
              <div className="p-10 pt-4">
                <h3 className="text-sm/4 font-semibold text-cyan-500">Delivery</h3>
                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
                  Decentralized content distribution
                </p>
                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
                  Mycelium can serve data from distributed 0-DBs, creating a CDN-like layer that delivers 
                  content faster and more reliably—without relying on centralized servers.
                </p>
              </div>
            </div>
            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl" />
          </div>
        </div>
      </div>
    </section>
  )
}