{% extends "base.html" %}
{% block title %}Lenders — Casa Hunter FL{% endblock %}
{% block content %}

<h2 class="fw-bold mb-1" style="color:var(--primary)"><i class="fas fa-handshake me-2" style="color:var(--accent)"></i>Lenders Recomendados</h2>
<p class="text-muted mb-4">Ordenados por compatibilidad con tu perfil: residente nuevo, self-employed, $50K down, hasta $200K</p>

<div class="row g-3">
{% for l in lenders %}
<div class="col-12 col-lg-6">
  <div class="card h-100">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
          <h5 class="fw-bold mb-0" style="color:var(--primary)">{{ l.name }}</h5>
          <span class="badge border text-dark bg-light">{{ l.loan_type }}</span>
        </div>
        <div class="text-end">
          <div class="lender-card"><span class="match-pct">{{ l.match_score }}%</span></div>
          <small class="text-muted">compatibilidad</small>
        </div>
      </div>

      <p class="small text-muted mb-2"><i class="fas fa-check-circle text-success me-1"></i>{{ l.specialties }}</p>

      <div class="row text-center g-1 mb-3">
        <div class="col-4">
          <div class="bg-light rounded p-1">
            <small class="text-muted d-block">Down mín.</small>
            <strong class="small">{{ l.min_down_pct|int }}%</strong>
          </div>
        </div>
        <div class="col-4">
          <div class="bg-light rounded p-1">
            <small class="text-muted d-block">Residente nuevo</small>
            <strong class="small">{% if l.accepts_new_resident %}<i class="fas fa-check text-success"></i>{% else %}<i class="fas fa-times text-danger"></i>{% endif %}</strong>
          </div>
        </div>
        <div class="col-4">
          <div class="bg-light rounded p-1">
            <small class="text-muted d-block">Self-employed</small>
            <strong class="small">{% if l.accepts_self_employed %}<i class="fas fa-check text-success"></i>{% else %}<i class="fas fa-times text-danger"></i>{% endif %}</strong>
          </div>
        </div>
      </div>

      {% if l.notes %}
      <p class="small text-muted mb-2"><i class="fas fa-info-circle me-1"></i>{{ l.notes }}</p>
      {% endif %}

      <!-- Contact Script -->
      <div class="action-kit small mb-3">
        <strong><i class="fas fa-phone me-1"></i>Guión de contacto:</strong><br>
        {{ l.contact_script }}
      </div>

      <div class="d-flex gap-2">
        <a href="{{ l.website }}" target="_blank" class="btn btn-primary btn-sm flex-fill">
          <i class="fas fa-globe me-1"></i>Visitar Web
        </a>
        <button class="btn btn-outline-secondary btn-sm" onclick="copyText('script-{{ l.id }}')">
          <i class="fas fa-copy"></i>
        </button>
      </div>
      <span id="script-{{ l.id }}" class="d-none">{{ l.contact_script }}</span>
    </div>
  </div>
</div>
{% endfor %}
</div>

<!-- My Profile Box -->
<div class="card mt-4" style="border-left:4px solid var(--accent)">
  <div class="card-body">
    <h6 class="fw-bold mb-3" style="color:var(--primary)"><i class="fas fa-user me-2" style="color:var(--accent)"></i>Tu Perfil — Lo que presentas a cada lender</h6>
    <div class="row g-2 small">
      <div class="col-12 col-md-6">
        <ul class="mb-0">
          <li><strong>Estatus:</strong> Residente permanente</li>
          <li><strong>Tiempo en USA:</strong> Menos de 2 años</li>
          <li><strong>Trabajo:</strong> Contratista independiente — Eléctrica marina/naval</li>
          <li><strong>Tarifa:</strong> $120/hora</li>
        </ul>
      </div>
      <div class="col-12 col-md-6">
        <ul class="mb-0">
          <li><strong>Down payment disponible:</strong> $50,000</li>
          <li><strong>Presupuesto máximo:</strong> $200,000</li>
          <li><strong>Zona:</strong> Costa de FL — Stuart hasta Jacksonville</li>
          <li><strong>Préstamo ideal:</strong> Non-QM, Bank Statement, o ITIN</li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function copyText(id) {
  const text = document.getElementById(id).textContent;
  navigator.clipboard.writeText(text).then(() => alert('Script copiado'));
}
</script>
{% endblock %}