'use client'

import Link from 'next/link'
import { Card } from '@/libs/frontend-ui-primitives'
import PageIntro from '@/components/common/PageIntro'
import DisclosureSection from '@/components/common/DisclosureSection'

const docsCards = [
  {
    title: 'Posture glossary',
    href: '/docs/posture-glossary',
    description: 'First-read definitions for x402, ISO-20022, forward-canonical, cW public-network, and related explorer badges.',
  },
  {
    title: 'Config compatibility keys',
    href: '/docs/posture-glossary#transportactive-config-compatibility',
    description: 'Methodology for public /config compatibility keys (transportActive, forward-canonical) and planned v2 alias mapping.',
  },
  {
    title: 'Public API access',
    href: '/docs/public-api-access',
    description: 'Read-only JSON endpoints, managed RPC keys on /access, and the current no-key policy for Blockscout reads.',
  },
  {
    title: 'GRU Guide',
    href: '/docs/gru',
    description: 'Understand GRU standards, x402 readiness, cW public-network posture, and forward-canonical versioning as surfaced by the explorer.',
  },
  {
    title: 'Transaction Evidence Matrix',
    href: '/docs/transaction-review',
    description: 'See how the explorer scores transaction evidence quality, decode richness, asset posture, and counterparty traceability.',
  },
  {
    title: 'Official protocol contracts',
    href: '/protocols',
    description: 'Chain 138 DODO, UniV2/V3, CCIP, Multicall3, and integration addresses from the official deploy registry.',
  },
  {
    title: 'Liquidity access',
    href: '/liquidity',
    description: 'Open the public liquidity and route access surface when you need execution context alongside the documentation.',
  },
  {
    title: 'Operations hub',
    href: '/operations',
    description: 'Move into bridge monitoring, route coverage, command-center views, and other public operational surfaces.',
  },
]

const policyLinks = [
  { label: 'Privacy policy', href: '/privacy.html' },
  { label: 'Terms of service', href: '/terms.html' },
  { label: 'Acknowledgments', href: '/acknowledgments.html' },
]

export default function DocsIndexPage() {
  return (
    <div className="container mx-auto px-4 py-4 sm:py-6">
      <PageIntro
        compact
        eyebrow="Explorer Documentation"
        title="Documentation"
        description="Public guides, methodology notes, and operational references for Chain 138."
        actions={[
          { href: '/docs/gru', label: 'GRU guide' },
          { href: '/operations', label: 'Operations' },
        ]}
      />

      <Card title="Explorer guides" className="mb-4">
        <div className="grid gap-3 sm:grid-cols-2">
          {docsCards.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="block rounded-xl border border-gray-200 bg-gray-50/70 px-3 py-3 hover:border-primary-300 dark:border-gray-700 dark:bg-gray-900/40"
            >
              <div className="text-sm font-semibold text-primary-600">{item.title}</div>
              <p className="mt-1 line-clamp-2 text-xs leading-5 text-gray-600 dark:text-gray-400">{item.description}</p>
            </Link>
          ))}
        </div>
      </Card>

      <DisclosureSection title="Policies, domains & support" defaultOpen={false} alwaysCollapsible>
        <div className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
          <p>
            Primary domain <code>explorer.d-bis.org</code>; Blockscout companion <code>blockscout.defi-oracle.io</code>.
            Support: <a href="mailto:support@d-bis.org" className="text-primary-600 hover:underline">support@d-bis.org</a>
          </p>
          <div className="flex flex-wrap gap-3">
            {policyLinks.map((item) => (
              <a key={item.href} href={item.href} className="text-primary-600 hover:underline">
                {item.label}
              </a>
            ))}
            <Link href="/search?q=cUSDT" className="text-primary-600 hover:underline">
              Verify cUSDT live
            </Link>
            <Link href="/topology" className="text-primary-600 hover:underline">
              Command center map
            </Link>
          </div>
        </div>
      </DisclosureSection>
    </div>
  )
}
