{% extends 'pages/auth/_standalone.html' %}

{# auth/coming-soon — faithful port of src/html/auth/coming-soon.html
   Standalone off-app page (no sidebar/header). Same DOM/classes/ARIA,
   same demo copy, same Alpine helpers. Reference hrefs converted to
   clean Django routes (# -> /x/, index -> /). #}


{% block auth_body %}
  <style>
    @keyframes ax-spin-local { to { transform: rotate(360deg); } }
    .ax-spin { animation: ax-spin-local 0.7s var(--ax-ease-linear) infinite; }
    @media (prefers-reduced-motion: reduce) { .ax-spin { animation: none; } }
    .ax-cd__unit { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:84px; }
    @media (max-width: 575px) { .ax-cd__unit { min-width:64px; } }
  </style>

  <div class="ax-cluster" style="position:fixed;inset-block-start:var(--ax-space-5);inset-inline-end:var(--ax-space-6);z-index:5;gap:var(--ax-space-2);">
    <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Toggle color theme"
            x-data @click="$store.theme && $store.theme.toggle()">
      <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454l0 .008"/></svg>
    </button>
    <button type="button" class="ax-btn ax-btn--ghost ax-btn--sm">
      <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M3.6 9h16.8"/><path d="M3.6 15h16.8"/><path d="M11.5 3a17 17 0 0 0 0 18"/><path d="M12.5 3a17 17 0 0 1 0 18"/></svg>
      <span class="ax-btn__label">EN</span>
    </button>
  </div>

  <main id="ax-main" style="position:relative;z-index:1;width:100%;max-width:680px;text-align:center;" x-data="comingSoon()">

    <!-- brand -->
    <div class="ax-center" style="margin-block-end:var(--ax-space-6);">
      <a href="/" class="ax-cluster" style="gap:var(--ax-space-3);text-decoration:none;" aria-label="Vireo home">
        <span style="display:inline-grid;place-items:center;width:42px;height:42px;border-radius:var(--ax-radius-md);background:var(--ax-gradient-accent);color:var(--ax-on-accent);box-shadow:0 8px 22px -8px rgba(var(--ax-accent-rgb),.7);">
          <svg viewBox="0 0 32 32" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="axmk0" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse"><stop stop-color="#2BC4B0"/><stop offset="0.55" stop-color="#1E9E96"/><stop offset="1" stop-color="#6D5CF0"/></linearGradient></defs><path d="M4 4 H16 A12 12 0 0 1 28 16 V28 A0 0 0 0 1 28 28 H16 A12 12 0 0 1 4 16 V4 Z" fill="url(#axmk0)" stroke="none"/><circle cx="20.5" cy="11.5" r="2.6" fill="#0A0C11" fill-opacity="0.92" stroke="none"/></svg>
        </span>
        <b style="font-family:var(--ax-font-display);font-size:var(--ax-text-lg);color:var(--ax-text-strong);">Vireo</b>
      </a>
    </div>

    <!-- eyebrow rocket badge -->
    <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill" style="margin-block-end:var(--ax-space-4);">
      <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3"/><path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"/><path d="M14 9a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"/></svg>
      Launching soon
    </span>

    <h1 style="font-family:var(--ax-font-display);font-size:var(--ax-text-3xl);font-weight:600;color:var(--ax-text-strong);margin:0 0 var(--ax-space-3);letter-spacing:-.02em;line-height:1.1;" x-text="live ? 'We\'re live.' : 'Something precise is on the way.'">Something precise is on the way.</h1>
    <p style="font-size:var(--ax-text-md);color:var(--ax-text-muted);margin:0 auto var(--ax-space-8);max-width:46ch;">The next Vireo release lands soon — 6 new dashboards, a refreshed Aurora theme, and a faster build. Leave your email and we'll tell you the moment it's ready.</p>

    <!-- ── COUNTDOWN ── -->
    <div class="ax-card" style="display:inline-block;padding:var(--ax-space-6) var(--ax-space-8);margin-block-end:var(--ax-space-8);">
      <div class="ax-cluster" style="gap:var(--ax-space-4);justify-content:center;align-items:flex-start;" role="timer" aria-live="off" :aria-label="`${cd.d} days, ${cd.h} hours, ${cd.m} minutes, ${cd.s} seconds remaining`">
        <div class="ax-cd__unit">
          <span class="ax-num" x-text="cd.d" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-3xl);font-weight:600;color:var(--ax-text-strong);line-height:1;">30</span>
          <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-transform:uppercase;letter-spacing:.08em;">Days</span>
        </div>
        <span style="font-family:var(--ax-font-mono);font-size:var(--ax-text-2xl);color:var(--ax-text-subtle);line-height:1.4;">:</span>
        <div class="ax-cd__unit">
          <span class="ax-num" x-text="cd.h" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-3xl);font-weight:600;color:var(--ax-text-strong);line-height:1;">00</span>
          <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-transform:uppercase;letter-spacing:.08em;">Hours</span>
        </div>
        <span style="font-family:var(--ax-font-mono);font-size:var(--ax-text-2xl);color:var(--ax-text-subtle);line-height:1.4;">:</span>
        <div class="ax-cd__unit">
          <span class="ax-num" x-text="cd.m" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-3xl);font-weight:600;color:var(--ax-text-strong);line-height:1;">00</span>
          <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-transform:uppercase;letter-spacing:.08em;">Minutes</span>
        </div>
        <span style="font-family:var(--ax-font-mono);font-size:var(--ax-text-2xl);color:var(--ax-text-subtle);line-height:1.4;">:</span>
        <div class="ax-cd__unit">
          <span class="ax-num" x-text="cd.s" style="font-family:var(--ax-font-mono);font-size:var(--ax-text-3xl);font-weight:600;color:var(--ax-accent);line-height:1;">00</span>
          <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);text-transform:uppercase;letter-spacing:.08em;">Seconds</span>
        </div>
      </div>
    </div>

    <!-- ── NOTIFY FORM ── -->
    <form class="ax-center" @submit.prevent="notify()" novalidate style="margin-block-end:var(--ax-space-6);">
      <div x-show="!subscribed" x-cloak style="width:100%;max-width:440px;">
        <div class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:nowrap;">
          <input type="email" class="ax-input" placeholder="you@company.com" autocomplete="email"
                 x-model="email" :aria-invalid="emailError" aria-label="Email address"
                 :style="emailError ? 'border-color:var(--ax-danger-500)' : ''" @input="emailError=false" style="flex:1 1 auto;min-height:44px;" />
          <button type="submit" class="ax-btn ax-btn--primary" :aria-busy="loading" :disabled="loading" style="min-height:44px;flex:0 0 auto;">
            <svg x-show="loading" x-cloak class="ax-btn__icon ax-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3a9 9 0 1 0 9 9"/></svg>
            <span class="ax-btn__label">Notify me</span>
          </button>
        </div>
        <p x-show="emailError" x-cloak class="ax-field__message ax-error" style="text-align:start;margin-block-start:var(--ax-space-2);">Please enter a valid email address.</p>
        <!-- honeypot -->
        <input type="text" name="company_url" x-model="honey" tabindex="-1" autocomplete="off" aria-hidden="true" class="ax-visually-hidden" />
      </div>
      <div x-show="subscribed" x-cloak x-transition class="ax-cluster" style="gap:var(--ax-space-2);color:var(--ax-success-500);font-size:var(--ax-text-md);font-weight:600;">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
        You're on the list — we'll be in touch.
      </div>
    </form>

    <!-- ── SOCIAL ROW ── -->
    <div class="ax-cluster" style="gap:var(--ax-space-2);justify-content:center;">
      <a href="#" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Vireo on X">
        <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l11.733 16h4.267l-11.733 -16l-4.267 0"/><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"/></svg>
      </a>
      <a href="#" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Vireo on GitHub">
        <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/></svg>
      </a>
      <a href="#" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Vireo on LinkedIn">
        <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 11v5"/><path d="M8 8v.01"/><path d="M12 16v-5"/><path d="M16 16v-3a2 2 0 1 0 -4 0"/><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10"/></svg>
      </a>
      <a href="#" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Vireo on Dribbble">
        <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/><path d="M9 3.6c5 6 7 10.5 7.5 16.2"/><path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4"/><path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5"/></svg>
      </a>
    </div>

    <p style="margin-block-start:var(--ax-space-8);font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);">© 2026 Vireo · We'll only email you about the launch.</p>
  </main>

  
{% endblock %}

{% block auth_scripts %}
  <script>
    function comingSoon() {
      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      const target = Date.now() + 30*24*60*60*1000; // now + 30 days
      const pad = (n) => String(n).padStart(2,'0');
      return {
        email:'', honey:'', loading:false, subscribed:false, emailError:false, live:false,
        cd:{ d:'30', h:'00', m:'00', s:'00' },
        init(){
          const update=()=>{
            let diff=target-Date.now();
            if(diff<=0){ this.live=true; this.cd={d:'00',h:'00',m:'00',s:'00'}; return; }
            const d=Math.floor(diff/86400000); diff-=d*86400000;
            const h=Math.floor(diff/3600000); diff-=h*3600000;
            const m=Math.floor(diff/60000); diff-=m*60000;
            const s=Math.floor(diff/1000);
            this.cd={ d:pad(d), h:pad(h), m:pad(m), s:pad(s) };
          };
          update(); if(!reduce) setInterval(update,1000);
        },
        notify(){
          if(this.honey) { this.subscribed=true; return; } // bot trap
          if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email)){ this.emailError=true; return; }
          this.loading=true;
          setTimeout(()=>{ this.loading=false; this.subscribed=true; },650);
        }
      };
    }
  </script>
{% endblock %}