<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Coming Soon — Dubai</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
<style>
  :root{--txt:#e8eef9;--acc1:#22d3ee;--acc2:#60a5fa;}
  *{box-sizing:border-box} html,body{height:100%}
  body {
    margin:0;color:var(--txt);font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
    display:flex;justify-content:center;align-items:center;text-align:center;
    background:
      linear-gradient(180deg,rgba(2,6,23,.65),rgba(2,6,23,.85) 40%,rgba(2,6,23,.95)),
      url('https://images.unsplash.com/photo-1572364769167-198dcb7b520c?q=80&w=627&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
  }
  .card{
    width:min(900px,92vw);border-radius:24px;padding:28px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
    box-shadow:0 20px 70px rgba(0,0,0,.55);backdrop-filter:blur(10px);position:relative;isolation:isolate;
  }
  h1{margin:0;font-size:clamp(28px,5vw,42px);line-height:1.1}
  .sub{opacity:.92;margin:10px 0 20px}
  .timer{display:flex;gap:12px;justify-content:center;margin:16px 0;flex-wrap:wrap}
  .box{min-width:92px;padding:16px 12px;border-radius:16px;background:rgba(2,6,23,.45);
    border:1px solid rgba(255,255,255,.18);text-align:center}
  .num{font-size:clamp(26px,5vw,40px);font-weight:800}
  .lbl{font-size:12px;letter-spacing:.08em;opacity:.85;text-transform:uppercase}
  .foot{margin-top:14px;font-size:12px;opacity:.8;text-align:center}
  .topbar{position:absolute;top:18px;right:18px}
  .lang{appearance:none;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.07);color:var(--txt);font-weight:600}
</style>
</head>
<body>
  <div class="card">
    <div class="topbar">
      <select id="lang" class="lang" aria-label="Language">
        <option value="en" selected>English</option>
        <option value="es">Español</option>
        <option value="ar">العربية</option>
      </select>
    </div>

    <h1 id="t-title">Coming Soon — Dubai</h1>
    <div class="sub" id="t-tag">BCN Cobalto Global General Trading LLC</div>

    <div class="timer">
      <div class="box"><div class="num" id="d">20</div><div class="lbl" id="l-d">Days</div></div>
      <div class="box"><div class="num" id="h">00</div><div class="lbl" id="l-h">Hours</div></div>
      <div class="box"><div class="num" id="m">00</div><div class="lbl" id="l-m">Minutes</div></div>
      <div class="box"><div class="num" id="s">00</div><div class="lbl" id="l-s">Seconds</div></div>
    </div>

    <div class="foot" id="t-when"></div>
    <div class="foot">© <span id="y"></span> BCN Cobalto Global General Trading LLC</div>
  </div>

<script>
  // Launch date: 20 days from now
  const launchAt = new Date(); launchAt.setDate(launchAt.getDate() + 20); launchAt.setHours(10,0,0,0);

  const dEl=document.getElementById('d'),hEl=document.getElementById('h'),mEl=document.getElementById('m'),sEl=document.getElementById('s'),whenEl=document.getElementById('t-when');
  const pad=n=>String(n).padStart(2,'0');

  function renderWhen(){
    const dubai=new Intl.DateTimeFormat('en-GB',{timeZone:'Asia/Dubai',year:'numeric',month:'short',day:'2-digit',hour:'2-digit',minute:'2-digit'}).format(launchAt);
    const local=new Intl.DateTimeFormat('en-GB',{timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,year:'numeric',month:'short',day:'2-digit',hour:'2-digit',minute:'2-digit'}).format(launchAt);
    whenEl.textContent=`Launch at ${dubai} (Dubai) · Your local time: ${local}`;
  }
  renderWhen();

  setInterval(()=>{
    const now=Date.now(),dist=launchAt.getTime()-now;
    if(dist<=0){["d","h","m","s"].forEach(id=>document.getElementById(id).textContent="00");
      whenEl.textContent="We are LIVE!"; return;}
    const d=Math.floor(dist/864e5),h=Math.floor(dist%864e5/36e5),m=Math.floor(dist%36e5/6e4),s=Math.floor(dist%6e4/1e3);
    dEl.textContent=pad(d); hEl.textContent=pad(h); mEl.textContent=pad(m); sEl.textContent=pad(s);
  },1000);

  // Language text
  const tr={
    en:{title:'Coming Soon — Dubai',tag:'BCN Cobalto Global General Trading LLC',days:'Days',hours:'Hours',minutes:'Minutes',seconds:'Seconds'},
    es:{title:'Próximamente — Dubái',tag:'BCN Cobalto Global General Trading LLC',days:'Días',hours:'Horas',minutes:'Minutos',seconds:'Segundos'},
    ar:{title:'قريباً — دبي',tag:'شركة BCN Cobalto للتجارة العامة',days:'الأيام',hours:'الساعات',minutes:'الدقائق',seconds:'الثواني'}
  };
  const els={title:document.getElementById('t-title'),tag:document.getElementById('t-tag'),
             ld:document.getElementById('l-d'),lh:document.getElementById('l-h'),
             lm:document.getElementById('l-m'),ls:document.getElementById('l-s'),html:document.documentElement};

  function setLang(k){
    const L=tr[k]; els.title.textContent=L.title; els.tag.textContent=L.tag;
    els.ld.textContent=L.days; els.lh.textContent=L.hours; els.lm.textContent=L.minutes; els.ls.textContent=L.seconds;
    els.html.setAttribute('dir',k==='ar'?'rtl':'ltr'); els.html.setAttribute('lang',k);
  }
  document.getElementById('lang').addEventListener('change',e=>setLang(e.target.value));
  setLang('en');

  document.getElementById('y').textContent=new Date().getFullYear();
</script>
</body>
</html>