{% extends "base.html" %}

{% block content %} 
<div class="container my-5">
  <!-- Welcome page for non-authenticated users -->
    <div class="text-center py-5">
      <div class="welcome-section">
        <h1 class="display-4 mb-4">Welcome to AgentHub</h1>
        <p class="lead mb-4">Your personal account management platform</p>
        <div class="d-flex justify-content-center gap-3 flex-wrap">
          <a href="{{ base_path }}/login" class="btn btn-primary btn-lg">
            <i class="fas fa-sign-in-alt me-2"></i>Sign In
          </a>
        </div>
      </div>
    </div>
    
    <div class="row mt-5">
      <div class="col-md-4 mb-4">
        <div class="card text-center h-100">
          <div class="card-body">
            <div class="feature-icon bg-primary mb-3 mx-auto">
              <i class="fas fa-shield-alt"></i>
            </div>
            <h5 class="card-title">Secure</h5>
            <p class="card-text">Your data is protected with industry-standard security measures.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-4">
        <div class="card text-center h-100">
          <div class="card-body">
            <div class="feature-icon bg-success mb-3 mx-auto">
              <i class="fas fa-rocket"></i>
            </div>
            <h5 class="card-title">Fast</h5>
            <p class="card-text">Quick registration and seamless user experience.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-4">
        <div class="card text-center h-100">
          <div class="card-body">
            <div class="feature-icon bg-info mb-3 mx-auto">
              <i class="fas fa-heart"></i>
            </div>
            <h5 class="card-title">Simple</h5>
            <p class="card-text">Clean and intuitive interface for easy navigation.</p>
          </div>
        </div>
      </div>
    </div>
</div>

<style>
.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.welcome-section {
  padding: 4rem 2rem;
  border-radius: 12px;
  background: var(--brand-off-white);
  border: 1px solid var(--border-color);
}

.display-4 {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  color: var(--brand-dark);
  padding: 0.15rem 0.6rem;
  background: linear-gradient(
    to top,
    var(--brand-yellow) 0,
    var(--brand-yellow) 70%,
    transparent 70%,
    transparent 100%
  );
}
</style>
{% endblock %}