jeffemmett-website-redesign/components/work-section.tsx

"use client"

import { useState } from "react"

interface ResearchItem {
  id: string
  title: string
  category: string
  year: string
  abstract: string
  tags: string[]
  link?: string
  status: "published" | "working" | "ongoing"
}

const RESEARCH_ITEMS: ResearchItem[] = [
  {
    id: "bonding-curves",
    title: "Bonding Curves: A Mathematical Primitive for Collective Intelligence",
    category: "token_engineering",
    year: "2019",
    abstract:
      "Exploration of automated market makers as coordination mechanisms for decentralized communities. Analysis of augmented bonding curves for sustainable funding of public goods.",
    tags: ["AMM", "DeFi", "public goods", "cadCAD"],
    link: "https://medium.com/commonsstack",
    status: "published",
  },
  {
    id: "conviction-voting",
    title: "Conviction Voting: A Novel Continuous Decision Making Framework",
    category: "governance",
    year: "2020",
    abstract:
      "Time-weighted voting mechanism that allows preferences to accumulate over time, reducing plutocratic attack vectors and enabling more nuanced collective decision-making.",
    tags: ["governance", "voting", "mechanism design"],
    link: "https://blog.giveth.io/conviction-voting",
    status: "published",
  },
  {
    id: "mycofi",
    title: "MycoFi: Towards Mycelial Finance and Regenerative Economics",
    category: "mycoeconomics",
    year: "2023",
    abstract:
      "Framework for understanding economic systems through the lens of fungal networks. Proposes biomimetic approaches to resource allocation and value flow in decentralized systems.",
    tags: ["biomimicry", "regenerative", "networks", "ecology"],
    link: "https://mycofi.earth",
    status: "ongoing",
  },
  {
    id: "institutional-neuroplasticity",
    title: "Institutional Neuroplasticity: Adaptive Governance for Complex Systems",
    category: "governance",
    year: "2024",
    abstract:
      "Applying principles of neural plasticity to institutional design. How organizations can maintain coherence while adapting to changing conditions through distributed learning.",
    tags: ["institutions", "adaptation", "complexity"],
    status: "working",
  },
  {
    id: "zk-local-first",
    title: "Zero-Knowledge Local-First: Privacy-Preserving Decentralized Coordination",
    category: "cryptography",
    year: "2025",
    abstract:
      "Architecture for local-first applications with ZK proofs for selective disclosure. Enabling community coordination without surveillance capitalism.",
    tags: ["ZK", "privacy", "local-first", "p2p"],
    status: "working",
  },
]

const CATEGORIES = [
  { id: "all", label: "All" },
  { id: "token_engineering", label: "Token Engineering" },
  { id: "governance", label: "Governance" },
  { id: "mycoeconomics", label: "Mycoeconomics" },
  { id: "cryptography", label: "Cryptography" },
]

export function WorkSection() {
  const [activeCategory, setActiveCategory] = useState("all")
  const [expandedItem, setExpandedItem] = useState<string | null>(null)

  const filteredItems =
    activeCategory === "all"
      ? RESEARCH_ITEMS
      : RESEARCH_ITEMS.filter((item) => item.category === activeCategory)

  return (
    <section id="research" className="py-20 px-4 md:px-6">
      <div className="max-w-4xl mx-auto">
        {/* Section header */}
        <div className="mb-12">
          <span className="section-label">Research</span>
          <h2 className="text-3xl md:text-4xl font-light mt-6 mb-4">
            Working Papers & Publications
          </h2>
          <p className="text-muted-foreground max-w-2xl">
            Exploring regenerative systems, token engineering, and collective intelligence
            through research and open-source tooling.
          </p>
        </div>

        {/* Category filter */}
        <div className="flex flex-wrap gap-2 mb-8">
          {CATEGORIES.map((cat) => (
            <button
              key={cat.id}
              onClick={() => setActiveCategory(cat.id)}
              className={`tag transition-colors ${
                activeCategory === cat.id ? "primary" : ""
              }`}
            >
              {cat.label}
            </button>
          ))}
        </div>

        {/* Research items as diagram nodes */}
        <div className="space-y-4">
          {filteredItems.map((item, index) => (
            <div
              key={item.id}
              className="blueprint-card overflow-hidden fade-in-up"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <div
                className="p-6 cursor-pointer"
                onClick={() =>
                  setExpandedItem(expandedItem === item.id ? null : item.id)
                }
              >
                {/* Header row */}
                <div className="flex items-start gap-4">
                  {/* Node indicator */}
                  <div className="mt-1.5">
                    <div
                      className={`node-point ${
                        item.status === "published" ? "filled" : ""
                      }`}
                      style={{
                        borderColor:
                          item.status === "ongoing"
                            ? "var(--accent)"
                            : item.status === "working"
                            ? "var(--primary)"
                            : undefined,
                      }}
                    />
                  </div>

                  {/* Content */}
                  <div className="flex-1 min-w-0">
                    <div className="flex flex-wrap items-center gap-3 mb-2">
                      <span
                        className={`tag ${
                          item.status === "published"
                            ? "primary"
                            : ""
                        }`}
                      >
                        {item.status}
                      </span>
                      <span className="text-xs text-muted-foreground font-mono">
                        {item.year}
                      </span>
                    </div>
                    <h3 className="text-lg font-medium text-foreground mb-2">
                      {item.title}
                    </h3>
                    <div className="flex flex-wrap gap-2">
                      {item.tags.map((tag) => (
                        <span
                          key={tag}
                          className="text-xs text-muted-foreground"
                        >
                          #{tag}
                        </span>
                      ))}
                    </div>
                  </div>

                  {/* Expand indicator */}
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    className={`text-muted-foreground transition-transform ${
                      expandedItem === item.id ? "rotate-180" : ""
                    }`}
                  >
                    <path
                      d="M5 8 L10 13 L15 8"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      fill="none"
                    />
                  </svg>
                </div>

                {/* Expanded content */}
                {expandedItem === item.id && (
                  <div className="mt-6 pt-6 border-t border-border ml-8">
                    <p className="text-muted-foreground text-sm leading-relaxed mb-4">
                      {item.abstract}
                    </p>
                    {item.link && (
                      <a
                        href={item.link}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="blueprint-link text-sm"
                        onClick={(e) => e.stopPropagation()}
                      >
                        Read more →
                      </a>
                    )}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* Annotation */}
        <div className="mt-8">
          <p className="annotation">
            Open access research for the commons
          </p>
        </div>
      </div>
    </section>
  )
}