import { Button } from "@/components/ui/button"
import { ArrowRight, Leaf, Recycle, Sprout } from "lucide-react"

export function CompostCapitalismSection() {
  return (
    <section id="compost" className="py-20 bg-muted/50 border-y border-secondary/30">
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-balance">
            <span className="text-secondary">(Com)post</span> Capitalism
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
            What if we treated capitalism like organic matter — breaking down its extractive excesses to nourish
            regenerative systems that work for the many, not the few?
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-8 mb-16">
          <div className="bg-gradient-to-br from-secondary/10 to-secondary/5 rounded-lg p-6 border border-secondary/20">
            <div className="w-12 h-12 rounded-full bg-secondary/20 flex items-center justify-center mb-4">
              <Leaf className="w-6 h-6 text-secondary" />
            </div>
            <h4 className="text-xl font-bold mb-3">Decompose</h4>
            <p className="text-muted-foreground leading-relaxed">
              Zombified institutions — corporate monopolies, financialized housing, extractive industries — are the dead
              matter. Mycelium breaks them down.
            </p>
          </div>

          <div className="bg-gradient-to-br from-primary/10 to-primary/5 rounded-lg p-6 border border-primary/20">
            <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center mb-4">
              <Recycle className="w-6 h-6 text-primary" />
            </div>
            <h4 className="text-xl font-bold mb-3">Transform</h4>
            <p className="text-muted-foreground leading-relaxed">
              Capital trapped in outdated systems, attention harvested by algorithms, care work rendered invisible —
              these are resources waiting to be redirected.
            </p>
          </div>

          <div className="bg-gradient-to-br from-accent/10 to-accent/5 rounded-lg p-6 border border-accent/20">
            <div className="w-12 h-12 rounded-full bg-accent/20 flex items-center justify-center mb-4">
              <Sprout className="w-6 h-6 text-accent" />
            </div>
            <h4 className="text-xl font-bold mb-3">Regenerate</h4>
            <p className="text-muted-foreground leading-relaxed">
              From the composted remains, new systems emerge — worker cooperatives, commons-based governance,
              solidarity economies rooted in mutual aid.
            </p>
          </div>
        </div>

        <div className="bg-gradient-to-r from-secondary/10 via-primary/10 to-accent/10 rounded-lg p-8 text-center border border-secondary/20">
          <p className="text-xl mb-6 leading-relaxed max-w-3xl mx-auto">
            Capitalism isn't something to overthrow — it's something to compost. The nutrients are already here.
            The mycelial networks are already spreading. The soil is ready.
          </p>
          <Button size="lg" className="bg-secondary hover:bg-secondary/90 text-secondary-foreground font-semibold" asChild>
            <a
              href="https://compostcapitalism.xyz"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2"
            >
              Explore (Com)post Capitalism
              <ArrowRight className="w-5 h-5" />
            </a>
          </Button>
        </div>
      </div>
    </section>
  )
}