{% extends "base.html" %}

{% block content %}
<section id="home" class="hero">
    <div class="container">
        <h1>Matt's Lexicon Format</h1>
        <p class="tagline">A human-friendly DSL for ATProto Lexicons</p>
        <div class="cta-buttons">
            <a href="{{ get_url(path='@/playground.md') }}" class="btn btn-primary">Try it now</a>
            <a href="{{ get_url(path='/docs') }}" class="btn btn-primary">Read the Docs</a>
            <a href="{{ config.extra.github_url }}" class="btn btn-secondary">View Source</a>
        </div>
    </div>
</section>

<section id="example" class="example">
    <div class="container">
        <div class="code-comparison">
            <div class="code-block">
                <h3>com.example.thread.mlf</h3>
                <div class="code-content">
                    {{ section.extra.mlf_example | markdown | safe }}
                </div>
            </div>
            <div class="code-block">
                <h3>com/example/thread.json</h3>
                <div class="code-content">
                    {{ section.extra.json_example | markdown | safe }}
                </div>
            </div>
        </div>
    </div>
</section>

<section id="features" class="features">
    <div class="container">
        <h2>What is MLF?</h2>
        <div class="feature-list">
            <div class="feature">
                <h3>Human-Friendly Syntax</h3>
                <p>Clean, readable syntax inspired by TypeScript and Rust. Write lexicons the way you think about them, with full type safety and constraint validation.</p>
            </div>
            <div class="feature">
                <h3>100% ATProto Fidelity</h3>
                <p>Bidirectional conversion with ATProto JSON Lexicons. Everything that can be expressed in JSON can be expressed in MLF, and vice versa.</p>
            </div>
            <div class="feature">
                <h3>Rich Tooling</h3>
                <p>Command-line interface, WebAssembly library, tree-sitter grammar for editor integration (Neovim, Helix, VS Code, Emacs), and comprehensive error messages.</p>
            </div>
            <div class="feature">
                <h3>Type-Safe</h3>
                <p>Compile-time type checking catches errors before they become runtime problems. Constrained types ensure your data meets specifications.</p>
            </div>
        </div>
    </div>
</section>
{% endblock %}