{% extends "base.html" %}

{% block title %}TrustForge | Turn completed jobs into proof that wins the next customer{% endblock %}
{% block meta_description %}TrustForge helps service businesses transform completed jobs into proof cards, review requests, and conversion assets that win more booked work.{% endblock %}

{% block content %}
<section class="tf-hero-section py-5 py-lg-6">
  <div class="container py-lg-5">
    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <div class="tf-eyebrow mb-3">Trust engine for service businesses</div>
        <h1 class="tf-display mb-4">Every completed job becomes proof that closes the next one.</h1>
        <p class="tf-lead mb-4">TrustForge gives contractors, roofers, HVAC teams, plumbers, electricians, junk removal crews, and landscapers a fast field workflow: finish the job, send the review request, generate a premium proof card, and publish conversion-ready assets.</p>
        <div class="d-flex flex-wrap gap-3 mb-4">
          <a class="btn tf-btn tf-btn-primary btn-lg" href="{% url 'job_create' %}">Start a completed job</a>
          <a class="btn tf-btn tf-btn-secondary btn-lg" href="{% url 'dashboard' %}">View dashboard</a>
        </div>
        <div class="row g-3 tf-stat-row">
          <div class="col-6 col-md-3">
            <div class="tf-stat-chip">
              <span>{{ stats.completed_jobs|default:0 }}</span>
              Jobs logged
            </div>
          </div>
          <div class="col-6 col-md-3">
            <div class="tf-stat-chip">
              <span>{{ stats.review_requests|default:0 }}</span>
              Requests sent
            </div>
          </div>
          <div class="col-6 col-md-3">
            <div class="tf-stat-chip">
              <span>{{ stats.proof_cards|default:0 }}</span>
              Proof cards
            </div>
          </div>
          <div class="col-6 col-md-3">
            <div class="tf-stat-chip">
              <span>{{ business_count }}</span>
              Active businesses
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="tf-device-card">
          <div class="tf-device-header">
            <span></span><span></span><span></span>
          </div>
          <div class="tf-device-body">
            <div class="tf-mini-step active">1. Job completed</div>
            <div class="tf-mini-step active">2. Review requested</div>
            <div class="tf-mini-step active">3. Proof created</div>
            <div class="tf-proof-preview mt-4">
              {% if featured_proofs %}
                {% with proof=featured_proofs.0 %}
                <div class="tf-proof-media-grid mb-3">
                  <div class="tf-photo-slot">Before</div>
                  <div class="tf-photo-slot tf-photo-slot-after">After</div>
                </div>
                <div class="d-flex justify-content-between align-items-start gap-3 mb-3">
                  <div>
                    <div class="tf-card-tag">{{ proof.job.service_type }}</div>
                    <h2 class="tf-card-title h4 mt-2 mb-1">{{ proof.job.city }}, {{ proof.job.state }}</h2>
                    <div class="text-secondary-emphasis small">Verified completion · {{ proof.job.completed_at|date:"M j, Y" }}</div>
                  </div>
                  <div class="tf-rating-pill">{% if proof.rating %}★ {{ proof.rating }}.0{% else %}Verified{% endif %}</div>
                </div>
                <p class="mb-3">{% if proof.testimonial_quote %}“{{ proof.testimonial_quote|truncatechars:120 }}”{% else %}Premium proof cards turn real field work into a conversion asset that belongs on your homepage and service pages.{% endif %}</p>
                <div class="d-flex justify-content-between small text-secondary-emphasis">
                  <span>{{ proof.customer_display_name }}</span>
                  <span>{{ proof.verified_label }}</span>
                </div>
                {% endwith %}
              {% else %}
                <div class="tf-empty-proof">
                  <div class="tf-proof-media-grid mb-3">
                    <div class="tf-photo-slot">Before</div>
                    <div class="tf-photo-slot tf-photo-slot-after">After</div>
                  </div>
                  <h2 class="h4 mb-2">Your first proof card appears here</h2>
                  <p class="mb-0 text-secondary-emphasis">Log a completed job to instantly generate the draft card, review request, and proof pipeline.</p>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-4">
        <div class="tf-panel h-100">
          <div class="tf-panel-icon">⚡</div>
          <h2 class="h4 mb-3">Fast field workflow</h2>
          <p class="mb-0 text-secondary-emphasis">Capture a completed job, upload before/after photos, and send a review request from a mobile-friendly form designed for technicians on-site.</p>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="tf-panel h-100">
          <div class="tf-panel-icon">🛡️</div>
          <h2 class="h4 mb-3">Proof-first cards</h2>
          <p class="mb-0 text-secondary-emphasis">Every job creates a premium proof card with service, location, photos, verification status, testimonial, and publishing controls.</p>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="tf-panel h-100">
          <div class="tf-panel-icon">📈</div>
          <h2 class="h4 mb-3">Conversion-ready assets</h2>
          <p class="mb-0 text-secondary-emphasis">Feature standout work on your landing page, service pages, and proof gallery to give new customers visible confidence.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pb-5">
  <div class="container">
    <div class="d-flex justify-content-between align-items-end flex-wrap gap-3 mb-4">
      <div>
        <div class="tf-eyebrow">Featured proof</div>
        <h2 class="tf-section-title">Recent conversion assets</h2>
      </div>
      <a class="btn tf-btn tf-btn-secondary" href="{% url 'proof_cards_list' %}">Browse proof cards</a>
    </div>
    <div class="row g-4">
      {% for proof in featured_proofs %}
      <div class="col-lg-4">
        <a class="tf-proof-card-link" href="{% url 'proof_card_detail' proof.id %}">
          <article class="tf-proof-card h-100">
            <div class="tf-proof-media-grid">
              <div class="tf-photo-slot">Before</div>
              <div class="tf-photo-slot tf-photo-slot-after">After</div>
            </div>
            <div class="tf-proof-card-body">
              <div class="d-flex justify-content-between align-items-center mb-3 gap-3">
                <span class="tf-card-tag">{{ proof.job.service_type }}</span>
                <span class="tf-badge-verified">{{ proof.verified_label }}</span>
              </div>
              <h3 class="h5 mb-1">{{ proof.job.city }}, {{ proof.job.state }}</h3>
              <p class="small text-secondary-emphasis mb-3">Completed {{ proof.job.completed_at|date:"M j, Y" }}</p>
              <p class="mb-3">{% if proof.testimonial_quote %}“{{ proof.testimonial_quote|truncatechars:115 }}”{% else %}A ready-to-publish proof card waiting for review feedback and promotion.{% endif %}</p>
              <div class="d-flex justify-content-between small text-secondary-emphasis">
                <span>{{ proof.customer_display_name }}</span>
                <span>{% if proof.rating %}★ {{ proof.rating }}{% else %}No rating yet{% endif %}</span>
              </div>
            </div>
          </article>
        </a>
      </div>
      {% empty %}
      <div class="col-12">
        <div class="tf-empty-state text-center">
          <h3 class="h4 mb-2">No proof cards featured yet</h3>
          <p class="text-secondary-emphasis mb-4">Create your first completed job to populate the TrustForge proof gallery.</p>
          <a class="btn tf-btn tf-btn-primary" href="{% url 'job_create' %}">Create the first job</a>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="pb-5">
  <div class="container">
    <div class="tf-panel tf-panel-dark">
      <div class="row g-4 align-items-center">
        <div class="col-lg-7">
          <div class="tf-eyebrow tf-eyebrow-light">Pipeline</div>
          <h2 class="tf-section-title text-white">Job Completed → Review Requested → Proof Card Created → Displayed → Converts Next Customer</h2>
        </div>
        <div class="col-lg-5">
          <div class="d-grid gap-3">
            {% for job in recent_jobs %}
            <div class="tf-activity-row">
              <div>
                <strong>{{ job.service_type }}</strong>
                <div class="small text-secondary-emphasis">{{ job.customer.full_name }} · {{ job.city }}, {{ job.state }}</div>
              </div>
              <span class="tf-status-pill tf-status-{{ job.status }}">{{ job.get_status_display }}</span>
            </div>
            {% empty %}
            <p class="mb-0 text-secondary-emphasis">No jobs yet. The first intake will immediately show up here.</p>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}