explorer-monorepo/frontend/src/components/common/Footer.tsx

import Link from 'next/link'
import FooterPublicApiLinks from '@/components/common/FooterPublicApiLinks'

const footerLinkClass =
  'text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors'

export default function Footer() {
  const year = new Date().getFullYear()

  return (
    <footer className="mt-auto border-t border-gray-200 dark:border-gray-700 bg-white/90 dark:bg-gray-900/90 backdrop-blur">
      <div className="container mx-auto px-4 py-6 sm:py-8">
        <div className="grid gap-4 sm:gap-6 md:grid-cols-2 xl:grid-cols-4">
          <div className="space-y-3 rounded-xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-800 dark:bg-gray-900/40 md:border-0 md:bg-transparent md:p-0">
            <div className="text-base font-semibold text-gray-900 dark:text-white sm:text-lg">
              DBIS Explorer
            </div>
            <p className="max-w-xl text-sm leading-6 text-gray-600 dark:text-gray-400">
              Built on Blockscout for the DBIS Chain 138 explorer surface.
              Explorer data is powered by Blockscout, Chain 138 RPC, and the companion MetaMask Snap.
            </p>
            <p className="max-w-xl text-xs leading-5 text-gray-500 dark:text-gray-500">
              Primary public explorer access is served at <code>explorer.d-bis.org</code>.
              <code> blockscout.defi-oracle.io</code> is the Blockscout companion domain for the same Chain 138 explorer surface.
            </p>
            <p className="text-xs text-gray-500 dark:text-gray-500">
              © {year} DBIS. All rights reserved.
            </p>
          </div>

          <div className="rounded-xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-800 dark:bg-gray-900/40 md:border-0 md:bg-transparent md:p-0">
            <div className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
              Resources
            </div>
            <ul className="space-y-2 text-sm">
              <li><Link className={footerLinkClass} href="/search">Search</Link></li>
              <li><Link className={footerLinkClass} href="/docs">Documentation</Link></li>
              <li><Link className={footerLinkClass} href="/blocks">Blocks</Link></li>
              <li><Link className={footerLinkClass} href="/transactions">Transactions</Link></li>
              <li><Link className={footerLinkClass} href="/tokens">Tokens</Link></li>
              <li><Link className={footerLinkClass} href="/addresses">Addresses</Link></li>
              <li><Link className={footerLinkClass} href="/watchlist">Watchlist</Link></li>
              <li><Link className={footerLinkClass} href="/access">Account access</Link></li>
              <li><Link className={footerLinkClass} href="/wallet">Wallet tools</Link></li>
              <li><Link className={footerLinkClass} href="/operations">Operations hub</Link></li>
              <li><Link className={footerLinkClass} href="/bridge">Bridge</Link></li>
              <li><Link className={footerLinkClass} href="/routes">Routes</Link></li>
              <li><Link className={footerLinkClass} href="/liquidity">Liquidity</Link></li>
              <li><Link className={footerLinkClass} href="/pools">Pools</Link></li>
              <li><Link className={footerLinkClass} href="/analytics">Analytics</Link></li>
              <li><Link className={footerLinkClass} href="/operator">Operator</Link></li>
              <li><Link className={footerLinkClass} href="/system">System</Link></li>
              <li><Link className={footerLinkClass} href="/weth">WETH</Link></li>
              <li><a className={footerLinkClass} href="/privacy.html">Privacy Policy</a></li>
              <li><a className={footerLinkClass} href="/terms.html">Terms of Service</a></li>
              <li><a className={footerLinkClass} href="/acknowledgments.html">Acknowledgments</a></li>
            </ul>
          </div>


          <div className="rounded-xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-800 dark:bg-gray-900/40 md:border-0 md:bg-transparent md:p-0">
            <div className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
              Public APIs
            </div>
            <FooterPublicApiLinks />
            <p className="mt-3 text-xs leading-5 text-gray-500 dark:text-gray-500">
              Read-only JSON endpoints on the public explorer domain. No API key required.
            </p>
          </div>

          <div className="rounded-xl border border-gray-200 bg-gray-50/80 p-4 dark:border-gray-800 dark:bg-gray-900/40 md:border-0 md:bg-transparent md:p-0">
            <div className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
              Contact
            </div>
            <div className="space-y-2 text-sm text-gray-600 dark:text-gray-400">
              <p>
                Support:{' '}
                <a className={footerLinkClass} href="mailto:support@d-bis.org">
                  support@d-bis.org
                </a>
              </p>
              <p>
                Snap site:{' '}
                <a className={footerLinkClass} href="/snap/" target="_blank" rel="noopener noreferrer">
                  /snap/ on the current explorer domain
                </a>
              </p>
              <p>
                Command center:{' '}
                <a className={footerLinkClass} href="/chain138-command-center.html" target="_blank" rel="noopener noreferrer">
                  Chain 138 visual map
                </a>
              </p>
              <p className="text-xs leading-5 text-gray-500 dark:text-gray-500">
                Questions about the explorer, chain metadata, route discovery, or liquidity access
                can be sent to the support mailbox above.
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}