> ## Documentation Index
> Fetch the complete documentation index at: https://docs.switch.vaultera.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Support Matrix

> Complete overview of connector capabilities and supported features

<div className="min-h-screen">
  <div className="max-w-5xl mx-auto px-6 py-12">
    {(() => {
            const [activeTab, setActiveTab] = React.useState('payment-methods');

            return (
              <>
                {/* Header */}
                <div className="text-center mb-8">
                  <h1 className="text-3xl font-bold text-white mb-2">Support Matrix</h1>
                  <p className="text-sm text-gray-400">Complete overview of connector capabilities and supported features</p>
                </div>

                {/* Tab Buttons */}
                <div className="flex flex-wrap justify-center gap-2 mb-4">
                  <button
                    onClick={() => setActiveTab('payment-methods')}
                    className="cursor-pointer px-5 py-2 rounded-full text-sm font-medium transition-all"
                    style={activeTab === 'payment-methods' ? {backgroundColor: '#3b82f6', color: 'white'} : {backgroundColor: 'transparent', border: '1px solid #4b5563', color: 'white'}}
                  >
                    Payment Methods
                  </button>
                  <button
                    onClick={() => setActiveTab('transaction-flows')}
                    className="cursor-pointer px-5 py-2 rounded-full text-sm font-medium transition-all"
                    style={activeTab === 'transaction-flows' ? {backgroundColor: '#3b82f6', color: 'white'} : {backgroundColor: 'transparent', border: '1px solid #4b5563', color: 'white'}}
                  >
                    Transaction Flows
                  </button>
                </div>


                {/* Payment Methods Tab */}
                {activeTab === 'payment-methods' && (
                  <div className="mb-8">
                    <h2 className="text-2xl font-bold text-white mb-6">Payment Methods</h2>
                    <div className="rounded-xl shadow-sm overflow-x-auto" style={{border: '1px solid #374151'}}>
                      <table className="w-full" style={{tableLayout: 'fixed'}}>
                        <thead>
                          <tr style={{borderBottomWidth: '1px', borderBottomColor: '#374151'}}>
                            <th style={{width: '27%'}} className="px-4 py-4 text-left text-base font-semibold text-white">Connector</th>
                            <th style={{width: '14.6%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">3DS</div></th>
                            <th style={{width: '14.6%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">Credit</div></th>
                            <th style={{width: '14.6%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">Debit</div></th>
                            <th style={{width: '14.6%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">Apple Pay</div></th>
                            <th style={{width: '14.6%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">Google Pay</div></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr style={{borderBottom: '1px solid #374151'}}>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/STRAUMUR.svg" alt="Straumur" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" style={{filter: 'brightness(0) invert(1)'}} />
                                <span className="text-sm text-white font-medium">STRAUMUR</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full" style={{backgroundColor: '#ef4444'}}><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full" style={{backgroundColor: '#ef4444'}}><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" /></svg></span></div></td>
                          </tr>
                          <tr style={{borderBottom: '1px solid #374151'}}>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/VALITOR.svg" alt="Valitor" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" />
                                <span className="text-sm text-white font-medium">VALITOR</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                          </tr>
                          <tr style={{borderBottom: '1px solid #374151'}}>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/RAPYD.svg" alt="Rapyd" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" />
                                <span className="text-sm text-white font-medium">RAPYD</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                          </tr>
                          <tr style={{borderBottom: '1px solid #374151'}}>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/TEYA.svg" alt="Teya" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" />
                                <span className="text-sm text-white font-medium">TEYA</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full" style={{backgroundColor: '#ef4444'}}><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" /></svg></span></div></td>
                          </tr>
                          <tr>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/STRIPE.svg" alt="Stripe" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" />
                                <span className="text-sm text-white font-medium">STRIPE</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                )}

                {/* Transaction Flows Tab */}
                {activeTab === 'transaction-flows' && (
                  <div className="mb-8">
                    <h2 className="text-2xl font-bold text-white mb-6">Transaction Flow</h2>
                    <div className="rounded-xl shadow-sm overflow-x-auto" style={{border: '1px solid #374151'}}>
                      <table className="w-full" style={{tableLayout: 'fixed'}}>
                        <thead>
                          <tr style={{borderBottomWidth: '1px', borderBottomColor: '#374151'}}>
                            <th style={{width: '20%'}} className="px-4 py-4 text-left text-base font-semibold text-white">Connectors</th>
                            <th style={{width: '20%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">Authorization</div></th>
                            <th style={{width: '20%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">Capture</div></th>
                            <th style={{width: '20%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">Refund</div></th>
                            <th style={{width: '20%'}} className="py-4 text-base font-semibold text-white"><div className="flex justify-center">Recurring Payments</div></th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr style={{borderBottom: '1px solid #374151'}}>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/STRAUMUR.svg" alt="Straumur" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" style={{filter: 'brightness(0) invert(1)'}} />
                                <span className="text-sm text-white font-medium">STRAUMUR</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                          </tr>
                          <tr style={{borderBottom: '1px solid #374151'}}>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/VALITOR.svg" alt="Valitor" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" />
                                <span className="text-sm text-white font-medium">VALITOR</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                          </tr>
                          <tr style={{borderBottom: '1px solid #374151'}}>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/RAPYD.svg" alt="Rapyd" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" />
                                <span className="text-sm text-white font-medium">RAPYD</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full" style={{backgroundColor: '#3b82f6'}}><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg></span></div></td>
                          </tr>
                          <tr style={{borderBottom: '1px solid #374151'}}>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/TEYA.svg" alt="Teya" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" />
                                <span className="text-sm text-white font-medium">TEYA</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                          </tr>
                          <tr>
                            <td className="px-4 py-4">
                              <div className="flex items-center gap-3">
                                <img src="/logo/STRIPE.svg" alt="Stripe" className="w-8 h-8 rounded-lg object-contain flex-shrink-0" />
                                <span className="text-sm text-white font-medium">STRIPE</span>
                              </div>
                            </td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                            <td className="py-4"><div className="flex justify-center"><span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-green-500"><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span></div></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                )}

                {/* Legend */}
                <div className="rounded-xl p-6 mt-8" style={{border: '1px solid #374151'}}>
                  <h3 className="text-center text-lg font-semibold text-white mb-6">Legend</h3>
                  <div className="flex flex-wrap justify-center gap-8">
                    <div className="flex items-center gap-2">
                      <span className="inline-flex items-center justify-center w-7 h-7 rounded-full" style={{backgroundColor: '#22c55e'}}><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" /></svg></span>
                      <span className="text-sm text-white">Fully Supported</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="inline-flex items-center justify-center w-7 h-7 rounded-full" style={{backgroundColor: '#ef4444'}}><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M6 18L18 6M6 6l12 12" /></svg></span>
                      <span className="text-sm text-white">Not Supported</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="inline-flex items-center justify-center w-7 h-7 rounded-full" style={{backgroundColor: '#eab308'}}><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M12 9v2m0 4h.01" /></svg></span>
                      <span className="text-sm text-white">Connector Supports but We Don't</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <span className="inline-flex items-center justify-center w-7 h-7 rounded-full" style={{backgroundColor: '#3b82f6'}}><svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg></span>
                      <span className="text-sm text-white">In Progress</span>
                    </div>
                  </div>
                </div>
              </>
            );
          })()}
  </div>
</div>