{# demo_home.html — capability gallery landing page #}
{% extends "base.html" %}
{% block content %}
<div class="container-fluid py-4">

  <div class="demo-hero mb-4">
    <h1 class="demo-hero-title">What can QuantumDrive do for you?</h1>
    <p class="demo-hero-subtitle">
      Pick a capability below to try it with a ready-made example, or chat with the assistant directly.
    </p>
    <div class="demo-hero-actions">
      <a href="{{ url_for('task_execution') }}" class="btn btn-primary">Open the Assistant</a>
      <a href="{{ url_for('task_execution', example='elastic_security') }}" class="btn btn-outline-light ml-2">
        Try: analyze an Elastic cluster
      </a>
    </div>
  </div>

  <div class="demo-grid">

    <div class="demo-card">
      <div class="demo-card-icon" aria-hidden="true">💬</div>
      <div class="demo-card-title">Ask the Assistant</div>
      <p class="demo-card-body">
        Natural-language conversational interface. Ask questions, run analyses, orchestrate actions across
        connected systems and long-term memory.
      </p>
      <div class="demo-card-example">
        <span class="demo-card-example-label">Example</span>
        <span class="demo-card-example-text">"Analyze the security posture of my Elastic cluster and summarize findings in 2–3 paragraphs."</span>
      </div>
      <a href="{{ url_for('task_execution', example='elastic_security') }}" class="btn btn-primary btn-block">Try it →</a>
    </div>

    <div class="demo-card">
      <div class="demo-card-icon" aria-hidden="true">🔌</div>
      <div class="demo-card-title">Query a Connected System</div>
      <p class="demo-card-body">
        Register external data sources — Elasticsearch, OpenSearch, Postgres, SQLite, REST APIs — and run
        authenticated queries from a unified console.
      </p>
      <div class="demo-card-example">
        <span class="demo-card-example-label">Example</span>
        <span class="demo-card-example-text">Add a demo Elastic cluster and list indices with one click.</span>
      </div>
      <a href="{{ url_for('connected_systems', example='elastic_demo') }}" class="btn btn-primary btn-block">Try it →</a>
    </div>

    <div class="demo-card">
      <div class="demo-card-icon" aria-hidden="true">📋</div>
      <div class="demo-card-title">Parse Requirements</div>
      <p class="demo-card-body">
        Drop in a compliance doc or spec and get back a structured requirements table — with IDs, sections,
        evidence, and KG ingestion.
      </p>
      <div class="demo-card-example">
        <span class="demo-card-example-label">Example</span>
        <span class="demo-card-example-text">Sample NIST control family parsed into discrete requirements.</span>
      </div>
      <a href="{{ url_for('requirements_workspace', example='nist_sample') }}" class="btn btn-primary btn-block">Try it →</a>
    </div>

    <div class="demo-card">
      <div class="demo-card-icon" aria-hidden="true">📊</div>
      <div class="demo-card-title">Delivery State</div>
      <p class="demo-card-body">
        See project waves, artifact counts, and reuse-validation status across repositories and environments
        — the operator view of multi-repo delivery.
      </p>
      <div class="demo-card-example">
        <span class="demo-card-example-label">Example</span>
        <span class="demo-card-example-text">Load a reference project with seeded waves and artifacts.</span>
      </div>
      <a href="{{ url_for('delivery_state', example='reference_project') }}" class="btn btn-primary btn-block">Try it →</a>
    </div>

    <div class="demo-card">
      <div class="demo-card-icon" aria-hidden="true">✅</div>
      <div class="demo-card-title">Approvals</div>
      <p class="demo-card-body">
        Governance for approval-gated actions. Review pending decisions, see the requested operation, and
        approve or reject with full audit.
      </p>
      <div class="demo-card-example">
        <span class="demo-card-example-label">Example</span>
        <span class="demo-card-example-text">Queue seeded with a sample mitigation awaiting approval.</span>
      </div>
      <a href="{{ url_for('approvals', example='sample_queue') }}" class="btn btn-primary btn-block">Try it →</a>
    </div>

    <div class="demo-card">
      <div class="demo-card-icon" aria-hidden="true">🖼️</div>
      <div class="demo-card-title">Presentation Studio</div>
      <p class="demo-card-body">
        Generate a PowerPoint deck from a brief. Pick an audience, a theme, bullet points — get a native
        <code>.pptx</code> you can open in PowerPoint or Keynote.
      </p>
      <div class="demo-card-example">
        <span class="demo-card-example-label">Example</span>
        <span class="demo-card-example-text">"Product overview deck for a mixed audience."</span>
      </div>
      <a href="{{ url_for('presentation.presentation_studio', example='product_overview') }}" class="btn btn-primary btn-block">Try it →</a>
    </div>

    <div class="demo-card">
      <div class="demo-card-icon" aria-hidden="true">🎬</div>
      <div class="demo-card-title">Video Studio</div>
      <p class="demo-card-body">
        Turn a brief, bullet list, or deck into a narrated MP4 with voice-over and on-screen text. Choose the
        audience, theme, and TTS voice.
      </p>
      <div class="demo-card-example">
        <span class="demo-card-example-label">Example</span>
        <span class="demo-card-example-text">"30-second narrated product pitch."</span>
      </div>
      <a href="{{ url_for('video.video_studio', example='narrated_pitch') }}" class="btn btn-primary btn-block">Try it →</a>
    </div>

  </div>

  <div class="demo-footnote mt-4">
    Operator and admin consoles (telemetry, vector store, knowledge graph, memory, policy) live under the
    <strong>Admin</strong> section in the sidebar.
  </div>

</div>
{% endblock %}