explorer-monorepo/frontend/src/components/explorer/FeatureLandingPage.tsx

import Link from 'next/link'
import { Card } from '@/libs/frontend-ui-primitives'
import type { ExplorerFeatureAction, ExplorerFeaturePage } from '@/data/explorerOperations'

function ActionLink({ action }: { action: ExplorerFeatureAction }) {
  const className = 'inline-flex items-center text-sm font-semibold text-primary-600 hover:underline'
  const label = `${action.label} ->`

  if (action.external) {
    return (
      <a href={action.href} className={className} target="_blank" rel="noopener noreferrer">
        {label}
      </a>
    )
  }

  return (
    <Link href={action.href} className={className}>
      {label}
    </Link>
  )
}

export default function FeatureLandingPage({ page }: { page: ExplorerFeaturePage }) {
  return (
    <div className="container mx-auto px-4 py-6 sm:py-8">
      <div className="mb-6 max-w-4xl sm:mb-8">
        <div className="mb-3 inline-flex rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-sky-700">
          {page.eyebrow}
        </div>
        <h1 className="mb-3 text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">
          {page.title}
        </h1>
        <p className="text-base leading-7 text-gray-600 dark:text-gray-400 sm:text-lg sm:leading-8">
          {page.description}
        </p>
      </div>

      {page.note ? (
        <Card className="mb-6 border border-amber-200 bg-amber-50/70 dark:border-amber-900/50 dark:bg-amber-950/20">
          <p className="text-sm leading-6 text-amber-950 dark:text-amber-100">
            {page.note}
          </p>
        </Card>
      ) : null}

      <div className="grid gap-4 lg:grid-cols-2">
        {page.actions.map((action) => (
          <Card key={`${action.title}-${action.href}`} className="border border-gray-200 dark:border-gray-700">
            <div className="flex h-full flex-col">
              <div className="text-base font-semibold text-gray-900 dark:text-white">
                {action.title}
              </div>
              <p className="mt-2 flex-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
                {action.description}
              </p>
              <div className="mt-4">
                <ActionLink action={action} />
              </div>
            </div>
          </Card>
        ))}
      </div>
    </div>
  )
}