{% 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 %}
<!-- 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 style="max-width:900px;margin:0 auto 48px;">
            <div class="feature" style="display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:32px;">
                <div>
                    <div class="feature-icon" style="margin-bottom:16px;">
                        <svg 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 style="font-size:20px;margin-bottom:8px;">Branded Documents</h3>
                    <p style="margin-bottom:16px;">Form submissions automatically become professional quotes, proposals, invoices, and reports. Branded PDFs your clients actually want to read.</p>
                    <ul style="list-style:none;font-size:14px;color:var(--text-muted);line-height:2;">
                        <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 style="display:flex;align-items:center;">
                    <div style="background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:20px;font-family:var(--mono);font-size:12px;color:var(--text-dim);width:100%;">
                        <div style="color:var(--accent);margin-bottom:8px;font-weight:600;">TEMPLATE</div>
                        <div style="margin-bottom:4px;">{{ name }}</div>
                        <div style="margin-bottom:4px;">{{ service }}</div>
                        <div style="margin-bottom:4px;">{{ total }}</div>
                        <div style="border-top:1px solid var(--border);padding-top:8px;margin-top:8px;">{{ address }}, {{ city }}</div>
                        <div style="margin-top:12px;color:var(--text-dim);font-size:11px;">→ renders as branded PDF</div>
                    </div>
                </div>
            </div>
            <div style="text-align:center;margin-top:12px;">
                <table style="margin:0 auto;font-size:13px;border-collapse:collapse;">
                    <thead>
                        <tr style="border-bottom:1px solid var(--border);">
                            <th style="text-align:left;padding:8px 16px;color:var(--text-dim);">Tier</th>
                            <th style="text-align:center;padding:8px 16px;color:var(--text-dim);">Docs / mo</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td style="padding:6px 16px;">Free</td><td style="text-align:center;">0</td></tr>
                        <tr><td style="padding:6px 16px;">Starter</td><td style="text-align:center;">10</td></tr>
                        <tr><td style="padding:6px 16px;">Pro</td><td style="text-align:center;">100</td></tr>
                        <tr><td style="padding:6px 16px;">Teams</td><td style="text-align:center;">500</td></tr>
                        <tr><td style="padding:6px 16px;">Teams+</td><td style="text-align:center;color:var(--accent);">unlimited</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- FEATURE 2: ACTION CHAINS -->
        <div style="max-width:900px;margin:0 auto 48px;">
            <div class="feature" style="display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:32px;">
                <div>
                    <div class="feature-icon" style="margin-bottom:16px;">
                        <svg 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 style="font-size:20px;margin-bottom:8px;">Action Chains</h3>
                    <p style="margin-bottom:16px;">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 style="list-style:none;font-size:14px;color:var(--text-muted);line-height:2;">
                        <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 style="display:flex;align-items:center;">
                    <div style="background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:20px;font-family:var(--mono);font-size:12px;color:var(--text-dim);width:100%;">
                        <div style="color:var(--accent);margin-bottom:8px;font-weight:600;">CHAIN: on_submit</div>
                        <div style="margin-bottom:6px;">① → Send confirmation email</div>
                        <div style="margin-bottom:6px;">② → Generate quote PDF</div>
                        <div style="margin-bottom:6px;">③ → POST to webhook</div>
                        <div style="margin-top:12px;color:var(--text-dim);font-size:11px;">→ runs automatically on submit</div>
                    </div>
                </div>
            </div>
            <div style="text-align:center;margin-top:12px;">
                <table style="margin:0 auto;font-size:13px;border-collapse:collapse;">
                    <thead>
                        <tr style="border-bottom:1px solid var(--border);">
                            <th style="text-align:left;padding:8px 16px;color:var(--text-dim);">Tier</th>
                            <th style="text-align:center;padding:8px 16px;color:var(--text-dim);">Chains</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td style="padding:6px 16px;">Free</td><td style="text-align:center;">0</td></tr>
                        <tr><td style="padding:6px 16px;">Starter</td><td style="text-align:center;">1</td></tr>
                        <tr><td style="padding:6px 16px;">Pro</td><td style="text-align:center;">3</td></tr>
                        <tr><td style="padding:6px 16px;">Teams</td><td style="text-align:center;">10</td></tr>
                        <tr><td style="padding:6px 16px;">Teams+</td><td style="text-align:center;color:var(--accent);">unlimited</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- FEATURE 3: AGENT I/O -->
        <div style="max-width:900px;margin:0 auto 48px;">
            <div class="feature" style="display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:32px;">
                <div>
                    <div class="feature-icon" style="margin-bottom:16px;">
                        <svg 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 style="font-size:20px;margin-bottom:8px;">Deploy On Demand</h3>
                    <p style="margin-bottom:16px;">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 style="list-style:none;font-size:14px;color:var(--text-muted);line-height:2;">
                        <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 style="display:flex;align-items:center;">
                    <div style="background:var(--bg-elevated);border:1px solid var(--border);border-radius:8px;padding:20px;font-family:var(--mono);font-size:12px;color:var(--text-dim);width:100%;overflow-x:auto;">
                        <div style="color:var(--accent);margin-bottom:8px;font-weight:600;">POST /api/v2/forms</div>
                        <div style="margin-bottom:4px;"><span style="color:#c678dd;">{</span></div>
                        <div style="margin-left:16px;margin-bottom:2px;">"title": <span style="color:var(--accent);">"Intake"</span>,</div>
                        <div style="margin-left:16px;margin-bottom:2px;">"chain_id": <span style="color:var(--accent);">"ch_xyz"</span></div>
                        <div><span style="color:#c678dd;">}</span></div>
                        <div style="margin-top:12px;color:var(--text-dim);font-size:11px;">→ {"form_url": "https://af.io/f/abc"}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FOOTER -->
<footer>
    <div class="container">
        <div class="footer-inner">
            <span class="footer-copy">&copy; 2026 AgentForms</span>
            <div class="footer-links">
                <a href="/features">Features</a>
                <a href="/pricing">Pricing</a>
                <a href="/api/docs">Docs</a>
            {% if session.get('user_id') %}
                <a href="{{ url_for('auth.dashboard') }}">Dashboard</a>
            {% else %}
                <a href="{{ url_for('auth.login') }}">Sign in</a>
                <a href="{{ url_for('auth.register') }}">Sign up</a>
            {% endif %}
                <a href="/privacy">Privacy</a>
                <a href="/terms">Terms</a>
            </div>
        </div>
    </div>
</footer>
{% endblock %}
