"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { BookOpen, Users, Sprout, MessageCircle } from "lucide-react"

export function ActionSection() {
  const actions = [
    {
      icon: <BookOpen className="h-6 w-6" />,
      title: "Learn & Research",
      description: "Dive deeper into alternative economic models and post-capitalist theory.",
      action: "Explore Resources",
    },
    {
      icon: <Users className="h-6 w-6" />,
      title: "Build Community",
      description: "Connect with others working on economic alternatives in your area.",
      action: "Find Groups",
    },
    {
      icon: <Sprout className="h-6 w-6" />,
      title: "Start Small",
      description: "Begin implementing alternative practices in your daily life and community.",
      action: "Take Action",
    },
    {
      icon: <MessageCircle className="h-6 w-6" />,
      title: "Spread Awareness",
      description: "Share these ideas and help others understand that alternatives exist.",
      action: "Share Ideas",
    },
  ]

  return (
    <section id="action" className="py-20">
      <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">
            {"Ready to "}
            <span className="text-primary">Take Action</span>
            {"?"}
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto text-pretty leading-relaxed">
            {"The transition to post-capitalist alternatives starts with each of us. "}
            {"Here's how you can begin contributing to the mycelial revolution."}
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {actions.map((action, index) => (
            <Card
              key={index}
              className="text-center border-primary/20 hover:border-primary/40 transition-all duration-300 hover:scale-105"
            >
              <CardHeader>
                <div className="mx-auto mb-4 p-3 bg-primary/10 rounded-full w-fit">{action.icon}</div>
                <CardTitle className="text-lg">{action.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-muted-foreground mb-4 leading-relaxed">{action.description}</p>
                <Button
                  variant="outline"
                  size="sm"
                  className="border-primary text-primary hover:bg-primary hover:text-primary-foreground bg-transparent"
                >
                  {action.action}
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="bg-gradient-to-r from-primary/10 to-secondary/10 rounded-lg p-8 text-center">
          <h3 className="text-3xl font-bold mb-4">Join the Mycommunity</h3>
          <p className="text-lg text-muted-foreground mb-6 max-w-2xl mx-auto leading-relaxed">
            {"Connect with others exploring post-capitalist alternatives. "}
            {"Together, we can grow the mycelial networks of mutual aid and solidarity."}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              className="pulse-glow"
              onClick={() => window.open("https://discord.gg/DegMn5xMCC", "_blank")}
            >
              🍄 Join Discord Community
            </Button>
            <Button
              variant="outline"
              size="lg"
              className="border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground bg-transparent"
              onClick={() => window.open("https://allthingsdecent.substack.com/", "_blank")}
            >
              Subscribe to Newsletter
            </Button>
          </div>
        </div>

        <footer className="mt-16 pt-8 border-t border-primary/20 text-center">
          <p className="text-muted-foreground">
            {"Built with 🍄 for the mycelial revolution • "}
            <span className="text-primary font-semibold">TrippinBalls.lol</span>
            {" • Exploring post-capitalist futures"}
          </p>
        </footer>
      </div>
    </section>
  )
}