import { Card } from "@/components/ui/card"
import { Brain, Network, Sprout, Users } from "lucide-react"

const concepts = [
  {
    icon: Brain,
    title: "Psilo-Cybernetics",
    description:
      "The study of feedback loops and self-organizing systems inspired by mycelial networks and psychedelic insights into interconnectedness.",
  },
  {
    icon: Sprout,
    title: "Institutional Neuroplasticity",
    description:
      "Organizations that adapt and evolve like neural networks, continuously learning and reorganizing based on environmental feedback.",
  },
  {
    icon: Network,
    title: "MycoFi Framework",
    description:
      "A decentralized infrastructure connecting economic, democratic, and computational systems through myco-principic design patterns.",
  },
  {
    icon: Users,
    title: "Community Collaboration",
    description:
      "Real-time tooling for collective decision-making, resource allocation, and knowledge sharing across distributed networks.",
  },
]

export function ConceptsGrid() {
  return (
    <section className="py-24 px-4 relative overflow-hidden">
      <div className="absolute inset-0 cyber-grid opacity-10" />

      <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-secondary">
            {"Core Concepts"}
          </h2>
          <p className="text-lg text-accent max-w-2xl mx-auto text-pretty glow-text">
            {"Understanding the foundational principles that enable adaptive, interconnected systems"}
          </p>
        </div>

        <div className="grid md:grid-cols-2 gap-6">
          {concepts.map((concept, index) => {
            const Icon = concept.icon
            return (
              <Card
                key={index}
                className="p-8 hover:shadow-lg transition-all border-2 border-primary/50 glow-border bg-card/80 backdrop-blur-sm hover:border-primary"
              >
                <div className="flex items-start gap-4">
                  <div className="p-3 rounded-lg border-2 border-accent text-accent glow-border">
                    <Icon className="w-6 h-6" style={{ animation: "glow-pulse 3s ease-in-out infinite" }} />
                  </div>
                  <div className="flex-1">
                    <h3 className="text-xl font-semibold mb-2 text-primary glow-text">{concept.title}</h3>
                    <p className="text-muted-foreground leading-relaxed">{concept.description}</p>
                  </div>
                </div>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}