---
// Demo homepage showcasing plugin functionality
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>EmDash Plugins Demo</title>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}
			body {
				font-family: system-ui, -apple-system, sans-serif;
				line-height: 1.6;
				color: #1a1a1a;
				max-width: 800px;
				margin: 0 auto;
				padding: 2rem;
			}
			h1 {
				font-size: 2.5rem;
				margin-bottom: 0.5rem;
			}
			.subtitle {
				color: #666;
				font-size: 1.25rem;
				margin-bottom: 2rem;
			}
			h2 {
				font-size: 1.5rem;
				margin-top: 2rem;
				margin-bottom: 1rem;
				color: #333;
			}
			.plugin-list {
				list-style: none;
			}
			.plugin {
				background: #f8f9fa;
				border-radius: 8px;
				padding: 1.5rem;
				margin-bottom: 1rem;
			}
			.plugin h3 {
				font-size: 1.25rem;
				margin-bottom: 0.5rem;
				color: #2563eb;
			}
			.plugin p {
				color: #555;
				margin-bottom: 0.75rem;
			}
			.plugin code {
				background: #e2e8f0;
				padding: 0.125rem 0.375rem;
				border-radius: 4px;
				font-size: 0.875rem;
			}
			.hooks {
				margin-top: 0.5rem;
				font-size: 0.875rem;
			}
			.hooks strong {
				color: #333;
			}
			.cta {
				display: inline-block;
				background: #2563eb;
				color: white;
				padding: 0.75rem 1.5rem;
				border-radius: 6px;
				text-decoration: none;
				font-weight: 500;
				margin-top: 1.5rem;
			}
			.cta:hover {
				background: #1d4ed8;
			}
			.order {
				background: #dbeafe;
				color: #1e40af;
				padding: 0.25rem 0.5rem;
				border-radius: 4px;
				font-size: 0.75rem;
				font-weight: 600;
				margin-left: 0.5rem;
			}
		</style>
	</head>
	<body>
		<h1>EmDash Plugins Demo</h1>
		<p class="subtitle">
			Demonstrating the plugin hook system with realistic plugins
		</p>

		<h2>Active Plugins</h2>
		<ul class="plugin-list">
			<li class="plugin">
				<h3>Auto-Slug <span class="order">Priority 10</span></h3>
				<p>
					Automatically generates URL-friendly slugs from titles. Handles unicode,
					removes special characters, and ensures clean URLs.
				</p>
				<div class="hooks">
					<strong>Hook:</strong> <code>content:beforeSave</code>
				</div>
			</li>

			<li class="plugin">
				<h3>SEO Demo <span class="order">Priority 50</span></h3>
				<p>
					Validates SEO fields (meta title, description) against length limits.
					Provides admin UI for SEO settings and dashboard widget.
				</p>
				<div class="hooks">
					<strong>Hook:</strong> <code>content:beforeSave</code>
				</div>
			</li>

			<li class="plugin">
				<h3>Reading Time <span class="order">Priority 80</span></h3>
				<p>
					Calculates reading time based on word count and images. Parses Portable
					Text content and stores result in the content data.
				</p>
				<div class="hooks">
					<strong>Hook:</strong> <code>content:beforeSave</code>
				</div>
			</li>

			<li class="plugin">
				<h3>Audit Log <span class="order">Priority 200</span></h3>
				<p>
					Tracks all content changes for compliance and debugging. Logs create,
					update, delete operations with timestamps.
				</p>
				<div class="hooks">
					<strong>Hooks:</strong>
					<code>content:beforeSave</code>,
					<code>content:afterSave</code>,
					<code>content:beforeDelete</code>,
					<code>media:afterUpload</code>
				</div>
			</li>

			<li class="plugin">
				<h3>Image Optimizer <span class="order">Priority 10</span></h3>
				<p>
					Validates image uploads (file type, size limits). Sanitizes filenames
					and adds timestamps for uniqueness.
				</p>
				<div class="hooks">
					<strong>Hooks:</strong>
					<code>media:beforeUpload</code>,
					<code>media:afterUpload</code>
				</div>
			</li>
		</ul>

		<h2>Hook Execution Order</h2>
		<p>
			When saving content, hooks execute in priority order (lower numbers first):
		</p>
		<ol style="margin: 1rem 0 1rem 1.5rem;">
			<li><strong>Auto-Slug (10)</strong> - Generates slug from title</li>
			<li><strong>Audit Log (1)</strong> - Captures "before" state for comparison</li>
			<li><strong>SEO (50)</strong> - Validates SEO field lengths</li>
			<li><strong>Reading Time (80)</strong> - Calculates reading time</li>
			<li><strong>Audit Log (200)</strong> - Logs the final saved state</li>
		</ol>

		<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
			<a href="/_emdash/admin" class="cta">Open Admin Panel</a>
			<a href="/posts" class="cta" style="background: #059669;">View Posts</a>
			<a href="/test-embeds" class="cta" style="background: #7c3aed;">Test Embeds</a>
		</div>
	</body>
</html>
