{% extends 'base.html' %}

{% block main %}
        <div x-data="axUiTour()">

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Tour &amp; Coachmarks</h1>
              <p class="ax-page-head__subtitle">A spotlighted walkthrough that dims the page and anchors a coachmark to each real element — with progress, keyboard nav and a skip path.</p>
            </div>
            <div class="ax-page-head__actions">
              <button type="button" class="ax-btn ax-btn--ghost" @click="active && skip()" :disabled="active">
                <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="M5 12l5 5l10 -10"/></svg>
                <span class="ax-btn__label" x-text="seenCount + ' of ' + steps.length + ' viewed'"></span>
              </button>
              <button type="button" class="ax-btn ax-btn--primary" @click="start()">
                <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="M7 4v16l13 -8z"/></svg>
                <span class="ax-btn__label">Start tour</span>
              </button>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT (the surface the tour walks through) ════════════════ -->
        <div class="ax-dash-grid">

          <!-- intro / how-it-works -->
          <section class="ax-card ax-col--4" data-tour="intro" role="region" aria-label="About the tour">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Walkthrough</span>
                <h2 class="ax-card__title">How it works</h2>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <ul class="ax-list ax-list--compact" style="margin:0;">
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--xs" style="background:var(--ax-accent-wash);color:var(--ax-accent);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 8v.01"/><path d="M11 12h1v4h1"/></svg></span></span>
                  <span class="ax-list__content"><span class="ax-list__title">A scrim dims everything</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">except the current target.</span></span>
                </li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--xs" style="background:color-mix(in oklab,var(--ax-viz-cyan) 18%,transparent);color:var(--ax-viz-cyan);"><svg class="ax-avatar__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 6l6 6l-6 6"/></svg></span></span>
                  <span class="ax-list__content"><span class="ax-list__title">Arrow keys move</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">Esc skips, Enter advances.</span></span>
                </li>
                <li class="ax-list__row" style="padding-inline:0;">
                  <span class="ax-list__leading"><span class="ax-avatar ax-avatar--xs" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg></span></span>
                  <span class="ax-list__content"><span class="ax-list__title">Honours reduced-motion</span><span style="display:block;font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">scroll &amp; fades stay instant.</span></span>
                </li>
              </ul>
              <button type="button" class="ax-btn ax-btn--primary ax-btn--block ax-btn--sm" @click="start()">
                <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="M7 4v16l13 -8z"/></svg>
                <span class="ax-btn__label">Take the tour</span>
              </button>
            </div>
          </section>

          <!-- search target -->
          <section class="ax-card ax-col--8" data-tour="search" role="region" aria-label="Global search">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Step 2</span>
                <h2 class="ax-card__title">Find anything, fast</h2>
                <p class="ax-card__subtitle">Search across reports, people, orders and settings.</p>
              </div>
              <div class="ax-card__actions">
                <span class="ax-kbd">⌘</span><span class="ax-kbd">K</span>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-field">
                <label class="ax-label" for="tour-search">Search</label>
                <div style="position:relative;">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="var(--ax-text-subtle)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-block-start:50%;inset-inline-start:var(--ax-space-3);transform:translateY(-50%);pointer-events:none;"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                  <input id="tour-search" type="search" class="ax-input" placeholder="Try “June revenue” or “Ava Sutton”…" style="padding-inline-start:var(--ax-space-9);" autocomplete="off">
                </div>
                <span class="ax-help">Results are scoped to your workspace.</span>
              </div>
            </div>
          </section>

          <!-- KPI target -->
          <div class="ax-card ax-kpi" data-tour="kpi" role="region" aria-label="Total revenue">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16.7 8a3 3 0 0 0 -2.7 -2h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1 -2.7 -2"/><path d="M12 3v3m0 12v3"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>12.4%</span>
              </div>
              <div class="ax-kpi__label">Total Revenue</div>
              <div class="ax-kpi__value ax-num">$748.2K</div>
            </div>
          </div>
          <div class="ax-card ax-kpi" role="region" aria-label="Orders">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 15l6 -6l6 6"/></svg>8.1%</span>
              </div>
              <div class="ax-kpi__label">Orders</div>
              <div class="ax-kpi__value ax-num">1,248</div>
            </div>
          </div>
          <div class="ax-card ax-kpi" role="region" aria-label="Customers">
            <div class="ax-card__body">
              <div class="ax-kpi__top">
                <span class="ax-kpi__icon ax-kpi__icon--c3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"/><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"/></svg></span>
                <span class="ax-kpi__delta ax-kpi__delta--down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6l6 -6"/></svg>3.1%</span>
              </div>
              <div class="ax-kpi__label">Customers</div>
              <div class="ax-kpi__value ax-num">3,920</div>
            </div>
          </div>

          <!-- chart target -->
          <section class="ax-card ax-card--chart ax-col--8" data-tour="chart" role="region" aria-label="Revenue trend">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Step 4</span>
                <h2 class="ax-card__title">Revenue trend</h2>
                <p class="ax-card__subtitle">Twelve months, re-themes with your accent</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div data-ax-chart="apex" data-ax-chart-type="area" data-ax-chart-height="260" data-ax-chart-legend="none" data-ax-chart-accent="true"
                data-ax-chart-series='[{"name":"Revenue","data":[42100,48300,45200,53400,57100,55600,62400,60200,68900,72300,70100,74820]}]' aria-label="Area chart of monthly revenue"></div>
            </div>
          </section>

          <!-- checklist + CTA target -->
          <section class="ax-card ax-col--4" data-tour="checklist" role="region" aria-label="Setup checklist">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Step 5</span>
                <h2 class="ax-card__title">Finish setup</h2>
                <p class="ax-card__subtitle"><span class="ax-num">2</span> of <span class="ax-num">4</span> done</p>
              </div>
            </div>
            <div class="ax-card__body" style="padding-top:0;">
              <div class="ax-progress ax-progress--sm" style="margin-bottom:var(--ax-space-4);"><div class="ax-progress__track"><div class="ax-progress__fill" style="width:50%;"></div></div></div>
              <ul class="ax-list ax-list--compact" style="margin:0;">
                <li class="ax-list__row"><span class="ax-list__leading"><span class="ax-avatar ax-avatar--xs" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg></span></span><span class="ax-list__content"><span class="ax-list__title" style="text-decoration:line-through;color:var(--ax-text-muted);">Create your workspace</span></span></li>
                <li class="ax-list__row"><span class="ax-list__leading"><span class="ax-avatar ax-avatar--xs" style="background:color-mix(in oklab,var(--ax-viz-emerald) 18%,transparent);color:var(--ax-viz-emerald);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg></span></span><span class="ax-list__content"><span class="ax-list__title" style="text-decoration:line-through;color:var(--ax-text-muted);">Invite a teammate</span></span></li>
                <li class="ax-list__row"><span class="ax-list__leading"><span class="ax-avatar ax-avatar--xs" style="background:var(--ax-accent-wash);color:var(--ax-accent);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l14 0"/></svg></span></span><span class="ax-list__content"><span class="ax-list__title">Connect a data source</span></span></li>
                <li class="ax-list__row"><span class="ax-list__leading"><span class="ax-avatar ax-avatar--xs" style="background:var(--ax-fill-hover);color:var(--ax-text-subtle);"><svg class="ax-avatar__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"/></svg></span></span><span class="ax-list__content"><span class="ax-list__title">Publish your first report</span></span></li>
              </ul>
            </div>
            <div class="ax-card__footer" data-tour="cta">
              <button type="button" class="ax-btn ax-btn--primary ax-btn--block 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="M12 5l0 14"/><path d="M5 12l14 0"/></svg><span class="ax-btn__label">Connect a source</span></button>
            </div>
          </section>
        </div>

        <!-- ════ TOUR OVERLAY (spotlight + coachmark) ════ -->
        <div x-show="active" x-cloak style="position:fixed;inset:0;z-index:80;" @keydown.escape.window="skip()" @keydown.arrow-right.window="next()" @keydown.arrow-left.window="prev()" @keydown.enter.window.prevent="next()" @resize.window="position()" @scroll.window="position()">
          <!-- scrim with a transparent cut-out via box-shadow spread on the spotlight rect -->
          <div aria-hidden="true" style="position:absolute;border-radius:var(--ax-radius-lg);transition:all var(--ax-motion-base) var(--ax-ease-standard);box-shadow:0 0 0 9999px rgba(8,10,16,.62), 0 0 0 2px rgba(var(--ax-accent-rgb),.9);"
            :style="`top:${spot.top}px;left:${spot.left}px;width:${spot.width}px;height:${spot.height}px;`"></div>

          <!-- coachmark popover -->
          <div class="ax-popover" role="dialog" aria-modal="true" aria-labelledby="ui-tour-step-title"
            style="position:absolute;width:320px;max-width:calc(100vw - 32px);transition:top var(--ax-motion-base) var(--ax-ease-standard), left var(--ax-motion-base) var(--ax-ease-standard);"
            :style="`top:${card.top}px;left:${card.left}px;`" aria-live="polite">
            <div class="ax-popover__panel" style="position:relative;left:auto;top:auto;width:100%;">
              <div class="ax-popover__header" style="display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ax-border);">
                <span class="ax-badge ax-badge--soft ax-badge--accent ax-badge--pill ax-num"><span x-text="index+1"></span> of <span x-text="steps.length"></span></span>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon ax-btn--sm" @click="skip()" aria-label="Skip tour"><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="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
              </div>
              <div class="ax-popover__body">
                <h3 id="ui-tour-step-title" style="margin:0 0 var(--ax-space-2);font-family:var(--ax-font-display);font-size:var(--ax-text-md);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);" x-text="steps[index].title"></h3>
                <p style="margin:0;font-size:var(--ax-text-sm);color:var(--ax-text-muted);line-height:1.55;" x-text="steps[index].body"></p>
                <!-- progress dots -->
                <div class="ax-cluster" style="gap:6px;margin-top:var(--ax-space-4);" aria-hidden="true">
                  <template x-for="(s,i) in steps" :key="'dot'+i">
                    <span style="height:7px;border-radius:50%;transition:all var(--ax-motion-fast);" :style="i===index ? 'background:var(--ax-accent);width:18px;border-radius:var(--ax-radius-pill);' : 'background:var(--ax-border-strong);width:7px;'"></span>
                  </template>
                </div>
              </div>
              <div class="ax-popover__footer" style="display:flex;align-items:center;justify-content:space-between;gap:var(--ax-space-2);">
                <button type="button" class="ax-btn ax-btn--link ax-btn--sm" @click="skip()"><span class="ax-btn__label">Skip</span></button>
                <div class="ax-cluster" style="gap:var(--ax-space-2);">
                  <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" @click="prev()" :disabled="index===0"><span class="ax-btn__label">Back</span></button>
                  <button type="button" class="ax-btn ax-btn--primary ax-btn--sm" @click="next()"><span class="ax-btn__label" x-text="index===steps.length-1 ? 'Done' : 'Next'"></span></button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- completion toast -->
        <div x-show="done" x-cloak x-transition class="ax-toast ax-toast--success" role="status"
          style="position:fixed;inset-block-end:var(--ax-space-6);inset-inline-end:var(--ax-space-6);z-index:90;max-width:340px;">
          <svg class="ax-toast__icon" viewBox="0 0 24 24" fill="none" stroke="var(--ax-success-500)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
          <div class="ax-toast__content"><p class="ax-toast__title">You're all set</p><p class="ax-toast__message">Tour complete — explore your dashboard.</p></div>
          <button type="button" class="ax-toast__dismiss" @click="done=false" aria-label="Dismiss" style="opacity:1;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6l-12 12"/><path d="M6 6l12 12"/></svg></button>
        </div>

        <!-- ════ Page-local tour component ════ -->
        <script>
          function axUiTour() {
            return {
              active: false, done: false, index: 0, seenCount: 0,
              spot: { top: 0, left: 0, width: 0, height: 0 },
              card: { top: 0, left: 0 },
              steps: [
                { sel: '[data-tour="intro"]',     title: 'Welcome aboard',        body: 'This quick tour highlights the key surfaces of your workspace. It takes about thirty seconds.' },
                { sel: '[data-tour="search"]',    title: 'Search everything',     body: 'Press ⌘K from anywhere to jump to reports, people or orders. Try a name or a metric.' },
                { sel: '[data-tour="kpi"]',       title: 'Your headline metrics', body: 'KPI cards summarise revenue, orders and customers at a glance. Each delta shows the trend versus last period.' },
                { sel: '[data-tour="chart"]',     title: 'Track the trend',       body: 'The revenue chart re-themes with your accent and works in light or dark. Hover any point for the exact figure.' },
                { sel: '[data-tour="checklist"]', title: 'Finish your setup',     body: 'Complete these onboarding steps to unlock the full workspace. You can return here any time.' },
                { sel: '[data-tour="cta"]',       title: 'Take the next step',    body: 'Connect a data source to populate your first live report. That\'s it — you\'re ready to go.' },
              ],
              prefersReduced() { try { return window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) { return false; } },
              start() {
                this.index = 0; this.done = false; this.active = true;
                this.$nextTick(() => this.position());
              },
              position() {
                if (!this.active) return;
                const el = document.querySelector(this.steps[this.index].sel);
                if (!el) return;
                el.scrollIntoView({ block: 'center', behavior: this.prefersReduced() ? 'auto' : 'smooth' });
                const pad = 8;
                const r = el.getBoundingClientRect();
                this.spot = { top: r.top - pad, left: r.left - pad, width: r.width + pad * 2, height: r.height + pad * 2 };
                let top = r.bottom + 14;
                let left = r.left;
                const cardW = 320, cardH = 240;
                if (top + cardH > window.innerHeight) top = Math.max(16, r.top - cardH - 14);
                if (left + cardW > window.innerWidth) left = window.innerWidth - cardW - 16;
                this.card = { top: Math.max(16, top), left: Math.max(16, left) };
                this.seenCount = Math.max(this.seenCount, this.index + 1);
              },
              next() {
                if (this.index < this.steps.length - 1) { this.index++; this.$nextTick(() => this.position()); }
                else this.finish();
              },
              prev() { if (this.index > 0) { this.index--; this.$nextTick(() => this.position()); } },
              finish() { this.active = false; this.done = true; setTimeout(() => { this.done = false; }, 4500); },
              skip() { this.active = false; },
            };
          }
        </script>

        </div>
{% endblock %}