{% extends 'base.html' %}
{% load static %}

{% block title %}AI Agent Studio - Build & Deploy AI Agents{% endblock %}

{% block head %}
<meta name="description" content="A collaborative platform to design, test, and run high-end AI agents with unlimited usage.">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
{% endblock %}

{% block content %}
<div class="hero">
    <div class="container">
        <h1>Welcome to AI Agent Studio</h1>
        <p>The open-source platform to design, test, and deploy powerful AI agents. No limits, no pricing tiers.</p>
        <a href="{% url 'create_agent' %}" class="btn btn-primary btn-lg">Start Building Your First Agent</a>
    </div>
</div>

<div class="container agent-showcase">
    <div class="text-center mb-5">
        <h2>Explore What You Can Build</h2>
        <p class="lead">These examples are just the beginning. Your imagination is the only limit.</p>
    </div>

    <div class="agent-grid">
        <!-- Sample Agent 1 -->
        <div class="agent-card">
            <div class="icon"><i class="fas fa-robot"></i></div>
            <h3>Customer Support Bot</h3>
            <p>An intelligent bot that handles common customer queries, freeing up your team for complex issues.</p>
        </div>

        <!-- Sample Agent 2 -->
        <div class="agent-card">
            <div class="icon"><i class="fas fa-chart-line"></i></div>
            <h3>Data Analyst Agent</h3>
            <p>Connect your data sources and let this agent find trends, generate reports, and provide insights.</p>
        </div>

        <!-- Sample Agent 3 -->
        <div class="agent-card">
            <div class="icon"><i class="fas fa-code"></i></div>
            <h3>Code Generation Assistant</h3>
            <p>Describe a function or component, and this agent will generate the boilerplate code for you in any language.</p>
        </div>
    </div>

    <div class="text-center mt-5">
         <a href="{% url 'create_agent' %}" class="btn btn-primary btn-lg">Create a New Agent</a>
    </div>
</div>
{% endblock %}
