{% extends "base.html" %}
{% block head_extra %}
<title>Blog — AgentForms</title>
<meta name="description" content="Product updates, technical deep dives, and thoughts on AI form infrastructure from the AgentForms team.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://agentforms.io/blog/">
<meta property="og:title" content="Blog — AgentForms">
<meta property="og:description" content="Product updates, technical deep dives, and thoughts on AI form infrastructure.">
<meta property="og:image" content="https://agentforms.io/static/og-image.png">
<meta property="og:site_name" content="AgentForms">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Blog — AgentForms">
<meta name="twitter:description" content="Product updates, technical deep dives, and thoughts on AI form infrastructure.">
<meta name="twitter:image" content="https://agentforms.io/static/og-image.png">
<link rel="canonical" href="https://agentforms.io/blog/">
{% endblock %}
{% block content %}

<style>
  /* ─── Blog Index Styling ─── */
  .blog-index {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 80px;
  }

  .blog-index-header {
    margin-bottom: 48px;
  }

  .blog-index-header h1 {
    font-size: 2.4em;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text);
    margin-bottom: 8px;
  }

  .blog-index-header p {
    font-size: 1.1em;
    color: var(--text-muted);
    line-height: 1.5;
  }

  /* Featured post */
  .blog-featured {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 48px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, border-color 0.2s;
  }

  .blog-featured:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    border-color: #ccc;
  }

  .blog-featured-badge {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 16px;
  }

  .blog-featured h2 {
    margin: 0 0 12px;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.25;
  }

  .blog-featured h2 a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s;
  }

  .blog-featured h2 a:hover {
    color: var(--accent);
  }

  .blog-featured-summary {
    color: var(--text-muted);
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  /* Post cards */
  .blog-post-card {
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
    transition: border-color 0.2s;
  }

  .blog-post-card:first-of-type {
    padding-top: 0;
  }

  .blog-post-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .blog-post-card:hover .blog-post-title a {
    color: var(--accent);
  }

  .blog-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
  }

  .blog-post-date {
    color: var(--text-muted);
  }

  .blog-post-tag {
    display: inline-block;
    background: var(--accent-dim);
    color: var(--accent-bright);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .blog-post-title {
    margin-bottom: 8px;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.3;
  }

  .blog-post-title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.15s;
  }

  .blog-post-title a:hover {
    color: var(--accent);
  }

  .blog-post-summary {
    color: var(--text-muted);
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .blog-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: gap 0.15s;
  }

  .blog-read-more:hover {
    gap: 8px;
  }

  .blog-reading-time {
    font-size: 13px;
    color: var(--text-dim);
  }

  /* Empty state */
  .blog-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--text-muted);
  }

  .blog-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
  }

  .blog-empty h3 {
    margin-bottom: 8px;
    color: var(--text);
    font-size: 1.2em;
  }

  /* Responsive */
  @media (max-width: 640px) {
    .blog-index {
      padding: 24px 16px 60px;
    }

    .blog-index-header h1 {
      font-size: 1.8em;
    }

    .blog-featured {
      padding: 24px;
    }

    .blog-featured h2 {
      font-size: 1.25em;
    }

    .blog-post-title {
      font-size: 1.15em;
    }
  }
</style>

<div class="blog-index">
  <header class="blog-index-header">
    <h1>Blog</h1>
    <p>Product updates, technical deep dives, and thoughts on AI form infrastructure from the AgentForms team.</p>
  </header>

  {% if posts %}

    {% set featured = posts[0] %}
    <article class="blog-featured">
      <span class="blog-featured-badge">Latest</span>
      <h2><a href="/blog/{{ featured.slug }}">{{ featured.title }}</a></h2>
      {% if featured.summary %}
      <p class="blog-featured-summary">{{ featured.summary }}</p>
      {% endif %}
      <div class="blog-post-meta">
        {% if featured.date %}
        <span class="blog-post-date">{{ featured.date }}</span>
        {% endif %}
        {% if featured.author %}
        <span>· {{ featured.author }}</span>
        {% endif %}
        {% if featured.reading_time %}
        <span class="blog-reading-time">{{ featured.reading_time }} min read</span>
        {% endif %}
      </div>
      <a href="/blog/{{ featured.slug }}" class="blog-read-more">Read article →</a>
    </article>

    {% for post in posts[1:] %}
    <article class="blog-post-card">
      <div class="blog-post-meta">
        {% if post.date %}
        <span class="blog-post-date">{{ post.date }}</span>
        {% endif %}
        {% if post.author %}
        <span>· {{ post.author }}</span>
        {% endif %}
        {% for tag in post.tags %}
        <span class="blog-post-tag">{{ tag }}</span>
        {% endfor %}
        {% if post.reading_time %}
        <span class="blog-reading-time" style="margin-left:auto;">{{ post.reading_time }} min read</span>
        {% endif %}
      </div>
      <h2 class="blog-post-title">
        <a href="/blog/{{ post.slug }}">{{ post.title }}</a>
      </h2>
      {% if post.summary %}
      <p class="blog-post-summary">{{ post.summary }}</p>
      {% endif %}
      <div class="blog-post-footer">
        <a href="/blog/{{ post.slug }}" class="blog-read-more">Read more →</a>
      </div>
    </article>
    {% endfor %}

  {% else %}
  <div class="blog-empty">
    <div class="blog-empty-icon">📝</div>
    <h3>No posts yet</h3>
    <p>Check back soon for updates from the AgentForms team.</p>
  </div>
  {% endif %}
</div>

{% endblock %}