<?php
$data['title'] = 'Framex Demo Pages';
$data['metaDescription'] = 'Explore modern demo pages built with Framex PHP views, Markdown views, Tailwind CSS, and reusable UI classes.';
$data['bodyClass'] = 'bg-slate-50 text-slate-950 dark:bg-slate-950 dark:text-slate-100';

$demoPages = [
    [
        'title' => 'Blog List',
        'description' => 'A polished editorial index with featured content, filters, and responsive cards.',
        'href' => '/demo/blog-list',
        'label' => 'PHP view',
        'color' => 'bg-pre-blue',
    ],
    [
        'title' => 'Blog Post',
        'description' => 'A long-form article layout with author metadata, hero content, and related cards.',
        'href' => '/demo/blog-post',
        'label' => 'PHP view',
        'color' => 'bg-pre-emerald',
    ],
    [
        'title' => 'Markdown Page',
        'description' => 'A content page rendered from Markdown and automatically styled by `.prose`.',
        'href' => '/demo/page',
        'label' => 'MD view',
        'color' => 'bg-pre-amber',
    ],
];
?>

<main>
  <section class="section">
    <div class="contain">
      <div class="max-w-3xl">
        <p class="eyebrow">Demo library</p>
        <h1 class="mt-4 text-4xl font-bold text-gradient sm:text-6xl dark:text-white">
          Modern pages built with the Framex view system.
        </h1>
        <p class="mt-6 text-lg leading-8 text-slate-600 dark:text-slate-400">
          These demos show how PHP views and Markdown views can share the same template, navigation, footer, light/dark mode, and reusable Tailwind classes.
        </p>
      </div>

      <div class="mt-12 grid gap-5 md:grid-cols-3">
        <?php foreach ($demoPages as $page): ?>
          <a class="card group flex min-h-72 flex-col justify-between overflow-hidden p-0" href="<?= e($page['href']) ?>">
            <div class="<?= e($page['color']) ?> p-6">
              <span class="inline-flex rounded-md bg-white/70 px-3 py-1 text-xs font-semibold text-slate-700 ring-1 ring-black/5 dark:bg-black/20 dark:text-white dark:ring-white/10">
                <?= e($page['label']) ?>
              </span>
              <h2 class="mt-8 text-2xl font-bold text-current"><?= e($page['title']) ?></h2>
            </div>
            <div class="p-6">
              <p class="text-sm leading-6 text-slate-600 dark:text-slate-400"><?= e($page['description']) ?></p>
              <div class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-blue-600 group-hover:text-blue-500 dark:text-blue-400">
                Open demo
                <span aria-hidden="true">-></span>
              </div>
            </div>
          </a>
        <?php endforeach; ?>
      </div>
    </div>
  </section>

  <section class="section-tight border-y border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900/40">
    <div class="contain grid gap-5 md:grid-cols-4">
      <div class="card">
        <p class="text-3xl font-semibold text-slate-950 dark:text-white">4</p>
        <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Demo routes</p>
      </div>
      <div class="card">
        <p class="text-3xl font-semibold text-slate-950 dark:text-white">2</p>
        <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">View types</p>
      </div>
      <div class="card">
        <p class="text-3xl font-semibold text-slate-950 dark:text-white">4</p>
        <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Preset colors</p>
      </div>
      <div class="card">
        <p class="text-3xl font-semibold text-slate-950 dark:text-white">1</p>
        <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Shared layout</p>
      </div>
    </div>
  </section>
</main>
