export function Presentations() {
  return (
    <main>
      <header>Jeff's Presentations</header>
      
      <div className="presentations-info">
        <h3>About These Presentations</h3>
        <p>
          These presentations represent my ongoing research into the intersection of 
          mycelium networks, emancipatory technologies, and convivial tooling. Each 
          presentation explores different aspects of how we can design systems that 
          support collective action and community self-organization.
        </p>
        <p>
          For more of my work, check out my <a href="/">main page</a> or
          <a href="/contact/">get in touch</a>.
        </p>
      </div>

      <div className="presentations-grid">
        <div id="osmotic-governance" className="presentation-card">
          <h3>Osmotic Governance</h3>
          <p>Exploring the intersection of mycelium and emancipatory technologies</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/xfym/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="Osmotic Governance Presentation"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Team Human with Douglas Rushkoff</span>
            <a href="https://www.teamhuman.fm/episodes/238-jeff-emmett" target="_blank" rel="noopener noreferrer">
              Listen to the full episode →
            </a>
          </div>
        </div>

        <div id="exploring-mycofi" className="presentation-card">
          <h3>Exploring MycoFi</h3>
          <p>Mycelial design patterns for Web3 and beyond</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/bqra/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="Exploring MycoFi Presentation"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation at DevCon 7 in Bangkok</span>
            <a href="https://www.youtube.com/watch?v=0A4jXL5eBaI" target="_blank" rel="noopener noreferrer">
              Watch the full talk →
            </a>
          </div>
        </div>

        <div id="mycofi-cofi-gathering" className="presentation-card">
          <h3>MycoFi talk at CoFi gathering</h3>
          <p>Mycelial design patterns for Web3 and beyond</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/vwmt/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="MycoFi Presentation at CoFi Gathering"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Exploring MycoFi on the Greenpill Network</span>
            <a href="https://www.youtube.com/watch?v=AFJFDajuCSg" target="_blank" rel="noopener noreferrer">
              Watch the full talk →
            </a>
          </div>
        </div>



        <div id="myco-mutualism" className="presentation-card">
          <h3>Myco-Mutualism</h3>
          <p>Exploring mutualistic relationships in mycelial networks and their applications to human systems</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/caal/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="Myco-Mutualism Presentation"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation at the Mutualist Society</span>
            <span>Video coming soon</span>
          </div>
        </div>

        <div id="psilocybernetics" className="presentation-card">
          <h3>Psilocybernetics: The Emergence of Institutional Neuroplasticity</h3>
          <p>Exploring the intersection of mycelium and cybernetic institutional design</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/pnlz/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="Psilocybernetics Presentation"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation at the General Forum for Ethereum Localism</span>
            <span>Video coming soon</span>
          </div>
        </div>

        <div id="move-slow-fix-things" className="presentation-card">
          <h3>Move Slow & Fix Things: The Commons Stack Design Pattern</h3>
          <p>Design patterns for sustainable commons infrastructure</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/bnnf/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="Move Slow & Fix Things: Commons Stack Design Pattern"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation at the ReFi Unconf @ the Commons Hub Austria</span>
            <a href="https://www.youtube.com/live/i8qcg7FfpLM?si=onLcl8q5rz7cMViO&t=1362" target="_blank" rel="noopener noreferrer">
              Watch the full talk →
            </a>
          </div>
        </div>

        <div id="commons-stack-launch" className="presentation-card">
          <h3>Commons Stack Launch & Open Sourcing cadCAD</h3>
          <p>The launch of Commons Stack and the open sourcing of cadCAD for token engineering</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/hxac/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="Commons Stack Launch & Open Sourcing cadCAD"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation at the Token Engineering Global Gathering (TEGG)</span>
            <a href="https://youtu.be/qjdjX2m_p0Q?si=r2AXVnVyzCIxIOSc&t=20" target="_blank" rel="noopener noreferrer">
              Watch the full talk →
            </a>
          </div>
        </div>

        <div id="conviction-voting" className="presentation-card">
          <h3>New Tools for Dynamic Collective Intelligence: Conviction Voting & Variations</h3>
          <p>Exploring innovative voting mechanisms for collective decision-making in decentralized systems</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/fhos/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="New Tools for Dynamic Collective Intelligence"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation on Conviction Voting</span>
            <span>Video coming soon</span>
          </div>
        </div>

        <div id="polycentric-governance" className="presentation-card">
          <h3>Exploring Polycentric Governance in Web3 Ecosystems</h3>
          <p>Understanding multi-level governance structures in decentralized networks</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/zzoy/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="Exploring Polycentric Governance in Web3 Ecosystems"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation at the OpenWeb Hackathon</span>
            <a href="https://youtu.be/ZIWskNogafg?si=DmUbOQJaSRE1rdzq" target="_blank" rel="noopener noreferrer">
              Watch the full talk →
            </a>
          </div>
        </div>

        <div id="mycofi-myco-munnities" className="presentation-card">
          <h3>MycoFi for Myco-munnities</h3>
          <p>Exploring mycelial financial systems for community-based organizations</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/xoea/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="MycoFi for Myco-munnities"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation at CoFi Gathering in Liege</span>
            <span>Video coming soon</span>
          </div>
        </div>

        <div id="community-resilience" className="presentation-card">
          <h3>Building Community Resilience in an Age of Crisis</h3>
          <p>Internet outages during crises, such as wars or environmental disasters, can disrupt communication, education, and access to vital information. Preparing for such disruptions is essential for communities and organizations operating in challenging environments.</p>
          <div className="presentation-embed">
            <div style={{position: "relative", paddingTop: "max(60%, 324px)", width: "100%", height: 0}}>
              <iframe 
                style={{position: "absolute", border: "none", width: "100%", height: "100%", left: 0, top: 0}}
                src="https://online.fliphtml5.com/phqos/afbp/" 
                seamless={true}
                scrolling="no" 
                frameBorder="0" 
                allowTransparency={true}
                allowFullScreen={true}
                title="Building Community Resilience in an Age of Crisis"
              />
            </div>
          </div>
          <div className="presentation-meta">
            <span>Presentation at re:publica conference in May 2025</span>
            <a href="https://www.youtube.com/watch?v=rTOLk7k9Ad8" target="_blank" rel="noopener noreferrer">
              Watch the full talk →
            </a>
          </div>
        </div>
      </div>
    </main>
  )
}