canvas-website/src/routes/Resilience.tsx

export function Resilience() {
  return (
    <main>
      <header>
        <a href="/">Jeff Emmett</a>
      </header>
      
      <div className="presentation-info">
        <h1>Building Community Resilience in an Age of Crisis</h1>
        <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>
        <p>
          This presentation by Jeff Emmett and Fadia ElGharib explores strategies for building resilient communication networks 
          and maintaining access to critical information when traditional internet infrastructure fails.
        </p>
      </div>

      <div className="presentation-embed">
        <h2>Full Presentation</h2>
        <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="video-clips">
        <h2>Video Clips</h2>
        
        <div className="video-section">
          <h3>Full Talk at re:publica Conference</h3>
          <div className="video-container">
            <iframe 
              width="560" 
              height="315" 
              src="https://www.youtube.com/embed/rTOLk7k9Ad8?si=Ye0gmEg_JhWbxS2a" 
              title="YouTube video player" 
              frameBorder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
              referrerPolicy="strict-origin-when-cross-origin" 
              allowFullScreen
            />
          </div>
        </div>

        <div className="video-section">
          <h3>Clip 1: How can we mitigate crisis as a global community?</h3>
          <div className="video-container">
            <iframe 
              width="560" 
              height="315" 
              src="https://www.youtube.com/embed/_ZVzlTzkv8Q?si=zKq2PatVXDDsC-71" 
              title="YouTube video player" 
              frameBorder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
              referrerPolicy="strict-origin-when-cross-origin" 
              allowFullScreen
            />
          </div>
        </div>

        <div className="video-section">
          <h3>Clip 2: The moral imperative for collective harm reduction</h3>
          <div className="video-container">
            <iframe 
              width="560" 
              height="315" 
              src="https://www.youtube.com/embed/sriN8AC_EKc?si=7lQS1gEHtEMXWjzD" 
              title="YouTube video player" 
              frameBorder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
              referrerPolicy="strict-origin-when-cross-origin" 
              allowFullScreen
            />
          </div>
        </div>

        <div className="video-section">
          <h3>Clip 3: The need for protocols of community resilience</h3>
          <div className="video-container">
            <iframe 
              width="560" 
              height="315" 
              src="https://www.youtube.com/embed/CufzFR_-JOg?si=kmhN39UaZskAyFCh" 
              title="YouTube video player" 
              frameBorder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
              referrerPolicy="strict-origin-when-cross-origin" 
              allowFullScreen
            />
          </div>
        </div>

        <div className="video-section">
          <h3>Clip 4: Cosmo-localism and protocols of community care</h3>
          <div className="video-container">
            <iframe 
              width="560" 
              height="315" 
              src="https://www.youtube.com/embed/IjMqssomIww?si=veLdLpGcdsyMRkey" 
              title="YouTube video player" 
              frameBorder="0" 
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
              referrerPolicy="strict-origin-when-cross-origin" 
              allowFullScreen
            />
          </div>
        </div>
      </div>

      <div className="presentation-meta">
        <p>
          <strong>Event:</strong> re:publica conference, May 2025<br />
          <strong>Location:</strong> Berlin, Germany<br />
          <strong>Topic:</strong> Building Community Resilience in an Age of Crisis
        </p>
        <p>
          <a href="/presentations">← Back to all presentations</a>
        </p>
      </div>
    </main>
  )
}