"use client"

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

export function MycoeconomicsSection() {
  const principles = [
    {
      icon: <Network className="h-8 w-8 text-primary" />,
      title: "Networked Distribution",
      description:
        "Like mycelial networks, economic systems should facilitate resource sharing and mutual support across interconnected communities.",
    },
    {
      icon: <Recycle className="h-8 w-8 text-primary" />,
      title: "Regenerative Cycles",
      description:
        "Emulate nature's circular processes where waste becomes input, creating sustainable and regenerative economic flows.",
    },
    {
      icon: <TreePine className="h-8 w-8 text-primary" />,
      title: "Ecological Wisdom",
      description:
        "Learn from forest ecosystems where cooperation and mutual aid are more dominant than competition for survival.",
    },
    {
      icon: <Zap className="h-8 w-8 text-primary" />,
      title: "Adaptive Resilience",
      description:
        "Build economic systems that can adapt and respond to changing conditions, like fungi responding to environmental shifts.",
    },
  ]

  return (
    <section id="mycoeconomics" className="py-16 bg-muted/50 border-y border-primary/30 shadow-lg">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
            <span className="text-primary">Mycoeconomics</span>
            {": Nature's Blueprint"}
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
            {"Fungi have been Earth's master economists for millions of years, "}
            {"creating networks of mutual aid and resource distribution. "}
            {"What if we designed our economies like mycelial networks?"}
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 mb-16">
          {principles.map((principle, index) => (
            <Card
              key={index}
              className="border-primary/20 hover:border-primary/40 transition-all duration-300 mycelial-growth"
            >
              <CardHeader>
                <div className="flex items-center gap-4">
                  {principle.icon}
                  <CardTitle className="text-xl">{principle.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground leading-relaxed">{principle.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="bg-card border border-primary/20 rounded-lg p-8">
          <h3 className="text-2xl font-bold mb-4 text-primary">The Mycelial Revolution</h3>
          <p className="text-lg text-muted-foreground mb-6 leading-relaxed">
            {"Just as fungi decompose dead matter to create new life, we can decompose failing neoliberal systems "}
            {
              "and upcycle their nutrients into regenerative alternatives. The revolution is — and has always been — mycelial."
            }
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <Button
              size="lg"
              onClick={() =>
                window.open(
                  "https://allthingsdecent.substack.com/p/mycoeconomics-and-permaculture-currencies",
                  "_blank",
                )
              }
            >
              Read the Full Essay
            </Button>
            <Button
              variant="outline"
              size="lg"
              className="border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
              onClick={() => window.open("https://book.mycofi.earth/", "_blank")}
            >
              Explore MycoFi
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}