"use client"
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-12">
      <div className="container mx-auto px-4">
        <div className="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">
            {"The transition to post-capitalist alternatives starts with each of us. "}
            {
              "Connect with others exploring myco-economic alternatives for economies of care through mutual solidarity."
            }
          </p>
          <div className="flex justify-center">
            <Button
              size="lg"
              className="pulse-glow"
              onClick={() => window.open("https://discord.gg/DegMn5xMCC", "_blank")}
            >
              🍄 Join Discord Community
            </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 & "}
            <a
              href="https://post-appitalism.app"
              target="_blank"
              rel="noopener noreferrer"
              className="text-primary hover:underline font-semibold"
            >
              post-appitalist futures
            </a>
          </p>
        </footer>
      </div>
    </section>
  )
}