{% extends 'base.html' %}

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

{% block head_extra %}
<meta name="description" content="Transparent pricing for AI agent infrastructure. Start free. Scale as you grow.">
<link rel="canonical" href="https://agentforms.io/pricing">
<meta property="og:type" content="website">
<meta property="og:url" content="https://agentforms.io/pricing">
<meta property="og:title" content="Pricing — AgentForms">
<meta property="og:description" content="Transparent pricing for AI agent infrastructure. Start free. Scale as you grow.">
<meta property="og:image" content="https://agentforms.io/static/og-image.png">
<meta property="og:site_name" content="AgentForms">
{% endblock %}

{% block content %}

<!-- PRICING -->
<section id="pricing">
    <div class="container">
        <div class="section-header center">
            <p class="section-label">Pricing</p>
            <h2 class="section-title">Plans for every scale</h2>
            <p class="section-sub">Start free. No credit card. Upgrade when you hit your limits.</p>
        </div>
        <div class="pricing-grid" style="max-width: 1100px; margin: 0 auto;">

            <!-- FREE -->
            <div class="feature" style="text-align:center;">
                <h3 style="color:var(--text-dim);">Free</h3>
                <div style="font-size:32px;font-weight:700;color:var(--text);margin-bottom:4px;">$0</div>
                <p style="margin-bottom:16px;">Try the API. No card needed.</p>
                <div style="text-align:left;font-size:13px;line-height:2;">
                    <div>✓ 50 form submissions/mo</div>
                    <div>✓ 2 deployable forms</div>
                    <div style="color:var(--text-dim);">✗ Document generation</div>
                    <div style="color:var(--text-dim);">✗ Action chains</div>
                </div>
                <a href="{{ url_for('auth.register') }}" class="btn" style="margin-top:20px;">Get Started</a>
            </div>

            <!-- STARTER -->
            <div class="feature" style="border-color:var(--accent);text-align:center;">
                <span class="badge" style="margin-bottom:8px;">Most Popular</span>
                <h3 style="color:var(--accent);">Starter</h3>
                <div style="font-size:32px;font-weight:700;color:var(--text);margin-bottom:4px;">$9<span style="font-size:16px;font-weight:400;color:var(--text-muted);">/mo</span></div>
                <p style="margin-bottom:16px;">For solo developers.</p>
                <div style="text-align:left;font-size:13px;line-height:2;">
                    <div>✓ 500 form submissions/mo</div>
                    <div>✓ 5 deployable forms</div>
                    <div>✓ 10 documents generated</div>
                    <div>✓ 1 action chain</div>
                    <div>✓ API access</div>
                    <div>✓ Custom branding</div>
                </div>
                <a href="{{ url_for('auth.register') }}" class="btn" style="margin-top:20px;">Start Free Trial</a>
            </div>

            <!-- PRO -->
            <div class="feature" style="text-align:center;">
                <h3 style="color:var(--text-dim);">Pro</h3>
                <div style="font-size:32px;font-weight:700;color:var(--text);margin-bottom:4px;">$29<span style="font-size:16px;font-weight:400;color:var(--text-muted);">/mo</span></div>
                <p style="margin-bottom:16px;">Production agent workflows.</p>
                <div style="text-align:left;font-size:13px;line-height:2;">
                    <div>✓ 5,000 form submissions/mo</div>
                    <div>✓ Unlimited deployable forms</div>
                    <div>✓ 100 documents generated</div>
                    <div>✓ 3 action chains</div>
                    <div>✓ Full API access</div>
                    <div>✓ Custom branding</div>
                </div>
                <a href="{{ url_for('auth.register') }}" class="btn" style="margin-top:20px;">Start Free Trial</a>
            </div>

            <!-- TEAMS -->
            <div class="feature" style="text-align:center;">
                <h3 style="color:var(--text-dim);">Teams</h3>
                <div style="font-size:32px;font-weight:700;color:var(--text);margin-bottom:4px;">$49<span style="font-size:16px;font-weight:400;color:var(--text-muted);">/mo</span></div>
                <p style="margin-bottom:16px;">Collaborate with your team.</p>
                <div style="text-align:left;font-size:13px;line-height:2;">
                    <div>✓ 25,000 form submissions/mo</div>
                    <div>✓ Unlimited deployable forms</div>
                    <div>✓ 500 documents generated</div>
                    <div>✓ 10 action chains</div>
                    <div>✓ Up to 5 team members</div>
                    <div>✓ Role-based access control</div>
                </div>
                <a href="{{ url_for('auth.register') }}" class="btn" style="margin-top:20px;">Start Free Trial</a>
            </div>

            <!-- TEAMS PLUS -->
            <div class="feature" style="text-align:center;">
                <h3 style="color:var(--text-dim);">Teams+</h3>
                <div style="font-size:32px;font-weight:700;color:var(--text);margin-bottom:4px;">$99<span style="font-size:16px;font-weight:400;color:var(--text-muted);">/mo</span></div>
                <p style="margin-bottom:16px;">Enterprise agent infrastructure.</p>
                <div style="text-align:left;font-size:13px;line-height:2;">
                    <div>✓ Unlimited submissions</div>
                    <div>✓ Unlimited deployable forms</div>
                    <div>✓ Unlimited documents</div>
                    <div>✓ Unlimited action chains</div>
                    <div>✓ Unlimited team members</div>
                    <div>✓ White-label everything</div>
                    <div>✓ SLA guarantee</div>
                </div>
                <a href="{{ url_for('auth.register') }}" class="btn" style="margin-top:20px;">Start Free Trial</a>
            </div>

        </div>
    </div>
</section>

<!-- WHAT'S INCLUDED -->
<section style="padding:60px 0 80px;border-top:1px solid var(--border);">
    <div class="container" style="max-width:700px;">
        <div class="section-header center">
            <h3 style="color:var(--text);margin-bottom:24px;">Every plan includes</h3>
        </div>
        <div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;text-align:left;">
            <div>
                <div style="font-weight:600;color:var(--accent);margin-bottom:4px;">API Access</div>
                <div style="font-size:13px;color:var(--text-muted);">Deploy forms, check quotas, and retrieve submissions via REST API.</div>
            </div>
            <div>
                <div style="font-weight:600;color:var(--accent);margin-bottom:4px;">Data Encryption</div>
                <div style="font-size:13px;color:var(--text-muted);">All PII encrypted at rest. Only you can decrypt your data.</div>
            </div>
            <div>
                <div style="font-weight:600;color:var(--accent);margin-bottom:4px;">Quota Endpoints</div>
                <div style="font-size:13px;color:var(--text-muted);">Check document and chain usage via API for billing integration.</div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ -->
<section style="padding:60px 0 80px;">
    <div class="container" style="max-width:700px;">
        <div class="section-header center">
            <h2 class="section-title" style="font-size:24px;">Common questions</h2>
        </div>
        <div style="text-align:left;">
            <details style="margin-bottom:12px;padding:16px;border:1px solid var(--border);border-radius:8px;">
                <summary style="cursor:pointer;font-weight:600;color:var(--text);">What happens when I hit my quota?</summary>
                <p style="margin-top:8px;font-size:14px;color:var(--text-muted);">Document generation and action chain creation return a 403 with upgrade details. Forms stay live but new gated features are blocked until you upgrade.</p>
            </details>
            <details style="margin-bottom:12px;padding:16px;border:1px solid var(--border);border-radius:8px;">
                <summary style="cursor:pointer;font-weight:600;color:var(--text);">Can I check my remaining quota via API?</summary>
                <p style="margin-top:8px;font-size:14px;color:var(--text-muted);">Yes — GET /documents/quota and GET /api/agent/quota return your current tier and usage counts.</p>
            </details>
            <details style="margin-bottom:12px;padding:16px;border:1px solid var(--border);border-radius:8px;">
                <summary style="cursor:pointer;font-weight:600;color:var(--text);">Can I change plans later?</summary>
                <p style="margin-top:8px;font-size:14px;color:var(--text-muted);">Yes — upgrade or downgrade at any time. Changes take effect immediately. No contracts, cancel anytime.</p>
            </details>
            <details style="margin-bottom:12px;padding:16px;border:1px solid var(--border);border-radius:8px;">
                <summary style="cursor:pointer;font-weight:600;color:var(--text);">How many documents and chains do I get?</summary>
                <p style="margin-top:8px;font-size:14px;color:var(--text-muted);">Documents: Free=0, Starter=10, Pro=100, Teams=500, Teams+=unlimited. Chains: Free=0, Starter=1, Pro=3, Teams=10, Teams+=unlimited.</p>
            </details>
        </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 %}
