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

"use client"

const FOCUS_AREAS = [
  {
    label: "Token Engineering",
    description: "Designing sustainable crypto-economic systems",
    items: ["Bonding Curves", "cadCAD Modeling", "Primary Issuance Markets"],
  },
  {
    label: "Governance",
    description: "Mechanisms for collective decision-making",
    items: ["Conviction Voting", "DAO Templates", "Ostrom Principles"],
  },
  {
    label: "Regenerative Economics",
    description: "Beyond extractive growth models",
    items: ["MycoFi", "Commons-based Systems", "Mutual Aid"],
  },
]

export function AboutSection() {
  return (
    <section id="about" className="py-20 px-4 md:px-6 crosshatch">
      <div className="max-w-4xl mx-auto">
        {/* Section header */}
        <div className="mb-12">
          <span className="section-label">About</span>
          <h2 className="text-3xl md:text-4xl font-light mt-6 mb-4">
            Background
          </h2>
        </div>

        {/* Main content card */}
        <div className="blueprint-card p-8 md:p-10 mb-12">
          <div className="space-y-6 text-muted-foreground leading-relaxed">
            <p>
              I'm a token engineering researcher and systems designer exploring the
              intersection of economics, ecology, and decentralized coordination. My work
              focuses on creating tools and frameworks that enable communities to manage
              shared resources sustainably and equitably.
            </p>

            <p>
              As a co-founder of the <strong className="text-foreground">Commons Stack</strong>,
              I've been instrumental in developing cyber-physical commons architectures
              that translate Elinor Ostrom's principles into DAO templates. We build
              customizable libraries of tools for communal management of public goods.
            </p>

            <p>
              Through <strong className="text-foreground">MycoFi</strong>, I explore
              mycoeconomics—economic systems inspired by fungal networks. By emulating
              nature's evolutionary resource allocation algorithms, we can design
              regenerative protocols built on cooperation rather than extraction.
            </p>
          </div>

          {/* Timeline markers */}
          <div className="mt-10 pt-8 border-t border-border">
            <div className="flex items-center gap-4 mb-4">
              <div className="node-point filled" />
              <span className="text-sm text-muted-foreground font-mono">2015</span>
              <span className="text-sm">Entered Web3</span>
            </div>
            <svg className="ml-1.5 h-8 w-px text-border">
              <line x1="0" y1="0" x2="0" y2="32" stroke="currentColor" strokeWidth="2" strokeDasharray="4 2" />
            </svg>
            <div className="flex items-center gap-4 mb-4">
              <div className="node-point filled" />
              <span className="text-sm text-muted-foreground font-mono">2018</span>
              <span className="text-sm">Co-founded Commons Stack</span>
            </div>
            <svg className="ml-1.5 h-8 w-px text-border">
              <line x1="0" y1="0" x2="0" y2="32" stroke="currentColor" strokeWidth="2" strokeDasharray="4 2" />
            </svg>
            <div className="flex items-center gap-4 mb-4">
              <div className="node-point filled" />
              <span className="text-sm text-muted-foreground font-mono">2023</span>
              <span className="text-sm">Launched MycoFi</span>
            </div>
            <svg className="ml-1.5 h-8 w-px text-border">
              <line x1="0" y1="0" x2="0" y2="32" stroke="currentColor" strokeWidth="2" strokeDasharray="4 2" />
            </svg>
            <div className="flex items-center gap-4">
              <div className="node-point" />
              <span className="text-sm text-muted-foreground font-mono">now</span>
              <span className="text-sm text-muted-foreground">Continuing to build...</span>
            </div>
          </div>
        </div>

        {/* Focus areas as a diagram */}
        <div className="grid md:grid-cols-3 gap-6">
          {FOCUS_AREAS.map((area, index) => (
            <div
              key={area.label}
              className="blueprint-card p-6 fade-in-up"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <div className="flex items-center gap-3 mb-4">
                <div className="node-point filled" />
                <h3 className="font-medium">{area.label}</h3>
              </div>
              <p className="text-sm text-muted-foreground mb-4">
                {area.description}
              </p>
              <ul className="space-y-2">
                {area.items.map((item) => (
                  <li key={item} className="text-sm flex items-center gap-2">
                    <span className="w-1.5 h-px bg-border" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Annotation */}
        <div className="mt-8">
          <p className="annotation">
            Just as bridges require engineering, our token economies need mathematical validation
          </p>
        </div>
      </div>
    </section>
  )
}