import Pathfinding from './animations/Pathfinding'
import MessageBus from './animations/MessageBus'
import ProxyDetection from './animations/ProxyDetection'
import ProxyForwarding from './animations/ProxyForwarding'
import ContentDistribution from './animations/ContentDistribution'
import { P, H3, Eyebrow } from '@/components/Texts'

export function Features() {
  return (
    <section className="w-full max-w-8xl mx-auto bg-transparent">
      

      {/* ✅ Top spacer + full-width line */}
      <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
      <div className="w-full border-t border-l border-r border-gray-100" />

      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl bg-white py-12 lg:px-10 border border-t-0 border-b-0 border-gray-100">
        <Eyebrow>Core Components</Eyebrow>
        <H3>Network Capabilities</H3>
        <P className="mt-4 max-w-4xl text-lg text-gray-600">
          Built for resilience, performance, and autonomy.  
        </P>
        <P className="mt-4 max-w-3xl text-lg text-gray-600">
          Nodes connect through intelligent routing, peer discovery, and decentralized delivery to create a continuously optimized data mesh.
        </P>
        <div className="mt-8 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
          <div className="group 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-6 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 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
          </div>
          <div className="group 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-6 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 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
          </div>
          <div className="group 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-6 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 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
          </div>
          <div className="group 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-6 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 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
          </div>
          <div className="group 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-6 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 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
          </div>
        </div>
      </div>
       {/* ✅ Bottom full-width line + spacer */}
      <div className="w-full border-b border-gray-100" />
      <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
    </section>
  )
}