{% extends "base.html" %}

{% block title %}{{ meta_title }}{% endblock %}

{% block content %}
<section class="hero-section">
  <div class="container-xxl px-3 px-lg-4">
    <div class="row align-items-center g-4 g-xl-5">
      <div class="col-lg-7">
        <div class="eyebrow">Secure mobile mileage journal</div>
        <h1 class="hero-title">Mileage logging that feels ready for tax season, even from your iPhone.</h1>
        <p class="hero-copy">Capture retroactive business trips, reuse the last odometer reading, and keep an IRS-style log that is easy to review, export, and print.</p>
        <div class="hero-actions d-flex flex-wrap gap-3">
          <a class="btn btn-primary app-btn-primary" href="{% url 'trip_create' %}">Log a trip</a>
          <a class="btn btn-outline-light app-btn-secondary" href="{% url 'report_view' %}">Open reports</a>
        </div>
        <div class="hero-note">Default next odometer{% if latest_end_odometer %}: <strong>{{ latest_end_odometer }} mi</strong>{% else %}: <strong>not set yet</strong>{% endif %}</div>
      </div>
      <div class="col-lg-5">
        <div class="glass-panel showcase-card">
          <div class="showcase-top">
            <span class="status-pill">Current month</span>
            <span class="text-body-secondary small">{{ report_month }}/{{ report_year }}</span>
          </div>
          <div class="metric-stack">
            <article class="metric-card">
              <p>Business miles</p>
              <h2>{{ month_business|floatformat:1 }}</h2>
              <span>Captured this month</span>
            </article>
            <article class="metric-card accent-card">
              <p>Business miles YTD</p>
              <h2>{{ ytd_business|floatformat:1 }}</h2>
              <span>Ready for annual review</span>
            </article>
            <article class="metric-card compact-card">
              <p>Business trips this month</p>
              <h2>{{ business_trip_count }}</h2>
              <span>{% if last_trip %}Last trip {{ last_trip.date|date:"M j" }}{% else %}Add your first trip to start tracking{% endif %}</span>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-shell section-tight">
  <div class="container-xxl px-3 px-lg-4">
    <div class="row g-4">
      <div class="col-lg-8">
        <div class="glass-panel info-panel h-100">
          <div class="section-heading-wrap">
            <div>
              <p class="section-kicker">Workflow</p>
              <h2 class="section-title">Fast entry, odometer continuity, and report-ready detail.</h2>
            </div>
          </div>
          <div class="feature-grid">
            <article class="feature-card">
              <div class="feature-icon">01</div>
              <h3>Trip input built for thumbs</h3>
              <p>Large fields, stacked layout, clear inline validation, and past-date support for retroactive mileage.</p>
            </article>
            <article class="feature-card">
              <div class="feature-icon">02</div>
              <h3>Google Maps assist</h3>
              <p>Estimate driving miles from your start and destination, then keep the distance editable if the real trip differed.</p>
            </article>
            <article class="feature-card">
              <div class="feature-icon">03</div>
              <h3>IRS-style reporting</h3>
              <p>Review recent trips, generate report totals, and export CSV for your CPA or year-end archive.</p>
            </article>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="glass-panel quick-action-panel h-100">
          <p class="section-kicker">Quick actions</p>
          <div class="action-list">
            <a href="{% url 'trip_create' %}" class="action-card">
              <strong>Start a new trip log</strong>
              <span>Prefills the next starting odometer when possible.</span>
            </a>
            <a href="{% url 'trip_list' %}" class="action-card">
              <strong>Review trip history</strong>
              <span>Filter by month, year, trip type, or custom date range.</span>
            </a>
            <a href="{% url 'report_view' %}" class="action-card">
              <strong>Generate a mileage report</strong>
              <span>Monthly, annual, printable, and CSV export included.</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-shell">
  <div class="container-xxl px-3 px-lg-4">
    <div class="section-heading-wrap mb-4">
      <div>
        <p class="section-kicker">Recent entries</p>
        <h2 class="section-title">Your latest mileage activity</h2>
      </div>
      <a class="section-link" href="{% url 'trip_list' %}">View all trips</a>
    </div>
    <div class="glass-panel trip-stream-panel">
      {% if empty_state %}
      <div class="empty-state-card">
        <div class="empty-orb"></div>
        <h3>No trips logged yet</h3>
        <p>Start with a business trip and MileLedger will begin carrying your odometer history forward.</p>
        <a class="btn btn-primary app-btn-primary" href="{% url 'trip_create' %}">Log your first trip</a>
      </div>
      {% else %}
      <div class="trip-stream">
        {% for trip in recent_trips %}
        <article class="trip-stream-item">
          <div class="trip-stream-meta">
            <span class="trip-badge">{{ trip.get_trip_type_display }}</span>
            <span>{{ trip.date|date:"M j, Y" }} · {{ trip.start_time|time:"g:i A" }}–{{ trip.end_time|time:"g:i A" }}</span>
          </div>
          <div class="trip-stream-route">
            <strong>{{ trip.start_location }}</strong>
            <span class="route-arrow">→</span>
            <strong>{{ trip.end_location }}</strong>
          </div>
          <div class="trip-stream-footer">
            <span>{{ trip.distance_miles|floatformat:1 }} miles · {{ trip.get_distance_source_display }}</span>
            <a href="{% url 'trip_detail' trip.pk %}">Open details</a>
          </div>
        </article>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}