/**
 * rTrips demo page — server-rendered HTML body.
 *
 * "Alpine Explorer 2026" dashboard with 6 cards powered by the rStack:
 * Maps (SVG), Notes (packing checklist), Calendar (grid),
 * Polls (bars), Funds (expenses), Cart (gear progress).
 *
 * Client-side trips-demo.ts populates all cards via WebSocket snapshots.
 */

export function renderDemo(): string {
	return `
<div class="rd-root" style="--rd-accent-from:#14b8a6; --rd-accent-to:#06b6d4">

  <!-- ── Trip Header ── -->
  <section class="rd-hero">
    <div style="display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem 1rem;background:rgba(20,184,166,0.1);border:1px solid rgba(20,184,166,0.2);border-radius:9999px;font-size:0.875rem;color:#5eead4;font-weight:500;margin-bottom:1.5rem;">
      <span id="rd-hero-dot" style="width:0.5rem;height:0.5rem;border-radius:9999px;background:#14b8a6;animation:rd-pulse 2s ease-in-out infinite;"></span>
      <span id="rd-hero-label">Interactive Demo</span>
    </div>
    <h1 id="rd-trip-title" style="background:linear-gradient(135deg,#5eead4,#67e8f9,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;">Alpine Explorer 2026</h1>
    <p class="rd-subtitle" id="rd-trip-route">Chamonix → Zermatt → Dolomites</p>
    <div class="rd-meta" id="rd-trip-meta">
      <span>📅 Jul 6–20, 2026</span>
      <span>💶 ~€4,000 budget</span>
      <span>🏔️ 3 countries</span>
    </div>
    <div class="rd-avatars" id="rd-avatars">
      <div class="rd-avatar" style="background:#64748b" title="Loading">…</div>
    </div>
  </section>

  <!-- ── Context bar ── -->
  <section class="rd-section rd-section--narrow">
    <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.5rem;">
      <p style="text-align:center;font-size:0.875rem;color:#94a3b8;max-width:40rem;margin:0;">
        Every trip is powered by the <span style="color:#e2e8f0;font-weight:500">rStack</span> —
        a suite of collaborative tools that handle routes, notes, schedules, voting, expenses,
        and shared purchases. Each card below shows live data with a link to the full tool.
      </p>
      <button id="rd-reset-btn" class="rd-btn rd-btn--ghost" disabled>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
        Reset Demo
      </button>
    </div>
  </section>

  <!-- ── 6-Card Dashboard Grid ── -->
  <section class="rd-section">
    <div class="rd-trips-grid">

      <!-- 1. Route Map (span 2) -->
      <div class="rd-card rd-trips-card rd-trips-card--span2" id="rd-card-maps">
        <div class="rd-trips-card-header">
          <div style="display:flex;align-items:center;gap:0.5rem;">
            <span style="font-size:1.125rem;">🗺️</span>
            <span style="font-weight:600;font-size:0.875rem;">Route Map</span>
            <span class="rd-trips-live" id="rd-maps-live" style="display:none;">
              <span style="width:6px;height:6px;border-radius:50%;background:#34d399;animation:rd-pulse 2s ease-in-out infinite;"></span>
              live
            </span>
          </div>
          <a href="https://rmaps.online" target="_blank" rel="noopener noreferrer" class="rd-trips-open-link">Open in rMaps ↗</a>
        </div>
        <div class="rd-trips-card-body">
          <div style="position:relative;width:100%;border-radius:0.75rem;background:rgba(15,23,42,0.6);overflow:hidden;">
            <svg id="rd-map-svg" viewBox="0 0 800 300" style="width:100%;height:auto;display:block;" xmlns="http://www.w3.org/2000/svg">
              <!-- Mountain silhouettes -->
              <path d="M0 280 L60 200 L100 240 L160 160 L200 210 L260 130 L320 180 L380 100 L420 150 L480 80 L540 140 L600 110 L660 160 L720 120 L800 180 L800 300 L0 300 Z" fill="rgba(30,41,59,0.8)"/>
              <path d="M0 280 L80 220 L140 250 L200 190 L280 230 L340 170 L400 200 L460 150 L520 190 L580 160 L640 200 L700 170 L800 220 L800 300 L0 300 Z" fill="rgba(51,65,85,0.6)"/>
              <path d="M370 100 L380 100 L390 108 L375 105 Z" fill="rgba(255,255,255,0.4)"/>
              <path d="M470 80 L480 80 L492 90 L476 86 Z" fill="rgba(255,255,255,0.5)"/>
              <path d="M590 110 L600 110 L612 120 L598 116 Z" fill="rgba(255,255,255,0.4)"/>
              <!-- Route line (default) -->
              <path id="rd-route-path" d="M160 180 C250 160, 350 200, 430 150 C510 100, 560 160, 650 140" fill="none" stroke="rgba(94,234,212,0.7)" stroke-width="3" stroke-dasharray="10 6"/>
              <!-- Default destination pins -->
              <g id="rd-map-pins">
                <g><circle cx="160" cy="180" r="8" fill="#14b8a6" stroke="#0d9488" stroke-width="2"/><text x="160" y="210" text-anchor="middle" fill="#94a3b8" font-size="12" font-weight="600">Chamonix</text><text x="160" y="224" text-anchor="middle" fill="#64748b" font-size="10">Jul 6–10</text></g>
                <g><circle cx="430" cy="150" r="8" fill="#06b6d4" stroke="#0891b2" stroke-width="2"/><text x="430" y="180" text-anchor="middle" fill="#94a3b8" font-size="12" font-weight="600">Zermatt</text><text x="430" y="194" text-anchor="middle" fill="#64748b" font-size="10">Jul 10–14</text></g>
                <g><circle cx="650" cy="140" r="8" fill="#8b5cf6" stroke="#7c3aed" stroke-width="2"/><text x="650" y="170" text-anchor="middle" fill="#94a3b8" font-size="12" font-weight="600">Dolomites</text><text x="650" y="184" text-anchor="middle" fill="#64748b" font-size="10">Jul 14–20</text></g>
              </g>
              <!-- Activity icons -->
              <text x="280" y="168" font-size="16">🥾</text>
              <text x="350" y="188" font-size="16">🧗</text>
              <text x="500" y="128" font-size="16">🚵</text>
              <text x="560" y="148" font-size="16">🪂</text>
              <text x="620" y="158" font-size="16">🛶</text>
            </svg>
            <div style="position:absolute;bottom:0.75rem;left:0.75rem;display:flex;gap:0.75rem;font-size:0.75rem;color:#94a3b8;">
              <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#14b8a6;"></span> France</span>
              <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#06b6d4;"></span> Switzerland</span>
              <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#8b5cf6;"></span> Italy</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 2. Trip Notes (packing checklist) -->
      <div class="rd-card rd-trips-card" id="rd-card-notes">
        <div class="rd-trips-card-header">
          <div style="display:flex;align-items:center;gap:0.5rem;">
            <span style="font-size:1.125rem;">📝</span>
            <span style="font-weight:600;font-size:0.875rem;">Trip Notes</span>
            <span class="rd-trips-live" id="rd-notes-live" style="display:none;">
              <span style="width:6px;height:6px;border-radius:50%;background:#34d399;animation:rd-pulse 2s ease-in-out infinite;"></span>
              live
            </span>
          </div>
          <a href="https://rnotes.online" target="_blank" rel="noopener noreferrer" class="rd-trips-open-link">Open in rNotes ↗</a>
        </div>
        <div class="rd-trips-card-body" id="rd-notes-body">
          <div>
            <h4 class="rd-trips-sub-heading">Packing Checklist</h4>
            <div id="rd-packing-list" class="rd-trips-skeleton">
              <div style="height:0.875rem;background:rgba(51,65,85,0.5);border-radius:0.25rem;width:75%;margin-bottom:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
              <div style="height:0.875rem;background:rgba(51,65,85,0.5);border-radius:0.25rem;width:50%;margin-bottom:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
              <div style="height:0.875rem;background:rgba(51,65,85,0.5);border-radius:0.25rem;width:66%;margin-bottom:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
              <div style="height:0.875rem;background:rgba(51,65,85,0.5);border-radius:0.25rem;width:33%;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
            </div>
          </div>
          <div style="margin-top:1rem;">
            <h4 class="rd-trips-sub-heading">Trip Rules</h4>
            <ol style="margin:0;padding:0 0 0 1.25rem;font-size:0.8125rem;color:#cbd5e1;line-height:1.75;">
              <li>Majority vote on daily activities</li>
              <li>Shared expenses split equally</li>
              <li>Quiet hours after 10pm in huts</li>
              <li>Everyone carries their own pack</li>
            </ol>
          </div>
        </div>
      </div>

      <!-- 3. Group Calendar (span 2) -->
      <div class="rd-card rd-trips-card rd-trips-card--span2" id="rd-card-cal">
        <div class="rd-trips-card-header">
          <div style="display:flex;align-items:center;gap:0.5rem;">
            <span style="font-size:1.125rem;">📅</span>
            <span style="font-weight:600;font-size:0.875rem;">Group Calendar</span>
            <span class="rd-trips-live" id="rd-cal-live" style="display:none;">
              <span style="width:6px;height:6px;border-radius:50%;background:#34d399;animation:rd-pulse 2s ease-in-out infinite;"></span>
              live
            </span>
          </div>
          <a href="https://rcal.online" target="_blank" rel="noopener noreferrer" class="rd-trips-open-link">Open in rCal ↗</a>
        </div>
        <div class="rd-trips-card-body">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;">
            <h4 style="font-size:0.875rem;font-weight:600;color:#e2e8f0;margin:0;">July 2026</h4>
            <span id="rd-cal-days" style="font-size:0.75rem;color:#94a3b8;">15 days</span>
          </div>
          <div id="rd-cal-grid"></div>
          <div style="display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:0.75rem;font-size:0.75rem;color:#94a3b8;">
            <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#14b8a6;"></span> Travel</span>
            <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#10b981;"></span> Hiking</span>
            <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#f59e0b;"></span> Adventure</span>
            <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#8b5cf6;"></span> Culture</span>
            <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#64748b;"></span> Rest</span>
            <span style="display:flex;align-items:center;gap:0.25rem;"><span style="width:8px;height:8px;border-radius:50%;background:#06b6d4;"></span> Transit</span>
          </div>
        </div>
      </div>

      <!-- 4. Group Polls -->
      <div class="rd-card rd-trips-card" id="rd-card-polls">
        <div class="rd-trips-card-header">
          <div style="display:flex;align-items:center;gap:0.5rem;">
            <span style="font-size:1.125rem;">🗳️</span>
            <span style="font-weight:600;font-size:0.875rem;">Group Polls</span>
            <span class="rd-trips-live" id="rd-polls-live" style="display:none;">
              <span style="width:6px;height:6px;border-radius:50%;background:#34d399;animation:rd-pulse 2s ease-in-out infinite;"></span>
              live
            </span>
          </div>
          <a href="https://rvote.online" target="_blank" rel="noopener noreferrer" class="rd-trips-open-link">Open in rVote ↗</a>
        </div>
        <div class="rd-trips-card-body" id="rd-polls-body">
          <div class="rd-trips-skeleton">
            <div style="height:0.875rem;background:rgba(51,65,85,0.5);border-radius:0.25rem;width:75%;margin-bottom:0.75rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
            <div style="height:0.5rem;background:rgba(51,65,85,0.3);border-radius:0.25rem;width:100%;margin-bottom:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
            <div style="height:0.5rem;background:rgba(51,65,85,0.3);border-radius:0.25rem;width:66%;margin-bottom:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
            <div style="height:0.5rem;background:rgba(51,65,85,0.3);border-radius:0.25rem;width:33%;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
          </div>
        </div>
      </div>

      <!-- 5. Group Expenses -->
      <div class="rd-card rd-trips-card" id="rd-card-funds">
        <div class="rd-trips-card-header">
          <div style="display:flex;align-items:center;gap:0.5rem;">
            <span style="font-size:1.125rem;">💰</span>
            <span style="font-weight:600;font-size:0.875rem;">Group Expenses</span>
            <span class="rd-trips-live" id="rd-funds-live" style="display:none;">
              <span style="width:6px;height:6px;border-radius:50%;background:#34d399;animation:rd-pulse 2s ease-in-out infinite;"></span>
              live
            </span>
          </div>
          <a href="https://rfunds.online" target="_blank" rel="noopener noreferrer" class="rd-trips-open-link">Open in rFunds ↗</a>
        </div>
        <div class="rd-trips-card-body" id="rd-funds-body">
          <div style="text-align:center;padding:0.5rem 0;">
            <p id="rd-funds-total" style="font-size:1.5rem;font-weight:700;color:white;margin:0;">...</p>
            <p style="font-size:0.75rem;color:#94a3b8;margin:0.25rem 0 0;">Total group spending</p>
          </div>
          <div class="rd-trips-skeleton" id="rd-funds-skeleton">
            <div style="height:0.875rem;background:rgba(51,65,85,0.5);border-radius:0.25rem;width:75%;margin-bottom:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
            <div style="height:0.875rem;background:rgba(51,65,85,0.5);border-radius:0.25rem;width:50%;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
          </div>
          <div id="rd-funds-expenses" style="display:none;"></div>
          <div id="rd-funds-balances" style="display:none;"></div>
        </div>
      </div>

      <!-- 6. Shared Gear (span 2) -->
      <div class="rd-card rd-trips-card rd-trips-card--span2" id="rd-card-cart">
        <div class="rd-trips-card-header">
          <div style="display:flex;align-items:center;gap:0.5rem;">
            <span style="font-size:1.125rem;">🛒</span>
            <span style="font-weight:600;font-size:0.875rem;">Shared Gear</span>
            <span class="rd-trips-live" id="rd-cart-live" style="display:none;">
              <span style="width:6px;height:6px;border-radius:50%;background:#34d399;animation:rd-pulse 2s ease-in-out infinite;"></span>
              live
            </span>
          </div>
          <a href="https://rcart.online" target="_blank" rel="noopener noreferrer" class="rd-trips-open-link">Open in rCart ↗</a>
        </div>
        <div class="rd-trips-card-body" id="rd-cart-body">
          <div class="rd-trips-skeleton" id="rd-cart-skeleton">
            <div style="height:0.5rem;background:rgba(51,65,85,0.5);border-radius:0.25rem;width:100%;margin-bottom:0.75rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">
              <div style="height:3rem;background:rgba(51,65,85,0.3);border-radius:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
              <div style="height:3rem;background:rgba(51,65,85,0.3);border-radius:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
              <div style="height:3rem;background:rgba(51,65,85,0.3);border-radius:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
              <div style="height:3rem;background:rgba(51,65,85,0.3);border-radius:0.5rem;animation:rd-skeleton-pulse 1.5s ease-in-out infinite;"></div>
            </div>
          </div>
          <div id="rd-cart-content" style="display:none;"></div>
        </div>
      </div>

    </div>
  </section>

  <!-- ── CTA ── -->
  <section class="rd-section rd-section--narrow">
    <div class="rd-cta">
      <h2>Plan Your Own Group Adventure</h2>
      <p>
        The rStack gives your group everything you need &mdash; routes, schedules, polls,
        shared expenses, and gear lists &mdash; all connected in one trip canvas.
      </p>
      <a href="/create-space" style="background:linear-gradient(135deg,#14b8a6,#06b6d4);box-shadow:0 8px 24px rgba(20,184,166,0.25);">
        Start Planning
      </a>
    </div>
  </section>

</div>

<style>
  @keyframes rd-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

  .rd-trips-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .rd-trips-grid {
      grid-template-columns: repeat(3, 1fr);
    }
    .rd-trips-card--span2 {
      grid-column: span 2;
    }
  }

  .rd-trips-card {
    overflow: hidden;
  }
  .rd-trips-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(51,65,85,0.5);
  }
  .rd-trips-card-body {
    padding: 1.25rem;
  }
  .rd-trips-open-link {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: rgba(51,65,85,0.6);
    border-radius: 0.5rem;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .rd-trips-open-link:hover {
    background: rgba(71,85,105,0.6);
    color: white;
  }
  .rd-trips-live {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #34d399;
  }
  .rd-trips-sub-heading {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
  }
  .rd-trips-skeleton {
    animation: rd-skeleton-pulse 1.5s ease-in-out infinite;
  }

  /* Packing item */
  .rd-trips-pack-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.25rem 0;
    cursor: pointer;
  }
  .rd-trips-pack-item:hover { opacity: 0.85; }
  .rd-trips-pack-check {
    width: 1rem; height: 1rem; border-radius: 0.25rem; flex-shrink: 0;
    border: 2px solid #475569;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
  }
  .rd-trips-pack-check--checked {
    background: #14b8a6; border-color: #14b8a6;
  }

  /* Calendar grid */
  .rd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
  }
  .rd-cal-day-name {
    text-align: center;
    font-size: 0.6875rem;
    color: #64748b;
    font-weight: 500;
    padding: 0.25rem 0;
  }
  .rd-cal-cell {
    min-height: 3.5rem;
    border-radius: 0.5rem;
    padding: 0.25rem;
    font-size: 0.75rem;
  }
  .rd-cal-cell--trip {
    background: rgba(51,65,85,0.4);
    border: 1px solid rgba(71,85,105,0.4);
  }
  .rd-cal-cell--empty {
    background: rgba(30,41,59,0.3);
  }
  .rd-cal-cell-num { display: block; margin-bottom: 0.125rem; }
  .rd-cal-cell-num--trip { color: #e2e8f0; font-weight: 500; }
  .rd-cal-cell-num--off { color: #475569; }
  .rd-cal-event {
    display: block;
    border-radius: 0.25rem;
    padding: 0 0.25rem;
    color: white;
    font-size: 9px;
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Poll bar */
  .rd-trips-poll-bar-bg {
    height: 0.5rem;
    background: rgba(51,65,85,0.7);
    border-radius: 9999px;
    overflow: hidden;
  }
  .rd-trips-poll-bar {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s;
  }

  /* Cart item */
  .rd-trips-cart-item {
    background: rgba(51,65,85,0.3);
    border-radius: 0.5rem;
    padding: 0.75rem;
  }
  .rd-trips-cart-bar-bg {
    height: 0.375rem;
    background: rgba(51,65,85,0.6);
    border-radius: 9999px;
    overflow: hidden;
  }
  .rd-trips-cart-bar {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s;
  }
</style>`;
}