import Link from 'next/link'

const nodes = [
  { name: 'alltor.net', url: 'https://alltor.net', description: 'Distributed networks' },
  { name: 'post-appitalism.app', url: 'https://post-appitalism.app', description: 'Beyond extraction' },
  { name: 'compostcapitalism.xyz', url: 'https://compostcapitalism.xyz', description: 'Regenerative economics' },
  { name: 'mycofi.earth', url: 'https://mycofi.earth', description: 'Mycelial finance' },
  { name: 'folkjs.org', url: 'https://folkjs.org', description: 'Collaborative tools' },
  { name: 'rspace.online', url: 'https://rspace.online', description: 'Interaction spaces' },
]

export function NetworkSection() {
  return (
    <section className="py-24 px-4 border-t border-border">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-16">
          <div className="text-xs font-mono text-primary tracking-widest uppercase mb-4">
            The Mycelial Network
          </div>
          <h2 className="text-3xl md:text-4xl font-bold mb-6 font-mono text-balance">
            Interconnected. Resilient. Growing.
          </h2>
          <p className="text-muted-foreground leading-relaxed max-w-2xl mx-auto text-pretty">
            Like mycelium beneath the forest floor, we&apos;re part of a larger living network. These are
            our kindred nodes.
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-4">
          {nodes.map((node) => (
            <Link
              key={node.name}
              href={node.url}
              target="_blank"
              rel="noopener noreferrer"
              className="bg-card border border-border p-4 hover:border-accent hover:bg-card/80 transition-all group"
            >
              <div className="flex items-center justify-between">
                <div>
                  <div className="font-mono text-accent group-hover:text-accent/80 transition-colors">
                    {node.name}
                  </div>
                  <div className="text-sm text-muted-foreground mt-1">{node.description}</div>
                </div>
                <svg
                  className="w-5 h-5 text-muted-foreground group-hover:text-accent group-hover:translate-x-1 transition-all"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M13 7l5 5m0 0l-5 5m5-5H6"
                  />
                </svg>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}