{% extends "base.html" %}

{% block content %}
<section class="container py-5">
  <div class="row justify-content-center">
    <div class="col-lg-8">
      <div class="glass-card p-5">
        <h2 class="text-white mb-4">Partner Matching Questionnaire</h2>
        <p class="text-secondary mb-5">Tell us more about your vision to find the perfect co-founder or team members.</p>
        
        <form method="post">
          {% csrf_token %}
          <div class="mb-5">
            <h5 class="text-white mb-3 small fw-bold">1. Which area best describes your startup or project?</h5>
            <select name="industry" class="form-select bg-dark text-white border-secondary rounded-pill px-4 py-3" required>
              <option value="" disabled selected>Select an industry...</option>
              <option value="fintech">Fintech</option>
              <option value="healthtech">Healthtech</option>
              <option value="edtech">Edtech</option>
              <option value="sustainability">Sustainability</option>
              <option value="consumer">Consumer Tech</option>
              <option value="social-impact">Social Impact</option>
            </select>
          </div>
          
          <div class="mb-5">
            <h5 class="text-white mb-3 small fw-bold">2. What role are you currently fulfilling?</h5>
            <div class="row g-3">
              <div class="col-md-4 text-center">
                <label class="d-block">
                  <input type="radio" name="current_role" value="TECH" class="d-none peer-choice" required>
                  <div class="glass-card choice-card py-3">Technical</div>
                </label>
              </div>
              <div class="col-md-4 text-center">
                <label class="d-block">
                  <input type="radio" name="current_role" value="BUSINESS" class="d-none peer-choice" required>
                  <div class="glass-card choice-card py-3">Business</div>
                </label>
              </div>
              <div class="col-md-4 text-center">
                <label class="d-block">
                  <input type="radio" name="current_role" value="DESIGN" class="d-none peer-choice" required>
                  <div class="glass-card choice-card py-3">Design</div>
                </label>
              </div>
            </div>
          </div>
          
          <div class="mb-5">
            <h5 class="text-white mb-3 small fw-bold">3. What kind of partner are you looking for?</h5>
            <div class="row g-3">
              <div class="col-md-4 text-center">
                <label class="d-block">
                  <input type="radio" name="target_role" value="TECH" class="d-none peer-choice" required>
                  <div class="glass-card choice-card py-3">Technical</div>
                </label>
              </div>
              <div class="col-md-4 text-center">
                <label class="d-block">
                  <input type="radio" name="target_role" value="BUSINESS" class="d-none peer-choice" required>
                  <div class="glass-card choice-card py-3">Business</div>
                </label>
              </div>
              <div class="col-md-4 text-center">
                <label class="d-block">
                  <input type="radio" name="target_role" value="DESIGN" class="d-none peer-choice" required>
                  <div class="glass-card choice-card py-3">Design</div>
                </label>
              </div>
            </div>
          </div>
          
          <div class="mb-5">
            <h5 class="text-white mb-3 small fw-bold">4. What's your primary goal for the next 3 months?</h5>
            <textarea name="goal" class="form-control bg-dark text-white border-secondary rounded-4 px-4 py-3" rows="4" placeholder="e.g. Building an MVP, finding our first 100 users, raising seed funding..." required></textarea>
          </div>
          
          <div class="d-grid mt-5">
            <button type="submit" class="btn btn-primary btn-lg">Find Partners</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

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