{% extends "base.html" %}

{% block content %}
<section class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-8 text-center">
      <div class="glass-card px-4 py-5">
        <h2 class="text-white mb-4">Choose Your Role</h2>
        <p class="text-secondary mb-5">How do you plan to use Gatsby? You can change this later.</p>
        
        <form method="post">
          {% csrf_token %}
          <div class="row g-4 mb-5">
            <div class="col-md-6">
              <label class="d-block h-100">
                <input type="radio" name="role" value="FOUNDER" class="d-none peer-role" required>
                <div class="glass-card role-card h-100 p-4 border-2">
                  <div class="mb-4">
                    <i class="fa-solid fa-lightbulb fa-3x text-gradient"></i>
                  </div>
                  <h4 class="text-white mb-3">Founder</h4>
                  <p class="text-secondary small">I have a startup idea or a project and I'm looking for funding and partners.</p>
                </div>
              </label>
            </div>
            <div class="col-md-6">
              <label class="d-block h-100">
                <input type="radio" name="role" value="INVESTOR" class="d-none peer-role" required>
                <div class="glass-card role-card h-100 p-4 border-2">
                  <div class="mb-4">
                    <i class="fa-solid fa-piggy-bank fa-3x text-gradient"></i>
                  </div>
                  <h4 class="text-white mb-3">Investor</h4>
                  <p class="text-secondary small">I'm looking to support peer-led innovation and grow my investment portfolio.</p>
                </div>
              </label>
            </div>
          </div>
          
          <div class="d-grid mt-4">
            <button type="submit" class="btn btn-primary btn-lg">Next</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<style>
  .peer-role:checked + .role-card {
    border-color: var(--accent-blue) !important;
    background: rgba(33, 212, 253, 0.1);
  }
  .role-card {
    cursor: pointer;
    border: 2px solid transparent !important;
  }
</style>
{% endblock %}