feat: add click-to-navigate functionality for MEV refunds

- Make MEV refunds metric clickable, redirecting to protect.flashbots.net
- Add hover and active states for better UX
- Include keyboard accessibility (Enter/Space key support)
- Implement as per requirement to navigate to Protect site from docs

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: odysseus0

src/components/MevMetrics.module.css

@@ -32,6 +32,19 @@
   opacity: 0.3;
 }
 
+.clickable {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.clickable:hover {
+  opacity: 0.8;
+}
+
+.clickable:active {
+  opacity: 0.6;
+}
+
 @media (max-width: 996px) {
   .container {
     display: none !important;

src/components/MevMetrics.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './MevMetrics.module.css';
 
 interface MetricsResponse {
@@ -9,13 +10,15 @@ interface MetricsResponse {
 }
 
 export default function MevMetrics(): JSX.Element {
+  const { siteConfig } = useDocusaurusContext();
   const [data, setData] = useState<MetricsResponse | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchMetrics = async () => {
       try {
-        const response = await fetch('https://refund-metrics-dune-api.vercel.app/api/metrics');
+        const apiUrl = siteConfig.customFields?.refundMetricsApiUrl as string;
+        const response = await fetch(`${apiUrl}/api/metrics`);
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -42,11 +45,25 @@ export default function MevMetrics(): JSX.Element {
     return `${value.toFixed(2)} ETH`;
   };
 
+  const handleMevClick = () => {
+    window.open('https://protect.flashbots.net/', '_blank', 'noopener,noreferrer');
+  };
+
   return (
     <div className={styles.container}>
       <span className={styles.label}>Refund</span>
       <span className={styles.separator}>|</span>
-      <div className={styles.metric}>
+      <div 
+        className={`${styles.metric} ${styles.clickable}`}
+        onClick={handleMevClick}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            handleMevClick();
+          }
+        }}
+      >
         <span className={styles.label}>MEV:</span>
         <span className={`${styles.value} ${loading ? styles.loading : ''}`}>
           {loading ? '...' : data && formatValue(data.totalMevRefund)}