compost-capitalism-website/components/mycelial-mentions.tsx

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ExternalLink, Music, BookOpen, Users, Coins, Sprout } from "lucide-react"

export function MycelialMentions() {
  return (
    <section className="py-24 bg-[var(--color-section-mentions)]">
      <div className="container mx-auto px-4">
        <div className="max-w-6xl mx-auto space-y-12">
          <div className="text-center space-y-4">
            <h2 className="text-4xl md:text-5xl font-bold text-balance">Mycelial Mentions</h2>
            <p className="text-xl text-muted-foreground text-balance leading-relaxed">
              Threads in the network—resources, projects, and ideas that nourish the regenerative ecosystem.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                <Music className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-bold text-center">Soul Speaks Soil</h3>
              <p className="text-muted-foreground text-sm leading-relaxed text-center">
                A podcast exploring the wisdom of soil, regeneration, and our relationship with the living earth.
              </p>
              <div className="flex gap-2">
                <Button asChild variant="outline" className="flex-1 bg-transparent">
                  <a href="https://www.instagram.com/soulspeakssoil/?hl=en" target="_blank" rel="noopener noreferrer">
                    Instagram
                    <ExternalLink className="ml-2 w-3 h-3" />
                  </a>
                </Button>
                <Button asChild variant="outline" className="flex-1 bg-transparent">
                  <a
                    href="https://open.spotify.com/show/2bcCN0mtNSKMLG3x5c9lOh"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Spotify
                    <ExternalLink className="ml-2 w-3 h-3" />
                  </a>
                </Button>
              </div>
            </Card>

            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                <BookOpen className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-bold text-center">Radical Mycology</h3>
              <p className="text-muted-foreground text-sm leading-relaxed text-center">
                A movement and treatise on seeing and working with fungi to heal ourselves and our planet.
              </p>
              <div className="flex gap-2">
                <Button asChild variant="outline" className="flex-1 bg-transparent">
                  <a href="https://radicalmycology.com" target="_blank" rel="noopener noreferrer">
                    Website
                    <ExternalLink className="ml-2 w-3 h-3" />
                  </a>
                </Button>
                <Button asChild variant="outline" className="flex-1 bg-transparent">
                  <a
                    href="https://chthaeus.com/products/radical-mycology-a-treatise-on-seeing-working-with-fungi"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Book
                    <ExternalLink className="ml-2 w-3 h-3" />
                  </a>
                </Button>
              </div>
            </Card>

            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                <Users className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-bold text-center">Commitment Pooling</h3>
              <p className="text-muted-foreground text-sm leading-relaxed text-center">
                A mechanism for communities to pool commitments and resources for collective action and mutual support.
              </p>
              <Button asChild variant="outline" className="w-full bg-transparent">
                <a
                  href="https://www.grassrootseconomics.org/commitment-pooling"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Learn More
                  <ExternalLink className="ml-2 w-4 h-4" />
                </a>
              </Button>
            </Card>

            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                <Coins className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-bold text-center">Collaborative Finance</h3>
              <p className="text-muted-foreground text-sm leading-relaxed text-center">
                Resources and tools for building financial systems based on cooperation, not competition.
              </p>
              <Button asChild variant="outline" className="w-full bg-transparent">
                <a href="https://cofi.informal.systems/resources" target="_blank" rel="noopener noreferrer">
                  Explore Resources
                  <ExternalLink className="ml-2 w-4 h-4" />
                </a>
              </Button>
            </Card>

            <Card className="p-6 space-y-4 hover:shadow-lg transition-shadow">
              <div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                <Sprout className="w-6 h-6 text-primary" />
              </div>
              <h3 className="text-xl font-bold text-center">MycoFi</h3>
              <p className="text-muted-foreground text-sm leading-relaxed text-center">
                Mycelial finance—reimagining economic systems through the lens of fungal networks and regenerative
                principles.
              </p>
              <Button asChild variant="outline" className="w-full bg-transparent">
                <a href="https://mycofi.earth" target="_blank" rel="noopener noreferrer">
                  Visit MycoFi
                  <ExternalLink className="ml-2 w-4 h-4" />
                </a>
              </Button>
            </Card>
          </div>
        </div>
      </div>
    </section>
  )
}