import { Card } from "@/components/ui/card"
import { GitBranch, Layers, Zap, RefreshCw, Share2, Target } from "lucide-react"

const principles = [
  {
    icon: GitBranch,
    title: "Distributed Architecture",
    description: "No single point of failure—resilience through decentralization",
  },
  {
    icon: Layers,
    title: "Emergent Complexity",
    description: "Simple rules create sophisticated collective behaviors",
  },
  {
    icon: Zap,
    title: "Real-Time Adaptation",
    description: "Continuous feedback loops enable rapid organizational learning",
  },
  {
    icon: RefreshCw,
    title: "Regenerative Systems",
    description: "Self-healing networks that grow stronger through use",
  },
  {
    icon: Share2,
    title: "Resource Sharing",
    description: "Efficient allocation through transparent, collaborative protocols",
  },
  {
    icon: Target,
    title: "Intentional Design",
    description: "Purpose-driven architecture aligned with community values",
  },
]

export function Principles() {
  return (
    <section className="py-24 px-4 relative overflow-hidden">
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute top-0 left-1/4 w-64 h-64 bg-primary/10 rounded-full blur-3xl animate-pulse" />
        <div
          className="absolute bottom-0 right-1/4 w-64 h-64 bg-secondary/10 rounded-full blur-3xl animate-pulse"
          style={{ animationDelay: "1.5s" }}
        />
      </div>

      <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-accent">
            {"Myco-Principic Design"}
          </h2>
          <p className="text-lg text-secondary max-w-2xl mx-auto text-pretty glow-text">
            {"Six foundational principles inspired by mycelial networks and applied to institutional design"}
          </p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {principles.map((principle, index) => {
            const Icon = principle.icon
            const hue = 180 + index * 30 // Cycle through cyan to magenta
            return (
              <Card
                key={index}
                className="p-6 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 20px hsla(${hue}, 100%, 50%, 0.3)`,
                }}
              >
                <div className="space-y-3">
                  <div
                    className="w-12 h-12 rounded-lg flex items-center justify-center border-2"
                    style={{
                      borderColor: `hsl(${hue}, 100%, 60%)`,
                      color: `hsl(${hue}, 100%, 60%)`,
                      boxShadow: `0 0 15px hsla(${hue}, 100%, 60%, 0.5)`,
                    }}
                  >
                    <Icon
                      className="w-6 h-6"
                      style={{ animation: "glow-pulse 2.5s ease-in-out infinite", animationDelay: `${index * 0.2}s` }}
                    />
                  </div>
                  <h3 className="text-lg font-semibold glow-text" style={{ color: `hsl(${hue}, 100%, 70%)` }}>
                    {principle.title}
                  </h3>
                  <p className="text-muted-foreground text-sm leading-relaxed">{principle.description}</p>
                </div>
              </Card>
            )
          })}
        </div>
      </div>
    </section>
  )
}