import Link from 'next/link'

const demos = [
  {
    title: 'Contact Grid',
    description: 'Searchable, sortable contact table with tags, avatars, and filters',
    href: '/contact-grid',
    icon: '👥',
    components: 'PageHeader · SearchBar · FilterChips · DataTable',
  },
  {
    title: 'Pipeline Board',
    description: 'Kanban-style sales pipeline with opportunity cards and stage columns',
    href: '/pipeline',
    icon: '📊',
    components: 'PageHeader · KanbanBoard',
  },
  {
    title: 'Campaign Stats',
    description: 'Email campaign performance dashboard with metrics and progress bars',
    href: '/campaign',
    icon: '📧',
    components: 'PageHeader · StatsGrid · MetricCard · ProgressBar · Card',
  },
  {
    title: 'Invoice Preview',
    description: 'Professional invoice with line items, totals, and action buttons',
    href: '/invoice',
    icon: '🧾',
    components: 'DetailHeader · SplitLayout · InfoBlock · LineItemsTable · KeyValueList · ActionBar',
  },
  {
    title: 'Playground',
    description: 'Paste any JSON tree and see it render live with the GHL component catalog',
    href: '/playground',
    icon: '🧪',
    components: 'Any catalog component',
  },
]

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-600 to-purple-700 p-6">
      <div className="max-w-4xl mx-auto">
        {/* Hero */}
        <div className="text-center mb-10 pt-8">
          <h1 className="text-4xl font-bold text-white mb-3">GHL × json-render Spike</h1>
          <p className="text-lg text-white/80 max-w-2xl mx-auto">
            Proof-of-concept: AI generates JSON trees from a component catalog, React renders them.
            Replacing ~5,000 lines of hand-coded HTML with a reusable, guardrailed system.
          </p>
          <div className="flex justify-center gap-4 mt-6">
            <div className="bg-white/10 rounded-lg px-4 py-2 text-white text-sm">
              <span className="font-semibold">20</span> catalog components
            </div>
            <div className="bg-white/10 rounded-lg px-4 py-2 text-white text-sm">
              <span className="font-semibold">12</span> action types
            </div>
            <div className="bg-white/10 rounded-lg px-4 py-2 text-white text-sm">
              <span className="font-semibold">4</span> demo apps
            </div>
          </div>
        </div>

        {/* Demo cards */}
        <div className="grid gap-4 sm:grid-cols-2">
          {demos.map(demo => (
            <Link
              key={demo.href}
              href={demo.href}
              className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow group"
            >
              <div className="text-3xl mb-3">{demo.icon}</div>
              <h2 className="text-lg font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors">
                {demo.title}
              </h2>
              <p className="text-sm text-gray-500 mt-1 mb-3">{demo.description}</p>
              <div className="text-xs text-gray-400 font-mono">{demo.components}</div>
            </Link>
          ))}
        </div>

        {/* Architecture note */}
        <div className="mt-10 bg-white/10 rounded-xl p-6 text-white/90 text-sm">
          <h3 className="font-semibold text-white mb-2">How it works</h3>
          <pre className="text-xs text-white/70 overflow-x-auto">
{`User Prompt → AI + Catalog (guardrailed) → JSON Tree → React Renderer → Polished UI

┌──────────────┐     ┌───────────────┐     ┌──────────────┐     ┌──────────────┐
│ "Show me the │────▶│ Claude + GHL  │────▶│  JSON Tree   │────▶│  React with  │
│  pipeline"   │     │   Catalog     │     │ (validated)  │     │  Tailwind UI │
└──────────────┘     └───────────────┘     └──────────────┘     └──────────────┘`}
          </pre>
        </div>
      </div>
    </div>
  )
}
