import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertTriangle, TrendingDown, Users, Globe } from "lucide-react"

export function CritiqueSection() {
  const problems = [
    {
      icon: <AlertTriangle className="h-8 w-8 text-destructive" />,
      title: "Economic Extraction",
      description:
        "Neoliberal capitalism prioritizes profit extraction over human and ecological wellbeing, creating unsustainable wealth concentration.",
    },
    {
      icon: <Users className="h-8 w-8 text-destructive" />,
      title: "Systemic Oppression",
      description:
        "Current systems perpetuate inequality and marginalize communities, especially minorities and indigenous peoples.",
    },
    {
      icon: <Globe className="h-8 w-8 text-destructive" />,
      title: "Imperial Colonialism",
      description:
        "Modern economic systems continue colonial patterns of resource extraction and cultural domination on a global scale.",
    },
    {
      icon: <TrendingDown className="h-8 w-8 text-destructive" />,
      title: "Ecological Collapse",
      description:
        "The endless growth paradigm is destroying Earth's life-supporting ecosystems at an unprecedented rate.",
    },
  ]

  return (
    <section id="critique" className="py-12 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">
            {"The Current System is "}
            <span className="text-destructive">Broken</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
            {"We're living in a system designed for extraction, not regeneration. "}
            {"It's time to acknowledge the fundamental flaws and imagine something better."}
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {problems.map((problem, index) => (
            <Card
              key={index}
              className="border-destructive/20 hover:border-destructive/40 transition-colors duration-300"
            >
              <CardHeader className="text-center">
                <div className="mx-auto mb-4">{problem.icon}</div>
                <CardTitle className="text-xl">{problem.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground text-center leading-relaxed">{problem.description}</p>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="mt-16 text-center">
          <blockquote className="text-2xl md:text-3xl font-medium text-primary italic max-w-4xl mx-auto text-balance">
            {'"There is no such thing as society" is just a false egregore that those in power would have us believe, '}
            {"in order to consolidate power in Westphalian state monoliths."}
          </blockquote>
          <cite className="text-muted-foreground mt-4 block">— Jeff Emmett, Mycoeconomics</cite>
        </div>
      </div>
    </section>
  )
}