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

export function NetworkLinks() {
  return (
    <section className="py-24 bg-[var(--color-section-network)]">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto space-y-12">
          <div className="text-center space-y-4">
            <h2 className="text-4xl md:text-5xl font-bold text-balance">The Mycelial Network</h2>
            <p className="text-xl text-muted-foreground text-balance leading-relaxed">
              Like mushrooms, we're stronger when connected. Explore related projects in the regenerative economy
              ecosystem.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-6">
            <Card className="p-8 space-y-4 hover:shadow-lg transition-shadow border-2 border-primary/20">
              <div className="flex items-start justify-between">
                <div className="space-y-2">
                  <h3 className="text-2xl font-bold">Post-Appitalism</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Exploring what comes after the app economy—building digital tools that serve communities, not
                    shareholders.
                  </p>
                </div>
              </div>
              <Button asChild className="w-full">
                <a href="https://post-appitalism.app" target="_blank" rel="noopener noreferrer">
                  Visit Post-Appitalism
                  <ExternalLink className="ml-2 w-4 h-4" />
                </a>
              </Button>
            </Card>

            <Card className="p-8 space-y-4 hover:shadow-lg transition-shadow border-2 border-primary/20">
              <div className="flex items-start justify-between">
                <div className="space-y-2">
                  <h3 className="text-2xl font-bold">MycoFi</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Mycelial finance—reimagining economic systems through the lens of fungal networks and regenerative
                    principles.
                  </p>
                </div>
              </div>
              <Button asChild className="w-full">
                <a href="https://mycofi.earth" target="_blank" rel="noopener noreferrer">
                  Explore MycoFi
                  <ExternalLink className="ml-2 w-4 h-4" />
                </a>
              </Button>
            </Card>

            <Card className="p-8 space-y-4 hover:shadow-lg transition-shadow border-2 border-primary/20">
              <div className="flex items-start justify-between">
                <div className="space-y-2">
                  <h3 className="text-2xl font-bold">MycoFi Book</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Dive deeper into the theory and practice of mycelial economics and how fungal networks inspire new
                    models.
                  </p>
                </div>
              </div>
              <Button asChild className="w-full">
                <a href="https://book.mycofi.earth" target="_blank" rel="noopener noreferrer">
                  Read the Book
                  <ExternalLink className="ml-2 w-4 h-4" />
                </a>
              </Button>
            </Card>

            <Card className="p-8 space-y-4 hover:shadow-lg transition-shadow border-2 border-primary/20">
              <div className="flex items-start justify-between">
                <div className="space-y-2">
                  <h3 className="text-2xl font-bold">Permaculture Currencies</h3>
                  <p className="text-muted-foreground leading-relaxed">
                    Mycoeconomics beyond monocultures, where regenerative principles can guide our expression of value &amp; exchange.
                  </p>
                </div>
              </div>
              <Button asChild className="w-full">
                <a
                  href="https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Read the Article
                  <ExternalLink className="ml-2 w-4 h-4" />
                </a>
              </Button>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}