{% extends "base.html" %}

{% block title %}ReliefSignal — Real-Time Tax Relief Intake Pilot{% endblock %}
{% block meta_description %}A polished MVP console for validating real-time Ytel audio readiness, Logics CRM sync, and AI-assisted tax relief intake completion.{% endblock %}

{% block content %}
<section class="hero-section position-relative overflow-hidden">
  <div class="orb orb-one"></div>
  <div class="orb orb-two"></div>
  <div class="container position-relative py-5 py-lg-6">
    <div class="row align-items-center g-5">
      <div class="col-lg-7">
        <span class="eyebrow">Real-time tax relief intake MVP</span>
        <h1 class="display-title mt-3">Prove live call extraction before building the whole platform.</h1>
        <p class="hero-copy mt-4">ReliefSignal turns each pilot call into a structured intake: transcript, IRS debt fields, urgency flags, completion score, and Ytel/Logics readiness notes in one workflow.</p>
        <div class="d-flex flex-column flex-sm-row gap-3 mt-4">
          <a class="btn btn-signal btn-lg" href="{% url 'call_create' %}">Start a pilot call</a>
          <a class="btn btn-ghost btn-lg" href="{% url 'call_list' %}">View history</a>
        </div>
        <div class="hero-proof mt-5" aria-label="Pilot metrics">
          <div><strong>{{ total_calls }}</strong><span>Pilot calls</span></div>
          <div><strong>{{ avg_completion }}%</strong><span>Avg completion</span></div>
          <div><strong>{{ urgent_count }}</strong><span>Urgent flags</span></div>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="live-card glass-card">
          <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
              <span class="pulse-dot"></span>
              <span class="small-label">Live Call Screen</span>
            </div>
            <span class="status-pill">Ytel audio: validate</span>
          </div>
          <div class="transcript-box mb-4">
            <p><strong>Client:</strong> I owe around $24,000 to the IRS and I’m worried about a levy.</p>
            <p><strong>Agent:</strong> Which years are included, and what is your monthly income?</p>
          </div>
          <div class="row g-3">
            <div class="col-6"><div class="metric-tile"><span>IRS Debt</span><strong>$24,000</strong></div></div>
            <div class="col-6"><div class="metric-tile"><span>Employment</span><strong>1099</strong></div></div>
            <div class="col-6"><div class="metric-tile urgent"><span>Alert</span><strong>Levy</strong></div></div>
            <div class="col-6"><div class="metric-tile"><span>Completion</span><strong>80%</strong></div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="workflow" class="section-pad">
  <div class="container">
    <div class="row g-4 align-items-stretch">
      <div class="col-lg-4">
        <div class="section-kicker">First workflow</div>
        <h2 class="section-title">Capture → score → review.</h2>
        <p class="text-muted-custom">This first iteration intentionally keeps the media integration mocked, but the workflow stores real records so a tax office can test the intake logic immediately.</p>
      </div>
      <div class="col-lg-8">
        <div class="row g-3">
          <div class="col-md-4"><article class="step-card"><span>01</span><h3>Create</h3><p>Paste live transcript text and extracted intake values.</p></article></div>
          <div class="col-md-4"><article class="step-card"><span>02</span><h3>Validate</h3><p>Track Ytel audio and Logics API readiness per pilot call.</p></article></div>
          <div class="col-md-4"><article class="step-card"><span>03</span><h3>Coach</h3><p>Surface missing fields and urgent tax relief flags.</p></article></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-pad pt-0">
  <div class="container">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end gap-3 mb-4">
      <div>
        <div class="section-kicker">Recent pilot calls</div>
        <h2 class="section-title mb-0">History starts here.</h2>
      </div>
      <a class="btn btn-outline-signal" href="{% url 'call_list' %}">Open history</a>
    </div>
    {% if recent_calls %}
    <div class="row g-3">
      {% for call in recent_calls %}
      <div class="col-md-4">
        <a class="call-card-link" href="{% url 'call_detail' call.pk %}">
          <article class="call-card h-100">
            <div class="d-flex justify-content-between align-items-start gap-3">
              <div><h3>{{ call.client_name }}</h3><p>{{ call.phone }}</p></div>
              <span class="score-badge">{{ call.completion_score }}%</span>
            </div>
            <p class="mb-0 small-label">{{ call.get_call_source_display }} · {{ call.created_at|date:"M j, Y" }}</p>
          </article>
        </a>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
      <h3>No pilot calls yet</h3>
      <p>Create the first call record to test transcript capture, intake fields, completion scoring, and urgent flags.</p>
      <a class="btn btn-signal" href="{% url 'call_create' %}">Create first call</a>
    </div>
    {% endif %}
  </div>
</section>
{% endblock %}