{% extends "base.html" %}
{% block title %}Compare deliveries · Prosodiff{% endblock %}
{% block content %}
<main id="main-content" class="page-shell">
  <section class="intro" aria-labelledby="page-title">
    <p class="eyebrow">MATCHED-DELIVERY ANALYSIS</p>
    <h1 id="page-title">Same words.<br><span>Different delivery.</span></h1>
    <p class="lede">Record two to four deliveries of the same sentence, then compare pitch, energy, timing, and pauses—without guessing emotion.</p>
  </section>

  <div class="workspace">
    <form id="comparison-form" class="control-panel" action="{{ url_for('compare') }}" method="post" enctype="multipart/form-data" novalidate>
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input id="capture-metadata" type="hidden" name="capture_metadata" value="">
      {% if error %}
      <div class="error-summary" role="alert">
        <strong>Check the comparison</strong>
        <span>{{ error }}</span>
        <small>For privacy, browsers require you to select the WAV files again.</small>
      </div>
      {% endif %}

      <div class="step-heading">
        <span>01</span>
        <div>
          <h2>Record matched takes</h2>
          <p>Record 2–4 deliveries, one after another</p>
        </div>
      </div>

      <label class="field-label" for="sentence">Sentence to repeat <span>optional</span></label>
      <textarea id="sentence" name="text" rows="2" maxlength="300" placeholder="Heute schaffen wir das gemeinsam." aria-describedby="sentence-help"></textarea>
      <p id="sentence-help" class="field-help">Keep the words identical and change only the delivery.</p>

      <section id="live-recorder" class="live-recorder" aria-labelledby="recorder-title">
        <div class="recorder-status-row">
          <div>
            <span class="microphone-mark" aria-hidden="true"></span>
            <strong id="recorder-title">Microphone ready</strong>
          </div>
          <time id="recording-time" datetime="PT0S">00:00.0</time>
        </div>
        <div class="level-track" aria-hidden="true"><span id="level-value"></span></div>
        <p id="recording-status" class="recording-status" aria-live="polite">Start with a neutral or reference delivery.</p>
        <p id="recording-error" class="recording-error" role="alert" hidden></p>
        <div class="recorder-actions">
          <button id="record-button" class="record-button" type="button">
            <span class="record-dot" aria-hidden="true"></span>
            <span>Record Take 1</span>
          </button>
          <button id="stop-button" class="stop-button" type="button" hidden>
            <span class="stop-square" aria-hidden="true"></span>
            <span>Stop and save</span>
          </button>
        </div>
        <small>Maximum 30 seconds. Processing is requested off; actual browser settings and a level check are recorded per take.</small>
      </section>

      <fieldset id="recorded-takes" class="recorded-takes" hidden>
        <legend>Recorded takes</legend>
        <div id="recorded-list"></div>
        <p id="recording-count" class="field-help" aria-live="polite"></p>
      </fieldset>

      <details id="upload-option" class="upload-option">
        <summary>Use existing WAV files instead</summary>
        <div class="upload-option-body">
          <label class="file-picker compact" for="wav-input">
            <span class="file-icon" aria-hidden="true">＋</span>
            <span><strong>Choose 2–4 WAV files</strong><small>0.35–30 s each · 24 MB maximum</small></span>
            <input id="wav-input" name="wavs" type="file" accept=".wav,audio/wav,audio/x-wav" multiple required aria-describedby="file-status">
          </label>
          <p id="file-status" class="file-status" aria-live="polite">No recordings selected</p>
          <fieldset id="take-labels" class="take-labels" hidden>
            <legend>Take labels</legend>
            <div id="take-list"></div>
            <p class="field-help">Take 1 is the delta reference. Labels must be unique.</p>
          </fieldset>
        </div>
      </details>
      <noscript><p class="recording-error">Live recording requires JavaScript. Use existing WAV files instead.</p></noscript>

      <div class="divider"></div>
      <div class="step-heading protocol-heading">
        <span>02</span>
        <div>
          <h2>Generate the comparison</h2>
          <p>Check the recording assumptions first</p>
        </div>
      </div>

      <label class="protocol-check" for="protocol-ack">
        <input id="protocol-ack" name="protocol_ack" value="yes" type="checkbox" required>
        <span><strong>Matched recording protocol</strong><small>Same speaker, text, session, room, device, gain, and microphone distance.</small></span>
      </label>

      <button id="generate-button" class="primary-button" type="submit">
        <span>Generate comparison</span><span aria-hidden="true">→</span>
      </button>
      <p class="privacy-note"><span aria-hidden="true">●</span> Runs on this computer. Audio is deleted immediately after analysis.</p>
    </form>

    <section class="preview-panel" aria-labelledby="preview-title">
      <div class="preview-header">
        <div>
          <p class="eyebrow">OUTPUT</p>
          <h2 id="preview-title">One figure. Auditable deltas.</h2>
        </div>
        <span>PNG + JSON</span>
      </div>
      <div id="preview-stage" class="preview-stage" aria-live="polite">
        <div class="report-ghost" aria-hidden="true">
          <div class="ghost-top"><i></i><i></i><i></i></div>
          <div class="ghost-title"></div>
          <div class="ghost-subtitle"></div>
          <div class="ghost-legend"><i></i><i></i><i></i></div>
          <div class="ghost-chart"><b></b><b></b><b></b></div>
          <div class="ghost-chart short"><b></b><b></b><b></b></div>
          <div class="ghost-metrics"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        </div>
        <div class="empty-copy">
          <strong>Your 4:5 report appears here</strong>
          <span>Raw-time contours · explicit B − A deltas · quality notices</span>
        </div>
        <div id="loading-state" class="loading-state" hidden>
          <span class="spinner" aria-hidden="true"></span>
          <strong>Analyzing recordings…</strong>
          <span>The first run can take one to two minutes while local caches initialize.</span>
        </div>
      </div>
      <div class="method-strip">
        <span><b>Pitch</b> pYIN decoded voicing</span>
        <span><b>Energy</b> recorded RMS</span>
        <span><b>Pauses</b> ±3 dB sensitivity</span>
      </div>
      <p class="interpretation-note"><strong>Interpretation boundary</strong> A measured acoustic difference is not evidence that listeners perceived a different intention.</p>
    </section>
  </div>
</main>
{% endblock %}
{% block scripts %}<script src="{{ url_for('static', filename='app.js') }}" defer></script>{% endblock %}