import { Card } from "@/components/ui/card"

const projects = [
  {
    title: "Commons Stack",
    description:
      "Cyber-physical commons architecture translating Ostrom's principles into DAO templates. Building open-source, token engineered component libraries for communal management of public goods.",
    tags: ["Token Engineering", "DAOs", "Ostrom Compliance", "Public Goods"],
    image: "/commons-stack-dao-governance-blockchain.jpg",
  },
  {
    title: "Bonding Curve Research Group",
    description:
      "Research and development of Primary Issuance Markets enabling dynamic token supply. Challenging fixed supply paradigms with adaptive mechanisms that dampen volatility.",
    tags: ["Bonding Curves", "cadCAD", "Token Economics", "DeFi"],
    image: "/bonding-curve-token-economics-chart.jpg",
  },
  {
    title: "MycoFi & Mycoeconomics",
    description:
      "Economic systems inspired by fungal networks. Regenerative protocols built on cooperation, mutual aid, and permaculture currency principles. Author of book.mycofi.earth.",
    tags: ["Regenerative Economics", "Biomimicry", "Permaculture", "Web3"],
    image: "/mycelium-network-nature-fungal.jpg",
  },
  {
    title: "Conviction Voting",
    description:
      "Novel continuous decision-making mechanism for DAO governance. Eliminates time-boxed voting attack vectors while increasing community participation and long-term alignment.",
    tags: ["Governance", "Voting Systems", "Social Sensor Fusion", "cadCAD"],
    image: "/conviction-voting-governance-dashboard.jpg",
  },
  {
    title: "Augmented Bonding Curves",
    description:
      "Primary Issuance Markets that create economic boundaries for commons ecosystems. Enables continuous fundraising, algorithmic liquidity, and price volatility dampening.",
    tags: ["Token Design", "AMMs", "Cryptoeconomics", "Funding Mechanisms"],
    image: "/augmented-bonding-curve-economic-system.jpg",
  },
  {
    title: "Token Engineering Commons",
    description:
      "First field test of Commons Stack components. Outperformed other public goods tokens in risk-adjusted returns, demonstrating benefits of primary issuance markets.",
    tags: ["DAO", "TEC", "Token Engineering", "Community Governance"],
    image: "/token-engineering-community-collaborative.jpg",
  },
]

export function WorkSection() {
  return (
    <section id="work" className="py-32 px-6">
      <div className="max-w-7xl mx-auto">
        <div className="mb-16">
          <h2 className="text-5xl md:text-6xl font-bold mb-6">Research & Projects</h2>
          <p className="text-xl text-muted-foreground max-w-2xl text-balance leading-relaxed">
            Exploring token engineering, regenerative economics, and decentralized governance systems
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {projects.map((project, index) => (
            <Card
              key={index}
              className="group relative overflow-hidden bg-card border-border hover:border-primary/50 transition-all duration-300 hover:scale-[1.02]"
            >
              <div className="aspect-video overflow-hidden bg-muted">
                <img
                  src={project.image || "/placeholder.svg"}
                  alt={project.title}
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                />
              </div>
              <div className="p-6">
                <h3 className="text-2xl font-semibold mb-3 group-hover:text-primary transition-colors">
                  {project.title}
                </h3>
                <p className="text-muted-foreground mb-4 leading-relaxed">{project.description}</p>
                <div className="flex flex-wrap gap-2">
                  {project.tags.map((tag, tagIndex) => (
                    <span
                      key={tagIndex}
                      className="text-xs font-mono px-3 py-1 bg-secondary text-secondary-foreground rounded-full"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  )
}