{% extends "base.html" %}
{% block title %}{{ t('intro_video_title') }} — {{ t('brand') }}{% endblock %}
{% block content %}
<div id="introOverlay" style="position:fixed;inset:0;background:#000;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column">
  {% if video_url %}
  <video id="introVideo" src="{{ video_url }}" autoplay playsinline style="max-width:90vw;max-height:80vh;border-radius:8px"></video>
  {% else %}
  <div style="text-align:center">
    <h1 style="font-size:1.4rem;color:var(--p);font-family:'Rajdhani'">{{ t('intro_video_title') }}</h1>
    <p style="color:var(--dim);font-size:0.82rem;margin-top:0.3rem">{{ t('intro_video_desc') }}</p>
  </div>
  {% endif %}
  <button id="skipBtn" onclick="skipIntro()"
    style="position:absolute;top:20px;right:20px;background:rgba(150,110,230,0.1);border:1px solid var(--p);color:var(--p);padding:0.4rem 1.2rem;border-radius:50px;cursor:pointer;font-size:0.78rem;font-weight:600;display:none;backdrop-filter:blur(8px);transition:all 0.2s">
    {{ t('skip') }}
  </button>
</div>
<script>
const skipBtn=document.getElementById('skipBtn');
setTimeout(()=>{skipBtn.style.display='block';},30000);
function skipIntro(){
  document.getElementById('introOverlay').style.opacity='0';
  document.getElementById('introOverlay').style.transition='opacity 0.3s';
  fetch('{{ url_for("web.intro_done") }}',{method:'POST'});
  setTimeout(()=>window.location.href='{{ url_for("web.home") }}',300);
}
document.addEventListener('keydown',e=>{if(e.key==='Escape'||e.key===' '){skipBtn.click()}});
</script>
{% endblock %}