{% extends "main.html" %}

{% block content %}
  {% set features = [
    ("Layered canvas", "Backgrounds, text, images, shapes, SVGs, groups, and outlines stack in call order."),
    ("AI-ready specs", "JSON specs use the same renderer as Python, so generated layouts stay reviewable and testable."),
    ("Preflight checks", "Diagnostics catch off-canvas layers, tiny text, and contrast issues before export.")
  ] %}
  {% set examples = [
    ("assets/examples/youtube_thumbnail_01.png", "YouTube thumbnail generated by quickthumb", "YouTube"),
    ("assets/examples/youtube_reaction.png", "Reaction thumbnail generated by quickthumb", "Reaction"),
    ("assets/examples/youtube_tutorial_explainer.png", "Tutorial thumbnail generated by quickthumb", "Tutorial"),
    ("assets/examples/instagram_news_card.png", "Instagram news card generated by quickthumb", "Instagram"),
    ("assets/examples/podcast_interview_promo.png", "Podcast promo generated by quickthumb", "Podcast"),
    ("assets/examples/shorts_cover_agent.png", "Vertical shorts cover generated by quickthumb", "Shorts")
  ] %}

  <div class="qt-home">
    <section class="qt-hero" aria-labelledby="quickthumb-title">
      <div class="qt-hero__copy">
        <p class="qt-eyebrow">Python and JSON image rendering</p>
        <h1 id="quickthumb-title">quickthumb</h1>
        <p class="qt-hero__lede">
          Programmatic thumbnail and social image generation with layered composition,
          deterministic exports, and validation built for AI-assisted creative workflows.
        </p>
        <div class="qt-actions" aria-label="Primary actions">
          <a class="md-button md-button--primary" href="{{ 'getting-started/' | url }}">Get started</a>
          <a class="md-button" href="{{ 'api/' | url }}">API Reference</a>
        </div>
        <ul class="qt-hero__pills" aria-label="quickthumb capabilities">
          <li>Python API</li>
          <li>JSON specs</li>
          <li>SVG · PPTX · PDF</li>
        </ul>
      </div>

      <figure class="qt-hero__preview">
        <img src="{{ 'assets/brand/social-preview.png' | url }}" alt="quickthumb generated social preview collage">
      </figure>
    </section>

    <section class="qt-section" aria-labelledby="workflow-title">
      <div class="qt-section__header">
        <div>
          <p class="qt-eyebrow">Workflow</p>
          <h2 id="workflow-title">Compose once, render across formats</h2>
        </div>
        <p>
          Build with a chainable Python API, then move the same composition model
          into JSON specs for automation and review.
        </p>
      </div>

      <div class="qt-feature-grid">
        {% for title, description in features %}
          <article class="qt-card">
            <h3>{{ title }}</h3>
            <p>{{ description }}</p>
          </article>
        {% endfor %}
      </div>
    </section>

    <section class="qt-section" aria-labelledby="gallery-title">
      <div class="qt-section__header">
        <div>
          <p class="qt-eyebrow">Gallery</p>
          <h2 id="gallery-title">Generated social formats</h2>
        </div>
        <a class="qt-inline-link" href="{{ 'cookbook/' | url }}">View cookbook</a>
      </div>

      <div class="qt-gallery" aria-label="Example renders">
        {% for src, alt, label in examples %}
          <figure class="qt-card qt-example">
            <img src="{{ src | url }}" alt="{{ alt }}">
            <figcaption>{{ label }}</figcaption>
          </figure>
        {% endfor %}
      </div>
    </section>

    <section class="qt-section qt-code-section" aria-labelledby="quick-start-title">
      <div class="qt-code-section__copy">
        <p class="qt-eyebrow">Quick Start</p>
        <h2 id="quick-start-title">Render from a chainable canvas</h2>
        <p>
          Start with Python for local composition, then use JSON specs when layouts
          need to be generated, linted, or reused by other systems.
        </p>
        <div class="qt-actions">
          <a class="md-button md-button--primary" href="{{ 'installation/' | url }}">Install quickthumb</a>
          <a class="md-button" href="{{ 'json-schema/' | url }}">Use JSON specs</a>
        </div>
      </div>

      <div class="highlight qt-code-card">
        <div class="qt-code-card__bar">
          <span>Python</span>
          <span>thumbnail.py</span>
        </div>
        <pre><code class="language-python">from quickthumb import Canvas, Filter, Stroke, TextPart

canvas = (
    Canvas.from_aspect_ratio(&quot;16:9&quot;, base_width=1280)
    .background(color=&quot;#061226&quot;)
    .background(color=&quot;#000000&quot;, opacity=0.45)
    .text(
        content=[
            TextPart(
                text=&quot;BUILD THUMBNAILS\nFAST\n&quot;,
                color=&quot;#B8FF00&quot;,
                effects=[Stroke(width=8, color=&quot;#000000&quot;)],
            ),
            TextPart(text=&quot;With Python or JSON specs&quot;, color=&quot;#F5F5F5&quot;, size=44),
        ],
        size=112,
        position=(&quot;8%&quot;, &quot;50%&quot;),
        align=(&quot;left&quot;, &quot;middle&quot;),
        weight=900,
    )
    .outline(width=14, color=&quot;#B8FF00&quot;)
)

canvas.render(&quot;thumbnail.png&quot;)</code></pre>
      </div>
    </section>

    <section class="qt-section qt-launch" aria-labelledby="launch-title">
      <figure class="qt-launch__image">
        <img src="{{ 'assets/examples/launch_announcement.png' | url }}" alt="Launch announcement card generated from a quickthumb JSON spec">
      </figure>
      <div class="qt-launch__copy">
        <p class="qt-eyebrow">Auto Layout</p>
        <h2 id="launch-title">Specs that survive copy changes</h2>
        <p>
          Group layers and theme tokens keep layouts resilient as titles, badges,
          and brand colors change across campaigns.
        </p>
        <a class="qt-inline-link" href="{{ 'cookbook/launch-announcement/' | url }}">Read the recipe</a>
      </div>
    </section>
  </div>
{% endblock %}