import { Card } from "@/components/ui/card"
import { Coins, Eye, Heart } from "lucide-react"

export function ResourcesForChange() {
  return (
    <section className="py-24 bg-[var(--color-section-growth)]">
      <div className="container mx-auto px-4">
        <div className="max-w-5xl mx-auto space-y-12">
          <div className="text-center space-y-4">
            <h2 className="text-4xl md:text-5xl font-bold text-balance">Resources for Regeneration</h2>
            <p className="text-xl text-muted-foreground text-balance leading-relaxed">
              What can we redirect from extractive systems toward regenerative ones?
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            <Card className="p-8 space-y-6 text-center hover:shadow-lg transition-shadow">
              <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                <Coins className="w-10 h-10 text-primary" />
              </div>
              <h3 className="text-3xl font-bold">Capital</h3>
              <p className="text-muted-foreground leading-relaxed">
                Money is trapped in outdated instruments that perpetuate the status quo. Imagine what we could
                accomplish together, if we made a livable future investable?
              </p>
            </Card>

            <Card className="p-8 space-y-6 text-center hover:shadow-lg transition-shadow">
              <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                <Eye className="w-10 h-10 text-primary" />
              </div>
              <h3 className="text-3xl font-bold">Attention</h3>
              <p className="text-muted-foreground leading-relaxed">
                Our collective focus, harvested by algorithms and sold to advertisers. What if we directed it toward
                mutual aid, skill-sharing, and building alternatives?
              </p>
            </Card>

            <Card className="p-8 space-y-6 text-center hover:shadow-lg transition-shadow">
              <div className="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto">
                <Heart className="w-10 h-10 text-primary" />
              </div>
              <h3 className="text-3xl font-bold">Care</h3>
              <p className="text-muted-foreground leading-relaxed">
                The invisible labor that sustains life—undervalued and exploited. What if care work was recognized,
                compensated, and centered in our economic systems?
              </p>
            </Card>
          </div>

          <div className="bg-card p-8 rounded-lg border space-y-6">
            <h3 className="text-2xl font-bold text-center">The Composting Process</h3>
            <div className="space-y-4 text-muted-foreground leading-relaxed">
              <p>
                <strong className="text-foreground">1. Identify the dead matter:</strong> Which institutions, practices,
                and beliefs are already decomposing? Where is the rot most visible?
              </p>
              <p>
                <strong className="text-foreground">2. Introduce the decomposers:</strong> Worker cooperatives, mutual
                aid networks, commons-based governance, regenerative practices.
              </p>
              <p>
                <strong className="text-foreground">3. Create the right conditions:</strong> Moisture (solidarity),
                oxygen (transparency), warmth (community), and time (patience).
              </p>
              <p>
                <strong className="text-foreground">4. Harvest the nutrients:</strong> Redirect capital, attention, and
                care toward systems that serve life, not extraction.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}