function Dialog({onClose}) {
  return (
    <div className="popup-overlay" onClick={onClose}>
      <div className="popup-content" onClick={e => e.stopPropagation()}>
        <button className="popup-close-button" onClick={onClose}>×</button>
        <h2 id="dialog-title" className="dialog-title-text">Details About This Demo</h2>
        <p>See how this demo works by inspecting the <a href="https://github.com/Google-Health/medgemma/tree/main/notebooks/ehr_navigator_agent.ipynb" target="_blank" rel="noopener noreferrer">colab version <img className="hf-logo" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Colaboratory_SVG_Logo.svg" /></a> of it. The data used in this demo is synthetic and generated by <a href="https://github.com/synthetichealth/synthea" target="_blank" rel="noopener noreferrer">Synthea</a>. You can access the data via this <a href="https://console.cloud.google.com/healthcare/fhirviewer/us-central1/public/fhirStores/synthetic-patients/browse?project=hai-cd3-foundations" target="_blank" rel="noopener noreferrer">this FHIR store</a>.</p>
        <p><b>The Model:</b> This demo features Google's MedGemma-27B, a Gemma-based model fine-tuned for comprehending medical text. It demonstrates MedGemma's ability to accelerate the development of AI-powered healthcare applications by offering advanced interpretation of medical data.</p>
        <p><b>Accessing and Using the Model:</b> Google's MedGemma-27B is available on <a href="https://huggingface.co/collections/google/medgemma-release" target="_blank" rel="noopener noreferrer">HuggingFace<img className="hf-logo" src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg" /></a> and is easily deployable via&nbsp;<a href="https://console.cloud.google.com/vertex-ai/publishers/google/model-garden/medgemma" target="_blank" rel="noopener noreferrer">Model Garden <img className="hf-logo" src="https://www.gstatic.com/cloud/images/icons/apple-icon.png" /></a>. Learn more about using the model and its limitations on the <a href="https://developers.google.com/health-ai-developer-foundations?referral=appoint-ready" target="_blank" rel="noopener noreferrer">HAI-DEF developer site</a>.</p>
        <p><b>Like this Demo:</b> If you find this demonstration valuable, kindly like it on HuggingFace.</p>
        <p><b>Explore More Demos:</b> Discover additional demonstrations on HuggingFace Spaces or via Colabs:</p>
        <ul>
          <li><a href="https://huggingface.co/collections/google/hai-def-concept-apps-6837acfccce400abe6ec26c1" target="_blank" rel="noopener noreferrer">Collection of concept apps <img className="hf-logo" src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.svg" /></a> built around HAI-DEF open models to inspire the community.</li>
          <li><a href="https://github.com/Google-Health/medgemma/tree/main/notebooks/fine_tune_with_hugging_face.ipynb" target="_blank" rel="noopener noreferrer">Finetune MedGemma Colab <img className="hf-logo" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Google_Colaboratory_SVG_Logo.svg" /></a>- See an example of how to fine-tune this model.</li>
        </ul>
        <p>For more technical details about this demo, please refer to the <a href=" https://huggingface.co/spaces/google/ehr-navigator-agent-with-medgemma/blob/main/README.md#table-of-contents" target="_blank" rel="noopener noreferrer">README</a> file in the repository.</p>
        <div className="popup-footer">
          <button className="popup-button" onClick={onClose}>Close</button>
        </div>
      </div>
    </div>
  );
}