<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>InstaSave — Preview & Download</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>

  <style>
    :root{
      /* Instagram-inspired theme */
      --pink:#F56040;
      --orange:#FCAF45;
      --yellow:#FFDC80;
      --purple:#833AB4;
      --magenta:#C13584;
      --ink:#0f1220;
      --muted:#6b7280;
      --line:#ececf3;
      --card:#ffffff;
      --max:1100px;
      --shadow:0 10px 24px rgba(16,24,40,.08);
      --grad: radial-gradient(1200px 900px at 0% 0%, #FFDC80 0%, #FCAF45 20%, #F56040 45%, #C13584 70%, #833AB4 100%);
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f8f9ff;color:#1f2430;line-height:1.6}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}

    /* ===== HERO / HEADER ===== */
    .hero-ss{
      color:#fff; background:var(--grad); padding:18px 18px 48px; position:relative; overflow:hidden; isolation:isolate;
    }
    .hero-ss::after{
      content:""; position:absolute; inset:0; background:
        radial-gradient(600px 420px at 85% 10%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(800px 560px at 10% 100%, rgba(255,255,255,.12), transparent 60%);
      pointer-events:none; z-index:-1;
    }
    .hero-ss__top{max-width:var(--max); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px}
    .hero-ss__logo{display:flex; align-items:center; gap:10px; font-weight:800}
    .hero-ss__logo-badge{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3); box-shadow:0 6px 18px rgba(0,0,0,.18)}
    .hero-ss__center{max-width:900px; margin:42px auto 0; text-align:center}
    .hero-ss__eyebrow{
      display:inline-flex; gap:8px; align-items:center; font-weight:800; background:rgba(255,255,255,.18);
      border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:8px 12px; letter-spacing:.02em;
    }
    .hero-ss__center h1{font-size:44px; line-height:1.05; font-weight:900; margin-top:10px; text-shadow:0 2px 20px rgba(0,0,0,.12)}
    .hero-ss__center p{color:#fff; opacity:.92; font-weight:600; margin-top:10px; font-size:18px}

    /* Pill Nav */
    .hero-ss__pillnav{
      --bgpill:#ffffff; --textpill:#0f1220;
      background:var(--bgpill); color:var(--textpill);
      border-radius:14px; padding:8px;
      box-shadow:0 10px 24px rgba(16,24,40,.12);
      display:inline-block;
    }
    .pill-track{ position:relative; display:flex; gap:4px; align-items:center; }
    .pill{
      appearance:none; border:0; background:transparent; cursor:pointer;
      color:#000; font-weight:800; font-size:16px;
      padding:10px 16px; border-radius:10px; position:relative; z-index:1;
      text-decoration:none; transition:transform .12s ease, color .12s ease;
    }
    .pill:hover{ transform:translateY(-1px); }
    .pill:active{ transform:translateY(0) scale(.98); }
    .pill.active{ color:#C13584; }
    .pill:focus-visible{ outline:2px solid #fdfdfd; outline-offset:2px; border-radius:12px; }
    .pill-thumb{
      position:absolute; top:6px; left:0;
      height:calc(100% - 10px); width:0; border-radius:8px;
      box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
      transition:transform .22s cubic-bezier(.2,.7,.3,1), width .22s cubic-bezier(.2,.7,.3,1);
      will-change:transform,width;
      background:linear-gradient(135deg, rgba(255,220,128,.55), rgba(252,175,69,.55), rgba(245,96,64,.55), rgba(193,53,132,.55), rgba(131,58,180,.55));
      backdrop-filter:blur(4px);
    }

    .hero-ss__lang{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:10px 14px; font-weight:700; cursor:pointer; backdrop-filter:blur(6px)}
    .hero-ss__theme{display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:10px; font-weight:700; cursor:pointer; backdrop-filter:blur(6px); margin-right:8px; width:42px; height:42px; line-height:0; font-size:16px}

    @media (max-width:900px){ .hero-ss__center h1{font-size:36px} .hero-ss__pillnav{display:none} }

    /* ===== RESULT LAYOUT ===== */
    .section{padding:36px 16px}
    .wrap{max-width:var(--max); margin:0 auto}

    .dl-card{
      display:grid; grid-template-columns:480px 1fr; gap:22px;
      background:#fff; border:1px solid #e5e7eb; border-radius:18px; padding:16px; box-shadow:var(--shadow);
    }
    @media (max-width:1100px){ .dl-card{grid-template-columns:1fr} }

    .dl-thumb{position:relative; width:100%; border-radius:14px; overflow:hidden; background:#000}
    .dl-thumb video{width:100%; height:auto; display:block; max-height:70vh}
    .dl-duration{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.75); color:#fff; font-size:12px; padding:3px 8px; border-radius:999px}
    .dl-play{position:absolute; inset:0; display:grid; place-items:center; border:none; background:transparent; cursor:pointer}
    .dl-play .tri{width:60px; height:60px; border-radius:50%; background:rgba(0,0,0,.35); display:grid; place-items:center; box-shadow:0 8px 18px rgba(0,0,0,.25)}
    .dl-play svg{width:22px; height:22px; color:#fff}

    .dl-body{display:flex; flex-direction:column; gap:12px}
    .dl-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
    .dl-user{display:flex; align-items:center; gap:10px}
    .dl-avatar{width:40px; height:40px; border-radius:999px; object-fit:cover; background:#eee}
    .dl-meta{line-height:1.2}
    .dl-name{font-weight:800; font-size:14px}
    .dl-handle{color:#C13584; font-size:12px; font-weight:700}
    .dl-share{width:38px; height:38px; display:grid; place-items:center; border-radius:10px; border:1px solid #e5e7eb; background:#fff; cursor:pointer}

    .dl-title{font-weight:900; font-size:20px}
    .dl-desc{color:#52525b; font-size:14px}

    .dl-badges{display:flex; gap:8px; flex-wrap:wrap}
    .pill-badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; background:#f8f4fa; border:1px solid #f0d7e7; border-radius:999px; color:#5a2147; font-weight:700; font-size:12px}

    .dl-actions{display:grid; grid-template-columns:1.2fr 1fr; gap:10px; margin-top:6px}
    @media (max-width:560px){ .dl-actions{grid-template-columns:1fr} }

    .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:10px; font-weight:800; text-decoration:none; border:none; cursor:pointer; transition:transform .12s ease}
    .btn:hover{transform:translateY(-1px)}
    .btn.solid{background:#C13584; color:#fff}
    .btn.ghost{background:#fde7f3; color:#C13584; border:1px solid #f5d7ea}

    .dl-note{margin-top:6px; color:#6b7280; font-size:12.5px}

    /* ===== STORIES GRID (new) ===== */
    .stories-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
    .stories-head .count{color:#6b7280; font-weight:700; font-size:14px}
    .story-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
    @media (max-width:1100px){ .story-grid{grid-template-columns:repeat(2,1fr)} }
    @media (max-width:680px){ .story-grid{grid-template-columns:1fr} }
    .story-card{background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:12px; box-shadow:var(--shadow)}
    .story-card video{width:100%; height:auto; border-radius:10px; display:block}
    .story-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px}
    .story-row .meta{font-size:13px; color:#6b7280; font-weight:700}

    /* ===== FOOTER ===== */
    .ft{background:linear-gradient(135deg, #FFDC80 0%, #FCAF45 30%, #F56040 55%, #C13584 80%, #833AB4 100%); color:#111827; padding:40px 18px 26px; border-top-left-radius:20px; border-top-right-radius:20px; margin-top:38px}
    .ft-wrap{max-width:var(--max); margin:0 auto 22px; display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:26px; align-items:start}
    .ft-about p{color:#1a1433; opacity:.9; line-height:1.7; max-width:380px}
    .ft-links h6, .ft-newsletter h6{font-size:12px; letter-spacing:.12em; font-weight:800; color:#1a1433; opacity:.9; margin-bottom:14px}
    .ft-links ul{list-style:none; display:grid; gap:12px}
    .ft-links a{color:#111827; font-weight:600}
    .ft-links a:hover{text-decoration:underline}
    .ft-form{display:grid; gap:10px}
    .ft-form input{padding:12px 14px; border-radius:10px; border:none; outline:none; background:#fff; color:#111827; font-weight:500; box-shadow:0 2px 0 rgba(0,0,0,.04) inset}
    .ft-form button{border:none; cursor:pointer; font-weight:700; padding:12px 14px; border-radius:10px; background:#C13584; color:#fff; box-shadow:0 6px 18px rgba(193,53,132,.28); transition:transform .15s}
    .ft-form button:hover{transform:translateY(-1px)}
    .ft-msg{display:block; margin-top:6px; min-height:18px; color:#0b3d0b; font-weight:600}
    .ft-msg.error{color:#5f0b0b}
    .ft-line{max-width:var(--max); margin:20px auto; border:none; height:1px; background:rgba(255,255,255,.55)}
    .ft-copy{text-align:center; color:#1a1433; font-weight:600; opacity:.95}
    @media (max-width:980px){ .ft-wrap{grid-template-columns:1fr 1fr} }
    @media (max-width:600px){ .ft-wrap{grid-template-columns:1fr} .ft-about p{max-width:none} .ft-form{grid-template-columns:1fr} }

    /* Dark theme */
    [data-theme="dark"] body{ background:#101227; color:#eef0ff; }
    [data-theme="dark"] .hero-ss{ background:radial-gradient(1200px 900px at 0% 0%, #33214a 0%, #2a1c42 100%); }
    [data-theme="dark"] .hero-ss__pillnav{ background:rgba(255,255,255,.12); }
    [data-theme="dark"] .pill{ color:#e9e9ff; }
    [data-theme="dark"] .pill.active{ color:#111827; }
    [data-theme="dark"] .pill-thumb{ background:rgba(255,255,255,.18); }
    [data-theme="dark"] .hero-ss__center p{ color:#f7f7ff; opacity:.92; }
    [data-theme="dark"] .dl-card{ background:#0f1220; border-color:#23264a; }
    [data-theme="dark"] .dl-desc{ color:#c4c7ff; }
    [data-theme="dark"] .dl-share{ background:#0f1220; border-color:#23264a; color:#eef0ff; }
    [data-theme="dark"] .pill-badge{ background:#2a1f47; color:#f0d7ff; border-color:#3a2a66; }
    [data-theme="dark"] .story-card{ background:#0f1220; border-color:#23264a; }
  </style>
</head>
<body>

  <!-- ===== HEADER ===== -->
  <section class="hero-ss">
    <div class="hero-ss__top">
      <!-- Logo -->
      <div class="hero-ss__logo" aria-label="Logo">
        <div class="hero-ss__logo-badge">
          <!-- Instagram-like glyph -->
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
            <rect x="3.5" y="3.5" width="17" height="17" rx="5" fill="none" stroke="#fff" stroke-width="2"/>
            <circle cx="12" cy="12" r="4.2" fill="none" stroke="#fff" stroke-width="2"/>
            <circle cx="17.4" cy="6.8" r="1.3" fill="#fff"/>
          </svg>
        </div>
        <span>InstaSave</span>
      </div>

       <!-- Pill Nav -->
      <nav class="hero-ss__pillnav" id="pillnav" aria-label="Primary">
        <div class="pill-track">
          <a class="pill" href="{{ url_for('index') }}">Instagram Downloader</a>
          <a class="pill" href="{{ url_for('tiktok_downloader') }}">insta Reels Downloader</a>
          <a class="pill" href="{{ url_for('download_tiktok_mp3') }}">Download insta Stories</a>
          <span class="pill-thumb" aria-hidden="true"></span>
        </div>
      </nav>

      <!-- Language + Theme controls -->
      <div class="lang-wrap" aria-label="Display and language controls">
        <button class="hero-ss__theme" id="themeBtn" title="Toggle theme" aria-label="Toggle theme">☀️</button>

        <button class="hero-ss__lang" id="langBtn" aria-haspopup="listbox" aria-expanded="false">
          <span id="langLabel">Language</span>
          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
            <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>

        <!-- Language popup -->
        <div class="lang-pop" id="langPop" hidden>
          <ul class="lang-list" id="langList" role="listbox" aria-label="Select language">
            <li><button class="lang-opt" role="option" data-code="en" aria-selected="true">English <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ur">اردو (Urdu) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="hi">हिन्दी (Hindi) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ar">العربية (Arabic) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="es">Español (Spanish) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="fr">Français (French) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="pt">Português (Portuguese) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="tr">Türkçe (Turkish) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="th">ภาษาไทย (Thai) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ja">日本語 (Japanese) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ko">한국어 (Korean) <span class="check">✓</span></button></li>
            <li><button class="lang-opt" role="option" data-code="ru">Русский (Russian) <span class="check">✓</span></button></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="hero-ss__center">
      <span class="hero-ss__eyebrow">
        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
          <path d="M3 5h18M3 12h12M3 19h8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
        Preview & Download
      </span>
      <h1>
        {{ title or (video.title if mode=='single' and video is defined else 'Instagram Video') }}
      </h1>
      <p>
        {% if mode == 'stories' %}
          Current public Stories. Watch inline and download any item.
        {% else %}
          Here’s your file. Watch it inline and save the MP4 in one click.
        {% endif %}
      </p>
    </div>
  </section>

  <!-- ===== RESULT AREA ===== -->
  <main class="section">
    <div class="wrap">

      {# ==================== STORIES MODE ==================== #}
      {% if mode == 'stories' and videos %}
        <div class="stories-head">
          <h2 class="dl-title">{{ title or 'Stories' }}</h2>
          <div class="count">{{ videos|length }} items</div>
        </div>

        <div class="story-grid">
          {% for v in videos %}
            <article class="story-card">
              <video src="{{ v.stream_url }}" controls playsinline preload="metadata"></video>
              <div class="story-row">
                <span class="meta">Story {{ v.idx }} · {{ '%.2f'|format(v.size_mb) if v.size_mb is defined }} MB</span>
                <a class="btn ghost" href="{{ v.download_url }}">Download</a>
              </div>
            </article>
          {% endfor %}
        </div>

        <div style="margin-top:14px">
          <a class="btn solid" href="{{ url_for('index') }}">Download Another</a>
        </div>

      {# ==================== SINGLE MODE (BACKWARD-COMPAT) ==================== #}
      {% else %}
        {# Accept either the new 'video' object OR your original variables #}
        {% set _stream = (video.stream_url if video is defined and video.stream_url is defined else url_for('serve_video', file_id=file_id)) %}
        {% set _download = (video.download_url if video is defined and video.download_url is defined else url_for('download_video', file_id=file_id)) %}
        {% set _size = (video.size_mb if video is defined and video.size_mb is defined else file_size_mb) %}
        {% set _vtitle = (video.title if video is defined and video.title is defined else title) %}

        <section class="dl-card" id="resultCard" aria-live="polite">
          <div class="dl-thumb">
            <video id="previewVideo" controls preload="metadata"
                   src="{{ _stream }}"
                   poster="{{ thumb_url or '' }}"></video>

            {% if duration %}<span class="dl-duration">{{ duration }}</span>{% endif %}

            <button class="dl-play" id="playOverlay" aria-label="Play/Pause">
              <span class="tri">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"/></svg>
              </span>
            </button>
          </div>

          <div class="dl-body">
            <div class="dl-head">
              <div class="dl-user">
                <img class="dl-avatar" src="{{ author_avatar or 'https://i.pravatar.cc/64' }}" alt="">
                <div class="dl-meta">
                  <div class="dl-name">{{ author_name or 'Creator' }}</div>
                  <div class="dl-handle">{{ author_handle or '@instagram' }}</div>
                </div>
              </div>
              <button class="dl-share" id="shareBtn" title="Share">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/>
                  <path d="M16 6l-4-4-4 4M12 2v14"/>
                </svg>
              </button>
            </div>

            <div class="dl-badges">
              <span class="pill-badge">
                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2"/></svg>
                Instagram
              </span>
              {% if _size %}
              <span class="pill-badge">
                <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M4 12h16M4 16h12M4 8h8" fill="none" stroke="currentColor" stroke-width="2"/></svg>
                {{ '%.2f'|format(_size) }} MB
              </span>
              {% endif %}
            </div>

            <h2 class="dl-title">{{ _vtitle or 'Video title' }}</h2>
            <p class="dl-desc">{{ description or '' }}</p>

            <div class="dl-actions">
              <a class="btn solid" href="{{ _download }}">
                {% if _size %}Download MP4 — {{ '%.2f'|format(_size) }}MB{% else %}Download MP4{% endif %}
              </a>
              <a class="btn ghost" href="{{ url_for('index') }}">Download Another</a>
              {% if nowm_url %}
                <a class="btn ghost" href="{{ nowm_url }}">No-Watermark MP4</a>
              {% endif %}
            </div>

            <p class="dl-note">
              Having trouble? If the video is private or age/region-restricted, make sure you can view it in your Instagram account.
            </p>
          </div>
        </section>
      {% endif %}

    </div>
  </main>

  <!-- ===== FOOTER ===== -->
  <footer class="ft">
    <div class="ft-wrap">
      <div class="ft-about">
        <div class="ft-logo" aria-label="Brand">
          <svg viewBox="0 0 48 48" width="40" height="40" aria-hidden="true">
            <defs>
              <linearGradient id="lg1" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stop-color="#FFDC80"/><stop offset="45%" stop-color="#F56040"/><stop offset="100%" stop-color="#833AB4"/>
              </linearGradient>
            </defs>
            <rect x="6" y="6" width="36" height="36" rx="10" fill="url(#lg1)" opacity=".95"/>
            <circle cx="24" cy="24" r="9" fill="#fff" opacity=".2"/>
          </svg>
        </div>
        <p>InstaSave lets you preview and download Instagram Reels & videos as clean MP4 files.</p>
      </div>

      <nav class="ft-links" aria-label="Footer navigation">
        <h6>PAGES</h6>
        <ul>
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Terms &amp; Conditions</a></li>
          <li><a href="#">Privacy Policy</a></li>
          <li><a href="#">Disclaimer</a></li>
        </ul>
      </nav>

      <div class="ft-newsletter">
        <h6>NEWSLETTER</h6>
        <form id="ftForm" class="ft-form" novalidate>
          <input type="email" id="ftEmail" placeholder="Enter your email address" required/>
          <button type="submit">Subscribe Now</button>
        </form>
        <small id="ftMsg" class="ft-msg" aria-live="polite"></small>
      </div>
    </div>

    <hr class="ft-line"/>
    <div class="ft-copy">© <span id="ftYear"></span> InstaSave — All Rights Reserved</div>
  </footer>

  <!-- ===== SCRIPTS ===== -->
  <script>
  (function(){
    /* Pill nav active + thumb */
    const nav=document.getElementById('pillnav');
    if(nav){
      const track=nav.querySelector('.pill-track');
      const thumb=nav.querySelector('.pill-thumb');
      const pills=[...nav.querySelectorAll('.pill')];
      const move=(el,anim=true)=>{
        if(!el||!thumb||!track) return;
        const r=el.getBoundingClientRect(), pr=track.getBoundingClientRect();
        const left=r.left-pr.left, width=r.width;
        if(!anim){const t=thumb.style.transition; thumb.style.transition='none'; thumb.style.transform=`translateX(${left}px)`; thumb.style.width=`${width}px`; requestAnimationFrame(()=> thumb.style.transition=t||'');}
        else{thumb.style.transform=`translateX(${left}px)`; thumb.style.width=`${width}px`;}
      };
      const setActive=()=>{ let active=pills[0]; pills.forEach(a=>{a.classList.toggle('active',a===active); a.removeAttribute('aria-current');}); active.setAttribute('aria-current','page'); move(active,false); };
      setActive();
      window.addEventListener('resize',()=>move(nav.querySelector('.pill.active'),false),{passive:true});
      pills.forEach(p=>{p.addEventListener('mouseenter',()=>move(p,true)); p.addEventListener('focus',()=>move(p,true));});
      nav.addEventListener('mouseleave',()=>move(nav.querySelector('.pill.active'),true));
    }

    /* Theme toggle */
    const themeBtn=document.getElementById('themeBtn');
    const THEMES={light:'light',dark:'dark'};
    const apply=(t)=>{document.documentElement.setAttribute('data-theme',t); localStorage.setItem('site_theme',t); if(themeBtn) themeBtn.textContent=(t===THEMES.dark)?'🌙':'☀️';};
    const saved=localStorage.getItem('site_theme');
    const prefers=window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    apply(saved || (prefers?THEMES.dark:THEMES.light));
    themeBtn?.addEventListener('click',()=>{const cur=document.documentElement.getAttribute('data-theme')||THEMES.light; apply(cur===THEMES.dark?THEMES.light:THEMES.dark);});

    /* Language popup (same as index) */
    const wrap=document.querySelector('.lang-wrap'); const langBtn=document.getElementById('langBtn');
    const pop=document.getElementById('langPop'); const list=document.getElementById('langList'); const label=document.getElementById('langLabel');
    const openPop=(o)=>{wrap.classList.toggle('open',o); langBtn.setAttribute('aria-expanded',String(o)); if(o){pop.hidden=false;} else {setTimeout(()=>pop.hidden=true,120);} };
    const savedLang=localStorage.getItem('site_lang');
    if(savedLang){ const opt=list.querySelector(`.lang-opt[data-code="${savedLang}"]`); if(opt){ list.querySelectorAll('.lang-opt').forEach(o=>o.setAttribute('aria-selected','false')); opt.setAttribute('aria-selected','true'); label.textContent=opt.textContent.replace('✓','').trim(); } }
    langBtn.addEventListener('click',()=> openPop(!wrap.classList.contains('open')));
    list.addEventListener('click',(e)=>{ const opt=e.target.closest('.lang-opt'); if(!opt) return; list.querySelectorAll('.lang-opt').forEach(o=>o.setAttribute('aria-selected','false')); opt.setAttribute('aria-selected','true'); label.textContent=opt.textContent.replace('✓','').trim(); localStorage.setItem('site_lang',opt.dataset.code); openPop(false); });
    document.addEventListener('click',(e)=>{ if(!wrap.contains(e.target)) openPop(false); });
    document.addEventListener('keydown',(e)=>{ if(e.key==='Escape') openPop(false); });

    /* Preview interactions — only for single mode (grid has native controls) */
    const overlay=document.getElementById('playOverlay'); const video=document.getElementById('previewVideo');
    if(overlay && video){
      const sync=()=>{overlay.style.opacity=video.paused?'1':'0'; overlay.style.pointerEvents=video.paused?'auto':'none';};
      overlay.addEventListener('click',()=> video.paused?video.play():video.pause());
      video.addEventListener('play',sync); video.addEventListener('pause',sync); sync();
    }

    /* Share */
    const shareBtn=document.getElementById('shareBtn');
    if(shareBtn){
      shareBtn.addEventListener('click', async ()=>{
        const url=location.href;
        try{
          if(navigator.share){ await navigator.share({title:document.title,url}); }
          else if(navigator.clipboard){ await navigator.clipboard.writeText(url); alert('Link copied!'); }
        }catch{}
      });
    }

    /* Footer year + demo newsletter */
    const y=document.getElementById('ftYear'); if(y) y.textContent=new Date().getFullYear();
    (function(){
      const f=document.getElementById('ftForm'); const e=document.getElementById('ftEmail'); const m=document.getElementById('ftMsg');
      f?.addEventListener('submit',ev=>{
        ev.preventDefault();
        const ok=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.value.trim());
        if(!ok){ m.textContent='Please enter a valid email.'; m.classList.add('error'); return; }
        m.classList.remove('error'); m.textContent='Thanks! You are subscribed.'; f.reset();
      });
    })();
  })();
  </script>

  <!-- Language popup styles (shared) -->
  <style>
    .lang-wrap{ position:relative; display:flex; align-items:center; }
    .lang-pop{ position:absolute; right:0; top:calc(100% + 10px); width:clamp(320px,56vw,520px); background:#fff; color:#0f1220; border:1px solid rgba(0,0,0,.08); border-left:6px solid #C13584; border-radius:14px; box-shadow:0 16px 40px rgba(0,0,0,.18); padding:8px; z-index:100; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s ease, transform .18s ease; max-height:420px; overflow:auto; }
    .lang-wrap.open .lang-pop{ opacity:1; transform:translateY(0); pointer-events:auto; }
    .lang-pop[hidden]{ display:none; }
    .lang-wrap.open .hero-ss__lang svg{ transform:rotate(180deg); }
    .lang-list{ display:grid; grid-template-columns:1fr 1fr; border-radius:10px; overflow:hidden; background:#fff; }
    .lang-list li{ list-style:none; border-bottom:1px solid #eee; }
    .lang-list li:nth-child(odd){ border-right:1px solid #eee; }
    .lang-opt{ width:100%; text-align:left; background:transparent; border:0; cursor:pointer; padding:10px 12px; font-weight:600; color:#111827; border-radius:8px; display:flex; align-items:center; justify-content:space-between; }
    .lang-opt:hover{ background:#f3f4f6; }
    .lang-opt .check{ opacity:0; color:#C13584; font-weight:800; margin-left:12px; }
    .lang-opt[aria-selected="true"]{ background:#fde7f3; color:#C13584; }
    .lang-opt[aria-selected="true"] .check{ opacity:1; }
    @media (max-width:560px){
      .lang-pop{ width:min(92vw,420px) }
      .lang-list{ grid-template-columns:1fr }
      .lang-list li:nth-child(odd){ border-right:0 }
    }
  </style>
</body>
</html>
