'use client'

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

const docsCards = [
  {
    title: 'GRU Guide',
    href: '/docs/gru',
    description: 'Understand GRU standards, x402 readiness, wrapped transport 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: '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-6 sm:py-8">
      <PageIntro
        eyebrow="Explorer Documentation"
        title="Documentation"
        description="Use the explorer’s public guides, methodology notes, and adjacent operational references from one canonical docs surface."
        actions={[
          { href: '/docs/gru', label: 'GRU guide' },
          { href: '/docs/transaction-review', label: 'Review matrix' },
          { href: '/operations', label: 'Operations hub' },
        ]}
      />

      <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
        <Card title="Explorer Guides">
          <div className="grid gap-4 md:grid-cols-2">
            {docsCards.map((item) => (
              <div key={item.href} className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900/40">
                <div className="text-base font-semibold text-gray-900 dark:text-white">{item.title}</div>
                <p className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">{item.description}</p>
                <div className="mt-4">
                  <Link href={item.href} className="text-primary-600 hover:underline">
                    Open guide →
                  </Link>
                </div>
              </div>
            ))}
          </div>
        </Card>

        <div className="space-y-6">
          <Card title="Verify These Guides Live">
            <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
              <p>
                The docs are meant to prove the explorer, not merely describe it. Each guide below links back into live Chain 138 pages where the
                documented signals can be inspected directly.
              </p>
              <div className="flex flex-wrap gap-3">
                <Link href="/search?q=cUSDT" className="text-primary-600 hover:underline">
                  Search cUSDT →
                </Link>
                <Link href="/tokens/0x93E66202A11B1772E55407B32B44e5Cd8eda7f22" className="text-primary-600 hover:underline">
                  Open cUSDT token page →
                </Link>
                <Link href="/transactions" className="text-primary-600 hover:underline">
                  Browse recent transactions →
                </Link>
              </div>
            </div>
          </Card>

          <Card title="Operator & Domains">
            <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
              <p>
                SolaceScan is the public Chain 138 explorer operated by DBIS / Defi Oracle. The explorer may be reached through
                <code> blockscout.defi-oracle.io</code> or <code> explorer.d-bis.org</code>.
              </p>
              <p>
                These domains are part of the same explorer and companion-tooling surface, including the Snap install path at
                <code> /snap/</code>. Support and policy notices are handled through
                <a href="mailto:support@d-bis.org" className="ml-1 text-primary-600 hover:underline">support@d-bis.org</a>.
              </p>
            </div>
          </Card>

          <Card title="Policies & Static Notes">
            <div className="space-y-3 text-sm">
              {policyLinks.map((item) => (
                <div key={item.href}>
                  <a href={item.href} className="text-primary-600 hover:underline">
                    {item.label} →
                  </a>
                </div>
              ))}
            </div>
          </Card>

          <Card title="Need Help?">
            <div className="space-y-3 text-sm text-gray-600 dark:text-gray-400">
              <p>
                The public explorer docs cover GRU posture, transaction review scoring, liquidity access, and navigation into the broader Chain 138 surfaces.
              </p>
              <p>
                Support: <a href="mailto:support@d-bis.org" className="text-primary-600 hover:underline">support@d-bis.org</a>
              </p>
              <p>
                Command center: <a href="/chain138-command-center.html" target="_blank" rel="noopener noreferrer" className="text-primary-600 hover:underline">open visual map →</a>
              </p>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}
