import gradio as gr


def build_page():
    with gr.Column(elem_id="about-page-content-wrapper"):
        # --- Section 1: About ---
        gr.HTML(
            """
            <h2>About</h2>
            <p>
                OpenHands Index tracks AI coding agent performance across software engineering benchmarks, providing a unified view of both accuracy and cost efficiency.
            </p>
            """
        )
        gr.Markdown("---", elem_classes="divider-line")

        # --- Section 2: Benchmark Details ---
        gr.HTML(
            """
            <h2>Benchmark Details</h2>
            <p>We evaluate agents across five categories:</p>
            <ul class="info-list">
                <li><strong>Issue Resolution:</strong> <a href="https://www.swebench.com/" target="_blank">SWE-bench</a></li>
                <li><strong>Frontend:</strong> <a href="https://github.com/OpenHands/SWE-bench-multimodal" target="_blank">SWE-bench Multimodal</a></li>
                <li><strong>Greenfield:</strong> <a href="https://github.com/commit-0/commit0" target="_blank">Commit0</a></li>
                <li><strong>Testing:</strong> <a href="https://github.com/logic-star-ai/swt-bench" target="_blank">SWT-bench</a></li>
                <li><strong>Information Gathering:</strong> <a href="https://huggingface.co/gaia-benchmark" target="_blank">GAIA</a></li>
            </ul>
            <p>
                <strong>Scoring:</strong> Average score is a macro-average across benchmarks (equal weighting). Cost is USD per task; agents without cost data are shown separately in plots.
            </p>
            """
        )
        gr.Markdown("---", elem_classes="divider-line")

        # --- Section 3: Resources ---
        gr.HTML(
            """
            <h2>Resources</h2>
            <ul class="info-list">
                <li><a href="https://github.com/OpenHands/OpenHands" target="_blank">OpenHands</a> - The main OpenHands repository</li>
                <li><a href="https://github.com/OpenHands/software-agent-sdk" target="_blank">Software Agent SDK</a> - The agent code used for evaluation</li>
                <li><a href="https://github.com/OpenHands/benchmarks" target="_blank">Benchmarks</a> - The benchmarking code</li>
                <li><a href="https://github.com/OpenHands/openhands-index-results" target="_blank">Results</a> - Raw evaluation results</li>
            </ul>
            """
        )
        gr.Markdown("---", elem_classes="divider-line")

        # --- Section 5: Contact ---
        gr.HTML(
            """
            <h2>Contact</h2>
            <p>
                Questions or feedback? Join us on <a href="https://dub.sh/openhands" target="_blank">Slack</a>.
            </p>
            """
        )
        gr.Markdown("---", elem_classes="divider-line")

        # --- Section 6: Acknowledgements ---
        gr.HTML(
            """
            <h2>Acknowledgements</h2>
            <p>
                The leaderboard interface is adapted from the 
                <a href="https://huggingface.co/spaces/allenai/asta-bench-leaderboard" target="_blank">AstaBench Leaderboard</a> 
                by Allen Institute for AI.
            </p>
            """
        )
        gr.Markdown("---", elem_classes="divider-line")

        # --- Section 7: Citation ---
        gr.HTML(
            """
            <h2>Citation</h2>
            <pre class="citation-block">
@misc{openhandsindex2025,
    title={OpenHands Index: A Comprehensive Leaderboard for AI Coding Agents},
    author={OpenHands Team},
    year={2025},
    howpublished={https://index.openhands.dev}
}</pre>
            """
        )