{% extends 'base.html' %}

{% block title %}Features — AgentForms{% endblock %}

{% block head_extra %}
<meta name="description" content="Where AI builds communication tools on demand — intake forms, proposals, quotes, and reports. Deploy via API, share a link, get results.">
<link rel="canonical" href="https://agentforms.io/features">
{% endblock %}

{% block content %}
<h1 class="visually-hidden">Features</h1>
<!-- FEATURES -->
<section id="features">
    <div class="container">
        <div class="section-header center">
            <p class="section-label">Features</p>
            <h2 class="section-title">Communication tools your AI builds on demand</h2>
            <p class="section-sub">Intake forms capture data. Branded documents deliver value. Automation handles the rest.</p>
        </div>

        <!-- FEATURE 1: DOCUMENT GENERATION -->
        <div class="feature-section">
            <div class="feature feature-detail">
                <div>
                    <div class="feature-icon">
                        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                    </div>
                    <span class="feature-tag">tier-gated</span>
                    <h3>Branded Documents</h3>
                    <p>Form submissions automatically become professional quotes, proposals, invoices, and reports. Branded PDFs your clients actually want to read.</p>
                    <ul>
                        <li>✓ PDF & DOCX output</li>
                        <li>✓ Custom branded templates</li>
                        <li>✓ Variable insertion from form data</li>
                        <li>✓ Customer portal access</li>
                        <li>✓ Email delivery</li>
                    </ul>
                </div>
                <div class="feature-detail-visual">
                    <pre class="template-preview"><code class="language-text">
<span class="template-preview-title">TEMPLATE</span>
<span class="template-preview-line">{{ name }}</span>
<span class="template-preview-line">{{ service }}</span>
<span class="template-preview-line">{{ total }}</span>
<span class="template-preview-divider">{{ address }}, {{ city }}</span>
<span class="template-preview-note">→ renders as branded PDF</span>
                    </code></pre>
                </div>
            </div>
            <div class="feature-table-wrap">
                <table class="feature-table">
                    <caption>Document generation limits by tier</caption>
                    <thead>
                        <tr>
                            <th scope="col">Tier</th>
                            <th scope="col">Docs / mo</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>Free</td><td>0</td></tr>
                        <tr><td>Starter</td><td>10</td></tr>
                        <tr><td>Pro</td><td>100</td></tr>
                        <tr><td>Teams</td><td>500</td></tr>
                        <tr><td>Teams+</td><td class="unlimited">unlimited</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- FEATURE 2: ACTION CHAINS -->
        <div class="feature-section">
            <div class="feature feature-detail">
                <div>
                    <div class="feature-icon">
                        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h2"/><path d="M21 13v2a4 4 0 0 1-4 4h-2"/><polyline points="7 23 3 19 7 15"/><path d="M3 13h18"/></svg>
                    </div>
                    <span class="feature-tag">tier-gated</span>
                    <h3>Action Chains</h3>
                    <p>Automate what happens after a form is filled. Chain actions together — send a confirmation email, generate a quote PDF, forward data to a webhook.</p>
                    <ul>
                        <li>✓ Sequential action execution</li>
                        <li>✓ Email notifications</li>
                        <li>✓ Document generation trigger</li>
                        <li>✓ Webhook forwarding</li>
                        <li>✓ Conditional branching</li>
                    </ul>
                </div>
                <div class="feature-detail-visual">
                    <pre class="template-preview"><code class="language-text">
<span class="template-preview-title">CHAIN: on_submit</span>
<span class="template-preview-line">① → Send confirmation email</span>
<span class="template-preview-line">② → Generate quote PDF</span>
<span class="template-preview-line">③ → POST to webhook</span>
<span class="template-preview-note">→ runs automatically on submit</span>
                    </code></pre>
                </div>
            </div>
            <div class="feature-table-wrap">
                <table class="feature-table">
                    <caption>Action chain limits by tier</caption>
                    <thead>
                        <tr>
                            <th scope="col">Tier</th>
                            <th scope="col">Chains</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td>Free</td><td>0</td></tr>
                        <tr><td>Starter</td><td>1</td></tr>
                        <tr><td>Pro</td><td>3</td></tr>
                        <tr><td>Teams</td><td>10</td></tr>
                        <tr><td>Teams+</td><td class="unlimited">unlimited</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- FEATURE 3: AGENT I/O -->
        <div class="feature-section">
            <div class="feature feature-detail">
                <div>
                    <div class="feature-icon">
                        <svg aria-hidden="true" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                    </div>
                    <span class="feature-tag">api-first</span>
                    <h3>Deploy On Demand</h3>
                    <p>Your AI agent needs a form? Deploy one in milliseconds via API. Define the fields, attach automation, get back a shareable URL. The agent builds the tool — you just share it.</p>
                    <ul>
                        <li>✓ Deploy forms programmatically</li>
                        <li>✓ Define fields via JSON schema</li>
                        <li>✓ Attach action chains on deploy</li>
                        <li>✓ Structured submission JSON</li>
                        <li>✓ Quota endpoints for billing</li>
                    </ul>
                </div>
                <div class="feature-detail-visual">
                    <pre class="template-preview"><code class="language-json">
<span class="template-preview-title">POST /api/v2/forms</span>
<span class="template-preview-brace">{</span>
<span class="template-preview-indent">"title": <span class="template-preview-value">"Intake"</span>,</span>
<span class="template-preview-indent">"chain_id": <span class="template-preview-value">"ch_xyz"</span></span>
<span class="template-preview-brace">}</span>
<span class="template-preview-note">→ {"form_url": "https://af.io/f/abc"}</span>
                    </code></pre>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}