{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<section class="hero-section position-relative overflow-hidden">
  <div class="shape shape-one"></div>
  <div class="shape shape-two"></div>
  <div class="container position-relative">
    <div class="row align-items-center g-5 py-5">
      <div class="col-lg-7">
        <span class="eyebrow">Pilot MVP · Dijon employment intelligence</span>
        <h1 class="display-title mt-3">Aggregate, normalize, and review Dijon job offers from day one.</h1>
        <p class="lead hero-copy mt-4">A polished first slice for the future distributed scraping platform: register sources, capture offers, search the active queue, and inspect normalized job details.</p>
        <form class="hero-search mt-4" action="{% url 'job_list' %}" method="get" role="search">
          <label class="visually-hidden" for="hero-q">Search jobs</label>
          <input id="hero-q" class="form-control form-control-lg" type="search" name="q" placeholder="Search roles, companies, locations…">
          <button class="btn btn-accent btn-lg" type="submit">Search jobs</button>
        </form>
        <div class="d-flex flex-wrap gap-3 mt-4">
          <a class="btn btn-dark btn-lg rounded-pill px-4" href="{% url 'source_create' %}">Register source</a>
          <a class="btn btn-glass btn-lg rounded-pill px-4" href="{% url 'job_create' %}">Add offer</a>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="command-card glass-card">
          <div class="d-flex justify-content-between align-items-start mb-4">
            <div>
              <p class="card-kicker mb-1">System snapshot</p>
              <h2 class="h4 mb-0">Connector runway</h2>
            </div>
            <span class="status-pill">Live MVP</span>
          </div>
          <div class="metric-grid">
            <div class="metric-tile"><span>{{ source_count }}</span><small>Sources</small></div>
            <div class="metric-tile"><span>{{ active_jobs }}</span><small>Active offers</small></div>
            <div class="metric-tile"><span>{{ total_jobs }}</span><small>Total captured</small></div>
          </div>
          <div class="pipeline-list mt-4">
            <div><span class="dot dot-green"></span> Source registry</div>
            <div><span class="dot dot-orange"></span> Manual intake queue</div>
            <div><span class="dot dot-blue"></span> Search + detail review</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section-pad">
  <div class="container">
    <div class="row g-4 align-items-stretch">
      <div class="col-lg-4">
        <article class="feature-card h-100">
          <span class="feature-icon">01</span>
          <h2 class="h4">Register sources</h2>
          <p>Add national portals, interim agencies, and company careers pages with family/status metadata.</p>
          <a href="{% url 'source_create' %}" class="stretched-link">Create a source</a>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="feature-card h-100">
          <span class="feature-icon">02</span>
          <h2 class="h4">Capture offers</h2>
          <p>Store a cleaned offer linked to its source, including contract, salary, remote flag, and apply URL.</p>
          <a href="{% url 'job_create' %}" class="stretched-link">Add an offer</a>
        </article>
      </div>
      <div class="col-lg-4">
        <article class="feature-card h-100">
          <span class="feature-icon">03</span>
          <h2 class="h4">Review the queue</h2>
          <p>Search active offers and open a detailed review page designed for future dedupe and metrics.</p>
          <a href="{% url 'job_list' %}" class="stretched-link">Browse jobs</a>
        </article>
      </div>
    </div>
  </div>
</section>

<section class="section-pad pt-0">
  <div class="container">
    <div class="section-heading d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-end">
      <div>
        <span class="eyebrow">Latest normalized offers</span>
        <h2>Review queue</h2>
      </div>
      <a class="btn btn-outline-dark rounded-pill" href="{% url 'job_list' %}">View all offers</a>
    </div>

    {% if latest_jobs %}
    <div class="row g-4 mt-2">
      {% for job in latest_jobs %}
      <div class="col-md-6 col-xl-4">
        {% include "core/partials/job_card.html" with job=job %}
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state mt-4">
      <div class="empty-orb"></div>
      <h3>No offers captured yet</h3>
      <p>Start by registering a source, then add the first normalized offer to make the queue useful.</p>
      <div class="d-flex justify-content-center gap-3 flex-wrap">
        <a class="btn btn-dark rounded-pill px-4" href="{% url 'source_create' %}">Register source</a>
        <a class="btn btn-accent rounded-pill px-4" href="{% url 'job_create' %}">Add offer</a>
      </div>
    </div>
    {% endif %}
  </div>
</section>
{% endblock %}