<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X-Component Syntax Demo</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            background: #f5f5f5;
        }
        .demo-section {
            background: white;
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .demo-section h2 {
            margin-top: 0;
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 0.5rem;
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
        .component-example {
            border: 1px solid #dee2e6;
            padding: 1rem;
            border-radius: 4px;
            background: #f8f9fa;
        }
        .component-example h3 {
            margin-top: 0;
            font-size: 0.9rem;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        code {
            background: #e9ecef;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
            font-size: 0.9em;
        }
        .badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        .badge-live { background: #d4edda; color: #155724; }
        .badge-html { background: #cce5ff; color: #004085; }
    </style>
</head>
<body>
    <h1>🎨 X-Component Syntax Demo</h1>
    <p>
        This page demonstrates the <strong>unified <code>&lt;x-*&gt;</code> syntax</strong> that works with
        both LiveComponents (interactive) and HTML Components (static).
    </p>

    <!-- LiveComponents Section -->
    <div class="demo-section">
        <h2>
            <span class="badge badge-live">LiveComponents</span>
            Interactive & Stateful
        </h2>
        <p>
            LiveComponents are <strong>interactive</strong> and maintain <strong>state</strong>.
            They support actions, real-time updates, and server-sent events.
        </p>

        <div class="demo-grid">
            <!-- Counter Component -->
            <div class="component-example">
                <h3>Counter Component</h3>
                <p>Simple counter with increment/decrement actions.</p>
                <x-counter id="demo-counter" initialValue="0" />
                <br>
                <code>&lt;x-counter id="demo-counter" initialValue="0" /&gt;</code>
            </div>

            <!-- DataTable Component -->
            <div class="component-example">
                <h3>DataTable Component</h3>
                <p>Interactive data table with pagination and sorting.</p>
                <x-datatable id="users-table" page="1" pageSize="10" />
                <br>
                <code>&lt;x-datatable id="users-table" page="1" pageSize="10" /&gt;</code>
            </div>

            <!-- Search Component -->
            <div class="component-example">
                <h3>Search Component</h3>
                <p>Live search with debouncing and results.</p>
                <x-search id="main-search" placeholder="Search..." />
                <br>
                <code>&lt;x-search id="main-search" placeholder="Search..." /&gt;</code>
            </div>
        </div>

        <h3>Type Coercion Examples</h3>
        <p>LiveComponents automatically convert attribute values to proper types:</p>
        <ul>
            <li><code>page="1"</code> → <code>int: 1</code></li>
            <li><code>enabled="true"</code> → <code>bool: true</code></li>
            <li><code>filters='["active"]'</code> → <code>array: ["active"]</code></li>
            <li><code>config='{"limit":10}'</code> → <code>object: {limit: 10}</code></li>
        </ul>
    </div>

    <!-- HTML Components Section -->
    <div class="demo-section">
        <h2>
            <span class="badge badge-html">HTML Components</span>
            Static & Fast
        </h2>
        <p>
            HTML Components are <strong>stateless</strong> and render to <strong>static HTML</strong>.
            Perfect for simple UI elements like buttons, badges, and cards.
        </p>

        <div class="demo-grid">
            <!-- Button Component -->
            <div class="component-example">
                <h3>Button Component</h3>
                <p>Styled buttons with variants.</p>
                <x-button variant="primary">Primary Button</x-button>
                <x-button variant="secondary">Secondary</x-button>
                <x-button variant="danger">Danger</x-button>
                <br><br>
                <code>&lt;x-button variant="primary"&gt;Primary Button&lt;/x-button&gt;</code>
            </div>

            <!-- Badge Component -->
            <div class="component-example">
                <h3>Badge Component</h3>
                <p>Small status indicators.</p>
                <x-badge variant="success">Active</x-badge>
                <x-badge variant="warning">Pending</x-badge>
                <x-badge variant="danger">Error</x-badge>
                <br><br>
                <code>&lt;x-badge variant="success"&gt;Active&lt;/x-badge&gt;</code>
            </div>

            <!-- Card Component -->
            <div class="component-example">
                <h3>Card Component</h3>
                <p>Content containers.</p>
                <x-card title="User Profile">
                    This is a card with a title and content.
                </x-card>
                <br>
                <code>&lt;x-card title="User Profile"&gt;...&lt;/x-card&gt;</code>
            </div>
        </div>
    </div>

    <!-- Mixed Usage Section -->
    <div class="demo-section">
        <h2>🔗 Mixed Usage</h2>
        <p>
            You can <strong>combine both types</strong> in the same template!
            The XComponentProcessor automatically detects which type to use.
        </p>

        <div class="component-example">
            <h3>Real-World Example</h3>
            <p>A typical dashboard widget combining static and interactive components:</p>

            <x-card title="User Statistics">
                <p>Current users online:</p>
                <x-counter id="online-users" initialValue="42" />

                <br><br>

                <x-button variant="primary">Refresh Stats</x-button>
                <x-button variant="secondary">Export Data</x-button>
            </x-card>

            <br>
            <pre><code>&lt;x-card title="User Statistics"&gt;
    &lt;p&gt;Current users online:&lt;/p&gt;
    &lt;x-counter id="online-users" initialValue="42" /&gt;

    &lt;x-button variant="primary"&gt;Refresh Stats&lt;/x-button&gt;
    &lt;x-button variant="secondary"&gt;Export Data&lt;/x-button&gt;
&lt;/x-card&gt;</code></pre>
        </div>
    </div>

    <!-- Benefits Section -->
    <div class="demo-section">
        <h2>✨ Benefits</h2>
        <div class="demo-grid">
            <div>
                <h3>🚀 Modern Syntax</h3>
                <p>Clean, Laravel/Tempest-inspired syntax that's familiar to modern developers.</p>
            </div>
            <div>
                <h3>🔄 Auto-Detection</h3>
                <p>Automatically determines if component is LiveComponent or HTML Component.</p>
            </div>
            <div>
                <h3>⚡ Type Safety</h3>
                <p>Automatic type coercion and prop validation for LiveComponents.</p>
            </div>
            <div>
                <h3>🎯 Single Syntax</h3>
                <p>One syntax for both stateful and stateless components.</p>
            </div>
            <div>
                <h3>🛡️ Error Handling</h3>
                <p>Helpful error messages in development, graceful failures in production.</p>
            </div>
            <div>
                <h3>📝 IDE Support</h3>
                <p>Easy to autocomplete and syntax highlight in modern editors.</p>
            </div>
        </div>
    </div>

    <!-- Documentation Section -->
    <div class="demo-section">
        <h2>📚 Documentation</h2>
        <p>
            For complete documentation, see
            <code>docs/claude/x-component-syntax.md</code>
        </p>

        <h3>Quick Reference</h3>
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: #f8f9fa;">
                    <th style="padding: 0.5rem; text-align: left; border: 1px solid #dee2e6;">Component Type</th>
                    <th style="padding: 0.5rem; text-align: left; border: 1px solid #dee2e6;">Syntax</th>
                    <th style="padding: 0.5rem; text-align: left; border: 1px solid #dee2e6;">Use Case</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding: 0.5rem; border: 1px solid #dee2e6;">LiveComponent</td>
                    <td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>&lt;x-name id="..." /&gt;</code></td>
                    <td style="padding: 0.5rem; border: 1px solid #dee2e6;">Interactive UI (datatables, forms, counters)</td>
                </tr>
                <tr>
                    <td style="padding: 0.5rem; border: 1px solid #dee2e6;">HTML Component</td>
                    <td style="padding: 0.5rem; border: 1px solid #dee2e6;"><code>&lt;x-name&gt;content&lt;/x-name&gt;</code></td>
                    <td style="padding: 0.5rem; border: 1px solid #dee2e6;">Static HTML (buttons, badges, cards)</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
