{% extends 'base.html' %}

{% block title %}AgentForms — Collect data and generate documents for your AI agent{% endblock %}

{% block head_extra %}
<meta name="description" content="AI agents can't collect data from humans or produce client-ready documents. AgentForms fixes both — deploy forms, generate branded PDFs, and chain automations in one API call.">
<link rel="canonical" href="https://agentforms.io/">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://agentforms.io/">
<meta property="og:title" content="AgentForms — Collect Data & Generate Documents for AI Agents">
<meta property="og:description" content="AI agents can't collect data from humans or produce client-ready documents. AgentForms fixes both — deploy forms, generate branded PDFs, and chain automations in one API call.">
<meta property="og:image" content="https://agentforms.io/static/favicon.jpg">
<meta property="og:site_name" content="AgentForms">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="AgentForms — Collect Data & Generate Documents for AI Agents">
<meta name="twitter:description" content="AI agents can't collect data from humans or produce client-ready documents. AgentForms fixes both — deploy forms, generate branded PDFs, and chain automations in one API call.">
<meta name="twitter:image" content="https://agentforms.io/static/og-image.png">

<!-- Structured Data (JSON-LD) -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "AgentForms",
    "url": "https://agentforms.io",
    "description": "AI agents can't collect data from humans or produce client-ready documents. AgentForms fixes both — deploy forms, generate branded PDFs, and chain automations in one API call.",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Web",
    "offers": [
        {"@type": "Offer", "price": "0", "priceCurrency": "USD", "name": "Free"},
        {"@type": "Offer", "price": "9", "priceCurrency": "USD", "name": "Starter"},
        {"@type": "Offer", "price": "29", "priceCurrency": "USD", "name": "Pro"},
        {"@type": "Offer", "price": "49", "priceCurrency": "USD", "name": "Teams"},
        {"@type": "Offer", "price": "99", "priceCurrency": "USD", "name": "Teams+"}
    ],
    "author": {
        "@type": "Organization",
        "name": "AgentForms",
        "url": "https://agentforms.io"
    }
}
</script>
<style nonce="{{ csp_nonce }}">
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
        --bg: #0a0a0a;
        --bg-card: #111111;
        --bg-elevated: #1a1a1a;
        --text: #e5e5e5;
        --text-muted: #888888;
        --text-dim: #555555;
        --accent: #10b981;
        --accent-bright: #059669;
        --accent-dim: rgba(16, 185, 129, 0.1);
        --border: #222222;
        --border-light: #333333;
        --success: #22c55e;
        --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', Consolas, monospace;
    }

    html { scroll-behavior: smooth; }

    body {
        font-family: var(--font);
        font-size: 15px;
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }

    .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

    /* BUTTONS */
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        padding: 11px 24px;
        background: var(--accent);
        color: #fff;
        text-decoration: none; border-radius: 6px; font-size: 14px;
        font-weight: 600; border: none; cursor: pointer;
        transition: background 0.15s, box-shadow 0.15s;
        font-family: var(--font);
        box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .btn:hover {
        background: var(--accent-bright);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }
    .btn-lg {
        padding: 14px 32px;
        font-size: 16px;
        border-radius: 8px;
    }
    .btn-outline {
        background: transparent;
        border: 1.5px solid var(--border-light);
        color: var(--text);
        box-shadow: none;
    }
    .btn-outline:hover {
        border-color: #555;
        color: var(--text);
        background: rgba(255,255,255,0.03);
    }

    /* HERO */
    .hero {
        padding: 160px 0 100px;
        text-align: center;
        position: relative;
    }
    .hero::before {
        content: '';
        position: absolute;
        top: -200px; left: 50%; transform: translateX(-50%);
        width: 800px; height: 800px;
        background: radial-gradient(ellipse, rgba(16, 185, 129, 0.06) 0%, transparent 60%);
        pointer-events: none;
    }
    .badge {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 6px 16px;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.2);
        border-radius: 6px;
        font-size: 12px; color: var(--accent);
        margin-bottom: 32px;
        font-family: var(--mono);
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .badge-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--accent);
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }
    .hero h1 {
        font-size: clamp(36px, 7vw, 68px);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.05;
        margin-bottom: 24px;
        color: var(--text);
    }
    .hero h1 .accent {
        color: var(--accent);
    }
    .hero-sub {
        font-size: clamp(16px, 2vw, 20px);
        color: var(--text-muted);
        max-width: 640px;
        margin: 0 auto 40px;
        line-height: 1.6;
    }
    .hero-actions {
        display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
        margin-bottom: 20px;
    }
    .hero-note { font-size: 13px; color: var(--text-dim); }

    /* CODE PREVIEW */
    .code-preview {
        max-width: 640px;
        margin: 60px auto 0;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        overflow: hidden;
        text-align: left;
    }
    .code-header {
        display: flex; align-items: center; gap: 8px;
        padding: 12px 16px;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
    }
    .code-dot {
        width: 10px; height: 10px; border-radius: 50%;
    }
    .code-dot.red { background: #ff5f57; }
    .code-dot.yellow { background: #febc2e; }
    .code-dot.green { background: #28c840; }
    .code-title {
        font-size: 12px; color: var(--text-dim); margin-left: 8px;
        font-family: var(--mono);
    }
    .code-body {
        padding: 20px;
        font-family: var(--mono);
        font-size: 13px;
        line-height: 1.7;
        color: var(--text-muted);
        overflow-x: auto;
    }
    .code-body .comment { color: var(--text-dim); }
    .code-body .keyword { color: #c678dd; }
    .code-body .string { color: var(--accent); }
    .code-body .method { color: #61afef; }
    .code-body .param { color: #e5c07b; }

    /* SECTION */
    section { padding: 80px 0; }
    .section-label {
        display: inline-flex; align-items: center; gap: 8px;
        font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.12em; color: var(--text-dim);
        margin-bottom: 16px;
        font-family: var(--font);
    }
    .section-label::before {
        content: '';
        width: 8px; height: 8px;
        background: var(--accent);
        border-radius: 2px;
        opacity: 0.5;
    }
    .section-title {
        font-size: clamp(24px, 3.5vw, 36px);
        font-weight: 700; letter-spacing: -0.02em;
        color: var(--text); margin-bottom: 12px; line-height: 1.15;
    }
    .section-sub {
        font-size: 17px; color: var(--text-muted); max-width: 520px; line-height: 1.5;
    }
    .section-header { margin-bottom: 48px; }
    .section-header.center { text-align: center; }
    .section-header.center .section-label {
        justify-content: center;
    }
    .section-header.center .section-sub { margin: 0 auto; }

    /* PROBLEM SECTION */
    .problem-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    }
    .problem {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 28px 24px;
    }
    .problem h3 {
        font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px;
    }
    .problem p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
    .problem-icon {
        width: 44px; height: 44px; border-radius: 10px;
        background: rgba(239, 68, 68, 0.08);
        display: flex; align-items: center; justify-content: center;
        margin-bottom: 16px;
        font-size: 20px; color: #ef4444;
    }

    /* FEATURES GRID */
    .features-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    }
    .feature {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 28px 24px;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    }
    .feature:hover {
        border-color: var(--border-light);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transform: translateY(-2px);
    }
    .feature-icon {
        width: 44px; height: 44px; border-radius: 10px;
        background: var(--accent-dim);
        display: flex; align-items: center;
        justify-content: center; margin-bottom: 16px;
        font-size: 18px; color: var(--accent);
    }
    .feature h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
    .feature p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
    .feature-tag {
        display: inline-block;
        font-size: 11px; font-family: var(--mono);
        color: var(--accent);
        background: var(--accent-dim);
        padding: 2px 8px; border-radius: 4px;
        margin-bottom: 12px;
    }

    /* USE CASE */
    .use-case-row {
        display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
        align-items: center; margin-bottom: 60px;
    }
    .use-case-row:last-child { margin-bottom: 0; }
    .use-case-text h3 {
        font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 12px;
        letter-spacing: -0.01em;
    }
    .use-case-text p {
        font-size: 15px; color: var(--text-muted); line-height: 1.6;
    }
    .use-case-text ul {
        list-style: none; padding: 0; margin-top: 16px;
    }
    .use-case-text ul li {
        padding: 6px 0;
        font-size: 14px; color: var(--text-muted);
        display: flex; align-items: flex-start; gap: 10px;
    }
    .use-case-text ul li::before {
        content: '✓';
        color: var(--accent);
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 1px;
    }
    .use-case-visual {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 24px;
    }
    .use-case-visual .code-body {
        padding: 0;
    }

    /* ARCHITECTURE */
    .arch-flow {
        display: flex; align-items: center; justify-content: center;
        gap: 16px; flex-wrap: wrap;
        margin: 48px auto 0;
        max-width: 800px;
    }
    .arch-node {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 24px 28px;
        text-align: center;
        min-width: 160px;
        transition: border-color 0.2s;
    }
    .arch-node:hover { border-color: var(--accent); }
    .arch-node h4 {
        font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px;
    }
    .arch-node p {
        font-size: 12px; color: var(--text-dim); margin: 0;
    }
    .arch-arrow {
        color: var(--accent);
        font-size: 20px;
        opacity: 0.6;
    }

    /* CTA */
    .cta {
        text-align: center;
        padding: 80px 0 100px;
    }
    .cta-box {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 60px 40px;
        position: relative; overflow: hidden;
    }
    .cta-box::before {
        content: '';
        position: absolute;
        top: -100px; left: 50%; transform: translateX(-50%);
        width: 400px; height: 400px;
        background: radial-gradient(ellipse, rgba(16, 185, 129, 0.06) 0%, transparent 70%);
        pointer-events: none;
    }
    .cta h2 {
        font-size: clamp(24px, 3vw, 32px);
        font-weight: 700; color: var(--text); margin-bottom: 12px;
        letter-spacing: -0.02em;
    }
    .cta p { color: var(--text-muted); margin-bottom: 28px; font-size: 16px; }

    /* FOOTER */
    html, body { height: 100%; }
    body { display: flex; flex-direction: column; min-height: 100vh; }
    .main-wrapper { flex: 1 0 auto; }
    footer {
        border-top: 1px solid var(--border);
        padding: 32px 0;
        margin-top: auto;
    }
    .footer-inner {
        display: flex; align-items: center; justify-content: space-between;
    }
    .footer-copy { font-size: 13px; color: var(--text-dim); }
    .footer-links { display: flex; gap: 20px; }
    .footer-links a { font-size: 13px; color: var(--text-dim); text-decoration: none; }
    .footer-links a:hover { color: var(--text-muted); }

    /* MOBILE */
    @media (max-width: 768px) {
        .nav-links { gap: 16px; }
        .nav-links a.hide-mobile { display: none; }
        .hero { padding: 120px 0 80px; }
        .features-grid, .problem-grid { grid-template-columns: 1fr; }
        .use-case-row { grid-template-columns: 1fr; gap: 24px; }
        .use-case-row .use-case-visual { order: -1; }
        .cta-box { padding: 40px 24px; }
        .footer-inner { flex-direction: column; gap: 12px; }
        .arch-flow { flex-direction: column; }
        .arch-arrow { transform: rotate(90deg); }
        .code-preview { margin: 40px -24px 0; border-radius: 0; }
    }

    /* Landing page overrides */
    .container { max-width: 100% !important; }
</style>
{% endblock %}

{% block content %}

    <!-- HERO -->
    <section class="hero">
        <div class="container">
            <div class="badge">
                <span class="badge-dot"></span>
                API-First Form & Document Platform
            </div>
            <h1>Your AI agent can't collect data<br>or produce <span class="accent">client-ready documents.</span></h1>
            <p class="hero-sub">
                AgentForms gives your AI agent forms to collect data from humans and branded PDF documents to deliver back — deployed with a single API call.
            </p>
            <div class="hero-actions">
                <a href="{{ url_for('auth.register') }}" class="btn btn-lg">Start Free →</a>
                <a href="/api/docs" class="btn btn-outline btn-lg">API Docs</a>
            </div>
            <p class="hero-note">Free tier · No credit card required</p>

            <!-- CODE PREVIEW -->
            <div class="code-preview">
                <div class="code-header">
                    <span class="code-dot red"></span>
                    <span class="code-dot yellow"></span>
                    <span class="code-dot green"></span>
                    <span class="code-title">deploy-agent-form.sh</span>
                </div>
                <div class="code-body">
<span class="comment"># Your AI agent deploys a form, collects data, generates a PDF</span>
curl -X POST <span class="string">https://agentforms.io/api/v2/forms</span> \\\\<br>
  -H <span class="string">"Authorization: Bearer $API_KEY"</span> \<br>
  -H <span class="string">"Content-Type: application/json"</span> \<br>
  -d <span class="string">'{<br>
    </span><span class="param">"title"</span>: <span class="string">"Client Requirements"</span>,<br>
    </span><span class="param">"fields"</span>: [<span class="string">"name"</span>, <span class="string">"scope"</span>, <span class="string">"budget"</span>],<br>
    </span><span class="param">"on_submit"</span>: { <span class="param">"chain"</span>: <span class="string">"generate_proposal_pdf"</span> }<br>
  }'</span>

<span class="comment"># → { "form_url": "https://agentforms.io/f/abc123", "chain_id": "ch_..." }</span>
                </div>
            </div>
        </div>
    </section>

    <!-- THE PROBLEM -->
    <section style="background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
        <div class="container">
            <div class="section-header center">
                <p class="section-label">The Problem</p>
                <h2 class="section-title">AI agents are stuck in the chat window</h2>
                <p class="section-sub">Your agent can draft a proposal, but can't collect requirements, send a branded PDF, or automate follow-up — without stitching together four different tools.</p>
            </div>
            <div class="problem-grid">
                <div class="problem">
                    <div class="problem-icon">🔒</div>
                    <h3>Can't collect data</h3>
                    <p>AI agents generate text. They can't ask a human structured questions, validate inputs, or build a requirement intake process.</p>
                </div>
                <div class="problem">
                    <div class="problem-icon">📄</div>
                    <h3>Can't produce documents</h3>
                    <p>Your agent drafts content, but turning it into a branded proposal, quote, or invoice PDF is a separate tool chain no agent speaks fluently.</p>
                </div>
                <div class="problem">
                    <div class="problem-icon">🔗</div>
                    <h3>Can't automate follow-up</h3>
                    <p>After the client submits, the agent doesn't know what happened — no email sent, no webhook fired, no status tracked.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- THE SOLUTION -->
    <section>
        <div class="container">
            <div class="section-header center">
                <p class="section-label">The Solution</p>
                <h2 class="section-title">One API call replaces four services</h2>
                <p class="section-sub">AgentForms is the bridge between your AI agent and the human world — intake, output, and everything in between.</p>
            </div>

            <!-- Use Case 1: Data Collection -->
            <div class="use-case-row">
                <div class="use-case-text">
                    <h3>Collect structured data from anyone</h3>
                    <p>Your AI agent needs requirements, feedback, or client details. Deploy a form — define the fields, get a shareable URL. Clients fill it. You get clean JSON.</p>
                    <ul>
                        <li>Deploy forms programmatically — no builder UI needed</li>
                        <li>Define fields, validation, and conditional logic</li>
                        <li>Share a link, embed on a site, or send via email</li>
                        <li>Get structured data back via webhook or API</li>
                    </ul>
                </div>
                <div class="use-case-visual">
                    <div class="code-header">
                        <span class="code-dot red"></span>
                        <span class="code-dot yellow"></span>
                        <span class="code-dot green"></span>
                        <span class="code-title">agent collects data</span>
                    </div>
                    <div class="code-body">
<span class="comment"># Agent deploys a requirements form</span>
<span class="keyword">form</span> = client.forms.create(<br>
  <span class="param">title</span>=<span class="string">"Project Requirements"</span>,<br>
  <span class="param">fields</span>=[<span class="string">"company"</span>, <span class="string">"goals"</span>, <span class="string">"timeline"</span>],<br>
  <span class="param">webhook</span>=<span class="string">"https://my-agent.io/collected"</span><br>
)
<span class="comment"># → Share: https://agentforms.io/f/abc123</span>
                    </div>
                </div>
            </div>

            <!-- Use Case 2: Document Generation -->
            <div class="use-case-row">
                <div class="use-case-visual">
                    <div class="code-header">
                        <span class="code-dot red"></span>
                        <span class="code-dot yellow"></span>
                        <span class="code-dot green"></span>
                        <span class="code-title">agent generates PDF</span>
                    </div>
                    <div class="code-body">
<span class="comment"># Form data → branded proposal PDF</span>
<span class="keyword">doc</span> = client.documents.create(<br>
  <span class="param">template</span>=<span class="string">"proposal"</span>,<br>
  <span class="param">data</span>=form_submission,<br>
  <span class="param">brand</span>={<span class="string">"logo"</span>: <span class="string">"your-logo.png"</span>,<br>
          <span class="string">"color"</span>: <span class="string">"#10b981"</span>}<br>
)
<span class="comment"># → https://agentforms.io/d/xyz789.pdf</span>
                    </div>
                </div>
                <div class="use-case-text">
                    <h3>Turn data into client-ready documents</h3>
                    <p>Form submission triggers a branded PDF — proposal, quote, invoice, or report. Templates are tier-gated so you scale from solo to team.</p>
                    <ul>
                        <li>Pre-built templates: proposals, quotes, invoices</li>
                        <li>Custom branding — logo, colors, typography</li>
                        <li>Tier-gated: Starter gets 10, Pro 100, Teams+ unlimited</li>
                        <li>Hosted PDFs — share a link, embed, or download</li>
                    </ul>
                </div>
            </div>

            <!-- Use Case 3: Automation -->
            <div class="use-case-row">
                <div class="use-case-text">
                    <h3>Automate what happens after</h3>
                    <p>Client submits a form? Chain actions together — send a confirmation email, generate the PDF, forward data to your CRM. Your agent stays in the loop via real-time events.</p>
                    <ul>
                        <li>Sequential action chains triggered on form submit</li>
                        <li>Email notifications, webhook forwarding, PDF generation</li>
                        <li>Real-time SSE — your agent knows when things happen</li>
                        <li>Tier-gated chains: Starter gets 1, Pro 3, Teams+ unlimited</li>
                    </ul>
                </div>
                <div class="use-case-visual">
                    <div class="code-header">
                        <span class="code-dot red"></span>
                        <span class="code-dot yellow"></span>
                        <span class="code-dot green"></span>
                        <span class="code-title">agent chains actions</span>
                    </div>
                    <div class="code-body">
<span class="comment"># On submit → email + PDF + webhook</span>
<span class="keyword">chain</span> = client.chains.create(<br>
  <span class="param">trigger</span>=<span class="string">"form_submit"</span>,<br>
  <span class="param">actions</span>:[<br>
    {<span class="string">"type"</span>: <span class="string">"email"</span>,     <span class="string">"to"</span>: <span class="string">"client"</span>},<br>
    {<span class="string">"type"</span>: <span class="string">"pdf"</span>,       <span class="string">"template"</span>: <span class="string">"quote"</span>},<br>
    {<span class="string">"type"</span>: <span class="string">"webhook"</span>, <span class="string">"url"</span>: <span class="string">"crm.io"</span>}<br>
  ]<br>
)
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CORE CAPABILITIES -->
    <section style="background: var(--bg-card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);">
        <div class="container">
            <div class="section-header center">
                <p class="section-label">Capabilities</p>
                <h2 class="section-title">Everything your agent needs to interact with humans</h2>
            </div>
            <div class="features-grid">
                <div class="feature">
                    <div class="feature-icon">
                        <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>Branded Documents</h3>
                    <p>Turn form data into professional quotes, proposals, invoices, and reports. PDFs your clients actually want to read.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">
                        <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>Action Chains</h3>
                    <p>Automate the follow-up. Send email, generate PDF, forward to webhook — all in sequence after form submission.</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">
                        <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>Deploy On Demand</h3>
                    <p>Your agent builds the tool. Define fields, attach a chain, get a shareable URL — all via one API call.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ARCHITECTURE FLOW -->
    <section>
        <div class="container">
            <div class="section-header center">
                <p class="section-label">How It Works</p>
                <h2 class="section-title">From agent request to client document</h2>
                <p class="section-sub">Your AI agent deploys a form. A client fills it. Data flows through automation. A branded document gets generated and delivered.</p>
            </div>
            <div class="arch-flow">
                <div class="arch-node">
                    <h4>AI Agent</h4>
                    <p>Deploys the form via API</p>
                </div>
                <span class="arch-arrow">→</span>
                <div class="arch-node">
                    <h4>Client</h4>
                    <p>Opens link, fills the form</p>
                </div>
                <span class="arch-arrow">→</span>
                <div class="arch-node">
                    <h4>Action Chain</h4>
                    <p>Processes data, triggers steps</p>
                </div>
                <span class="arch-arrow">→</span>
                <div class="arch-node">
                    <h4>Document</h4>
                    <p>Branded PDF delivered</p>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="cta">
        <div class="container">
            <div class="cta-box">
                <h2>Give your AI agent a way to talk to humans</h2>
                <p>Deploy your first form in 30 seconds. No credit card required.</p>
                <div class="hero-actions">
                    <a href="{{ url_for('auth.register') }}" class="btn btn-lg">Get Started Free →</a>
                    <a href="/pricing" class="btn btn-outline btn-lg">View Plans</a>
                </div>
            </div>
        </div>
    </section>

{% endblock %}
