import { Button } from "@/components/ui/button"
import { ExternalLink } from "lucide-react"

const links = [
  {
    name: "post-appitalism.app",
    url: "https://post-appitalism.app",
    description: "Breaking free from app dependencies. Together.",
  },
  {
    name: "alltor.net",
    url: "https://alltor.net",
    description: "The alternative internet. Distributed, local-first, free from corporate control.",
  },
]

export function Network() {
  return (
    <section className="border-b border-border py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="text-center">
          <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
            Join the <span className="text-secondary">Movement</span>
          </h2>
          <p className="mt-4 text-lg text-muted-foreground">
            Part of a growing ecosystem building alternatives to surveillance capitalism
          </p>
        </div>

        <div className="mt-12 grid gap-6 md:grid-cols-2">
          {links.map((link, index) => (
            <a
              key={index}
              href={link.url}
              target="_blank"
              rel="noopener noreferrer"
              className="group relative overflow-hidden rounded-lg border border-border bg-card p-6 transition-all hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5"
            >
              <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
              <div className="relative">
                <div className="mb-3 flex items-start justify-between">
                  <h3 className="text-xl font-semibold text-primary group-hover:text-primary">{link.name}</h3>
                  <ExternalLink className="h-5 w-5 text-muted-foreground transition-colors group-hover:text-primary" />
                </div>
                <p className="text-sm leading-relaxed text-muted-foreground">{link.description}</p>
              </div>
            </a>
          ))}
        </div>

        <div className="mt-16 text-center">
          <div className="inline-flex flex-col items-center gap-4 rounded-lg border border-secondary/20 bg-card p-8">
            <h3 className="text-2xl font-bold text-foreground">Ready to Reclaim Your Digital Space?</h3>
            <p className="max-w-lg text-balance text-muted-foreground">
              Join communities building the future of the web - one rSpace at a time
            </p>
            <Button size="lg" className="mt-4 bg-secondary text-secondary-foreground hover:bg-secondary/90">
              Get Started
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}