import { CardDescription, CardEyebrow, CardTitle, Eyebrow, P, SectionHeader } from '@/components/Texts'
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'

const eyebrow = 'Core Components'
const sectionHeader = 'Network Capabilities'
const description1 = 'Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.'
const description2 = 'Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.'

const cards = [
  {
    eyebrow: 'Routing',
    title: 'Automatic pathfinding',
    description: 'The Mycelium Network automatically discovers the shortest and fastest routes between nodes, ensuring optimal data flow and network efficiency without manual configuration.',
    component: <Pathfinding />,
    className: 'lg:col-span-3',
    roundedClassName: 'max-lg:rounded-t-4xl lg:rounded-tl-4xl',
    roundedInnerClassName: 'max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]'
  },
  {
    eyebrow: 'Communication',
    title: 'Distributed message bus',
    description: 'Acts as a global message layer that lets nodes exchange information seamlessly. Enables resilient, asynchronous communication across the entire decentralized mesh.',
    component: <MessageBus />,
    className: 'lg:col-span-3',
    roundedClassName: 'lg:rounded-tr-4xl',
    roundedInnerClassName: 'lg:rounded-tr-[calc(2rem+1px)]'
  },
  {
    eyebrow: 'Discovery',
    title: 'Automatic proxy detection',
    description: 'The system continuously scans for open SOCKS5 proxies within the network, making it effortless to find available connection points without manual setup.',
    component: <ProxyDetection className="h-80" />,
    className: 'lg:col-span-2',
    roundedClassName: 'lg:rounded-bl-4xl',
    roundedInnerClassName: 'lg:rounded-bl-[calc(2rem+1px)]'
  },
  {
    eyebrow: 'Connectivity',
    title: 'Seamless proxy forwarding',
    description: '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.',
    component: <ProxyForwarding className="h-80" />,
    className: 'lg:col-span-2',
    roundedClassName: '',
    roundedInnerClassName: ''
  },
  {
    eyebrow: 'Delivery',
    title: 'Decentralized content distribution',
    description: '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.',
    component: <ContentDistribution className="h-80" />,
    className: 'lg:col-span-2',
    roundedClassName: 'max-lg:rounded-b-4xl lg:rounded-br-4xl',
    roundedInnerClassName: 'max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]'
  }
]

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">
        <Eyebrow color="accent">{eyebrow}</Eyebrow>
        <SectionHeader color="dark" className="mt-2 max-w-2xl text-pretty">
          {sectionHeader}
        </SectionHeader>
        <P color="secondary" className="mt-4 max-w-4xl text-black">
          {description1}
        </P>
        <P color="secondary" className="mt-2 max-w-4xl">
          {description2}
        </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">
          {cards.map((card, index) => (
            <div key={index} className={`group relative ${card.className} transition-all duration-300 ease-in-out hover:scale-105`}>
              <div className={`absolute inset-0 rounded-lg bg-transparent ${card.roundedClassName}`} />
              <div className={`flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.roundedInnerClassName}`}>
                {card.component}
                <div className="p-10 pt-4">
                  <CardEyebrow color="accent">{card.eyebrow}</CardEyebrow>
                  <CardTitle color="dark" className="mt-2">
                    {card.title}
                  </CardTitle>
                  <CardDescription color="secondary" className="mt-2 max-w-lg">
                    {card.description}
                  </CardDescription>
                </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 ${card.roundedClassName}`} />
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}