import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Coins, Vote, Database, MessageSquare, ArrowRight } from "lucide-react"

const applications = [
  {
    icon: Coins,
    title: "Economic Collaboration",
    description:
      "Decentralized resource allocation, mutual credit systems, and transparent value flows that adapt to community needs in real-time.",
    features: ["Mutual Credit Networks", "Dynamic Resource Pools", "Value Flow Tracking"],
  },
  {
    icon: Vote,
    title: "Democratic Governance",
    description:
      "Participatory decision-making tools that scale from local to global, enabling fluid consensus and adaptive policy formation.",
    features: ["Liquid Democracy", "Quadratic Voting", "Consent-Based Protocols"],
  },
  {
    icon: Database,
    title: "Computational Infrastructure",
    description:
      "Distributed computing networks that grow organically, sharing processing power and data storage across community nodes.",
    features: ["Peer-to-Peer Computing", "Federated Data Storage", "Edge Processing"],
  },
  {
    icon: MessageSquare,
    title: "Knowledge Commons",
    description:
      "Collaborative learning environments where insights propagate through the network, creating collective intelligence.",
    features: ["Distributed Knowledge Graphs", "Collaborative Sense-Making", "Emergent Documentation"],
  },
]

export function Applications() {
  return (
    <section className="py-24 px-4 relative overflow-hidden scan-lines">
      <div className="absolute inset-0 cyber-grid opacity-10" />
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-3xl animate-pulse" />

      <div className="max-w-7xl mx-auto relative z-10">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-5xl font-bold mb-4 text-balance glow-text text-primary">
            {"Real-Time Collaboration Tools"}
          </h2>
          <p className="text-lg text-accent max-w-2xl mx-auto text-pretty glow-text">
            {"Practical applications of MycoFi principles for community coordination and collective action"}
          </p>
        </div>

        <div className="grid lg:grid-cols-2 gap-8">
          {applications.map((app, index) => {
            const Icon = app.icon
            const hue = 180 + index * 40
            return (
              <Card
                key={index}
                className="p-8 hover:shadow-lg transition-all border-2 glow-border bg-card/80 backdrop-blur-sm hover:scale-105"
                style={{
                  borderColor: `hsl(${hue}, 100%, 50%)`,
                  boxShadow: `0 0 25px hsla(${hue}, 100%, 50%, 0.3)`,
                }}
              >
                <div className="space-y-4">
                  <div
                    className="w-14 h-14 rounded-xl flex items-center justify-center border-2"
                    style={{
                      borderColor: `hsl(${hue}, 100%, 60%)`,
                      color: `hsl(${hue}, 100%, 60%)`,
                      boxShadow: `0 0 20px hsla(${hue}, 100%, 60%, 0.5)`,
                    }}
                  >
                    <Icon className="w-7 h-7" style={{ animation: "glow-pulse 2s ease-in-out infinite" }} />
                  </div>
                  <h3 className="text-2xl font-semibold glow-text" style={{ color: `hsl(${hue}, 100%, 70%)` }}>
                    {app.title}
                  </h3>
                  <p className="text-muted-foreground leading-relaxed">{app.description}</p>

                  <div className="pt-2">
                    <p className="text-sm font-medium mb-2 text-accent glow-text">{"Key Features:"}</p>
                    <ul className="space-y-1">
                      {app.features.map((feature, i) => (
                        <li key={i} className="text-sm text-muted-foreground flex items-center gap-2">
                          <div
                            className="w-1.5 h-1.5 rounded-full"
                            style={{
                              backgroundColor: `hsl(${hue}, 100%, 60%)`,
                              boxShadow: `0 0 5px hsl(${hue}, 100%, 60%)`,
                            }}
                          />
                          {feature}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </Card>
            )
          })}
        </div>

        <div className="mt-16 text-center">
          <Card className="p-12 border-2 border-primary glow-border bg-gradient-to-br from-primary/20 to-secondary/20 backdrop-blur-sm">
            <h3 className="text-2xl md:text-3xl font-bold mb-4 text-balance glow-text text-primary">
              {"Ready to Explore the Network?"}
            </h3>
            <p className="text-lg mb-8 max-w-2xl mx-auto text-accent glow-text">
              {
                "Dive deeper into psilo-cybernetics and discover how myco-principic design can transform your community or organization"
              }
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                size="lg"
                className="gap-2 border-2 border-accent bg-accent/20 text-accent glow-border hover:bg-accent/30"
                asChild
              >
                <a href="https://book.mycofi.earth" target="_blank" rel="noopener noreferrer">
                  {"Access the MycoFi Book"}
                  <ArrowRight className="w-4 h-4" />
                </a>
              </Button>
              <Button
                size="lg"
                variant="outline"
                className="gap-2 border-2 border-secondary text-secondary glow-border hover:bg-secondary/10 bg-transparent"
                asChild
              >
                <a href="https://discord.gg/mFxSXCrfrN" target="_blank" rel="noopener noreferrer">
                  {"Join the Community"}
                </a>
              </Button>
            </div>
          </Card>
        </div>
      </div>
    </section>
  )
}