<?php
$data['title'] = 'Blog List Demo - Framex';
$data['metaDescription'] = 'A modern blog listing page demo built as a PHP view in Framex.';

$posts = [
    [
        'title' => 'Designing fast content systems with plain PHP',
        'category' => 'Architecture',
        'date' => 'May 12, 2026',
        'read' => '7 min read',
        'description' => 'A practical look at keeping site structure simple while still giving editors polished pages.',
        'color' => 'bg-pre-blue',
    ],
    [
        'title' => 'Markdown pages that look finished by default',
        'category' => 'Content',
        'date' => 'May 8, 2026',
        'read' => '5 min read',
        'description' => 'How automatic prose styling lets documentation and articles ship without custom templates.',
        'color' => 'bg-pre-emerald',
    ],
    [
        'title' => 'A small Tailwind design system for real websites',
        'category' => 'Design',
        'date' => 'May 4, 2026',
        'read' => '6 min read',
        'description' => 'Reusable sections, cards, buttons, and preset colors keep page building consistent.',
        'color' => 'bg-pre-amber',
    ],
    [
        'title' => 'Dark mode without making every page complicated',
        'category' => 'Frontend',
        'date' => 'April 28, 2026',
        'read' => '4 min read',
        'description' => 'Persisted preferences, system fallback, and theme-aware utility classes in one flow.',
        'color' => 'bg-pre-rose',
    ],
];
?>

<main>
  <section class="section">
    <div class="contain">
      <div class="grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-end">
        <div>
          <p class="eyebrow">Blog list demo</p>
          <h1 class="mt-4 text-4xl font-semibold leading-tight text-slate-950 sm:text-6xl dark:text-white">
            Editorial cards for a modern content index.
          </h1>
        </div>
        <p class="text-lg leading-8 text-slate-600 dark:text-slate-400">
          This page is a PHP view. It uses an array of posts, loops through the data, and renders a responsive grid without needing a separate component system.
        </p>
      </div>

      <div class="mt-10 flex flex-wrap gap-3">
        <span class="btn btn-secondary">All posts</span>
        <span class="btn btn-ghost">Architecture</span>
        <span class="btn btn-ghost">Content</span>
        <span class="btn btn-ghost">Design</span>
      </div>

      <div class="mt-10 grid gap-5 md:grid-cols-2">
        <?php foreach ($posts as $index => $post): ?>
          <article class="card overflow-hidden p-0 <?= $index === 0 ? 'md:col-span-2' : '' ?>">
            <div class="<?= e($post['color']) ?> p-6">
              <div class="flex flex-wrap items-center gap-3 text-sm">
                <span class="font-semibold"><?= e($post['category']) ?></span>
                <span class="opacity-60">/</span>
                <span class="opacity-80"><?= e($post['date']) ?></span>
              </div>
              <h2 class="mt-8 max-w-3xl text-2xl font-semibold leading-tight <?= $index === 0 ? 'sm:text-4xl' : '' ?>">
                <?= e($post['title']) ?>
              </h2>
            </div>
            <div class="p-6">
              <p class="text-sm leading-6 text-slate-600 dark:text-slate-400"><?= e($post['description']) ?></p>
              <div class="mt-6 flex items-center justify-between gap-4">
                <span class="text-sm text-slate-500 dark:text-slate-400"><?= e($post['read']) ?></span>
                <a class="btn btn-secondary" href="/demo/blog-post">Read post</a>
              </div>
            </div>
          </article>
        <?php endforeach; ?>
      </div>
    </div>
  </section>
</main>
