{% extends 'base.html' %}
{% block content %}
<section class="hero">
  <div class="container hero-grid">
    <div>
      <p class="eyebrow">www.egpuk.co.uk</p>
      <h1>Professional live AI interpretation for English, Arabic, and French.</h1>
      <p class="hero-copy">Server-side speech detection with Azure multilingual speech, smart routing to British English, Arabic, or French, and future-ready Stripe subscription billing.</p>
      <div class="hero-actions">
        <a class="btn btn-primary" href="/packages">View packages</a>
        <a class="btn btn-secondary" href="/signup">Create account</a>
      </div>
      <div class="hero-stats">
        <div><strong>Auto-detect</strong><span>English / Arabic / French</span></div>
        <div><strong>Voice-first</strong><span>Live speaker-mode UX</span></div>
        <div><strong>British English</strong><span>Default English output</span></div>
      </div>
    </div>
    <div class="hero-panel card">
      <div class="panel-head">
        <h2>Live voice translator</h2>
        <span class="badge {% if azure_ready %}ok{% else %}warn{% endif %}" id="azureBadge">{% if azure_ready %}Azure connected{% else %}Azure config required{% endif %}</span>
      </div>
      <div class="form-grid two">
        <label>
          <span>Language pair</span>
          <select id="pairSelect">
            <option value="en-ar">English ↔ Arabic</option>
            <option value="en-fr">English ↔ French</option>
          </select>
        </label>
        <label>
          <span>Source mode</span>
          <select id="sourceModeSelect">
            <option value="auto">Automatic detect</option>
            <option value="en">English</option>
            <option value="ar">Arabic</option>
            <option value="fr">French</option>
          </select>
        </label>
      </div>
      <div class="voice-actions">
        <button class="btn btn-primary" id="startVoiceBtn">Start live voice</button>
        <button class="btn btn-secondary" id="stopVoiceBtn">Stop</button>
        <button class="btn btn-light" id="speakOutputBtn">Play translation</button>
      </div>
      <div class="status-row">
        <span class="badge neutral" id="voiceStatus">Idle</span>
        <span class="badge neutral" id="detectedLanguage">Detected: —</span>
        <span class="badge neutral" id="targetLanguage">Target: —</span>
      </div>
      <div class="output-grid">
        <article class="output-card">
          <h3>Heard from speaker</h3>
          <p id="heardText">Start live voice to capture audio from the microphone and send it to Azure multilingual speech.</p>
        </article>
        <article class="output-card">
          <h3>Translated output</h3>
          <p id="translatedText">The platform will automatically detect the spoken language and translate according to the selected pair.</p>
        </article>
      </div>
      <details class="manual-panel">
        <summary>Manual text test fallback</summary>
        <textarea id="manualText" rows="4" placeholder="Type English, Arabic, or French here"></textarea>
        <button class="btn btn-secondary" id="manualTranslateBtn">Translate text</button>
      </details>
    </div>
  </div>
</section>
<section class="section">
  <div class="container feature-grid">
    <article class="feature card">
      <h3>Automatic routing</h3>
      <p>If the speaker uses English, the system translates to Arabic or French based on the selected package flow. If the speaker uses Arabic or French, the platform returns British English.</p>
    </article>
    <article class="feature card">
      <h3>Payment-ready architecture</h3>
      <p>Customers choose a package, sign in or sign up, then go to server-side Stripe Checkout for secure payment.</p>
    </article>
    <article class="feature card">
      <h3>Operational control</h3>
      <p>A private back-office area supports internal account management, package operations, and service monitoring.</p>
    </article>
  </div>
</section>
{% endblock %}