import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Coins, Vote, Cpu, Heart } from "lucide-react"

export function AlternativesSection() {
  const alternatives = [
    {
      icon: <Coins className="h-8 w-8 text-secondary" />,
      title: "Permaculture Currencies",
      description:
        "Local exchange systems that value ecological regeneration, care work, and community resilience over profit extraction.",
      examples: ["Community Land Trusts", "Time Banking", "Mutual Credit Systems", "Gift Economies"],
    },
    {
      icon: <Vote className="h-8 w-8 text-secondary" />,
      title: "Participatory Democracy",
      description:
        "Decision-making systems that give communities direct control over resources and policies affecting their lives.",
      examples: ["Consensus Building", "Sociocracy", "Liquid Democracy", "Community Assemblies"],
    },
    {
      icon: <Cpu className="h-8 w-8 text-secondary" />,
      title: "Cooperative Technology",
      description:
        "Platform cooperatives and decentralized technologies that serve communities rather than extractive corporations.",
      examples: ["Platform Co-ops", "Mesh Networks", "Open Source Tools", "Distributed Governance"],
    },
    {
      icon: <Heart className="h-8 w-8 text-secondary" />,
      title: "Care-Centered Economics",
      description:
        "Economic models that prioritize care work, emotional labor, and the reproduction of life over capital accumulation.",
      examples: ["Universal Basic Services", "Care Income", "Commons Management", "Solidarity Economy"],
    },
  ]

  return (
    <section id="alternatives" className="py-20 bg-muted/30">
      <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">
            {"Post-Capitalist "}
            <span className="text-secondary">Alternatives</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
            {"These aren't utopian dreams — they're practical alternatives being implemented "}
            {"by communities worldwide who refuse to accept that \"there is no alternative.\""}
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-8">
          {alternatives.map((alternative, index) => (
            <Card key={index} className="border-secondary/20 hover:border-secondary/40 transition-all duration-300">
              <CardHeader>
                <div className="flex items-center gap-4 mb-4">
                  {alternative.icon}
                  <CardTitle className="text-xl">{alternative.title}</CardTitle>
                </div>
                <p className="text-muted-foreground leading-relaxed">{alternative.description}</p>
              </CardHeader>
              <CardContent>
                <div className="flex flex-wrap gap-2">
                  {alternative.examples.map((example, exampleIndex) => (
                    <Badge
                      key={exampleIndex}
                      variant="secondary"
                      className="bg-secondary/10 text-secondary border-secondary/20"
                    >
                      {example}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="mt-16 text-center">
          <blockquote className="text-2xl md:text-3xl font-medium text-secondary italic max-w-4xl mx-auto text-balance">
            {'"We are in urgent need of new economic models that can facilitate managed degrowth '}
            {'and support localized production in the real economy."'}
          </blockquote>
          <cite className="text-muted-foreground mt-4 block">— From Mycoeconomics and Permaculture Currencies</cite>
        </div>
      </div>
    </section>
  )
}