{% extends "base.html" %}

{% block title %}SentinelAI Cyber Assistant — Phishing & Scam Risk Scanner{% endblock %}
{% block meta_description %}Paste a URL, email, or message to receive a privacy-safe 0–100 phishing risk score with clear explanations.{% endblock %}

{% block content %}
<section class="hero-section position-relative overflow-hidden">
  <div class="orb orb-one" aria-hidden="true"></div>
  <div class="orb orb-two" aria-hidden="true"></div>
  <div class="container position-relative">
    <div class="row align-items-center g-5 py-5">
      <div class="col-lg-6">
        <span class="eyebrow">Privacy-first cyber defense</span>
        <h1 class="display-title mt-3">Detect phishing URLs and scam messages before they reach people.</h1>
        <p class="hero-copy mt-3">SentinelAI gives every submission a 0–100 risk score, explains the strongest signals, and stores only privacy-safe metadata for your dashboard.</p>
        <div class="d-flex flex-wrap gap-3 mt-4">
          <a href="#scanner" class="btn btn-primary-neo btn-lg">Run a scan</a>
          <a href="{% url 'scan_history' %}" class="btn btn-outline-light btn-lg">View dashboard</a>
        </div>
        <div class="trust-row mt-4" aria-label="MVP capabilities">
          <span>URL phishing detection</span>
          <span>Scam message NLP</span>
          <span>Explainable AI</span>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="hero-panel glass-card">
          <div class="panel-header d-flex justify-content-between align-items-center mb-4">
            <span class="status-dot"></span>
            <span class="small text-uppercase letter-spaced">Live risk console</span>
          </div>
          <div class="risk-meter mx-auto" aria-label="Average risk score">
            <span>{{ avg_score }}</span>
            <small>avg risk</small>
          </div>
          <div class="row g-3 mt-4">
            <div class="col-4"><div class="metric-card"><strong>{{ total_scans }}</strong><span>Scans</span></div></div>
            <div class="col-4"><div class="metric-card"><strong>{{ high_risk_count }}</strong><span>High risk</span></div></div>
            <div class="col-4"><div class="metric-card"><strong>v1</strong><span>Model</span></div></div>
          </div>
          <div class="signal-list mt-4">
            <div><span class="signal good"></span>Local in-memory analysis</div>
            <div><span class="signal warn"></span>False-positive review dashboard</div>
            <div><span class="signal danger"></span>Threat explanations included</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="scanner" class="section-pad scanner-section">
  <div class="container">
    <div class="row g-4 align-items-stretch">
      <div class="col-lg-7">
        <div class="surface-card p-4 p-md-5 h-100">
          <div class="section-kicker">First workflow</div>
          <h2>Scan a suspicious URL, email, or message</h2>
          <p class="text-muted-soft">This MVP uses a local heuristic/NLP engine as the safe baseline before adding trained Scikit-learn models and public cybersecurity datasets.</p>
          <form method="post" action="{% url 'create_scan' %}" class="scan-form mt-4" novalidate>
            {% csrf_token %}
            {% if form.non_field_errors %}
            <div class="alert alert-danger">{{ form.non_field_errors }}</div>
            {% endif %}
            <fieldset class="mb-4">
              <legend class="form-label">{{ form.scan_type.label }}</legend>
              <div class="scan-choice-grid">
                {% for radio in form.scan_type %}
                <label class="scan-choice" for="{{ radio.id_for_label }}">
                  {{ radio.tag }}
                  <span>{{ radio.choice_label }}</span>
                </label>
                {% endfor %}
              </div>
              {% for error in form.scan_type.errors %}<div class="invalid-copy">{{ error }}</div>{% endfor %}
            </fieldset>
            <div class="mb-3">
              <label class="form-label" for="{{ form.content.id_for_label }}">{{ form.content.label }}</label>
              {{ form.content }}
              {% for error in form.content.errors %}<div class="invalid-copy">{{ error }}</div>{% endfor %}
            </div>
            <div class="form-check metadata-check mb-4">
              {{ form.store_metadata }}
              <label class="form-check-label" for="{{ form.store_metadata.id_for_label }}">{{ form.store_metadata.label }}</label>
              <div class="form-text">{{ form.store_metadata.help_text }}</div>
            </div>
            <button type="submit" class="btn btn-primary-neo btn-lg w-100">Analyze risk now</button>
          </form>
        </div>
      </div>
      <div class="col-lg-5">
        <div class="surface-card p-4 p-md-5 h-100" id="privacy">
          <div class="section-kicker">Security posture</div>
          <h2>Built for sensitive submissions</h2>
          <div class="privacy-stack mt-4">
            <article>
              <span>01</span>
              <h3>Raw content stays out of storage</h3>
              <p>Only a sanitized preview, SHA-256 hash, risk score, and explanation are persisted.</p>
            </article>
            <article>
              <span>02</span>
              <h3>Explainable decisions</h3>
              <p>Every result lists weighted indicators so users can understand what triggered the score.</p>
            </article>
            <article>
              <span>03</span>
              <h3>ML-ready pipeline</h3>
              <p>The scanner interface is ready to blend in trained models, evaluation metrics, and safe updates.</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">Threat dashboard</div>
        <h2 class="mb-0">Recent detections</h2>
      </div>
      <a href="{% url 'scan_history' %}" class="btn btn-ghost">Open full history</a>
    </div>
    {% if recent_scans %}
    <div class="row g-3">
      {% for scan in recent_scans %}
      <div class="col-md-6 col-xl-4">
        <a class="scan-card" href="{% url 'scan_detail' scan.pk %}">
          <span class="badge risk-{{ scan.risk_badge_class }}">{{ scan.get_risk_level_display }}</span>
          <strong>{{ scan.risk_score }}/100</strong>
          <p>{{ scan.target_preview }}</p>
          <small>{{ scan.get_scan_type_display }} · {{ scan.created_at|date:"M j, Y H:i" }}</small>
        </a>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state text-center p-5">
      <div class="empty-icon" aria-hidden="true">◇</div>
      <h3>No scans yet</h3>
      <p>Run your first URL or message scan to populate the dashboard.</p>
      <a href="#scanner" class="btn btn-primary-neo">Start scanning</a>
    </div>
    {% endif %}
  </div>
</section>
{% endblock %}