import Link from 'next/link'
import DisclosureSection from '@/components/common/DisclosureSection'
import FooterLinkGroups from '@/components/common/FooterLinkGroups'
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 bg-white/90 backdrop-blur dark:border-gray-700 dark:bg-gray-900/90">
      <div className="container mx-auto px-4 py-4 sm:py-5">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div className="min-w-0 shrink-0 lg:max-w-xs">
            <div className="text-sm font-semibold text-gray-900 dark:text-white">DBIS Explorer</div>
            <p className="mt-1 text-xs leading-5 text-gray-600 dark:text-gray-400">
              Chain 138 explorer on Blockscout. Primary domain: <code>explorer.d-bis.org</code>.
            </p>
            <p className="mt-2 text-xs text-gray-500 dark:text-gray-500">© {year} DBIS</p>
          </div>

          <div className="hidden min-w-0 flex-1 lg:block">
            <FooterLinkGroups />
          </div>
        </div>

        <DisclosureSection
          title="Site navigation"
          alwaysCollapsible
          className="mt-3 lg:hidden"
        >
          <FooterLinkGroups />
        </DisclosureSection>

        <div className="mt-3 grid gap-2 sm:grid-cols-2">
          <DisclosureSection title="Public APIs" alwaysCollapsible className="rounded-lg border border-gray-200 p-3 dark:border-gray-800">
            <FooterPublicApiLinks compact />
          </DisclosureSection>

          <DisclosureSection title="Contact" alwaysCollapsible className="rounded-lg border border-gray-200 p-3 dark:border-gray-800">
            <div className="space-y-1.5 text-sm text-gray-600 dark:text-gray-400">
              <p>
                <a className={footerLinkClass} href="mailto:support@d-bis.org">
                  support@d-bis.org
                </a>
              </p>
              <p>
                <Link className={footerLinkClass} href="/topology">
                  Chain 138 map
                </Link>
                {' · '}
                <a className={footerLinkClass} href="/snap/" target="_blank" rel="noopener noreferrer">
                  Snap site
                </a>
              </p>
            </div>
          </DisclosureSection>
        </div>
      </div>
    </footer>
  )
}
