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

export function ImageGallery() {
  return (
    <section className="py-16 bg-muted/30">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">The Mycelial Vision</h2>
        <p className="text-center text-lg mb-12 max-w-3xl mx-auto">
          Exploring the intersection of natural systems, regenerative economics, and decentralized coordination
        </p>

        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          <Card className="overflow-hidden">
            <CardHeader>
              <CardTitle className="text-2xl text-secondary">Compost Capitalism</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="leading-relaxed">
                Just as mycelium breaks down dead matter to create fertile soil, we can transform dying economic structures into nourishment for new regenerative systems. Composting capitalism invokes the cycles of decay and renewal inherent in natural ecosystems, recognizing that institutional senescence and the end of extractive systems creates the conditions for regenerative abundance.
              </p>
              
              <div className="pt-4">
                <Button asChild variant="secondary" className="w-full">
                  <a
                    href="https://compostcapitalism.xyz"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center gap-2"
                  >
                    Compost Capitalism
                    <ExternalLink className="h-4 w-4" />
                  </a>
                </Button>
              </div>
            </CardContent>
          </Card>

          <Card className="overflow-hidden">
            <CardHeader>
              <CardTitle className="text-2xl text-secondary">Psilocybernetics</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <p className="leading-relaxed">
                Psilocybernetics explores how mycelial wisdom and cybernetic systems thinking converge to create new models of collective coordination. Like mycelial networks that process distributed information, we can design systems that enhance collective intelligence and distributed decision-making with new forms of economy, democracy, and technology.          
              </p>
              
              <div className="pt-4">
                <Button asChild variant="secondary" className="w-full">
                  <a
                    href="https://jeffemmett.com/presentations#psilocybernetics"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center justify-center gap-2"
                  >
                    Explore Psilocybernetics
                    <ExternalLink className="h-4 w-4" />
                  </a>
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}
