<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eisenhower Health Foundation — Marketing Showcase</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: { primary: '#C2724F', secondary: '#1B2A4A', accent: '#8B9F82', bg: '#F5E6D3', surface: '#FAF7F2', muted: '#6B5B5B', rose: '#D4A0A0' },
            surface: { 900: '#0f172a', 800: '#1e293b', 700: '#334155', 600: '#475569' }
          },
          fontFamily: { display: ['Playfair Display', 'Georgia', 'serif'], body: ['Inter', 'system-ui', 'sans-serif'] }
        }
      }
    }
  </script>
  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.14.9/dist/cdn.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.14.9/dist/cdn.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./assets/styles.css">
  <style>[x-cloak]{display:none!important}</style>

  <script>
    /* ── Alpine Global Store: Detail Panel ── */
    document.addEventListener('alpine:init', () => {
      Alpine.store('detail', {
        open: false,
        title: '',
        data: null,
        type: '',
        show(title, data, type) {
          this.title = title;
          this.data = data;
          this.type = type;
          this.open = true;
        },
        close() {
          this.open = false;
          this.title = '';
          this.data = null;
          this.type = '';
        }
      });
    });

    /* ── 1. app() — Main navigation + dashboard data ── */
    function app() {
      return {
        activeSection: 'dashboard',
        sidebarOpen: false,
        avatars: [],
        funnel: { stages: [] },
        strategy: { positioning: {}, messaging: {}, voice: {}, cultBranding: {} },
        assetCounts: {
          landingPages: 0,
          ads: 0,
          emails: 0,
          social: 0,
          leadMagnets: 0,
          sales: 0,
          seo: 0
        },
        v2Counts: {
          videos: 0,
          quizzes: 0,
          salesScripts: 0,
          growthChannels: 0,
          prTargets: 0
        },

        async init() {
          try {
            const [avatarsRes, funnelRes, strategyRes, assetsRes, adsRes, emailsRes, socialRes, videoRes, quizRes, salesRes, growthRes, prRes] = await Promise.all([
              fetch('./data/avatars.json').then(r => r.json()),
              fetch('./data/funnel.json').then(r => r.json()),
              fetch('./data/strategy.json').then(r => r.json()),
              fetch('./data/assets_detail.json').then(r => r.json()),
              fetch('./data/ads.json').then(r => r.json()),
              fetch('./data/emails.json').then(r => r.json()),
              fetch('./data/social_calendar.json').then(r => r.json()),
              fetch('./data/video_content.json').then(r => r.json()),
              fetch('./data/quiz_scorecard.json').then(r => r.json()),
              fetch('./data/sales_war_room.json').then(r => r.json()),
              fetch('./data/growth_playbooks.json').then(r => r.json()),
              fetch('./data/pr_media.json').then(r => r.json())
            ]);

            this.avatars = avatarsRes;
            this.funnel = funnelRes;
            this.strategy = strategyRes;

            this.assetCounts = {
              landingPages: assetsRes.landingPages ? assetsRes.landingPages.length : 0,
              ads: Array.isArray(adsRes) ? adsRes.length : 0,
              emails: emailsRes.sequences ? emailsRes.sequences.reduce((sum, s) => sum + (s.emails ? s.emails.length : 0), 0) : 0,
              social: socialRes.overview ? socialRes.overview.totalPosts : 0,
              leadMagnets: assetsRes.leadMagnets ? assetsRes.leadMagnets.length : 0,
              sales: assetsRes.salesEnablement ? assetsRes.salesEnablement.length : 0,
              seo: assetsRes.socialContent ? assetsRes.socialContent.length : 0
            };

            this.v2Counts = {
              videos: videoRes.youtubeScripts ? videoRes.youtubeScripts.length + (videoRes.vsl ? 1 : 0) : 0,
              quizzes: 1,
              salesScripts: salesRes.callScripts ? salesRes.callScripts.length : 0,
              growthChannels: growthRes.channelAssessment ? growthRes.channelAssessment.length : 0,
              prTargets: (() => {
                const mt = prRes.mediaTargets || {};
                let total = 0;
                for (const k in mt) { if (Array.isArray(mt[k])) total += mt[k].length; }
                return total;
              })()
            };
          } catch (e) {
            console.error('Failed to load dashboard data:', e);
          }
        },

        navItems: [
          { id: 'dashboard', label: 'Dashboard', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0a1 1 0 01-1-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 01-1 1' },
          { id: 'research', label: 'Research Hub', icon: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' },
          { id: 'strategy', label: 'Brand & Strategy', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
          { id: 'ads', label: 'Ad Studio', icon: 'M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z' },
          { id: 'assets', label: 'Asset Library', icon: 'M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10' },
          { id: 'video', label: 'Video Hub', icon: 'M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z' },
          { id: 'growth', label: 'Growth Playbooks', icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6' },
          { id: 'sales', label: 'Sales War Room', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' },
          { id: 'tools', label: 'Interactive Tools', icon: 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4' },
          { id: 'pr', label: 'PR & Media', icon: 'M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z' },
          { id: 'launch', label: 'Launch Plan', icon: 'M12 19l9 2-9-18-9 18 9-2zm0 0v-8' },
          { id: 'analytics', label: 'Analytics', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
          { id: 'brand', label: 'Brand System', icon: 'M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01' }
        ],

        setSection(id) {
          this.activeSection = id;
          this.sidebarOpen = false;
        }
      };
    }

    /* ── 2. researchHub() ── */
    function researchHub() {
      return {
        competitors: [],
        vocData: null,
        channels: null,
        async init() {
          try {
            const [comp, voc, ch] = await Promise.all([
              fetch('./data/competitors.json').then(r => r.json()),
              fetch('./data/voc_data.json').then(r => r.json()),
              fetch('./data/channels.json').then(r => r.json())
            ]);
            this.competitors = comp;
            this.vocData = voc;
            this.channels = ch;
          } catch (e) {
            console.error('Failed to load research data:', e);
          }
        }
      };
    }

    /* ── 3. strategySection() ── */
    function strategySection() {
      return {
        strategy: null,
        funnel: null,
        async init() {
          try {
            const [s, f] = await Promise.all([
              fetch('./data/strategy.json').then(r => r.json()),
              fetch('./data/funnel.json').then(r => r.json())
            ]);
            this.strategy = s;
            this.funnel = f;
          } catch (e) {
            console.error('Failed to load strategy data:', e);
          }
        }
      };
    }

    /* ── 4. adEmulator() ── */
    function adEmulator() {
      return {
        ads: [],
        selectedPlatform: 'facebook',
        selectedAvatar: 'all',
        selectedVariation: 0,

        get filteredAds() {
          return this.ads.filter(ad => {
            const platformMatch = ad.platform === this.selectedPlatform;
            const avatarMatch = this.selectedAvatar === 'all' || ad.avatar === this.selectedAvatar;
            return platformMatch && avatarMatch;
          });
        },

        get currentVariations() {
          return this.filteredAds;
        },

        get currentAd() {
          if (this.filteredAds.length === 0) return null;
          const idx = Math.min(this.selectedVariation, this.filteredAds.length - 1);
          return this.filteredAds[idx] || null;
        },

        get platforms() {
          return [...new Set(this.ads.map(a => a.platform))];
        },

        get avatarNames() {
          return [...new Set(this.ads.map(a => a.avatar))];
        },

        selectVariation(idx) {
          this.selectedVariation = idx;
        },

        async init() {
          try {
            this.ads = await fetch('./data/ads.json').then(r => r.json());
          } catch (e) {
            console.error('Failed to load ads:', e);
          }
        }
      };
    }

    /* ── 5. assetLibrary() ── */
    function assetLibrary() {
      return {
        assets: null,
        socialCalendar: null,
        emails: null,
        selectedSequence: 0,
        emailIndex: 0,
        socialView: 'calendar',

        get currentSequence() {
          if (!this.emails || !this.emails.sequences) return null;
          return this.emails.sequences[this.selectedSequence] || null;
        },

        get currentEmail() {
          const seq = this.currentSequence;
          if (!seq || !seq.emails) return null;
          return seq.emails[this.emailIndex] || null;
        },

        async init() {
          try {
            const [a, sc, em] = await Promise.all([
              fetch('./data/assets_detail.json').then(r => r.json()),
              fetch('./data/social_calendar.json').then(r => r.json()),
              fetch('./data/emails.json').then(r => r.json())
            ]);
            this.assets = a;
            this.socialCalendar = sc;
            this.emails = em;
          } catch (e) {
            console.error('Failed to load asset library:', e);
          }
        }
      };
    }

    /* ── 6. videoHub() ── */
    function videoHub() {
      return {
        video: null,
        async init() {
          try {
            this.video = await fetch('./data/video_content.json').then(r => r.json());
          } catch (e) {
            console.error('Failed to load video content:', e);
          }
        }
      };
    }

    /* ── 7. growthPlaybooks() ── */
    function growthPlaybooks() {
      return {
        playbooks: null,
        getChannelProgram(channelName) {
          if (!this.playbooks) return {};
          const map = {
            'Referral Program': this.playbooks.referralProgram,
            'Partner Program': this.playbooks.partnerProgram,
            'Community Growth': this.playbooks.communityGrowth,
            'Influencer Campaign': this.playbooks.retargetingCampaigns
          };
          return map[channelName] || {};
        },
        showChannelDetail(score) {
          const program = this.getChannelProgram(score.channel);
          const merged = Object.assign({}, program, score);
          $store.detail.show(score.channel, merged, 'growth-channel');
        },
        async init() {
          try {
            this.playbooks = await fetch('./data/growth_playbooks.json').then(r => r.json());
          } catch (e) {
            console.error('Failed to load growth playbooks:', e);
          }
        }
      };
    }

    /* ── 8. salesWarRoom() ── */
    function salesWarRoom() {
      return {
        sales: null,
        expandedObjection: null,

        toggleObjection(idx) {
          this.expandedObjection = this.expandedObjection === idx ? null : idx;
        },

        async init() {
          try {
            this.sales = await fetch('./data/sales_war_room.json').then(r => r.json());
          } catch (e) {
            console.error('Failed to load sales war room:', e);
          }
        }
      };
    }

    /* ── 9. interactiveTools() ── */
    function interactiveTools() {
      return {
        quiz: null,
        webinar: null,
        async init() {
          try {
            const [q, w] = await Promise.all([
              fetch('./data/quiz_scorecard.json').then(r => r.json()),
              fetch('./data/webinar.json').then(r => r.json())
            ]);
            this.quiz = q;
            this.webinar = w;
          } catch (e) {
            console.error('Failed to load interactive tools:', e);
          }
        }
      };
    }

    /* ── 10. prMedia() ── */
    function prMedia() {
      return {
        pr: null,
        async init() {
          try {
            this.pr = await fetch('./data/pr_media.json').then(r => r.json());
          } catch (e) {
            console.error('Failed to load PR data:', e);
          }
        }
      };
    }

    /* ── 11. launchPlan() ── */
    function launchPlan() {
      return {
        launch: null,
        budgetChart: null,

        async init() {
          try {
            this.launch = await fetch('./data/launch_plan.json').then(r => r.json());
            this.$nextTick(() => {
              this.renderBudgetChart();
            });
          } catch (e) {
            console.error('Failed to load launch plan:', e);
          }
        },

        renderBudgetChart() {
          if (!this.launch || !this.launch.budgetAllocation) return;
          const canvas = document.getElementById('budgetDoughnut');
          if (!canvas) return;

          const allocation = this.launch.budgetAllocation.channelAllocation || [];
          const labels = allocation.map(a => a.channel);
          const data = allocation.map(a => parseFloat(a.percentage));
          const colors = [
            '#C2724F', '#1B2A4A', '#8B9F82', '#F5E6D3',
            '#D4A0A0', '#6B5B5B', '#334155', '#475569'
          ];

          if (this.budgetChart) this.budgetChart.destroy();

          this.budgetChart = new Chart(canvas, {
            type: 'doughnut',
            data: {
              labels: labels,
              datasets: [{
                data: data,
                backgroundColor: colors.slice(0, data.length),
                borderColor: '#0f172a',
                borderWidth: 2
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              plugins: {
                legend: {
                  position: 'right',
                  labels: {
                    color: '#94a3b8',
                    font: { family: 'Inter', size: 11 },
                    padding: 12,
                    usePointStyle: true,
                    pointStyleWidth: 8
                  }
                },
                tooltip: {
                  callbacks: {
                    label: function(ctx) {
                      return ctx.label + ': ' + ctx.parsed + '%';
                    }
                  }
                }
              },
              cutout: '65%'
            }
          });
        }
      };
    }

    /* ── 12. analyticsSection() ── */
    function analyticsSection() {
      return {
        analytics: null,
        async init() {
          try {
            this.analytics = await fetch('./data/analytics.json').then(r => r.json());
          } catch (e) {
            console.error('Failed to load analytics:', e);
          }
        }
      };
    }

    /* ── 13. brandSystem() ── */
    function brandSystem() {
      return {
        colors: [],
        init() {
          const root = getComputedStyle(document.documentElement);
          const brandVars = [
            { name: 'Terracotta', var: '--brand-primary', usage: 'Headlines, CTAs, emphasis' },
            { name: 'Deep Indigo', var: '--brand-secondary', usage: 'Text, headers, institutional gravity' },
            { name: 'Sage', var: '--brand-accent', usage: 'Charts, data viz, proof-of-impact' },
            { name: 'Desert Sand', var: '--brand-bg', usage: 'Primary background' },
            { name: 'Warm White', var: '--brand-surface', usage: 'Card backgrounds' },
            { name: 'Mountain Shadow', var: '--brand-muted', usage: 'Tertiary text, captions' },
            { name: 'Dusty Rose', var: '--brand-rose', usage: 'Community / inclusion content' }
          ];
          this.colors = brandVars.map(v => ({
            ...v,
            value: root.getPropertyValue(v.var).trim()
          }));
        }
      };
    }
  </script>
</head>

<body x-data="app()" class="bg-surface-900 text-gray-200 font-body min-h-screen">

  <!-- ═══════════════════════════════════════════ -->
  <!-- MOBILE SIDEBAR OVERLAY                      -->
  <!-- ═══════════════════════════════════════════ -->
  <div x-show="sidebarOpen"
       x-transition:enter="transition-opacity ease-out duration-200"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition-opacity ease-in duration-150"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       @click="sidebarOpen = false"
       class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden"
       x-cloak></div>

  <!-- ═══════════════════════════════════════════ -->
  <!-- SIDEBAR                                     -->
  <!-- ═══════════════════════════════════════════ -->
  <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
         class="fixed top-0 left-0 h-full w-60 bg-surface-900 border-r border-surface-700 z-50 transition-transform duration-200 ease-out flex flex-col">

    <!-- Logo Area -->
    <div class="p-5 border-b border-surface-700">
      <h1 class="font-display text-brand-primary text-lg leading-tight">Eisenhower Health Foundation</h1>
      <p class="text-xs text-gray-500 mt-1 tracking-wide uppercase">Marketing Showcase</p>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 overflow-y-auto py-2">
      <template x-for="item in navItems" :key="item.id">
        <button @click="setSection(item.id)"
                :class="activeSection === item.id
                  ? 'border-l-2 border-brand-primary bg-surface-800 text-gray-100'
                  : 'border-l-2 border-transparent text-gray-400 hover:text-gray-200 hover:bg-surface-800/50'"
                class="w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors duration-150 cursor-pointer text-left">
          <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" :d="item.icon"></path>
          </svg>
          <span x-text="item.label"></span>
        </button>
      </template>
    </nav>

    <!-- Sidebar Footer -->
    <div class="p-4 border-t border-surface-700">
      <p class="text-xs text-gray-500">Every dollar stays here.</p>
    </div>
  </aside>

  <!-- ═══════════════════════════════════════════ -->
  <!-- MOBILE HEADER                               -->
  <!-- ═══════════════════════════════════════════ -->
  <header class="fixed top-0 left-0 right-0 h-14 bg-surface-900/95 backdrop-blur-sm border-b border-surface-700 z-30 lg:hidden flex items-center px-4">
    <button @click="sidebarOpen = !sidebarOpen"
            class="p-2 text-gray-400 hover:text-gray-200 cursor-pointer rounded-lg hover:bg-surface-800 transition-colors"
            aria-label="Toggle navigation">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
      </svg>
    </button>
    <span class="ml-3 font-display text-brand-primary text-sm">Eisenhower Health</span>
  </header>

  <!-- ═══════════════════════════════════════════ -->
  <!-- MAIN CONTENT AREA                           -->
  <!-- ═══════════════════════════════════════════ -->
  <main class="lg:ml-60 pt-14 lg:pt-0 min-h-screen">

    <!-- ─────────────────────────────────────── -->
    <!-- DASHBOARD SECTION                       -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'dashboard'" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-8">

      <!-- Hero Card -->
      <div class="bg-gradient-to-br from-brand-secondary to-surface-800 rounded-2xl p-8 lg:p-10 border border-surface-700 relative overflow-hidden">
        <!-- Decorative desert gradient -->
        <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-brand-primary/10 to-transparent pointer-events-none"></div>
        <div class="relative">
          <p class="text-brand-primary font-semibold text-sm tracking-wide uppercase mb-3" x-text="strategy.positioning?.coreTension || 'Loading...'"></p>
          <h2 class="font-display text-3xl lg:text-4xl text-white leading-tight mb-4" x-text="strategy.positioning?.positioningStatement ? strategy.positioning.positioningStatement.split('--')[0].trim() : 'Eisenhower Health Foundation'"></h2>
          <div x-show="strategy.positioning?.taglineOptions" class="flex flex-wrap gap-3 mt-5">
            <template x-for="(tag, idx) in (strategy.positioning?.taglineOptions || [])" :key="idx">
              <span :class="tag.recommended ? 'bg-brand-primary/20 text-brand-primary border-brand-primary/30' : 'bg-surface-700/50 text-gray-300 border-surface-600/50'"
                    class="inline-block text-xs px-3 py-1.5 rounded-full border">
                <span x-text="tag.text"></span>
              </span>
            </template>
          </div>
        </div>
      </div>

      <!-- Avatar Cards Grid -->
      <div>
        <h3 class="font-display text-xl text-white mb-4">Donor Avatars</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <template x-for="(avatar, idx) in avatars" :key="avatar.name">
            <button @click="$store.detail.show(avatar.name, avatar, 'avatar')"
                    class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 hover:bg-surface-800/80 transition-all duration-200 cursor-pointer group">
              <!-- Avatar Initial -->
              <div class="flex items-center gap-3 mb-3">
                <div :class="[
                       idx === 0 ? 'bg-brand-primary/20 text-brand-primary' :
                       idx === 1 ? 'bg-blue-500/20 text-blue-400' :
                       idx === 2 ? 'bg-brand-accent/20 text-brand-accent' :
                       'bg-brand-rose/20 text-brand-rose'
                     ]"
                     class="w-10 h-10 rounded-lg flex items-center justify-center font-display text-lg">
                  <span x-text="avatar.avatar"></span>
                </div>
                <div>
                  <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="avatar.name"></h4>
                  <p class="text-gray-500 text-xs" x-text="avatar.role"></p>
                </div>
              </div>
              <!-- Awareness Level -->
              <div class="flex items-center justify-between mt-2">
                <span class="text-xs text-gray-500">Awareness</span>
                <span :class="[
                        avatar.awarenessLevel === 'Most Aware' ? 'bg-green-500/20 text-green-400' :
                        avatar.awarenessLevel === 'Problem-Aware' ? 'bg-yellow-500/20 text-yellow-400' :
                        avatar.awarenessLevel === 'Unaware' ? 'bg-red-500/20 text-red-400' :
                        'bg-blue-500/20 text-blue-400'
                      ]"
                      class="text-xs px-2 py-0.5 rounded-full" x-text="avatar.awarenessLevel"></span>
              </div>
              <!-- Top pain point preview -->
              <p class="text-xs text-gray-400 mt-3 line-clamp-2" x-text="avatar.painPoints ? avatar.painPoints[0] : ''"></p>
            </button>
          </template>
        </div>
      </div>

      <!-- Funnel Visualization -->
      <div>
        <h3 class="font-display text-xl text-white mb-4">Marketing Funnel</h3>
        <div class="flex flex-col lg:flex-row gap-3">
          <template x-for="(stage, idx) in funnel.stages" :key="stage.name">
            <div class="flex-1 bg-surface-800 border border-surface-700 rounded-xl p-4 relative group hover:border-brand-primary/30 transition-colors duration-200">
              <!-- Stage number -->
              <div class="flex items-center gap-2 mb-2">
                <span class="w-6 h-6 rounded-full bg-brand-primary/20 text-brand-primary text-xs font-semibold flex items-center justify-center" x-text="idx + 1"></span>
                <h4 class="text-white font-semibold text-sm" x-text="stage.name"></h4>
              </div>
              <!-- Channels count -->
              <div class="flex items-center gap-1 text-xs text-gray-500 mt-2">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span x-text="(stage.channels ? stage.channels.length : 0) + ' channels'"></span>
              </div>
              <div class="flex items-center gap-1 text-xs text-gray-500 mt-1">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path>
                </svg>
                <span x-text="(stage.assets ? stage.assets.length : 0) + ' assets'"></span>
              </div>
              <!-- Arrow connector (not on last) -->
              <div x-show="idx < funnel.stages.length - 1" class="hidden lg:flex absolute -right-2 top-1/2 -translate-y-1/2 z-10">
                <svg class="w-4 h-4 text-brand-primary/40" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
                </svg>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- Asset Count Badges Row -->
      <div>
        <h3 class="font-display text-xl text-white mb-4">Core Assets</h3>
        <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-3">
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-primary" x-text="assetCounts.landingPages"></p>
            <p class="text-xs text-gray-400 mt-1">Landing Pages</p>
          </div>
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-primary" x-text="assetCounts.ads"></p>
            <p class="text-xs text-gray-400 mt-1">Ads</p>
          </div>
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-primary" x-text="assetCounts.emails"></p>
            <p class="text-xs text-gray-400 mt-1">Emails</p>
          </div>
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-primary" x-text="assetCounts.social"></p>
            <p class="text-xs text-gray-400 mt-1">Social</p>
          </div>
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-primary" x-text="assetCounts.leadMagnets"></p>
            <p class="text-xs text-gray-400 mt-1">Lead Magnets</p>
          </div>
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-primary" x-text="assetCounts.sales"></p>
            <p class="text-xs text-gray-400 mt-1">Sales</p>
          </div>
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-primary" x-text="assetCounts.seo"></p>
            <p class="text-xs text-gray-400 mt-1">SEO</p>
          </div>
        </div>
      </div>

      <!-- V2 Count Badges Row -->
      <div>
        <h3 class="font-display text-xl text-white mb-4">V2 Assets</h3>
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
          <div class="bg-surface-800 border border-brand-accent/20 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-accent" x-text="v2Counts.videos"></p>
            <p class="text-xs text-gray-400 mt-1">Videos</p>
          </div>
          <div class="bg-surface-800 border border-brand-accent/20 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-accent" x-text="v2Counts.quizzes"></p>
            <p class="text-xs text-gray-400 mt-1">Quizzes</p>
          </div>
          <div class="bg-surface-800 border border-brand-accent/20 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-accent" x-text="v2Counts.salesScripts"></p>
            <p class="text-xs text-gray-400 mt-1">Sales Scripts</p>
          </div>
          <div class="bg-surface-800 border border-brand-accent/20 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-accent" x-text="v2Counts.growthChannels"></p>
            <p class="text-xs text-gray-400 mt-1">Growth Channels</p>
          </div>
          <div class="bg-surface-800 border border-brand-accent/20 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-brand-accent" x-text="v2Counts.prTargets"></p>
            <p class="text-xs text-gray-400 mt-1">PR Targets</p>
          </div>
        </div>
      </div>

      <!-- Key Differentiators -->
      <div>
        <h3 class="font-display text-xl text-white mb-4">Key Differentiators</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
          <template x-for="(diff, idx) in (strategy.positioning?.differentiators || [])" :key="idx">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 flex items-start gap-3">
              <div class="flex-shrink-0 mt-0.5">
                <span :class="[
                        diff.type === 'structural' ? 'bg-brand-primary/20 text-brand-primary' :
                        diff.type === 'heritage' ? 'bg-yellow-500/20 text-yellow-400' :
                        diff.type === 'cultural' ? 'bg-brand-accent/20 text-brand-accent' :
                        diff.type === 'identity' ? 'bg-purple-500/20 text-purple-400' :
                        'bg-blue-500/20 text-blue-400'
                      ]"
                      class="text-xs px-2 py-0.5 rounded-full capitalize" x-text="diff.type"></span>
              </div>
              <p class="text-sm text-gray-300" x-text="diff.point"></p>
              <div class="flex-shrink-0 ml-auto" x-show="!diff.replicable">
                <svg class="w-4 h-4 text-brand-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-label="Not replicable">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"></path>
                </svg>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- Brand Manifesto / Cult Branding Blockquote -->
      <div x-show="strategy.cultBranding" class="bg-surface-800 border border-surface-700 rounded-2xl p-6 lg:p-8">
        <h3 class="font-display text-xl text-white mb-4">The Covenant</h3>
        <blockquote class="border-l-4 border-brand-primary pl-5 py-2">
          <p class="text-gray-300 italic leading-relaxed text-sm lg:text-base"
             x-text="(() => {
               if (!strategy.cultBranding || !strategy.cultBranding.principles) return '';
               const full = strategy.cultBranding.principles[0]?.application || '';
               return full.length > 200 ? full.substring(0, 200) + '...' : full;
             })()"></p>
        </blockquote>
        <div class="mt-5 flex flex-wrap gap-2">
          <template x-for="(p, idx) in (strategy.cultBranding?.principles || [])" :key="idx">
            <span class="text-xs bg-surface-700/50 text-gray-400 px-3 py-1 rounded-full" x-text="p.principle"></span>
          </template>
        </div>
      </div>

    </section>
    <!-- END DASHBOARD SECTION -->

    <!-- ─────────────────────────────────────── -->
    <!-- REMAINING SECTIONS (added by other agents) -->
    <!-- ─────────────────────────────────────── -->

  <!-- Detail Panel Overlay -->
  <div x-show="$store.detail.open"
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       @click="$store.detail.close()"
       class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
       x-cloak></div>

  <div x-show="$store.detail.open"
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="translate-x-full"
       x-transition:enter-end="translate-x-0"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="translate-x-0"
       x-transition:leave-end="translate-x-full"
       class="fixed top-0 right-0 h-full w-full max-w-lg bg-surface-900 border-l border-surface-700 z-50 overflow-y-auto"
       @click.stop
       x-cloak>

    <div class="p-6">
      <!-- Close button -->
      <div class="flex items-center justify-between mb-6">
        <h3 class="font-display text-xl text-white" x-text="$store.detail.title"></h3>
        <button @click="$store.detail.close()"
                class="p-2 text-gray-400 hover:text-white rounded-lg hover:bg-surface-800 transition-colors cursor-pointer"
                aria-label="Close panel">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
      </div>

      <!-- Avatar Detail View -->
      <template x-if="$store.detail.type === 'avatar' && $store.detail.data">
        <div class="space-y-6">
          <!-- Role & Demographics -->
          <div>
            <p class="text-brand-primary font-semibold text-sm mb-2" x-text="$store.detail.data.role"></p>
            <p class="text-sm text-gray-400 leading-relaxed" x-text="$store.detail.data.demographics"></p>
          </div>

          <!-- Pain Points -->
          <div>
            <h4 class="text-white font-semibold text-sm mb-2">Pain Points</h4>
            <ul class="space-y-2">
              <template x-for="(pain, idx) in $store.detail.data.painPoints" :key="idx">
                <li class="flex items-start gap-2 text-sm text-gray-300">
                  <svg class="w-4 h-4 text-red-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"></path>
                  </svg>
                  <span x-text="pain"></span>
                </li>
              </template>
            </ul>
          </div>

          <!-- Buying Trigger -->
          <div>
            <h4 class="text-white font-semibold text-sm mb-2">Buying Trigger</h4>
            <p class="text-sm text-gray-300 leading-relaxed" x-text="$store.detail.data.buyingTrigger"></p>
          </div>

          <!-- Objections -->
          <div>
            <h4 class="text-white font-semibold text-sm mb-2">Objections</h4>
            <ul class="space-y-2">
              <template x-for="(obj, idx) in $store.detail.data.objections" :key="idx">
                <li class="text-sm text-gray-400 italic border-l-2 border-surface-600 pl-3" x-text="obj"></li>
              </template>
            </ul>
          </div>

          <!-- Platforms -->
          <div>
            <h4 class="text-white font-semibold text-sm mb-2">Platforms</h4>
            <div class="flex flex-wrap gap-2">
              <template x-for="(plat, idx) in $store.detail.data.platforms" :key="idx">
                <span class="text-xs bg-surface-700 text-gray-300 px-2 py-1 rounded-md" x-text="plat"></span>
              </template>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>

  <!-- DO NOT CLOSE </main>, </body>, or </html> — other agents will append sections below -->

    <!-- ─────────────────────────────────────── -->
    <!-- RESEARCH HUB SECTION                    -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'research'" x-data="researchHub()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div class="flex items-center justify-between">
        <div>
          <h2 class="font-display text-2xl lg:text-3xl text-white">Research Hub</h2>
          <p class="text-gray-400 text-sm mt-1">Competitive landscape, voice of customer, and channel analysis</p>
        </div>
      </div>

      <!-- Tab Bar -->
      <div x-data="{ researchTab: 'competitive' }" class="space-y-6">
        <div class="flex gap-1 bg-surface-800 p-1 rounded-xl w-fit">
          <button @click="researchTab = 'competitive'"
                  :class="researchTab === 'competitive' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-150 cursor-pointer">Competitive</button>
          <button @click="researchTab = 'voc'"
                  :class="researchTab === 'voc' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-150 cursor-pointer">VoC</button>
          <button @click="researchTab = 'channels'"
                  :class="researchTab === 'channels' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 rounded-lg text-sm font-medium transition-colors duration-150 cursor-pointer">Channels</button>
        </div>

        <!-- ═══ Competitive Tab ═══ -->
        <div x-show="researchTab === 'competitive'" x-cloak class="space-y-4">
          <p class="text-gray-400 text-sm" x-show="competitors.length">
            <span x-text="competitors.length"></span> competitors analyzed. Click any card for full analysis.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <template x-for="(c, idx) in competitors" :key="idx">
              <button @click="$store.detail.show(c.name, c, 'competitor')"
                      class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                <div class="flex items-start justify-between mb-3">
                  <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors leading-tight" x-text="c.name"></h4>
                  <svg class="w-4 h-4 text-gray-600 group-hover:text-brand-primary transition-colors flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"></path>
                  </svg>
                </div>
                <p class="text-xs text-gray-400 line-clamp-2 mb-3" x-text="c.positioning"></p>

                <!-- Strengths Tags -->
                <div class="mb-2">
                  <p class="text-xs text-gray-500 mb-1">Strengths</p>
                  <div class="flex flex-wrap gap-1">
                    <template x-for="(s, si) in c.strengths.slice(0, 2)" :key="si">
                      <span class="text-xs bg-green-500/10 text-green-400 px-2 py-0.5 rounded-full line-clamp-1" x-text="s.length > 40 ? s.slice(0, 40) + '...' : s"></span>
                    </template>
                    <span x-show="c.strengths.length > 2" class="text-xs text-gray-500">+<span x-text="c.strengths.length - 2"></span></span>
                  </div>
                </div>

                <!-- Weaknesses Tags -->
                <div>
                  <p class="text-xs text-gray-500 mb-1">Weaknesses</p>
                  <div class="flex flex-wrap gap-1">
                    <template x-for="(w, wi) in c.weaknesses.slice(0, 2)" :key="wi">
                      <span class="text-xs bg-red-500/10 text-red-400 px-2 py-0.5 rounded-full line-clamp-1" x-text="w.length > 40 ? w.slice(0, 40) + '...' : w"></span>
                    </template>
                    <span x-show="c.weaknesses.length > 2" class="text-xs text-gray-500">+<span x-text="c.weaknesses.length - 2"></span></span>
                  </div>
                </div>
              </button>
            </template>
          </div>
        </div>

        <!-- ═══ VoC Tab ═══ -->
        <div x-show="researchTab === 'voc'" x-cloak class="space-y-6">

          <!-- Core Tension Callout -->
          <div x-show="vocData && vocData.coreTension" class="bg-gradient-to-r from-brand-primary/10 to-surface-800 border border-brand-primary/20 rounded-xl p-6">
            <p class="text-brand-primary text-xs font-semibold uppercase tracking-wide mb-2">Core Tension</p>
            <p class="text-white font-display text-lg italic" x-text="vocData.coreTension.statement"></p>
            <p class="text-gray-400 text-sm mt-3" x-text="vocData.coreTension.destabilizationHeadline"></p>
          </div>

          <!-- Emotional Triggers -->
          <div x-show="vocData && vocData.emotionalTriggers">
            <h3 class="text-white font-semibold text-sm mb-3">Emotional Triggers (I x D Score 8+/8+)</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <template x-for="(trigger, ti) in (vocData.emotionalTriggers || [])" :key="ti">
                <button @click="$store.detail.show(trigger.feature, trigger, 'voc')"
                        class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                  <div class="flex items-center justify-between mb-2">
                    <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="trigger.feature"></h4>
                    <span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full" x-text="'IxD: ' + trigger.ixdScore"></span>
                  </div>
                  <p class="text-xs text-gray-400 mb-2" x-text="trigger.gap"></p>
                  <div class="flex items-center gap-4 text-xs text-gray-500">
                    <span>Importance: <span class="text-gray-300" x-text="trigger.importanceAvg"></span></span>
                    <span>Dissatisfaction: <span class="text-gray-300" x-text="trigger.dissatisfactionAvg"></span></span>
                  </div>
                  <p x-show="trigger.crossExtremeResonance" class="text-xs text-brand-accent mt-2">Resonates across all extremes</p>
                </button>
              </template>
            </div>
          </div>

          <!-- Customer Extremes -->
          <div x-show="vocData && vocData.customerExtremes">
            <h3 class="text-white font-semibold text-sm mb-3">Customer Extremes</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <template x-for="(cx, ci) in (vocData.customerExtremes || [])" :key="ci">
                <button @click="$store.detail.show(cx.name + ' (' + cx.archetype + ')', cx, 'voc')"
                        class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                  <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="cx.name"></h4>
                  <p class="text-xs text-brand-primary mt-1" x-text="cx.archetype"></p>
                  <p class="text-xs text-gray-400 mt-2 italic line-clamp-2" x-text="cx.tagline"></p>

                  <!-- Language Patterns as quote pills -->
                  <div class="mt-3">
                    <p class="text-xs text-gray-500 mb-1">Language Patterns</p>
                    <div class="flex flex-wrap gap-1">
                      <template x-for="(lp, li) in (cx.languagePatterns || []).slice(0, 3)" :key="li">
                        <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full italic" x-text="'\"' + lp + '\"'"></span>
                      </template>
                    </div>
                  </div>

                  <!-- Severity badge based on narrative works -->
                  <div class="mt-3 flex items-center gap-2">
                    <span :class="cx.narrativeWorksWhere && cx.narrativeWorksWhere.includes('Almost everywhere') ? 'bg-green-500/20 text-green-400' : cx.narrativeWorksWhere && cx.narrativeWorksWhere.includes('Almost nowhere') ? 'bg-red-500/20 text-red-400' : 'bg-amber-500/20 text-amber-400'"
                          class="text-xs px-2 py-0.5 rounded-full">
                      <span x-text="cx.narrativeWorksWhere && cx.narrativeWorksWhere.includes('Almost everywhere') ? 'Narrative aligned' : cx.narrativeWorksWhere && cx.narrativeWorksWhere.includes('Almost nowhere') ? 'Narrative gap' : 'Partial alignment'"></span>
                    </span>
                  </div>
                </button>
              </template>
            </div>
          </div>

          <!-- Cross-Extreme Finding -->
          <div x-show="vocData && vocData.crossExtremeFindings" class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <h3 class="text-white font-semibold text-sm mb-2">Cross-Extreme Finding</h3>
            <p class="text-gray-300 text-sm" x-text="vocData.crossExtremeFindings.universalGap"></p>
            <p class="text-gray-400 text-xs mt-2" x-text="vocData.crossExtremeFindings.articulationProblem"></p>
          </div>
        </div>

        <!-- ═══ Channels Tab ═══ -->
        <div x-show="researchTab === 'channels'" x-cloak class="space-y-4">
          <div x-show="channels && channels.paidAds" class="space-y-4">
            <p class="text-gray-400 text-sm">Channel performance ranked by strategic fit. Click any channel for targeting details.</p>

            <!-- Budget Allocation Overview -->
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-5 mb-4">
              <h3 class="text-white font-semibold text-sm mb-3">Budget Allocation by Avatar</h3>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <template x-for="(key, ki) in Object.keys(channels.paidAds.budgetAllocation || {})" :key="ki">
                  <div class="text-center">
                    <p class="text-lg font-bold text-brand-primary" x-text="channels.paidAds.budgetAllocation[key].percentage"></p>
                    <p class="text-xs text-gray-400 mt-1" x-text="channels.paidAds.budgetAllocation[key].label"></p>
                  </div>
                </template>
              </div>
            </div>

            <!-- Campaign Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <template x-for="(campaign, ci) in (channels.paidAds.campaigns || [])" :key="ci">
                <button @click="$store.detail.show(campaign.name, campaign, 'channel')"
                        class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                  <div class="flex items-center justify-between mb-2">
                    <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="campaign.name"></h4>
                    <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="campaign.objective"></span>
                  </div>
                  <p class="text-xs text-gray-400 mb-3" x-text="campaign.avatar"></p>

                  <!-- Targeting Summary -->
                  <div class="space-y-1 text-xs text-gray-500">
                    <p>Age: <span class="text-gray-300" x-text="campaign.targeting.age"></span></p>
                    <p>Location: <span class="text-gray-300" x-text="campaign.targeting.location"></span></p>
                    <p>Income: <span class="text-gray-300" x-text="campaign.targeting.income"></span></p>
                  </div>

                  <!-- Ad Variation Count -->
                  <div class="mt-3 flex items-center gap-1 text-xs text-gray-500">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"></path>
                    </svg>
                    <span x-text="(campaign.adVariations || []).length + ' ad variations'"></span>
                  </div>
                </button>
              </template>
            </div>
          </div>
        </div>

      </div>
    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- BRAND & STRATEGY SECTION                -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'strategy'" x-data="strategySection()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Brand & Strategy</h2>
        <p class="text-gray-400 text-sm mt-1">Positioning, messaging framework, funnel architecture, and brand system</p>
      </div>

      <!-- Positioning Hero Card -->
      <div x-show="strategy && strategy.positioning" class="bg-gradient-to-br from-brand-secondary to-surface-800 rounded-2xl p-6 lg:p-8 border border-surface-700">
        <p class="text-brand-primary text-xs font-semibold uppercase tracking-wide mb-3">Positioning Statement</p>
        <p class="text-white font-display text-lg lg:text-xl leading-relaxed" x-text="strategy.positioning.positioningStatement"></p>
        <p class="text-gray-400 text-sm mt-4 italic" x-text="strategy.positioning.competitiveMoat"></p>
      </div>

      <!-- Tagline Options -->
      <div x-show="strategy && strategy.positioning && strategy.positioning.taglineOptions">
        <h3 class="text-white font-semibold text-sm mb-3">Tagline Options</h3>
        <div class="flex flex-wrap gap-2">
          <template x-for="(tag, ti) in (strategy.positioning.taglineOptions || [])" :key="ti">
            <span :class="tag.recommended ? 'bg-brand-primary/20 text-brand-primary border-brand-primary/40' : 'bg-surface-700 text-gray-300 border-surface-600'"
                  class="inline-flex items-center gap-2 text-sm px-4 py-2 rounded-full border cursor-default">
              <span x-text="tag.text"></span>
              <span x-show="tag.recommended" class="text-xs bg-brand-primary text-white px-1.5 py-0.5 rounded-full">Recommended</span>
            </span>
          </template>
        </div>
      </div>

      <!-- Differentiators -->
      <div x-show="strategy && strategy.positioning && strategy.positioning.differentiators">
        <h3 class="text-white font-semibold text-sm mb-3">Unreplicable Differentiators</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
          <template x-for="(diff, di) in (strategy.positioning.differentiators || [])" :key="di">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 flex items-start gap-3">
              <span :class="{
                'bg-brand-primary/20 text-brand-primary': diff.type === 'structural',
                'bg-blue-500/20 text-blue-400': diff.type === 'heritage',
                'bg-brand-accent/20 text-brand-accent': diff.type === 'cultural',
                'bg-purple-500/20 text-purple-400': diff.type === 'identity',
                'bg-amber-500/20 text-amber-400': diff.type === 'narrative'
              }" class="text-xs px-2 py-0.5 rounded-full flex-shrink-0 mt-0.5" x-text="diff.type"></span>
              <p class="text-sm text-gray-300" x-text="diff.point"></p>
            </div>
          </template>
        </div>
      </div>

      <!-- Voice Guidelines -->
      <div x-show="strategy && strategy.voice" class="space-y-4">
        <h3 class="text-white font-semibold text-sm">Voice: <span class="text-brand-primary" x-text="strategy.voice.definition"></span></h3>
        <p class="text-gray-400 text-sm" x-text="strategy.voice.description"></p>

        <!-- Voice Traits -->
        <div class="flex flex-wrap gap-2 mb-4">
          <template x-for="(trait, ti) in (strategy.voice.traits || [])" :key="ti">
            <span class="text-xs bg-surface-700 text-gray-300 px-3 py-1 rounded-full" x-text="trait"></span>
          </template>
        </div>

        <!-- Do / Don't Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="bg-surface-800 border border-green-500/20 rounded-xl p-5">
            <h4 class="text-green-400 font-semibold text-sm mb-3 flex items-center gap-2">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>
              Do
            </h4>
            <ul class="space-y-2">
              <template x-for="(d, di) in (strategy.voice.dos || [])" :key="di">
                <li class="text-xs text-gray-300 leading-relaxed" x-text="d"></li>
              </template>
            </ul>
          </div>
          <div class="bg-surface-800 border border-red-500/20 rounded-xl p-5">
            <h4 class="text-red-400 font-semibold text-sm mb-3 flex items-center gap-2">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
              Don't
            </h4>
            <ul class="space-y-2">
              <template x-for="(d, di) in (strategy.voice.donts || [])" :key="di">
                <li class="text-xs text-gray-300 leading-relaxed" x-text="d"></li>
              </template>
            </ul>
          </div>
        </div>
      </div>

      <!-- Before/After Examples -->
      <div x-show="strategy && strategy.voice && strategy.voice.beforeAfterExamples">
        <h3 class="text-white font-semibold text-sm mb-3">Before / After Voice Examples</h3>
        <div class="space-y-4">
          <template x-for="(ex, ei) in (strategy.voice.beforeAfterExamples || [])" :key="ei">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
              <p class="text-xs text-brand-primary font-semibold uppercase tracking-wide mb-3" x-text="ex.context"></p>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-red-500/5 border border-red-500/10 rounded-lg p-4">
                  <p class="text-xs text-red-400 font-semibold mb-2">Before</p>
                  <p class="text-xs text-gray-400 leading-relaxed" x-text="ex.before"></p>
                </div>
                <div class="bg-green-500/5 border border-green-500/10 rounded-lg p-4">
                  <p class="text-xs text-green-400 font-semibold mb-2">After</p>
                  <p class="text-xs text-gray-300 leading-relaxed" x-text="ex.after"></p>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- Funnel Diagram -->
      <div x-show="funnel && funnel.stages">
        <h3 class="text-white font-semibold text-sm mb-3">Marketing Funnel Architecture</h3>
        <div class="space-y-3">
          <template x-for="(stage, si) in (funnel.stages || [])" :key="si">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-5 relative">
              <div class="flex items-start gap-4">
                <div class="w-10 h-10 rounded-full bg-brand-primary/20 text-brand-primary text-sm font-bold flex items-center justify-center flex-shrink-0" x-text="si + 1"></div>
                <div class="flex-1">
                  <h4 class="text-white font-semibold text-sm" x-text="stage.name"></h4>
                  <p class="text-xs text-gray-400 mt-1 leading-relaxed line-clamp-2" x-text="stage.description"></p>
                  <div class="flex flex-wrap gap-2 mt-3">
                    <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="(stage.channels || []).length + ' channels'"></span>
                    <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="(stage.assets || []).length + ' assets'"></span>
                    <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="(stage.kpis || []).length + ' KPIs'"></span>
                  </div>
                  <p class="text-xs text-gray-500 mt-2" x-text="stage.conversionTarget"></p>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- Pricing Tiers -->
      <div x-show="strategy && strategy.pricing && strategy.pricing.tiers">
        <h3 class="text-white font-semibold text-sm mb-3">Giving Tiers</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          <template x-for="(tier, ti) in (strategy.pricing.tiers || [])" :key="ti">
            <button @click="$store.detail.show(tier.name, tier, 'pricing-tier')"
                    :class="tier.recommended ? 'border-brand-primary/50 bg-brand-primary/5' : 'border-surface-700'"
                    class="bg-surface-800 border rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group relative">
              <span x-show="tier.recommended" class="absolute -top-2 right-3 text-xs bg-brand-primary text-white px-2 py-0.5 rounded-full">Recommended</span>
              <p class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="tier.name"></p>
              <p class="text-brand-primary font-bold text-lg mt-1" x-text="tier.amount"></p>
              <p class="text-xs text-gray-400 mt-2" x-text="tier.whatItFunds"></p>
              <p class="text-xs text-gray-500 mt-2" x-text="tier.recognition"></p>
            </button>
          </template>
        </div>
      </div>

      <!-- StoryBrand Journey -->
      <div x-show="strategy && strategy.storyBrand" class="space-y-4">
        <h3 class="text-white font-semibold text-sm">StoryBrand Framework</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
          <!-- Character -->
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-6 h-6 rounded-full bg-brand-primary/20 text-brand-primary text-xs font-bold flex items-center justify-center">1</span>
              <p class="text-white font-semibold text-xs">Character (Hero)</p>
            </div>
            <p class="text-xs text-gray-400 leading-relaxed" x-text="strategy.storyBrand.hero"></p>
          </div>
          <!-- Problem -->
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-6 h-6 rounded-full bg-red-500/20 text-red-400 text-xs font-bold flex items-center justify-center">2</span>
              <p class="text-white font-semibold text-xs">Problem</p>
            </div>
            <p class="text-xs text-gray-400 leading-relaxed mb-1"><span class="text-gray-500">External:</span> <span x-text="strategy.storyBrand.problem.external"></span></p>
            <p class="text-xs text-gray-400 leading-relaxed"><span class="text-gray-500">Internal:</span> <span x-text="strategy.storyBrand.problem.internal"></span></p>
          </div>
          <!-- Guide -->
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-6 h-6 rounded-full bg-blue-500/20 text-blue-400 text-xs font-bold flex items-center justify-center">3</span>
              <p class="text-white font-semibold text-xs">Guide</p>
            </div>
            <p class="text-xs text-gray-400 leading-relaxed" x-text="strategy.storyBrand.guide"></p>
          </div>
          <!-- Plan -->
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-6 h-6 rounded-full bg-brand-accent/20 text-brand-accent text-xs font-bold flex items-center justify-center">4</span>
              <p class="text-white font-semibold text-xs">Plan</p>
            </div>
            <ul class="space-y-1">
              <template x-for="(step, si) in (strategy.storyBrand.plan || [])" :key="si">
                <li class="text-xs text-gray-400 leading-relaxed flex gap-2">
                  <span class="text-brand-accent flex-shrink-0" x-text="(si+1) + '.'"></span>
                  <span x-text="step"></span>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <!-- CTA -->
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-6 h-6 rounded-full bg-brand-primary/20 text-brand-primary text-xs font-bold flex items-center justify-center">5</span>
              <p class="text-white font-semibold text-xs">Call to Action</p>
            </div>
            <p class="text-xs text-gray-400"><span class="text-gray-500">Direct:</span> <span x-text="strategy.storyBrand.callToAction.direct"></span></p>
            <p class="text-xs text-gray-400 mt-1"><span class="text-gray-500">Transitional:</span> <span x-text="strategy.storyBrand.callToAction.transitional"></span></p>
          </div>
          <!-- Failure -->
          <div class="bg-surface-800 border border-red-500/20 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-6 h-6 rounded-full bg-red-500/20 text-red-400 text-xs font-bold flex items-center justify-center">6</span>
              <p class="text-white font-semibold text-xs">Failure (Stakes)</p>
            </div>
            <p class="text-xs text-gray-400 leading-relaxed" x-text="strategy.storyBrand.failure"></p>
          </div>
          <!-- Success -->
          <div class="bg-surface-800 border border-green-500/20 rounded-xl p-4">
            <div class="flex items-center gap-2 mb-2">
              <span class="w-6 h-6 rounded-full bg-green-500/20 text-green-400 text-xs font-bold flex items-center justify-center">7</span>
              <p class="text-white font-semibold text-xs">Success</p>
            </div>
            <p class="text-xs text-gray-400 leading-relaxed" x-text="strategy.storyBrand.success"></p>
          </div>
        </div>
      </div>

      <!-- Cult Branding -->
      <div x-show="strategy && strategy.cultBranding" class="space-y-4">
        <h3 class="text-white font-semibold text-sm">Cult Branding Principles</h3>
        <p class="text-xs text-gray-400" x-text="strategy.cultBranding.framework"></p>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
          <template x-for="(p, pi) in (strategy.cultBranding.principles || [])" :key="pi">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
              <p class="text-white font-semibold text-sm mb-2" x-text="p.principle"></p>
              <p class="text-xs text-gray-400 leading-relaxed" x-text="p.application"></p>
            </div>
          </template>
        </div>
      </div>

      <!-- Messaging Hierarchy -->
      <div x-show="strategy && strategy.messaging && strategy.messaging.primaryHierarchy" class="space-y-3">
        <h3 class="text-white font-semibold text-sm">Messaging Hierarchy</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
          <template x-for="(key, ki) in ['tier1', 'tier2', 'tier3']" :key="ki">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
              <p class="text-brand-primary text-xs font-semibold uppercase tracking-wide mb-2" x-text="strategy.messaging.primaryHierarchy[key]?.label"></p>
              <p class="text-sm text-gray-300 leading-relaxed" x-text="strategy.messaging.primaryHierarchy[key]?.message"></p>
            </div>
          </template>
        </div>
      </div>

      <!-- Drift Test -->
      <div x-show="strategy && strategy.driftTest" class="bg-surface-800 border border-surface-700 rounded-xl p-5">
        <h3 class="text-white font-semibold text-sm mb-2">Drift Test</h3>
        <p class="text-xs text-gray-400 mb-4" x-text="strategy.driftTest.description"></p>
        <div class="space-y-3">
          <template x-for="(q, qi) in (strategy.driftTest.questions || [])" :key="qi">
            <div class="border border-surface-600 rounded-lg p-4">
              <p class="text-white text-sm font-medium mb-2" x-text="q.question"></p>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="bg-green-500/5 border border-green-500/10 rounded-lg p-3">
                  <p class="text-xs text-green-400 font-semibold mb-1">Passes</p>
                  <p class="text-xs text-gray-400" x-text="q.passes"></p>
                </div>
                <div class="bg-red-500/5 border border-red-500/10 rounded-lg p-3">
                  <p class="text-xs text-red-400 font-semibold mb-1">Fails</p>
                  <p class="text-xs text-gray-400" x-text="q.fails"></p>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- AD STUDIO SECTION                       -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'ads'" x-data="adEmulator()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Ad Studio</h2>
        <p class="text-gray-400 text-sm mt-1">Preview ads across platforms and avatars with full copy inspection</p>
      </div>

      <!-- Controls Row -->
      <div class="flex flex-wrap items-center gap-4">
        <!-- Platform Tabs -->
        <div class="flex gap-1 bg-surface-800 p-1 rounded-xl">
          <template x-for="plat in platforms" :key="plat">
            <button @click="selectedPlatform = plat; selectedVariation = 0"
                    :class="selectedPlatform === plat ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'"
                    class="px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-150 cursor-pointer capitalize" x-text="plat"></button>
          </template>
        </div>

        <!-- Avatar Filter -->
        <select x-model="selectedAvatar" @change="selectedVariation = 0"
                class="bg-surface-800 border border-surface-700 text-gray-300 text-sm rounded-lg px-3 py-2 focus:ring-2 focus:ring-brand-primary focus:outline-none cursor-pointer">
          <option value="all">All Avatars</option>
          <template x-for="av in avatarNames" :key="av">
            <option :value="av" x-text="av"></option>
          </template>
        </select>

        <!-- Variation Browser -->
        <div class="flex items-center gap-2">
          <button @click="selectedVariation = Math.max(0, selectedVariation - 1)"
                  :disabled="selectedVariation === 0"
                  :class="selectedVariation === 0 ? 'opacity-30 cursor-not-allowed' : 'hover:bg-surface-700 cursor-pointer'"
                  class="p-1.5 bg-surface-800 border border-surface-700 rounded-lg text-gray-400 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path></svg>
          </button>
          <span class="text-sm text-gray-400 min-w-[60px] text-center">
            <span x-text="currentVariations.length > 0 ? (selectedVariation + 1) : 0"></span> / <span x-text="currentVariations.length"></span>
          </span>
          <button @click="selectedVariation = Math.min(currentVariations.length - 1, selectedVariation + 1)"
                  :disabled="selectedVariation >= currentVariations.length - 1"
                  :class="selectedVariation >= currentVariations.length - 1 ? 'opacity-30 cursor-not-allowed' : 'hover:bg-surface-700 cursor-pointer'"
                  class="p-1.5 bg-surface-800 border border-surface-700 rounded-lg text-gray-400 transition-colors">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
          </button>
        </div>
      </div>

      <!-- No Ads State -->
      <div x-show="!currentAd" class="bg-surface-800 border border-surface-700 rounded-xl p-10 text-center">
        <p class="text-gray-500">No ads match the current filters. Try a different platform or avatar.</p>
      </div>

      <!-- Ad Preview Area -->
      <div x-show="currentAd" class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        <!-- Facebook Emulator Frame -->
        <div x-show="selectedPlatform === 'facebook'" class="bg-white rounded-xl overflow-hidden shadow-lg max-w-lg">
          <!-- Post Header -->
          <div class="p-3 flex items-center gap-2">
            <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-bold">EH</div>
            <div>
              <p class="text-sm font-semibold text-gray-900" x-text="currentAd.pageName || 'Eisenhower Health Foundation'"></p>
              <p class="text-xs text-gray-500">Sponsored</p>
            </div>
          </div>
          <!-- Primary Text -->
          <div class="px-3 pb-2">
            <p class="text-sm text-gray-900 leading-relaxed" x-text="currentAd.primaryText"></p>
          </div>
          <!-- Image -->
          <div class="bg-gray-100 aspect-video flex items-center justify-center">
            <template x-if="currentAd.imageSrc">
              <img :src="currentAd.imageSrc" :alt="currentAd.headline" class="w-full h-full object-cover">
            </template>
            <template x-if="!currentAd.imageSrc">
              <div class="text-center p-6">
                <svg class="w-12 h-12 text-gray-300 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5a1.5 1.5 0 001.5-1.5V5.25a1.5 1.5 0 00-1.5-1.5H3.75a1.5 1.5 0 00-1.5 1.5v14.25a1.5 1.5 0 001.5 1.5z"></path>
                </svg>
                <p class="text-xs text-gray-400" x-text="currentAd.imageDescription || 'Ad image placeholder'"></p>
              </div>
            </template>
          </div>
          <!-- Link Preview -->
          <div class="p-3 border-t border-gray-200">
            <p class="text-xs text-gray-500 uppercase" x-text="currentAd.displayUrl || 'eisenhowerhealth.org'"></p>
            <p class="text-sm font-semibold text-gray-900 mt-0.5" x-text="currentAd.headline"></p>
            <p class="text-xs text-gray-500 mt-0.5 line-clamp-1" x-text="currentAd.description"></p>
          </div>
          <!-- CTA Button -->
          <div class="px-3 pb-3">
            <div class="bg-gray-100 text-center py-2 rounded-lg text-sm font-semibold text-blue-600" x-text="currentAd.cta || 'Learn More'"></div>
          </div>
        </div>

        <!-- Google Emulator Frame -->
        <div x-show="selectedPlatform === 'google'" class="bg-white rounded-xl p-5 shadow-lg max-w-lg">
          <div class="space-y-4">
            <!-- Search Result Style -->
            <div>
              <p class="text-xs text-green-700 mb-0.5" x-text="currentAd.displayUrl || 'eisenhowerhealth.org/giving'"></p>
              <p class="text-lg text-blue-800 font-medium hover:underline cursor-pointer" x-text="currentAd.headline"></p>
              <p class="text-sm text-gray-600 mt-1 leading-relaxed" x-text="currentAd.description || currentAd.primaryText"></p>
            </div>
          </div>
        </div>

        <!-- Generic Platform Frame (Instagram, LinkedIn, etc.) -->
        <div x-show="selectedPlatform !== 'facebook' && selectedPlatform !== 'google'" class="bg-surface-800 border border-surface-700 rounded-xl p-5 max-w-lg">
          <div class="flex items-center gap-3 mb-3">
            <div class="w-8 h-8 rounded-full bg-brand-primary/20 flex items-center justify-center text-brand-primary text-xs font-bold">EH</div>
            <div>
              <p class="text-white text-sm font-semibold" x-text="currentAd.pageName || 'Eisenhower Health Foundation'"></p>
              <p class="text-xs text-gray-500">Sponsored</p>
            </div>
          </div>
          <p class="text-sm text-gray-300 leading-relaxed mb-3" x-text="currentAd.primaryText"></p>
          <div class="bg-surface-700 aspect-video rounded-lg flex items-center justify-center mb-3">
            <template x-if="currentAd.imageSrc">
              <img :src="currentAd.imageSrc" :alt="currentAd.headline" class="w-full h-full object-cover rounded-lg">
            </template>
            <template x-if="!currentAd.imageSrc">
              <p class="text-xs text-gray-500 p-4 text-center" x-text="currentAd.imageDescription || 'Ad image placeholder'"></p>
            </template>
          </div>
          <p class="text-white font-semibold text-sm" x-text="currentAd.headline"></p>
          <div class="mt-3">
            <span class="inline-block bg-brand-primary text-white text-sm px-4 py-1.5 rounded-lg" x-text="currentAd.cta || 'Learn More'"></span>
          </div>
        </div>

        <!-- Inspector Panel -->
        <div class="space-y-4">
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <h3 class="text-white font-semibold text-sm mb-3 flex items-center gap-2">
              <svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"></path></svg>
              Ad Inspector
            </h3>
            <div class="space-y-3 text-sm">
              <div>
                <p class="text-gray-500 text-xs">Variation</p>
                <p class="text-gray-300" x-text="currentAd.variationName || currentAd.id"></p>
              </div>
              <div>
                <p class="text-gray-500 text-xs">Avatar</p>
                <p class="text-gray-300" x-text="currentAd.avatar"></p>
              </div>
              <div>
                <p class="text-gray-500 text-xs">Target Audience</p>
                <p class="text-gray-300 text-xs" x-text="currentAd.targetAudience || currentAd.targeting"></p>
              </div>
              <div>
                <p class="text-gray-500 text-xs">Placement</p>
                <p class="text-gray-300" x-text="currentAd.placement || 'Feed'"></p>
              </div>
              <div>
                <p class="text-gray-500 text-xs">Campaign Objective</p>
                <p class="text-gray-300" x-text="currentAd.campaignObjective || ''"></p>
              </div>
            </div>
          </div>

          <!-- Full Copy Panel -->
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <h4 class="text-white font-semibold text-xs mb-2">Full Primary Text</h4>
            <p class="text-xs text-gray-400 leading-relaxed whitespace-pre-line" x-text="currentAd.primaryText"></p>
            <div x-show="currentAd.linkDescription" class="mt-3">
              <h4 class="text-white font-semibold text-xs mb-2">Link Description</h4>
              <p class="text-xs text-gray-400 leading-relaxed whitespace-pre-line" x-text="currentAd.linkDescription"></p>
            </div>
          </div>
        </div>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- ASSET LIBRARY SECTION                   -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'assets'" x-data="assetLibrary()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Asset Library</h2>
        <p class="text-gray-400 text-sm mt-1">All marketing assets: landing pages, emails, social content, lead magnets, and more</p>
      </div>

      <!-- Asset Tab Bar -->
      <div x-data="{ assetTab: 'landing' }" class="space-y-6">
        <div class="flex flex-wrap gap-1 bg-surface-800 p-1 rounded-xl">
          <button @click="assetTab = 'landing'" :class="assetTab === 'landing' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Landing Pages</button>
          <button @click="assetTab = 'emails'" :class="assetTab === 'emails' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Emails</button>
          <button @click="assetTab = 'social'" :class="assetTab === 'social' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Social</button>
          <button @click="assetTab = 'leadmagnets'" :class="assetTab === 'leadmagnets' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Lead Magnets</button>
          <button @click="assetTab = 'sales'" :class="assetTab === 'sales' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Sales</button>
          <button @click="assetTab = 'seo'" :class="assetTab === 'seo' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">SEO</button>
          <button @click="assetTab = 'storyemails'" :class="assetTab === 'storyemails' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Story Emails</button>
          <button @click="assetTab = 'competitors'" :class="assetTab === 'competitors' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'" class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Competitor Pages</button>
        </div>

        <!-- ═══ Landing Pages Tab ═══ -->
        <div x-show="assetTab === 'landing'" x-cloak class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" x-show="assets && assets.landingPages">
            <template x-for="(lp, li) in (assets ? assets.landingPages : [])" :key="li">
              <button @click="$store.detail.show(lp.title, lp, 'landing')"
                      class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full" x-text="lp.slug"></span>
                  <span x-show="lp.bilingual" class="text-xs bg-blue-500/20 text-blue-400 px-2 py-0.5 rounded-full">Bilingual</span>
                </div>
                <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors mb-2" x-text="lp.title"></h4>
                <p class="text-xs text-gray-400 line-clamp-2 mb-3" x-text="lp.headline"></p>
                <div class="flex items-center gap-2">
                  <span class="text-xs bg-brand-primary text-white px-2 py-0.5 rounded" x-text="lp.primaryCTA"></span>
                </div>
                <div class="mt-3 flex flex-wrap gap-1">
                  <template x-for="(sec, si) in (lp.sections || []).slice(0, 4)" :key="si">
                    <span class="text-xs bg-surface-700 text-gray-400 px-2 py-0.5 rounded-full" x-text="sec"></span>
                  </template>
                  <span x-show="(lp.sections || []).length > 4" class="text-xs text-gray-500">+<span x-text="lp.sections.length - 4"></span></span>
                </div>
              </button>
            </template>
          </div>
        </div>

        <!-- ═══ Emails Tab ═══ -->
        <div x-show="assetTab === 'emails'" x-cloak class="space-y-4">
          <div x-show="emails && emails.sequences" class="space-y-4">
            <!-- Sequence Selector -->
            <div class="flex flex-wrap items-center gap-3">
              <label class="text-sm text-gray-400">Sequence:</label>
              <select x-model.number="selectedSequence" @change="emailIndex = 0"
                      class="bg-surface-800 border border-surface-700 text-gray-300 text-sm rounded-lg px-3 py-2 focus:ring-2 focus:ring-brand-primary focus:outline-none cursor-pointer">
                <template x-for="(seq, si) in (emails ? emails.sequences : [])" :key="si">
                  <option :value="si" x-text="seq.name + ' (' + seq.totalEmails + ' emails)'"></option>
                </template>
              </select>
            </div>

            <!-- Sequence Description -->
            <div x-show="currentSequence" class="bg-surface-800 border border-surface-700 rounded-xl p-4">
              <p class="text-xs text-gray-400" x-text="currentSequence ? currentSequence.description : ''"></p>
              <div class="flex flex-wrap gap-3 mt-2 text-xs text-gray-500">
                <span>Trigger: <span class="text-gray-300" x-text="currentSequence ? currentSequence.trigger : ''"></span></span>
                <span>Duration: <span class="text-gray-300" x-text="currentSequence ? currentSequence.durationDays + ' days' : ''"></span></span>
              </div>
            </div>

            <!-- Email Preview -->
            <div x-show="currentEmail" class="bg-surface-800 border border-surface-700 rounded-xl overflow-hidden">
              <!-- Email Header -->
              <div class="p-4 border-b border-surface-700">
                <div class="flex items-center justify-between mb-2">
                  <p class="text-white font-semibold text-sm">Email <span x-text="currentEmail ? currentEmail.position : ''"></span> (Day <span x-text="currentEmail ? currentEmail.day : ''"></span>)</p>
                  <div class="flex items-center gap-2">
                    <button @click="emailIndex = Math.max(0, emailIndex - 1)"
                            :disabled="emailIndex === 0"
                            :class="emailIndex === 0 ? 'opacity-30 cursor-not-allowed' : 'hover:bg-surface-700 cursor-pointer'"
                            class="p-1 bg-surface-700 border border-surface-600 rounded text-gray-400 transition-colors">
                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path></svg>
                    </button>
                    <span class="text-xs text-gray-400" x-text="(emailIndex + 1) + ' / ' + (currentSequence ? currentSequence.emails.length : 0)"></span>
                    <button @click="emailIndex = Math.min((currentSequence ? currentSequence.emails.length - 1 : 0), emailIndex + 1)"
                            :disabled="!currentSequence || emailIndex >= currentSequence.emails.length - 1"
                            :class="(!currentSequence || emailIndex >= currentSequence.emails.length - 1) ? 'opacity-30 cursor-not-allowed' : 'hover:bg-surface-700 cursor-pointer'"
                            class="p-1 bg-surface-700 border border-surface-600 rounded text-gray-400 transition-colors">
                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5"></path></svg>
                    </button>
                  </div>
                </div>
                <div class="space-y-1 text-xs">
                  <p class="text-gray-500">From: <span class="text-gray-300">Michael Landes, Eisenhower Health Foundation</span></p>
                  <p class="text-gray-500">Subject: <span class="text-white font-medium" x-text="currentEmail ? currentEmail.subject : ''"></span></p>
                  <p class="text-gray-500">Preheader: <span class="text-gray-400 italic" x-text="currentEmail ? currentEmail.preheader : ''"></span></p>
                </div>
                <!-- Avatar badges -->
                <div x-show="currentEmail && currentEmail.primaryAvatars" class="flex flex-wrap gap-1 mt-2">
                  <template x-for="(av, ai) in (currentEmail ? currentEmail.primaryAvatars || [] : [])" :key="ai">
                    <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="av"></span>
                  </template>
                </div>
              </div>
              <!-- Email Body -->
              <div class="p-5 max-h-96 overflow-y-auto">
                <p class="text-sm text-gray-300 leading-relaxed whitespace-pre-line" x-text="currentEmail ? currentEmail.body : ''"></p>
              </div>
              <!-- Email Footer -->
              <div class="p-4 border-t border-surface-700 flex items-center justify-between">
                <div>
                  <p class="text-xs text-gray-500">CTA: <span class="text-brand-primary" x-text="currentEmail ? currentEmail.cta : ''"></span></p>
                  <p class="text-xs text-gray-500 mt-0.5">Narrative Arc: <span class="text-gray-300" x-text="currentEmail ? currentEmail.narrativeArc : ''"></span></p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- ═══ Social Tab ═══ -->
        <div x-show="assetTab === 'social'" x-cloak class="space-y-4">
          <!-- View Toggle -->
          <div class="flex items-center gap-3">
            <div class="flex gap-1 bg-surface-800 p-1 rounded-xl">
              <button @click="socialView = 'calendar'"
                      :class="socialView === 'calendar' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'"
                      class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Calendar View</button>
              <button @click="socialView = 'library'"
                      :class="socialView === 'library' ? 'bg-brand-primary text-white' : 'text-gray-400 hover:text-gray-200'"
                      class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer">Library View</button>
            </div>
            <span x-show="socialCalendar" class="text-xs text-gray-500" x-text="(socialCalendar ? socialCalendar.month : '') + ' - ' + (socialCalendar && socialCalendar.overview ? socialCalendar.overview.totalPosts + ' posts' : '')"></span>
          </div>

          <!-- Calendar View -->
          <div x-show="socialView === 'calendar' && socialCalendar && socialCalendar.weeks" class="space-y-4">
            <template x-for="(week, wi) in (socialCalendar ? socialCalendar.weeks : [])" :key="wi">
              <div class="space-y-2">
                <div class="flex items-center gap-2">
                  <h4 class="text-white font-semibold text-sm">Week <span x-text="week.weekNumber"></span></h4>
                  <span class="text-xs bg-surface-700 text-gray-400 px-2 py-0.5 rounded-full" x-text="week.theme"></span>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-7 gap-2">
                  <template x-for="(d, di) in (week.days || [])" :key="di">
                    <button @click="$store.detail.show('Day ' + d.dayNumber + ' (' + d.weekday + ')', d, 'social-day')"
                            class="bg-surface-800 border border-surface-700 rounded-lg p-3 text-left hover:border-brand-primary/40 transition-all duration-150 cursor-pointer group min-h-[100px]">
                      <div class="flex items-center justify-between mb-1.5">
                        <span class="text-xs font-semibold text-white" x-text="d.weekday.slice(0, 3)"></span>
                        <span class="text-xs text-gray-500" x-text="'D' + d.dayNumber"></span>
                      </div>
                      <!-- Platform icons -->
                      <div class="flex flex-wrap gap-1 mb-1.5">
                        <template x-for="(p, pi) in (d.platforms || [])" :key="pi">
                          <span class="text-xs bg-surface-700 text-gray-400 px-1.5 py-0.5 rounded" x-text="p.platform.slice(0, 2).toUpperCase()"></span>
                        </template>
                      </div>
                      <!-- Hook preview -->
                      <p class="text-xs text-gray-400 line-clamp-2 group-hover:text-gray-300 transition-colors" x-text="d.platforms && d.platforms[0] ? d.platforms[0].hook : ''"></p>
                    </button>
                  </template>
                </div>
              </div>
            </template>
          </div>

          <!-- Library View -->
          <div x-show="socialView === 'library' && socialCalendar && socialCalendar.weeks" class="space-y-3">
            <template x-for="(week, wi) in (socialCalendar ? socialCalendar.weeks : [])" :key="wi">
              <template x-for="(d, di) in (week.days || [])" :key="di">
                <template x-for="(p, pi) in (d.platforms || [])" :key="pi">
                  <button @click="$store.detail.show('Day ' + d.dayNumber + ' - ' + p.platform, p, 'social-content')"
                          class="w-full bg-surface-800 border border-surface-700 rounded-xl p-4 text-left hover:border-brand-primary/40 transition-all duration-150 cursor-pointer group">
                    <div class="flex items-center gap-3 mb-2">
                      <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded capitalize" x-text="p.platform"></span>
                      <span class="text-xs text-gray-500" x-text="d.weekday + ', Day ' + d.dayNumber"></span>
                      <span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full" x-text="p.contentType"></span>
                      <span class="text-xs text-gray-500" x-text="p.format"></span>
                    </div>
                    <p class="text-sm text-gray-300 group-hover:text-white transition-colors" x-text="p.hook"></p>
                  </button>
                </template>
              </template>
            </template>
          </div>
        </div>

        <!-- ═══ Lead Magnets Tab ═══ -->
        <div x-show="assetTab === 'leadmagnets'" x-cloak class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-show="assets && assets.leadMagnets">
            <template x-for="(lm, li) in (assets ? assets.leadMagnets : [])" :key="li">
              <button @click="$store.detail.show(lm.title, lm, 'leadmagnet')"
                      class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-xs bg-purple-500/20 text-purple-400 px-2 py-0.5 rounded-full" x-text="lm.type"></span>
                </div>
                <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors mb-2" x-text="lm.title"></h4>
                <p class="text-xs text-gray-400 mb-3" x-text="lm.purpose"></p>
                <p class="text-xs text-gray-500">Audience: <span class="text-gray-300" x-text="lm.targetAudience"></span></p>
                <!-- Sections preview -->
                <div class="mt-3 flex flex-wrap gap-1">
                  <template x-for="(sec, si) in (lm.sections || []).slice(0, 4)" :key="si">
                    <span class="text-xs bg-surface-700 text-gray-400 px-2 py-0.5 rounded-full" x-text="sec"></span>
                  </template>
                  <span x-show="(lm.sections || []).length > 4" class="text-xs text-gray-500">+<span x-text="lm.sections.length - 4"></span></span>
                </div>
              </button>
            </template>
          </div>
        </div>

        <!-- ═══ Sales Tab ═══ -->
        <div x-show="assetTab === 'sales'" x-cloak class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-show="assets && assets.salesEnablement">
            <template x-for="(sa, si) in (assets ? assets.salesEnablement : [])" :key="si">
              <button @click="$store.detail.show(sa.title, sa, 'sales')"
                      class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-xs bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full" x-text="sa.type"></span>
                </div>
                <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors mb-2" x-text="sa.title"></h4>
                <p class="text-xs text-gray-400 mb-3" x-text="sa.purpose"></p>
                <!-- Sections list -->
                <div class="flex flex-wrap gap-1">
                  <template x-for="(sec, si2) in (sa.sections || []).slice(0, 4)" :key="si2">
                    <span class="text-xs bg-surface-700 text-gray-400 px-2 py-0.5 rounded-full" x-text="sec"></span>
                  </template>
                  <span x-show="(sa.sections || []).length > 4" class="text-xs text-gray-500">+<span x-text="sa.sections.length - 4"></span></span>
                </div>
              </button>
            </template>
          </div>
        </div>

        <!-- ═══ SEO Tab ═══ -->
        <div x-show="assetTab === 'seo'" x-cloak x-data="{ seoData: null, async init() { try { this.seoData = await fetch('./data/seo_data.json').then(r => r.json()); } catch(e) { console.error('SEO load error', e); } } }" class="space-y-4">

          <!-- Stats Row -->
          <div x-show="seoData" class="grid grid-cols-3 gap-3">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
              <p class="text-2xl font-bold text-brand-primary" x-text="seoData ? seoData.overview.totalKeywords : 0"></p>
              <p class="text-xs text-gray-400 mt-1">Keywords</p>
            </div>
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
              <p class="text-2xl font-bold text-brand-primary" x-text="seoData ? seoData.topicClusters.length : 0"></p>
              <p class="text-xs text-gray-400 mt-1">Topic Clusters</p>
            </div>
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
              <p class="text-2xl font-bold text-brand-primary" x-text="seoData && seoData.blogPosts ? seoData.blogPosts.length : 0"></p>
              <p class="text-xs text-gray-400 mt-1">Blog Posts</p>
            </div>
          </div>

          <!-- Topic Clusters -->
          <div x-show="seoData && seoData.topicClusters">
            <h3 class="text-white font-semibold text-sm mb-3">Topic Clusters</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              <template x-for="(cl, cli) in (seoData ? seoData.topicClusters : [])" :key="cli">
                <button @click="$store.detail.show(cl.name, cl, 'seo-cluster')"
                        class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                  <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="cl.name"></h4>
                  <p class="text-xs text-gray-400 mt-1" x-text="cl.intent"></p>
                  <div class="flex items-center gap-3 mt-2 text-xs text-gray-500">
                    <span>Hub: <span class="text-gray-300" x-text="cl.hubPage"></span></span>
                  </div>
                  <p class="text-xs text-brand-primary mt-2" x-text="cl.trafficEstimate + '/mo'"></p>
                  <p class="text-xs text-gray-500 mt-1" x-text="cl.keywords.length + ' keywords'"></p>
                </button>
              </template>
            </div>
          </div>

          <!-- Blog Posts -->
          <div x-show="seoData && seoData.blogPosts">
            <h3 class="text-white font-semibold text-sm mb-3">Blog Content Calendar</h3>
            <div class="space-y-2">
              <template x-for="(bp, bpi) in (seoData ? seoData.blogPosts : [])" :key="bpi">
                <button @click="$store.detail.show(bp.title, bp, 'blog')"
                        class="w-full bg-surface-800 border border-surface-700 rounded-xl p-4 flex items-center gap-4 text-left hover:border-brand-primary/40 transition-all duration-150 cursor-pointer group">
                  <span class="w-8 h-8 rounded-full bg-brand-primary/20 text-brand-primary text-xs font-bold flex items-center justify-center flex-shrink-0" x-text="bp.id"></span>
                  <div class="flex-1 min-w-0">
                    <p class="text-sm text-white truncate group-hover:text-brand-primary transition-colors" x-text="bp.title"></p>
                    <div class="flex flex-wrap gap-2 mt-1 text-xs text-gray-500">
                      <span x-text="bp.type"></span>
                      <span x-text="bp.wordCount + ' words'"></span>
                      <span x-text="bp.publishMonth"></span>
                      <span class="text-gray-400" x-text="bp.targetAvatar"></span>
                    </div>
                  </div>
                </button>
              </template>
            </div>
          </div>
        </div>

        <!-- ═══ Story Emails Tab ═══ -->
        <div x-show="assetTab === 'storyemails'" x-cloak class="space-y-4">
          <p class="text-gray-400 text-sm">Narrative-driven email sequences: Soap Opera, ISM, and Seasonal series.</p>
          <div x-show="emails && emails.sequences" class="space-y-4">
            <!-- Filter to story sequences -->
            <template x-for="(seq, si) in (emails ? emails.sequences : []).filter(s => s.id === 'soap_opera' || s.id === 'ism' || s.id === 'seasonal' || s.name.toLowerCase().includes('soap') || s.name.toLowerCase().includes('ism') || s.name.toLowerCase().includes('seasonal') || s.name.toLowerCase().includes('story') || s.name.toLowerCase().includes('narrative'))" :key="si">
              <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
                <div class="flex items-center justify-between mb-3">
                  <h4 class="text-white font-semibold text-sm" x-text="seq.name"></h4>
                  <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="seq.totalEmails + ' emails'"></span>
                </div>
                <p class="text-xs text-gray-400 mb-3" x-text="seq.description"></p>
                <div class="space-y-2">
                  <template x-for="(em, ei) in (seq.emails || [])" :key="ei">
                    <button @click="selectedSequence = (emails ? emails.sequences : []).indexOf(seq); emailIndex = ei; assetTab = 'emails'"
                            class="w-full bg-surface-700/50 border border-surface-600 rounded-lg p-3 text-left hover:border-brand-primary/40 transition-all duration-150 cursor-pointer group">
                      <div class="flex items-center justify-between">
                        <p class="text-xs text-white group-hover:text-brand-primary transition-colors" x-text="'Email ' + em.position + ': ' + em.subject"></p>
                        <span class="text-xs text-gray-500" x-text="'Day ' + em.day"></span>
                      </div>
                    </button>
                  </template>
                </div>
              </div>
            </template>
            <!-- Show all if no matches -->
            <div x-show="(emails ? emails.sequences : []).filter(s => s.id === 'soap_opera' || s.id === 'ism' || s.id === 'seasonal' || s.name.toLowerCase().includes('soap') || s.name.toLowerCase().includes('ism') || s.name.toLowerCase().includes('seasonal') || s.name.toLowerCase().includes('story') || s.name.toLowerCase().includes('narrative')).length === 0">
              <p class="text-gray-500 text-sm">No story-based sequences found. View all sequences in the Emails tab.</p>
            </div>
          </div>
        </div>

        <!-- ═══ Competitor Pages Tab ═══ -->
        <div x-show="assetTab === 'competitors'" x-cloak class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" x-show="assets && assets.competitorPages">
            <template x-for="(cp, ci) in (assets ? assets.competitorPages : [])" :key="ci">
              <div class="bg-surface-800 border border-surface-700 rounded-xl p-5 group">
                <div class="flex items-center gap-2 mb-2">
                  <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="cp.competitorType"></span>
                </div>
                <h4 class="text-white font-semibold text-sm mb-2" x-text="cp.title"></h4>
                <p class="text-xs text-gray-400 mb-3" x-text="cp.keyDifferentiator"></p>
                <div class="text-xs text-gray-500">
                  <span>Target keyword: <span class="text-gray-300" x-text="cp.targetKeyword"></span></span>
                </div>
                <a x-show="cp.pagePath || cp.sourceFile" :href="cp.pagePath || cp.sourceFile" target="_blank" rel="noopener"
                   class="inline-flex items-center gap-1 mt-3 text-xs text-brand-primary hover:text-brand-primary/80 cursor-pointer transition-colors">
                  View Comparison
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"></path></svg>
                </a>
              </div>
            </template>
          </div>
        </div>

      </div>
    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- LAUNCH PLAN SECTION                     -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'launch'" x-data="launchPlan()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Launch Plan</h2>
        <p class="text-gray-400 text-sm mt-1" x-text="launch ? launch.overview.title : '90-Day Launch Roadmap'"></p>
      </div>

      <!-- Overview Cards -->
      <div x-show="launch" class="grid grid-cols-2 sm:grid-cols-4 gap-3">
        <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
          <p class="text-2xl font-bold text-brand-primary" x-text="launch ? launch.overview.totalAssets : 0"></p>
          <p class="text-xs text-gray-400 mt-1">Total Assets</p>
        </div>
        <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
          <p class="text-2xl font-bold text-brand-primary" x-text="launch ? launch.overview.totalPhases : 0"></p>
          <p class="text-xs text-gray-400 mt-1">Phases</p>
        </div>
        <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
          <p class="text-2xl font-bold text-brand-primary" x-text="launch ? launch.overview.launchWindow : ''"></p>
          <p class="text-xs text-gray-400 mt-1">Launch Window</p>
        </div>
        <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center">
          <p class="text-2xl font-bold text-brand-primary" x-text="launch ? launch.overview.minimumViableBudget : ''"></p>
          <p class="text-xs text-gray-400 mt-1">Min. Budget/Mo</p>
        </div>
      </div>

      <!-- Governing Principle -->
      <div x-show="launch" class="bg-gradient-to-r from-brand-primary/10 to-surface-800 border border-brand-primary/20 rounded-xl p-5">
        <p class="text-brand-primary text-xs font-semibold uppercase tracking-wide mb-2">Governing Principle</p>
        <p class="text-white text-sm italic" x-text="launch ? launch.overview.governingPrinciple : ''"></p>
        <p class="text-gray-400 text-xs mt-2" x-text="launch ? launch.overview.activationOrderPrinciple : ''"></p>
      </div>

      <!-- Phase Filter + Task List -->
      <div x-data="{ phaseFilter: 'all' }" class="space-y-4">
        <div class="flex flex-wrap gap-2">
          <button @click="phaseFilter = 'all'"
                  :class="phaseFilter === 'all' ? 'bg-brand-primary text-white' : 'bg-surface-800 text-gray-400 hover:text-gray-200'"
                  class="px-3 py-1.5 rounded-lg text-xs font-medium border border-surface-700 transition-colors cursor-pointer">All</button>
          <template x-for="(phase, pi) in (launch ? launch.phases : [])" :key="pi">
            <button @click="phaseFilter = phase.name"
                    :class="phaseFilter === phase.name ? 'bg-brand-primary text-white' : 'bg-surface-800 text-gray-400 hover:text-gray-200'"
                    class="px-3 py-1.5 rounded-lg text-xs font-medium border border-surface-700 transition-colors cursor-pointer" x-text="phase.name"></button>
          </template>
        </div>

        <!-- Phases and Tasks -->
        <template x-for="(phase, pi) in (launch ? launch.phases : [])" :key="pi">
          <div x-show="phaseFilter === 'all' || phaseFilter === phase.name" class="space-y-3">
            <div class="flex items-center gap-3">
              <span class="w-8 h-8 rounded-full bg-brand-primary/20 text-brand-primary text-sm font-bold flex items-center justify-center" x-text="phase.id"></span>
              <div>
                <h3 class="text-white font-semibold text-sm" x-text="phase.name"></h3>
                <p class="text-xs text-gray-500" x-text="phase.weeks"></p>
              </div>
            </div>
            <p class="text-xs text-gray-400 ml-11" x-text="phase.description"></p>

            <!-- Task Table -->
            <div class="ml-11 space-y-1">
              <template x-for="(task, ti) in (phase.tasks || [])" :key="ti">
                <button @click="$store.detail.show(task.name, task, 'launch-task')"
                        class="w-full bg-surface-800 border border-surface-700 rounded-lg p-3 text-left hover:border-brand-primary/40 transition-all duration-150 cursor-pointer group flex items-center gap-3">
                  <span class="text-xs text-gray-500 font-mono flex-shrink-0 w-12" x-text="task.id"></span>
                  <span class="flex-1 text-sm text-gray-300 group-hover:text-white transition-colors truncate" x-text="task.name"></span>
                  <span :class="{
                    'bg-red-500/20 text-red-400': task.priority === 'high',
                    'bg-amber-500/20 text-amber-400': task.priority === 'medium',
                    'bg-green-500/20 text-green-400': task.priority === 'low'
                  }" class="text-xs px-2 py-0.5 rounded-full flex-shrink-0" x-text="task.priority"></span>
                  <span class="text-xs text-gray-500 flex-shrink-0 hidden sm:inline" x-text="task.category"></span>
                </button>
              </template>
            </div>
          </div>
        </template>
      </div>

      <!-- Budget Chart -->
      <div x-show="launch && launch.budgetAllocation" class="space-y-3">
        <h3 class="text-white font-semibold text-sm">Budget Allocation</h3>
        <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
          <div class="max-w-md mx-auto" style="height: 280px;">
            <canvas id="budgetDoughnut"></canvas>
          </div>
        </div>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- ANALYTICS SECTION                       -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'analytics'" x-data="analyticsSection()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Analytics & Measurement</h2>
        <p class="text-gray-400 text-sm mt-1">UTM conventions, tracking plan, KPI targets, and attribution model</p>
      </div>

      <!-- Tools Overview -->
      <div x-show="analytics && analytics.overview" class="bg-surface-800 border border-surface-700 rounded-xl p-5">
        <h3 class="text-white font-semibold text-sm mb-3">Measurement Stack</h3>
        <div class="flex flex-wrap gap-2">
          <template x-for="(tool, ti) in (analytics ? analytics.overview.tools : [])" :key="ti">
            <span class="text-xs bg-surface-700 text-gray-300 px-3 py-1 rounded-full" x-text="tool"></span>
          </template>
        </div>
      </div>

      <!-- UTM Convention -->
      <div x-show="analytics && analytics.utmConvention" class="space-y-4">
        <h3 class="text-white font-semibold text-sm">UTM Convention</h3>
        <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
          <p class="text-sm text-gray-300 font-mono mb-3" x-text="analytics ? analytics.utmConvention.format : ''"></p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Source Taxonomy -->
            <div>
              <h4 class="text-white font-semibold text-xs mb-2">Source Taxonomy</h4>
              <div class="space-y-1 max-h-48 overflow-y-auto">
                <template x-for="(src, si) in (analytics ? analytics.utmConvention.sourceTaxonomy : [])" :key="si">
                  <div class="flex items-center gap-2 text-xs">
                    <span class="text-brand-primary font-mono" x-text="src.value"></span>
                    <span class="text-gray-500" x-text="src.description"></span>
                  </div>
                </template>
              </div>
            </div>
            <!-- Medium Taxonomy -->
            <div>
              <h4 class="text-white font-semibold text-xs mb-2">Medium Taxonomy</h4>
              <div class="space-y-1 max-h-48 overflow-y-auto">
                <template x-for="(med, mi) in (analytics ? analytics.utmConvention.mediumTaxonomy : [])" :key="mi">
                  <div class="flex items-center gap-2 text-xs">
                    <span class="text-brand-primary font-mono" x-text="med.value"></span>
                    <span class="text-gray-500" x-text="med.description"></span>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>

        <!-- UTM Examples -->
        <div x-show="analytics && analytics.utmConvention.fullUrlExamples" class="bg-surface-800 border border-surface-700 rounded-xl p-5">
          <h4 class="text-white font-semibold text-xs mb-3">URL Examples</h4>
          <div class="space-y-3">
            <template x-for="(ex, ei) in (analytics ? analytics.utmConvention.fullUrlExamples : [])" :key="ei">
              <div>
                <p class="text-xs text-gray-400 mb-1" x-text="ex.context"></p>
                <p class="text-xs text-brand-primary font-mono break-all" x-text="ex.url"></p>
              </div>
            </template>
          </div>
        </div>
      </div>

      <!-- Conversion Events / Tracking Plan -->
      <div x-show="analytics && analytics.conversionEvents" class="space-y-4">
        <h3 class="text-white font-semibold text-sm">Tracking Plan: Conversion Events by Funnel Stage</h3>
        <template x-for="(stage, si) in (analytics ? analytics.conversionEvents.funnelStages : [])" :key="si">
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <div class="flex items-center gap-2 mb-3">
              <span class="w-6 h-6 rounded-full bg-brand-primary/20 text-brand-primary text-xs font-bold flex items-center justify-center" x-text="si + 1"></span>
              <h4 class="text-white font-semibold text-sm" x-text="stage.stage"></h4>
            </div>
            <p class="text-xs text-gray-400 mb-3" x-text="stage.description"></p>
            <!-- Events Table -->
            <div class="overflow-x-auto">
              <table class="w-full text-xs">
                <thead>
                  <tr class="border-b border-surface-600">
                    <th class="text-left text-gray-500 font-medium py-2 px-2">Event</th>
                    <th class="text-left text-gray-500 font-medium py-2 px-2">Trigger</th>
                    <th class="text-left text-gray-500 font-medium py-2 px-2 hidden md:table-cell">Category</th>
                    <th class="text-left text-gray-500 font-medium py-2 px-2 hidden lg:table-cell">Notes</th>
                  </tr>
                </thead>
                <tbody>
                  <template x-for="(ev, ei) in (stage.events || [])" :key="ei">
                    <tr class="border-b border-surface-700/50 hover:bg-surface-700/30 transition-colors">
                      <td class="py-2 px-2 text-brand-primary font-mono" x-text="ev.name"></td>
                      <td class="py-2 px-2 text-gray-400" x-text="ev.trigger"></td>
                      <td class="py-2 px-2 text-gray-500 hidden md:table-cell" x-text="ev.category"></td>
                      <td class="py-2 px-2 text-gray-500 hidden lg:table-cell" x-text="ev.notes"></td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </template>
      </div>

      <!-- KPI Targets -->
      <div x-show="analytics && analytics.kpisPerChannel" class="space-y-4">
        <h3 class="text-white font-semibold text-sm">KPI Targets by Channel</h3>
        <template x-for="(ch, chi) in (analytics ? analytics.kpisPerChannel.channels : [])" :key="chi">
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <div class="flex items-center justify-between mb-3">
              <h4 class="text-white font-semibold text-sm" x-text="ch.channel"></h4>
              <span class="text-xs text-gray-500" x-text="ch.campaigns"></span>
            </div>
            <div class="overflow-x-auto">
              <table class="w-full text-xs">
                <thead>
                  <tr class="border-b border-surface-600">
                    <th class="text-left text-gray-500 font-medium py-2 px-2">Metric</th>
                    <th class="text-left text-gray-500 font-medium py-2 px-2">Target</th>
                    <th class="text-left text-gray-500 font-medium py-2 px-2">Floor</th>
                    <th class="text-left text-gray-500 font-medium py-2 px-2">Stretch</th>
                  </tr>
                </thead>
                <tbody>
                  <template x-for="(kpi, ki) in (ch.kpis || [])" :key="ki">
                    <tr class="border-b border-surface-700/50 hover:bg-surface-700/30 transition-colors">
                      <td class="py-2 px-2 text-gray-300" x-text="kpi.metric"></td>
                      <td class="py-2 px-2 text-brand-primary font-medium" x-text="kpi.target"></td>
                      <td class="py-2 px-2 text-red-400" x-text="kpi.floor"></td>
                      <td class="py-2 px-2 text-green-400" x-text="kpi.stretch"></td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
            <!-- Per-avatar breakdown if available -->
            <div x-show="ch.byAvatar" class="mt-4 pt-3 border-t border-surface-700">
              <h5 class="text-gray-400 text-xs font-semibold mb-2">By Avatar</h5>
              <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                <template x-for="(av, avi) in (ch.byAvatar || [])" :key="avi">
                  <div class="bg-surface-700/50 rounded-lg p-3">
                    <p class="text-white text-xs font-medium" x-text="av.avatar"></p>
                    <p class="text-xs text-gray-400 mt-1">CPC: <span class="text-gray-300" x-text="av.expectedCPC"></span></p>
                    <p class="text-xs text-gray-400">Cost/Donation: <span class="text-gray-300" x-text="av.expectedCostPerDonation"></span></p>
                    <p class="text-xs text-gray-500 mt-1" x-text="av.rationale"></p>
                  </div>
                </template>
              </div>
            </div>
          </div>
        </template>
      </div>

      <!-- Attribution Model -->
      <div x-show="analytics && analytics.attributionModel" class="bg-surface-800 border border-surface-700 rounded-xl p-5">
        <h3 class="text-white font-semibold text-sm mb-2">Attribution Model</h3>
        <p class="text-sm text-gray-300" x-text="analytics ? (typeof analytics.attributionModel === 'string' ? analytics.attributionModel : analytics.attributionModel.model || JSON.stringify(analytics.attributionModel).slice(0, 200)) : ''"></p>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- VIDEO HUB SECTION                       -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'video'" x-data="videoHub()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Video Hub</h2>
        <p class="text-gray-400 text-sm mt-1">Video Sales Letter and YouTube script library</p>
      </div>

      <!-- Tabs -->
      <div x-data="{ tab: 'vsl' }" class="space-y-6">
        <div class="flex gap-2 border-b border-surface-700 pb-0">
          <button @click="tab = 'vsl'"
                  :class="tab === 'vsl' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer">VSL Script</button>
          <button @click="tab = 'youtube'"
                  :class="tab === 'youtube' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer">YouTube Scripts</button>
        </div>

        <!-- VSL Script Tab -->
        <div x-show="tab === 'vsl' && video && video.vsl" class="space-y-4">
          <!-- VSL Header Card -->
          <div class="bg-gradient-to-br from-brand-secondary to-surface-800 rounded-2xl p-6 border border-surface-700">
            <h3 class="text-white font-display text-xl" x-text="video.vsl.title"></h3>
            <div class="flex flex-wrap gap-4 mt-3">
              <span class="text-xs bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full" x-text="'Target: ' + video.vsl.targetLength"></span>
              <span class="text-xs bg-surface-700 text-gray-300 px-3 py-1 rounded-full" x-text="video.vsl.totalWords + ' words'"></span>
              <span class="text-xs bg-surface-700 text-gray-300 px-3 py-1 rounded-full" x-text="video.vsl.deliveryPace"></span>
            </div>
            <p class="text-sm text-gray-400 mt-3 italic" x-text="video.vsl.voice"></p>
          </div>

          <!-- VSL Sections -->
          <template x-for="(sec, si) in (video.vsl.sections || [])" :key="si">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-5 space-y-3">
              <div class="flex items-center justify-between flex-wrap gap-2">
                <h4 class="text-white font-semibold text-sm">
                  <span class="text-brand-primary mr-2" x-text="'#' + sec.number"></span>
                  <span x-text="sec.name"></span>
                </h4>
                <div class="flex gap-2">
                  <span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full" x-text="sec.timing"></span>
                  <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="sec.duration"></span>
                </div>
              </div>
              <p class="text-xs text-gray-500" x-text="sec.purpose"></p>
              <div class="bg-surface-900 rounded-lg p-4">
                <p class="text-sm text-gray-300 whitespace-pre-line leading-relaxed" x-text="sec.script"></p>
              </div>
              <div x-show="sec.bRollDirection" class="border-l-2 border-brand-accent bg-surface-700/50 rounded-r-lg p-3">
                <p class="text-xs font-semibold text-brand-accent mb-1">B-Roll Direction</p>
                <p class="text-xs text-gray-400 leading-relaxed" x-text="sec.bRollDirection"></p>
              </div>
            </div>
          </template>

          <!-- View Full Script button -->
          <div class="pt-2">
            <a href="./pages/vsl-script.html" target="_blank"
               class="inline-flex items-center gap-2 bg-brand-primary text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
              View Full Script
            </a>
          </div>
        </div>

        <!-- YouTube Scripts Tab -->
        <div x-show="tab === 'youtube' && video && video.youtubeScripts" class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <template x-for="(script, si) in (video.youtubeScripts || [])" :key="si">
              <button @click="$store.detail.show(script.title, script, 'video-script')"
                      class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                <div class="flex items-start justify-between gap-2 mb-2">
                  <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors leading-snug" x-text="script.title"></h4>
                  <span :class="{
                    'bg-green-500/20 text-green-400': script.funnelStage.toLowerCase().includes('top'),
                    'bg-amber-500/20 text-amber-400': script.funnelStage.toLowerCase().includes('middle'),
                    'bg-red-500/20 text-red-400': script.funnelStage.toLowerCase().includes('bottom')
                  }" class="text-xs px-2 py-0.5 rounded-full flex-shrink-0 whitespace-nowrap" x-text="script.funnelStage.split('(')[0].trim()"></span>
                </div>
                <p class="text-xs text-gray-500 mb-3" x-text="script.targetLength"></p>
                <p class="text-sm text-gray-400 line-clamp-2" x-text="script.hookLine"></p>
                <div class="mt-3 flex flex-wrap gap-1">
                  <template x-for="(tag, ti) in (script.tags || []).slice(0, 3)" :key="ti">
                    <span class="text-xs bg-surface-700/70 text-gray-500 px-2 py-0.5 rounded" x-text="tag"></span>
                  </template>
                </div>
              </button>
            </template>
          </div>

          <!-- View Gallery button -->
          <div class="pt-2">
            <a href="./pages/youtube-gallery.html" target="_blank"
               class="inline-flex items-center gap-2 bg-brand-primary text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
              View Gallery
            </a>
          </div>
        </div>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- GROWTH PLAYBOOKS SECTION                -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'growth'" x-data="growthPlaybooks()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Growth Playbooks</h2>
        <p class="text-gray-400 text-sm mt-1">Referral, partner, community, and retargeting growth strategies</p>
      </div>

      <!-- Channel Assessment Score Cards -->
      <div x-show="playbooks && playbooks.channelAssessment" class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <template x-for="(ch, ci) in (playbooks.channelAssessment || [])" :key="ci">
          <button @click="showChannelDetail(ch)"
                  class="bg-surface-800 border border-surface-700 rounded-xl p-4 text-center hover:border-brand-primary/40 transition-all cursor-pointer group">
            <p class="text-2xl font-bold group-hover:text-white transition-colors" :class="ch.total >= 16 ? 'text-green-400' : ch.total >= 12 ? 'text-brand-primary' : ch.total >= 8 ? 'text-amber-400' : 'text-red-400'" x-text="ch.total + '/20'"></p>
            <p class="text-xs text-white font-medium mt-1" x-text="ch.channel"></p>
            <p class="text-xs text-gray-500 mt-1" x-text="ch.timeframe"></p>
            <!-- Score breakdown dots -->
            <div class="flex justify-center gap-0.5 mt-2">
              <template x-for="dot in 20" :key="dot">
                <span class="w-1.5 h-1.5 rounded-full" :class="dot <= ch.total ? (ch.total >= 16 ? 'bg-green-400' : ch.total >= 12 ? 'bg-brand-primary' : ch.total >= 8 ? 'bg-amber-400' : 'bg-red-400') : 'bg-surface-600'"></span>
              </template>
            </div>
          </button>
        </template>
      </div>

      <!-- Tabs -->
      <div x-data="{ tab: 'referral' }" class="space-y-6">
        <div class="flex gap-2 border-b border-surface-700 pb-0 overflow-x-auto">
          <button @click="tab = 'referral'"
                  :class="tab === 'referral' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Referral</button>
          <button @click="tab = 'partner'"
                  :class="tab === 'partner' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Partner</button>
          <button @click="tab = 'community'"
                  :class="tab === 'community' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Community</button>
          <button @click="tab = 'retargeting'"
                  :class="tab === 'retargeting' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Retargeting</button>
        </div>

        <!-- Referral Tab -->
        <div x-show="tab === 'referral' && playbooks && playbooks.referralProgram" class="space-y-4">
          <div class="bg-gradient-to-br from-brand-secondary to-surface-800 rounded-2xl p-6 border border-surface-700 cursor-pointer hover:border-brand-primary/40 transition-all"
               @click="$store.detail.show('Referral Program', playbooks.referralProgram, 'growth-channel')">
            <h3 class="text-white font-display text-lg" x-text="playbooks.referralProgram.name"></h3>
            <p class="text-sm text-gray-400 mt-2" x-text="playbooks.referralProgram.framing"></p>
            <div class="flex gap-4 mt-4">
              <div class="bg-surface-700/50 rounded-lg px-3 py-2">
                <p class="text-xs text-gray-500">K-Factor Target</p>
                <p class="text-sm text-white font-semibold" x-text="playbooks.referralProgram.kFactorTarget"></p>
              </div>
            </div>
          </div>

          <!-- Success Criteria -->
          <div x-show="playbooks.referralProgram.successCriteria || playbooks.referralProgram.kpis" class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <p class="text-xs text-amber-400 font-semibold uppercase tracking-wide mb-3">Success Criteria</p>
            <div class="space-y-2">
              <template x-for="(sc, sci) in (playbooks.referralProgram.successCriteria || playbooks.referralProgram.kpis || [])" :key="sci">
                <div class="flex items-start gap-2">
                  <span class="text-green-400 text-xs mt-0.5 flex-shrink-0">&#10003;</span>
                  <p class="text-sm text-gray-300" x-text="typeof sc === 'string' ? sc : (sc.metric || sc.name || JSON.stringify(sc))"></p>
                </div>
              </template>
            </div>
          </div>

          <!-- Integration Points -->
          <div x-show="playbooks.referralProgram.integrationPoints" class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <p class="text-xs text-brand-primary font-semibold uppercase tracking-wide mb-3">Integration Points</p>
            <div class="space-y-2">
              <template x-for="(ip, ipi) in (playbooks.referralProgram.integrationPoints || [])" :key="ipi">
                <div class="flex items-start gap-2">
                  <span class="text-brand-accent text-xs mt-0.5 flex-shrink-0">*</span>
                  <p class="text-sm text-gray-300" x-text="ip"></p>
                </div>
              </template>
            </div>
          </div>

          <!-- Incentive Milestones -->
          <h4 class="text-white font-semibold text-sm">Incentive Structure</h4>
          <div class="space-y-3">
            <template x-for="(inc, ii) in (playbooks.referralProgram.incentiveStructure || [])" :key="ii">
              <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 flex items-start gap-4">
                <div class="relative flex-shrink-0">
                  <div class="w-8 h-8 rounded-full bg-brand-primary/20 text-brand-primary flex items-center justify-center text-sm font-bold" x-text="ii + 1"></div>
                  <div x-show="ii < (playbooks.referralProgram.incentiveStructure || []).length - 1" class="absolute top-8 left-1/2 w-0.5 h-4 bg-surface-600 -translate-x-1/2"></div>
                </div>
                <div>
                  <p class="text-sm text-white font-medium" x-text="inc.milestone"></p>
                  <p class="text-xs text-gray-400 mt-1" x-text="inc.referrerRecognition"></p>
                </div>
              </div>
            </template>
          </div>

          <!-- Referral Mechanisms -->
          <h4 class="text-white font-semibold text-sm">Referral Mechanisms</h4>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
            <template x-for="(mech, mi) in (playbooks.referralProgram.referralMechanisms || [])" :key="mi">
              <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
                <span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full" x-text="mech.type"></span>
                <p class="text-sm text-gray-300 mt-2" x-text="mech.description"></p>
              </div>
            </template>
          </div>
        </div>

        <!-- Partner Tab -->
        <div x-show="tab === 'partner' && playbooks && playbooks.partnerProgram" class="space-y-4">
          <div class="bg-gradient-to-br from-brand-secondary to-surface-800 rounded-2xl p-6 border border-surface-700 cursor-pointer hover:border-brand-primary/40 transition-all"
               @click="$store.detail.show('Partner Program', playbooks.partnerProgram, 'growth-channel')">
            <h3 class="text-white font-display text-lg" x-text="playbooks.partnerProgram.name"></h3>
            <p class="text-sm text-gray-400 mt-2" x-text="playbooks.partnerProgram.philosophy"></p>
          </div>

          <!-- Partner Categories -->
          <h4 class="text-white font-semibold text-sm">Partner Categories</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <template x-for="(cat, ci) in (playbooks.partnerProgram.partnerCategories || [])" :key="ci">
              <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
                <p class="text-sm text-white font-medium" x-text="cat.category"></p>
                <p class="text-xs text-gray-400 mt-1" x-text="cat.value"></p>
              </div>
            </template>
          </div>

          <!-- Top 15 Targets -->
          <h4 class="text-white font-semibold text-sm">Top Targets</h4>
          <div class="bg-surface-800 border border-surface-700 rounded-xl overflow-hidden">
            <div class="overflow-x-auto">
              <table class="w-full text-sm text-left">
                <thead class="bg-surface-700/50 text-xs text-gray-400 uppercase tracking-wider">
                  <tr>
                    <th class="px-4 py-3">Organization</th>
                    <th class="px-4 py-3">Category</th>
                    <th class="px-4 py-3 hidden md:table-cell">Rationale</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-surface-700">
                  <template x-for="(target, ti) in (playbooks.partnerProgram.top15Targets || [])" :key="ti">
                    <tr class="hover:bg-surface-700/30 transition-colors">
                      <td class="px-4 py-3 text-white font-medium" x-text="target.name"></td>
                      <td class="px-4 py-3"><span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="target.category"></span></td>
                      <td class="px-4 py-3 text-gray-400 text-xs hidden md:table-cell" x-text="target.rationale"></td>
                    </tr>
                  </template>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- Community Tab -->
        <div x-show="tab === 'community' && playbooks && playbooks.communityGrowth" class="space-y-4">
          <div class="bg-gradient-to-br from-brand-secondary to-surface-800 rounded-2xl p-6 border border-surface-700 cursor-pointer hover:border-brand-primary/40 transition-all"
               @click="$store.detail.show('Community Growth', playbooks.communityGrowth, 'growth-channel')">
            <h3 class="text-white font-display text-lg">Community Growth</h3>
            <p class="text-sm text-gray-400 mt-2" x-text="playbooks.communityGrowth.principle"></p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <template x-for="(comm, ci) in (playbooks.communityGrowth.communities || [])" :key="ci">
              <div class="bg-surface-800 border border-surface-700 rounded-xl p-5 space-y-3">
                <h4 class="text-white font-semibold text-sm" x-text="comm.communityName"></h4>
                <div class="flex flex-wrap gap-2">
                  <span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full" x-text="comm.platform"></span>
                  <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="comm.avatar"></span>
                </div>
                <p class="text-xs text-gray-400" x-text="comm.valueProposition"></p>
                <p class="text-xs text-gray-500 italic" x-text="'Ambassador: ' + comm.ambassadorRole.split('--')[0]"></p>
              </div>
            </template>
          </div>
        </div>

        <!-- Retargeting Tab -->
        <div x-show="tab === 'retargeting' && playbooks && playbooks.retargetingCampaigns" class="space-y-4">
          <div class="bg-gradient-to-br from-brand-secondary to-surface-800 rounded-2xl p-6 border border-surface-700 cursor-pointer hover:border-brand-primary/40 transition-all"
               @click="$store.detail.show('Retargeting Strategy', playbooks.retargetingCampaigns, 'growth-channel')">
            <h3 class="text-white font-display text-lg">Retargeting Campaigns</h3>
            <p class="text-sm text-gray-400 mt-2" x-text="playbooks.retargetingCampaigns.foundationalLogic ? playbooks.retargetingCampaigns.foundationalLogic.slice(0, 200) + '...' : ''"></p>
          </div>

          <!-- Temperature Bands -->
          <h4 class="text-white font-semibold text-sm">Temperature Bands</h4>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <template x-for="(band, bi) in (playbooks.retargetingCampaigns.temperatureBands || [])" :key="bi">
              <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
                <p class="text-sm text-white font-semibold" x-text="band.temperature"></p>
                <p class="text-xs text-gray-500 mt-1" x-text="'Window: ' + band.window"></p>
                <p class="text-xs text-gray-400 mt-1" x-text="band.signal"></p>
              </div>
            </template>
          </div>

          <!-- Audience Segments -->
          <h4 class="text-white font-semibold text-sm">Audience Segments</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
            <template x-for="(seg, si) in (playbooks.retargetingCampaigns.audienceSegments || [])" :key="si">
              <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
                <div class="flex items-start justify-between gap-2 mb-2">
                  <p class="text-sm text-white font-medium" x-text="seg.name"></p>
                  <span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full flex-shrink-0" x-text="seg.priority"></span>
                </div>
                <p class="text-xs text-gray-400" x-text="seg.definition"></p>
                <div class="mt-2 flex gap-2">
                  <span class="text-xs bg-surface-700 text-gray-500 px-2 py-0.5 rounded" x-text="seg.window"></span>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- SALES WAR ROOM SECTION                  -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'sales'" x-data="salesWarRoom()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Sales War Room</h2>
        <p class="text-gray-400 text-sm mt-1">Call scripts, objection handling, battle cards, and follow-up templates</p>
      </div>

      <!-- Tabs -->
      <div x-data="{ tab: 'scripts' }" class="space-y-6">
        <div class="flex gap-2 border-b border-surface-700 pb-0 overflow-x-auto">
          <button @click="tab = 'scripts'"
                  :class="tab === 'scripts' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Call Scripts</button>
          <button @click="tab = 'objections'"
                  :class="tab === 'objections' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Objection Handling</button>
          <button @click="tab = 'battlecards'"
                  :class="tab === 'battlecards' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Battle Cards</button>
          <button @click="tab = 'followup'"
                  :class="tab === 'followup' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Follow-Up Templates</button>
        </div>

        <!-- Call Scripts Tab -->
        <div x-show="tab === 'scripts' && sales && sales.callScripts" class="space-y-4">
          <template x-for="(script, si) in (sales.callScripts || [])" :key="si">
            <button @click="$store.detail.show(script.title, script, 'sales-script')"
                    class="w-full bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center justify-between mb-2">
                <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="script.title"></h4>
                <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="script.duration"></span>
              </div>
              <p class="text-xs text-gray-400" x-text="script.purpose ? script.purpose.slice(0, 150) + '...' : ''"></p>
              <div x-show="script.sections" class="mt-3 flex flex-wrap gap-1">
                <template x-for="(sec, sei) in (script.sections || []).slice(0, 4)" :key="sei">
                  <span class="text-xs bg-surface-700/70 text-gray-500 px-2 py-0.5 rounded" x-text="sec.name"></span>
                </template>
                <span x-show="(script.sections || []).length > 4" class="text-xs text-gray-500">+<span x-text="script.sections.length - 4"></span> more</span>
              </div>
            </button>
          </template>
        </div>

        <!-- Objection Handling Tab -->
        <div x-show="tab === 'objections' && sales && sales.objectionHandling" class="space-y-3">
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 mb-4">
            <p class="text-xs text-gray-400">Framework: <span class="text-white font-medium" x-text="typeof sales.objectionHandling.framework === 'object' ? sales.objectionHandling.framework.name : (sales.objectionHandling.framework || 'Acknowledge, Probe, Respond, Confirm')"></span></p>
          </div>
          <template x-for="(obj, oi) in (sales.objectionHandling.objections || [])" :key="oi">
            <div class="bg-surface-800 border border-surface-700 rounded-xl overflow-hidden">
              <button @click="toggleObjection(oi)"
                      class="w-full flex items-center justify-between p-4 text-left cursor-pointer hover:bg-surface-700/30 transition-colors">
                <div class="flex items-center gap-3">
                  <span class="w-6 h-6 rounded-full bg-brand-primary/20 text-brand-primary flex items-center justify-center text-xs font-bold flex-shrink-0" x-text="obj.id"></span>
                  <p class="text-sm text-white font-medium" x-text="obj.objection"></p>
                </div>
                <svg :class="expandedObjection === oi ? 'rotate-180' : ''" class="w-4 h-4 text-gray-500 transition-transform duration-200 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
              </button>
              <div x-show="expandedObjection === oi" x-collapse class="border-t border-surface-700 p-4 space-y-3">
                <p class="text-xs text-gray-500 italic" x-text="obj.whyTheySayIt"></p>
                <div class="space-y-2">
                  <div class="bg-green-500/10 border border-green-500/20 rounded-lg p-3">
                    <p class="text-xs font-semibold text-green-400 mb-1">Acknowledge</p>
                    <p class="text-sm text-gray-300" x-text="obj.acknowledge"></p>
                  </div>
                  <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-3">
                    <p class="text-xs font-semibold text-blue-400 mb-1">Probe</p>
                    <p class="text-sm text-gray-300" x-text="obj.probe"></p>
                  </div>
                  <div class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-3">
                    <p class="text-xs font-semibold text-brand-primary mb-1">Respond</p>
                    <p class="text-sm text-gray-300 whitespace-pre-line" x-text="typeof obj.respond === 'string' ? obj.respond : Object.values(obj.respond).join('\n\n---\n\n')"></p>
                  </div>
                  <div class="bg-purple-500/10 border border-purple-500/20 rounded-lg p-3">
                    <p class="text-xs font-semibold text-purple-400 mb-1">Confirm</p>
                    <p class="text-sm text-gray-300" x-text="obj.confirm"></p>
                  </div>
                </div>
                <button @click="$store.detail.show(obj.objection, obj, 'objection')"
                        class="text-xs text-brand-primary hover:underline cursor-pointer">View full handler</button>
              </div>
            </div>
          </template>
        </div>

        <!-- Battle Cards Tab -->
        <div x-show="tab === 'battlecards' && sales && sales.battleCards" class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <template x-for="(bc, bi) in (sales.battleCards || [])" :key="bi">
              <button @click="$store.detail.show(bc.competitor, bc, 'battle-card')"
                      class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                <div class="flex items-center justify-between mb-2">
                  <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="bc.competitor"></h4>
                  <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="bc.location"></span>
                </div>
                <p class="text-xs text-gray-400 line-clamp-2 mb-3" x-text="bc.profile ? bc.profile.slice(0, 120) + '...' : ''"></p>
                <div class="flex gap-4 text-xs">
                  <span class="text-green-400"><span x-text="(bc.strengths || []).length"></span> strengths</span>
                  <span class="text-red-400"><span x-text="(bc.limitations || []).length"></span> limitations</span>
                </div>
              </button>
            </template>
          </div>
        </div>

        <!-- Follow-Up Templates Tab -->
        <div x-show="tab === 'followup' && sales && sales.enablementAssets && sales.enablementAssets.followUpEmailTemplates" class="space-y-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <template x-for="(tmpl, ti) in (sales.enablementAssets.followUpEmailTemplates || [])" :key="ti">
              <button @click="$store.detail.show(tmpl.name, tmpl, 'email')"
                      class="bg-surface-800 border border-surface-700 rounded-xl p-5 text-left hover:border-brand-primary/40 transition-all duration-200 cursor-pointer group">
                <div class="flex items-center gap-2 mb-2">
                  <span class="w-6 h-6 rounded-full bg-brand-primary/20 text-brand-primary flex items-center justify-center text-xs font-bold flex-shrink-0" x-text="tmpl.id"></span>
                  <h4 class="text-white font-semibold text-sm group-hover:text-brand-primary transition-colors" x-text="tmpl.name"></h4>
                </div>
                <p class="text-xs text-gray-500 mb-2" x-text="'Timing: ' + tmpl.timing"></p>
                <p class="text-sm text-gray-400 font-medium" x-text="tmpl.subjectLine"></p>
                <p class="text-xs text-gray-500 mt-2 line-clamp-2" x-text="tmpl.body ? tmpl.body.slice(0, 100) + '...' : ''"></p>
              </button>
            </template>
          </div>
        </div>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- INTERACTIVE TOOLS SECTION               -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'tools'" x-data="interactiveTools()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Interactive Tools</h2>
        <p class="text-gray-400 text-sm mt-1">Quiz assessment and webinar conversion assets</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Quiz / Scorecard Card -->
        <div x-show="quiz" class="bg-surface-800 border border-surface-700 rounded-xl p-6 space-y-4 hover:border-brand-primary/40 transition-all cursor-pointer"
             @click="$store.detail.show(quiz.title, quiz, 'quiz')">
          <div class="flex items-start justify-between gap-3">
            <div>
              <span class="text-xs bg-brand-accent/20 text-brand-accent px-2 py-0.5 rounded-full">Assessment</span>
              <h3 class="text-white font-semibold text-lg mt-2" x-text="quiz.title"></h3>
            </div>
            <svg class="w-10 h-10 text-brand-primary/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z"/></svg>
          </div>
          <p class="text-sm text-gray-400" x-text="quiz.subtitle"></p>
          <div class="flex flex-wrap gap-3">
            <div class="bg-surface-700/50 rounded-lg px-3 py-2">
              <p class="text-xs text-gray-500">Questions</p>
              <p class="text-sm text-white font-semibold" x-text="quiz.questions ? quiz.questions.length : '?'"></p>
            </div>
            <div class="bg-surface-700/50 rounded-lg px-3 py-2">
              <p class="text-xs text-gray-500">Categories</p>
              <p class="text-sm text-white font-semibold" x-text="quiz.categories ? quiz.categories.length : '?'"></p>
            </div>
          </div>
          <!-- Category Preview -->
          <div class="flex flex-wrap gap-1">
            <template x-for="(cat, ci) in (quiz.categories || []).slice(0, 5)" :key="ci">
              <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="cat.abbreviation + ': ' + cat.name"></span>
            </template>
          </div>
          <a href="./pages/quiz.html" target="_blank"
             @click.stop
             class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
            Try the Assessment
          </a>
        </div>

        <!-- Webinar Card -->
        <div x-show="webinar" class="bg-surface-800 border border-surface-700 rounded-xl p-6 space-y-4 hover:border-brand-primary/40 transition-all cursor-pointer"
             @click="$store.detail.show(webinar.title, webinar, 'webinar')">
          <div class="flex items-start justify-between gap-3">
            <div>
              <span class="text-xs bg-purple-500/20 text-purple-400 px-2 py-0.5 rounded-full">Virtual Event</span>
              <h3 class="text-white font-semibold text-lg mt-2" x-text="webinar.title"></h3>
            </div>
            <svg class="w-10 h-10 text-brand-primary/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1"><path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
          </div>
          <p class="text-sm text-gray-400" x-text="webinar.subtitle"></p>
          <div class="flex flex-wrap gap-3">
            <div class="bg-surface-700/50 rounded-lg px-3 py-2">
              <p class="text-xs text-gray-500">Format</p>
              <p class="text-sm text-white font-semibold" x-text="webinar.format"></p>
            </div>
            <div class="bg-surface-700/50 rounded-lg px-3 py-2">
              <p class="text-xs text-gray-500">Duration</p>
              <p class="text-sm text-white font-semibold" x-text="webinar.duration"></p>
            </div>
            <div class="bg-surface-700/50 rounded-lg px-3 py-2">
              <p class="text-xs text-gray-500">Target Registrations</p>
              <p class="text-sm text-white font-semibold" x-text="webinar.targetRegistration"></p>
            </div>
          </div>
          <!-- Registration Copy Bullets -->
          <div x-show="webinar.registrationPage && webinar.registrationPage.bulletPoints" class="space-y-1">
            <template x-for="(bullet, bi) in (webinar.registrationPage.bulletPoints || []).slice(0, 3)" :key="bi">
              <div class="flex items-start gap-2">
                <svg class="w-3 h-3 text-brand-primary mt-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                <p class="text-xs text-gray-400" x-text="bullet.length > 100 ? bullet.slice(0, 100) + '...' : bullet"></p>
              </div>
            </template>
          </div>
          <a href="./pages/webinar-registration.html" target="_blank"
             @click.stop
             class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
            View Registration
          </a>
        </div>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- PR & MEDIA SECTION                      -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'pr'" x-data="prMedia()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">PR & Media</h2>
        <p class="text-gray-400 text-sm mt-1" x-text="pr ? pr.coreNarrative : 'Media relations strategy and thought leadership'"></p>
        <a href="./pages/media-kit.html" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 mt-3 bg-amber-600 hover:bg-amber-500 text-white rounded-lg transition-colors text-sm font-medium">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
            View Media Kit
        </a>
      </div>

      <!-- Tabs -->
      <div x-data="{ tab: 'targets' }" class="space-y-6">
        <div class="flex gap-2 border-b border-surface-700 pb-0 overflow-x-auto">
          <button @click="tab = 'targets'"
                  :class="tab === 'targets' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Media Strategy</button>
          <button @click="tab = 'thought'"
                  :class="tab === 'thought' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Thought Leadership</button>
          <button @click="tab = 'assets'"
                  :class="tab === 'assets' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">PR Assets</button>
          <button @click="tab = 'pitches'"
                  :class="tab === 'pitches' ? 'border-brand-primary text-white' : 'border-transparent text-gray-400 hover:text-gray-200'"
                  class="px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors cursor-pointer whitespace-nowrap">Story Pitches</button>
        </div>

        <!-- Media Strategy Tab -->
        <div x-show="tab === 'targets' && pr && pr.mediaTargets" class="space-y-6">
          <!-- Strategic Frame -->
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <p class="text-xs text-brand-primary font-semibold uppercase tracking-wide mb-2">Strategic Frame</p>
            <p class="text-sm text-gray-300" x-text="pr.strategicFrame ? pr.strategicFrame.slice(0, 300) + '...' : ''"></p>
          </div>

          <!-- Tier tables -->
          <template x-for="(tierKey, tki) in Object.keys(pr.mediaTargets)" :key="tki">
            <div class="space-y-2">
              <h4 class="text-white font-semibold text-sm" x-text="tierKey.replace(/_/g, ' ').replace(/tier(\d)/i, 'Tier $1').replace(/([a-z])([A-Z])/g, '$1 $2')"></h4>
              <div class="bg-surface-800 border border-surface-700 rounded-xl overflow-hidden">
                <div class="overflow-x-auto">
                  <table class="w-full text-sm text-left">
                    <thead class="bg-surface-700/50 text-xs text-gray-400 uppercase tracking-wider">
                      <tr>
                        <th class="px-4 py-3">Publication</th>
                        <th class="px-4 py-3">Type</th>
                        <th class="px-4 py-3 hidden md:table-cell">Beat</th>
                        <th class="px-4 py-3 hidden lg:table-cell">Response Rate</th>
                      </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-700">
                      <template x-for="(t, ti) in (pr.mediaTargets[tierKey] || [])" :key="ti">
                        <tr @click="$store.detail.show(t.name, t, 'pr-target')"
                            class="hover:bg-surface-700/30 transition-colors cursor-pointer">
                          <td class="px-4 py-3 text-white font-medium" x-text="t.name"></td>
                          <td class="px-4 py-3"><span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="t.type"></span></td>
                          <td class="px-4 py-3 text-gray-400 text-xs hidden md:table-cell" x-text="t.beat || ''"></td>
                          <td class="px-4 py-3 text-gray-400 text-xs hidden lg:table-cell" x-text="t.expectedResponseRate || ''"></td>
                        </tr>
                      </template>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </template>
        </div>

        <!-- Thought Leadership Tab -->
        <div x-show="tab === 'thought' && pr && pr.thoughtLeadership" class="space-y-6">
          <!-- Guest Post Targets -->
          <div>
            <h4 class="text-white font-semibold text-sm mb-3">Guest Post Targets</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <template x-for="(gp, gi) in (pr.thoughtLeadership.guestPostTargets || [])" :key="gi">
                <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
                  <div class="flex items-center gap-2 mb-2">
                    <span class="w-5 h-5 rounded-full bg-brand-primary/20 text-brand-primary flex items-center justify-center text-xs font-bold flex-shrink-0" x-text="gp.rank"></span>
                    <p class="text-sm text-white font-medium" x-text="gp.publication"></p>
                  </div>
                  <p class="text-xs text-gray-500 mb-1" x-text="gp.articleType"></p>
                  <p class="text-sm text-gray-300" x-text="gp.topic"></p>
                  <p class="text-xs text-gray-500 mt-2" x-text="'Spokesperson: ' + gp.spokesperson"></p>
                </div>
              </template>
            </div>
          </div>

          <!-- Speaking Opportunities -->
          <div x-show="pr.thoughtLeadership.speakingOpportunities">
            <h4 class="text-white font-semibold text-sm mb-3">Speaking Opportunities</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <template x-for="(conf, ci) in (pr.thoughtLeadership.speakingOpportunities.conferences || [])" :key="ci">
                <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
                  <p class="text-sm text-white font-medium" x-text="conf.conference"></p>
                  <p class="text-xs text-gray-500 mt-1" x-text="conf.organization"></p>
                  <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full mt-2 inline-block" x-text="conf.sessionType"></span>
                  <p class="text-xs text-gray-400 mt-2" x-text="conf.angle"></p>
                </div>
              </template>
            </div>
          </div>

          <!-- Podcast Targets -->
          <div x-show="pr.thoughtLeadership.podcastTargets">
            <h4 class="text-white font-semibold text-sm mb-3">Podcast Targets</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
              <template x-for="(pod, pi) in (pr.thoughtLeadership.podcastTargets || [])" :key="pi">
                <div class="bg-surface-800 border border-surface-700 rounded-xl p-4">
                  <p class="text-sm text-white font-medium" x-text="pod.podcast"></p>
                  <p class="text-xs text-gray-500 mt-1" x-text="'Host: ' + pod.host"></p>
                  <p class="text-xs text-gray-400 mt-1" x-text="pod.topic"></p>
                </div>
              </template>
            </div>
          </div>
        </div>

        <!-- PR Assets Tab -->
        <div x-show="tab === 'assets' && pr && pr.prAssets" class="space-y-6">
          <!-- Boilerplate -->
          <div class="bg-surface-800 border border-surface-700 rounded-xl p-5">
            <p class="text-xs text-brand-primary font-semibold uppercase tracking-wide mb-2">Boilerplate</p>
            <p class="text-sm text-gray-300 leading-relaxed" x-text="pr.prAssets.mediaKit ? pr.prAssets.mediaKit.boilerplate : ''"></p>
          </div>

          <!-- Fact Sheet -->
          <div x-show="pr.prAssets.factSheet" class="bg-surface-800 border border-surface-700 rounded-xl p-5 space-y-3">
            <p class="text-xs text-brand-primary font-semibold uppercase tracking-wide">Key Facts</p>
            <template x-for="(sectionKey, ski) in Object.keys(pr.prAssets.factSheet || {})" :key="ski">
              <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide mb-1" x-text="sectionKey.replace(/([A-Z])/g, ' $1').trim()"></p>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
                  <template x-for="(factKey, fki) in Object.keys(pr.prAssets.factSheet[sectionKey] || {})" :key="fki">
                    <div class="bg-surface-700/50 rounded-lg px-3 py-2">
                      <p class="text-xs text-gray-500" x-text="factKey.replace(/([A-Z])/g, ' $1').trim()"></p>
                      <p class="text-sm text-white" x-text="typeof pr.prAssets.factSheet[sectionKey][factKey] === 'string' ? pr.prAssets.factSheet[sectionKey][factKey] : Array.isArray(pr.prAssets.factSheet[sectionKey][factKey]) ? (pr.prAssets.factSheet[sectionKey][factKey].length > 0 && pr.prAssets.factSheet[sectionKey][factKey][0].year ? pr.prAssets.factSheet[sectionKey][factKey].map(function(item) { return item.year + ': ' + item.event; }).join(' | ') : pr.prAssets.factSheet[sectionKey][factKey].join(', ')) : JSON.stringify(pr.prAssets.factSheet[sectionKey][factKey]).slice(0, 80)"></p>
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </div>

          <!-- Media Kit Contents -->
          <div x-show="pr.prAssets.mediaKit && pr.prAssets.mediaKit.contents">
            <p class="text-xs text-brand-primary font-semibold uppercase tracking-wide mb-3">Media Kit Contents</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
              <template x-for="(item, ii) in (pr.prAssets.mediaKit.contents || [])" :key="ii">
                <div class="bg-surface-800 border border-surface-700 rounded-xl p-4 flex items-start gap-3">
                  <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full flex-shrink-0" x-text="item.format"></span>
                  <div>
                    <p class="text-sm text-white font-medium" x-text="item.asset"></p>
                    <p class="text-xs text-gray-400 mt-1" x-text="item.description"></p>
                  </div>
                </div>
              </template>
            </div>
          </div>

          <!-- Quote Bank -->
          <div x-show="pr.prAssets.quoteBank">
            <p class="text-xs text-brand-primary font-semibold uppercase tracking-wide mb-3">Quote Bank</p>
            <div class="space-y-3">
              <template x-for="(q, qi) in (pr.prAssets.quoteBank || [])" :key="qi">
                <div class="bg-surface-800 border-l-2 border-brand-primary rounded-r-xl p-4">
                  <p class="text-sm text-gray-300 italic leading-relaxed" x-text="'\"' + q.quote + '\"'"></p>
                  <p class="text-xs text-gray-500 mt-2" x-text="'-- ' + q.attribution"></p>
                  <span class="text-xs bg-surface-700 text-gray-400 px-2 py-0.5 rounded-full mt-2 inline-block" x-text="q.category"></span>
                </div>
              </template>
            </div>
          </div>
        </div>

        <!-- Story Pitches Tab -->
        <div x-show="tab === 'pitches' && pr && pr.storyPitches" class="space-y-4">
          <template x-for="(pitch, pi) in (pr.storyPitches || [])" :key="pi">
            <div class="bg-surface-800 border border-surface-700 rounded-xl p-5 space-y-3">
              <h4 class="text-white font-semibold text-sm" x-text="pitch.title"></h4>
              <div class="bg-surface-700/50 rounded-lg p-3">
                <p class="text-xs text-gray-500 mb-1">Subject Line</p>
                <p class="text-sm text-brand-primary font-medium" x-text="pitch.pitchSubjectLine"></p>
              </div>
              <p class="text-sm text-gray-400 line-clamp-3" x-text="pitch.pitchBody ? pitch.pitchBody.slice(0, 200) + '...' : ''"></p>
              <!-- Angle Variations -->
              <div x-show="pitch.angleVariations" class="flex flex-wrap gap-2">
                <template x-for="(av, avi) in (pitch.angleVariations || [])" :key="avi">
                  <span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="av.outlet"></span>
                </template>
              </div>
              <button @click="$store.detail.show(pitch.title, pitch, 'text')"
                      class="text-xs text-brand-primary hover:underline cursor-pointer">Read full pitch</button>
            </div>
          </template>
        </div>
      </div>

    </section>

    <!-- ─────────────────────────────────────── -->
    <!-- BRAND SYSTEM SECTION                    -->
    <!-- ─────────────────────────────────────── -->
    <section x-show="activeSection === 'brand'" x-data="brandSystem()" x-cloak class="p-6 lg:p-10 max-w-7xl mx-auto space-y-6">

      <!-- Section Header -->
      <div>
        <h2 class="font-display text-2xl lg:text-3xl text-white">Brand System</h2>
        <p class="text-gray-400 text-sm mt-1">Color palette, typography specimens, and brand guidelines</p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

        <!-- Color Palette Card -->
        <div class="bg-surface-800 border border-surface-700 rounded-xl p-6 space-y-4">
          <h3 class="text-white font-semibold text-lg">Color Palette</h3>
          <p class="text-sm text-gray-400">Desert-inspired palette reflecting the Coachella Valley landscape</p>
          <div class="grid grid-cols-2 gap-3">
            <template x-for="(color, ci) in colors" :key="ci">
              <div class="space-y-1">
                <div class="h-16 rounded-lg border border-surface-700" :style="'background-color:' + (color.value || 'transparent')"></div>
                <p class="text-xs text-white font-medium" x-text="color.name"></p>
                <p class="text-xs text-gray-500" x-text="color.value"></p>
                <p class="text-xs text-gray-500" x-text="color.usage"></p>
              </div>
            </template>
          </div>
          <a href="./pages/brand-colors.html" target="_blank"
             class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
            View Full Palette
          </a>
        </div>

        <!-- Typography Card -->
        <div class="bg-surface-800 border border-surface-700 rounded-xl p-6 space-y-4">
          <h3 class="text-white font-semibold text-lg">Typography</h3>
          <p class="text-sm text-gray-400">Type system for institutional warmth and authority</p>
          <div class="space-y-4">
            <div class="space-y-1">
              <p class="text-xs text-gray-500 uppercase tracking-wide">Display / Headlines</p>
              <p class="font-display text-2xl text-white">Playfair Display</p>
              <p class="text-xs text-gray-500">Used for section headlines, hero text, and brand moments</p>
            </div>
            <div class="space-y-1">
              <p class="text-xs text-gray-500 uppercase tracking-wide">Body / UI</p>
              <p class="font-body text-xl text-white" style="font-weight:400">Inter</p>
              <p class="text-xs text-gray-500">Used for body text, UI labels, navigation, and data</p>
            </div>
            <div class="space-y-1">
              <p class="text-xs text-gray-500 uppercase tracking-wide">Data / Monospace</p>
              <p class="text-xl text-white" style="font-family:'Space Mono',monospace">Space Mono</p>
              <p class="text-xs text-gray-500">Used for metrics, statistics, and financial data</p>
            </div>
          </div>
          <a href="./pages/brand-typography.html" target="_blank"
             class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>
            View Typography Specimen
          </a>
        </div>
      </div>

    </section>

    <!-- ═══════════════════════════════════════════ -->
    <!-- SLIDE-OVER DETAIL PANEL                    -->
    <!-- ═══════════════════════════════════════════ -->
    <div x-show="$store.detail.open" x-cloak @keydown.escape.window="$store.detail.close()" class="fixed inset-0 z-50">
      <!-- Backdrop -->
      <div x-show="$store.detail.open"
           x-transition:enter="transition ease-out duration-200"
           x-transition:enter-start="opacity-0"
           x-transition:enter-end="opacity-100"
           x-transition:leave="transition ease-in duration-150"
           x-transition:leave-start="opacity-100"
           x-transition:leave-end="opacity-0"
           class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="$store.detail.close()"></div>
      <!-- Panel -->
      <div x-show="$store.detail.open"
           x-transition:enter="transition ease-out duration-300"
           x-transition:enter-start="translate-x-full"
           x-transition:enter-end="translate-x-0"
           x-transition:leave="transition ease-in duration-200"
           x-transition:leave-start="translate-x-0"
           x-transition:leave-end="translate-x-full"
           class="absolute right-0 top-0 h-full w-full max-w-lg bg-surface-900 overflow-y-auto shadow-2xl">
        <!-- Header -->
        <div class="sticky top-0 bg-surface-900 border-b border-surface-700 p-6 z-10">
          <div class="flex justify-between items-center">
            <h2 x-text="$store.detail.title" class="text-xl font-bold text-white pr-4"></h2>
            <button @click="$store.detail.close()" class="text-gray-400 hover:text-white cursor-pointer flex-shrink-0">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
          </div>
        </div>
        <!-- Body -->
        <div class="p-6 space-y-4">

          <!-- ── COMPETITOR ── -->
          <template x-if="$store.detail.type === 'competitor'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.positioning" class="bg-surface-800 rounded-lg p-4">
                <p class="text-xs text-gray-500 mb-1">Positioning</p>
                <p class="text-sm text-gray-300" x-text="$store.detail.data.positioning"></p>
              </div>
              <div x-show="$store.detail.data.pricing" class="bg-surface-800 rounded-lg p-4">
                <p class="text-xs text-gray-500 mb-1">Pricing</p>
                <p class="text-sm text-gray-300" x-text="$store.detail.data.pricing"></p>
              </div>
              <div x-show="$store.detail.data.strengths">
                <p class="text-xs text-gray-500 mb-2">Strengths</p>
                <template x-for="(s, i) in ($store.detail.data.strengths || [])" :key="i">
                  <div class="flex items-start gap-2 mb-1"><span class="text-green-400 text-xs mt-0.5">+</span><p class="text-sm text-gray-300" x-text="s"></p></div>
                </template>
              </div>
              <div x-show="$store.detail.data.weaknesses">
                <p class="text-xs text-gray-500 mb-2">Weaknesses</p>
                <template x-for="(w, i) in ($store.detail.data.weaknesses || [])" :key="i">
                  <div class="flex items-start gap-2 mb-1"><span class="text-red-400 text-xs mt-0.5">-</span><p class="text-sm text-gray-300" x-text="w"></p></div>
                </template>
              </div>
              <div x-show="$store.detail.data.fullAnalysis" class="bg-surface-800 rounded-lg p-4">
                <p class="text-xs text-gray-500 mb-1">Full Analysis</p>
                <p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.fullAnalysis"></p>
              </div>
              <div x-show="$store.detail.data.ourAdvantage" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4">
                <p class="text-xs text-brand-primary font-semibold mb-1">Our Advantage</p>
                <p class="text-sm text-gray-300" x-text="$store.detail.data.ourAdvantage"></p>
              </div>
            </div>
          </template>

          <!-- ── VOC ── -->
          <template x-if="$store.detail.type === 'voc'">
            <div class="space-y-4">
              <!-- Emotional Trigger layout -->
              <template x-if="$store.detail.data.feature">
                <div class="space-y-4">
                  <div class="bg-surface-800 rounded-lg p-4 border-l-2 border-brand-primary">
                    <p class="text-xs text-amber-400 font-semibold mb-1">Feature</p>
                    <p class="text-sm text-white font-medium" x-text="$store.detail.data.feature"></p>
                  </div>
                  <div x-show="$store.detail.data.gap" class="bg-surface-800 rounded-lg p-4">
                    <p class="text-xs text-gray-500 mb-1">Gap</p>
                    <p class="text-sm text-gray-300" x-text="$store.detail.data.gap"></p>
                  </div>
                  <div class="grid grid-cols-2 gap-3">
                    <div x-show="$store.detail.data.ixdScore" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">IxD Score</p><p class="text-sm text-brand-primary font-bold" x-text="$store.detail.data.ixdScore"></p></div>
                    <div x-show="$store.detail.data.frequency" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Frequency</p><p class="text-sm text-white" x-text="$store.detail.data.frequency"></p></div>
                    <div x-show="$store.detail.data.intensity" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Intensity</p><p class="text-sm text-white" x-text="$store.detail.data.intensity"></p></div>
                    <div x-show="$store.detail.data.authenticity" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Authenticity</p><p class="text-sm text-white" x-text="$store.detail.data.authenticity"></p></div>
                  </div>
                  <div x-show="$store.detail.data.whiteSpace" class="bg-surface-800 rounded-lg p-4">
                    <p class="text-xs text-gray-500 mb-1">White Space</p>
                    <p class="text-sm text-gray-300" x-text="$store.detail.data.whiteSpace"></p>
                  </div>
                  <div x-show="$store.detail.data.crossExtremeResonance" class="bg-surface-800 rounded-lg p-4">
                    <p class="text-xs text-gray-500 mb-1">Cross-Extreme Resonance</p>
                    <p class="text-sm text-gray-300" x-text="$store.detail.data.crossExtremeResonance"></p>
                  </div>
                  <div x-show="$store.detail.data.emotionalTrigger" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4">
                    <p class="text-xs text-brand-primary font-semibold mb-1">Emotional Trigger</p>
                    <p class="text-sm text-gray-300 italic" x-text="$store.detail.data.emotionalTrigger"></p>
                  </div>
                </div>
              </template>
              <!-- Customer Extreme layout -->
              <template x-if="$store.detail.data.archetype">
                <div class="space-y-4">
                  <div class="bg-surface-800 rounded-lg p-4 border-l-2 border-amber-400">
                    <span class="text-xs bg-amber-400/20 text-amber-400 px-2 py-0.5 rounded-full" x-text="$store.detail.data.archetype"></span>
                    <p class="text-sm text-white font-medium mt-2" x-text="$store.detail.data.tagline"></p>
                  </div>
                  <div x-show="$store.detail.data.languagePatterns" class="bg-surface-800 rounded-lg p-4">
                    <p class="text-xs text-gray-500 mb-2">Language Patterns</p>
                    <template x-for="(lp, lpi) in ($store.detail.data.languagePatterns || [])" :key="lpi">
                      <div class="flex items-start gap-2 mb-1"><span class="text-amber-400 text-xs mt-0.5">*</span><p class="text-sm text-gray-300" x-text="lp"></p></div>
                    </template>
                  </div>
                  <div x-show="$store.detail.data.emotionalTriggers" class="bg-surface-800 rounded-lg p-4">
                    <p class="text-xs text-gray-500 mb-2">Emotional Triggers</p>
                    <template x-for="(et, eti) in ($store.detail.data.emotionalTriggers || [])" :key="eti">
                      <div class="flex items-start gap-2 mb-1"><span class="text-brand-primary text-xs mt-0.5">*</span><p class="text-sm text-gray-300" x-text="et"></p></div>
                    </template>
                  </div>
                  <div x-show="$store.detail.data.narrativeWorksWhere" class="bg-surface-800 rounded-lg p-4">
                    <p class="text-xs text-gray-500 mb-1">Narrative Works Where</p>
                    <p class="text-sm text-gray-300" x-text="$store.detail.data.narrativeWorksWhere"></p>
                  </div>
                  <div x-show="$store.detail.data.narrativeFails" class="bg-red-500/10 border border-red-500/20 rounded-lg p-4">
                    <p class="text-xs text-red-400 font-semibold mb-1">Narrative Fails</p>
                    <p class="text-sm text-gray-300" x-text="$store.detail.data.narrativeFails"></p>
                  </div>
                  <div x-show="$store.detail.data.givingPatterns" class="bg-surface-800 rounded-lg p-4">
                    <p class="text-xs text-gray-500 mb-1">Giving Patterns</p>
                    <p class="text-sm text-gray-300" x-text="$store.detail.data.givingPatterns"></p>
                  </div>
                  <div x-show="$store.detail.data.icpFit" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4">
                    <p class="text-xs text-brand-primary font-semibold mb-1">ICP Fit</p>
                    <p class="text-sm text-gray-300" x-text="$store.detail.data.icpFit"></p>
                  </div>
                </div>
              </template>
              <!-- Generic VoC fallback -->
              <template x-if="!$store.detail.data.feature && !$store.detail.data.archetype">
                <div class="space-y-4">
                  <div class="bg-surface-800 rounded-lg p-4 border-l-2 border-brand-primary">
                    <p class="text-sm text-gray-300 italic" x-text="$store.detail.data.quote || $store.detail.data.text"></p>
                  </div>
                  <div class="grid grid-cols-2 gap-3">
                    <div x-show="$store.detail.data.source" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Source</p><p class="text-sm text-white" x-text="$store.detail.data.source"></p></div>
                    <div x-show="$store.detail.data.severity" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Severity</p><p class="text-sm text-white" x-text="$store.detail.data.severity"></p></div>
                    <div x-show="$store.detail.data.category" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Category</p><p class="text-sm text-white" x-text="$store.detail.data.category"></p></div>
                  </div>
                  <div x-show="$store.detail.data.context" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Context</p><p class="text-sm text-gray-300" x-text="$store.detail.data.context"></p></div>
                  <div x-show="$store.detail.data.implication" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Implication</p><p class="text-sm text-gray-300" x-text="$store.detail.data.implication"></p></div>
                </div>
              </template>
            </div>
          </template>

          <!-- ── CHANNEL (campaign data) ── -->
          <template x-if="$store.detail.type === 'channel'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.objective" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Objective</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.objective"></p></div>
              <div x-show="$store.detail.data.avatar" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Target Avatar</p><p class="text-sm text-white font-medium" x-text="$store.detail.data.avatar"></p></div>
              <div x-show="$store.detail.data.targeting" class="bg-surface-800 rounded-lg p-4 space-y-2"><p class="text-xs text-gray-500 mb-1">Targeting</p>
                <div class="grid grid-cols-2 gap-3">
                  <div x-show="$store.detail.data.targeting && $store.detail.data.targeting.age" class="bg-surface-700 rounded-lg p-3"><p class="text-xs text-gray-500">Age</p><p class="text-sm text-white" x-text="$store.detail.data.targeting ? $store.detail.data.targeting.age : ''"></p></div>
                  <div x-show="$store.detail.data.targeting && $store.detail.data.targeting.location" class="bg-surface-700 rounded-lg p-3"><p class="text-xs text-gray-500">Location</p><p class="text-sm text-white" x-text="$store.detail.data.targeting ? $store.detail.data.targeting.location : ''"></p></div>
                  <div x-show="$store.detail.data.targeting && $store.detail.data.targeting.income" class="bg-surface-700 rounded-lg p-3"><p class="text-xs text-gray-500">Income</p><p class="text-sm text-white" x-text="$store.detail.data.targeting ? $store.detail.data.targeting.income : ''"></p></div>
                </div>
                <div x-show="$store.detail.data.targeting && $store.detail.data.targeting.interests"><p class="text-xs text-gray-500 mt-2 mb-1">Interests</p><div class="flex flex-wrap gap-1"><template x-for="(int, ii) in ($store.detail.data.targeting ? ($store.detail.data.targeting.interests || []) : [])" :key="ii"><span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="int"></span></template></div></div>
              </div>
              <div x-show="$store.detail.data.adVariations"><p class="text-xs text-gray-500 mb-2">Ad Variations</p>
                <template x-for="(av, avi) in ($store.detail.data.adVariations || [])" :key="avi"><div class="bg-surface-800 rounded-lg p-3 mb-2"><p class="text-sm text-white font-medium" x-text="av.headline || av.name || ('Variation ' + (avi+1))"></p><p x-show="av.primaryText" class="text-xs text-gray-400 mt-1" x-text="av.primaryText"></p><p x-show="av.cta" class="text-xs text-brand-primary mt-1" x-text="'CTA: ' + av.cta"></p></div></template>
              </div>
              <div x-show="$store.detail.data.estimatedBudget || $store.detail.data.budget" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Estimated Budget</p><p class="text-sm text-white" x-text="$store.detail.data.estimatedBudget || $store.detail.data.budget"></p></div>
              <!-- Fallback for legacy fields -->
              <div x-show="$store.detail.data.score" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Score</p><p class="text-2xl text-brand-primary font-bold" x-text="$store.detail.data.score + '/10'"></p></div>
              <div x-show="$store.detail.data.strategy && !$store.detail.data.objective" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Strategy</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.strategy"></p></div>
            </div>
          </template>

          <!-- ── AVATAR ── -->
          <template x-if="$store.detail.type === 'avatar'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3">
                <div x-show="$store.detail.data.role" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Role</p><p class="text-sm text-white" x-text="$store.detail.data.role"></p></div>
                <div x-show="$store.detail.data.awarenessLevel" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Awareness</p><p class="text-sm text-white" x-text="$store.detail.data.awarenessLevel"></p></div>
              </div>
              <div x-show="$store.detail.data.demographics" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Demographics</p><p class="text-sm text-gray-300" x-text="typeof $store.detail.data.demographics === 'string' ? $store.detail.data.demographics : JSON.stringify($store.detail.data.demographics)"></p></div>
              <div x-show="$store.detail.data.painPoints"><p class="text-xs text-gray-500 mb-2">Pain Points</p><template x-for="(p, i) in ($store.detail.data.painPoints || [])" :key="i"><div class="flex items-start gap-2 mb-1"><span class="text-red-400 text-xs mt-0.5">*</span><p class="text-sm text-gray-300" x-text="typeof p === 'string' ? p : p.point || JSON.stringify(p)"></p></div></template></div>
              <div x-show="$store.detail.data.buyingTrigger" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4"><p class="text-xs text-brand-primary font-semibold mb-1">Buying Trigger</p><p class="text-sm text-gray-300" x-text="$store.detail.data.buyingTrigger"></p></div>
              <div x-show="$store.detail.data.objections"><p class="text-xs text-gray-500 mb-2">Objections</p><template x-for="(o, i) in ($store.detail.data.objections || [])" :key="i"><div class="bg-surface-800 rounded-lg p-3 mb-2"><p class="text-sm text-gray-300" x-text="typeof o === 'string' ? o : o.objection || JSON.stringify(o)"></p></div></template></div>
              <div x-show="$store.detail.data.platforms"><p class="text-xs text-gray-500 mb-2">Platforms</p><div class="flex flex-wrap gap-1"><template x-for="(pl, i) in ($store.detail.data.platforms || [])" :key="i"><span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="pl"></span></template></div></div>
            </div>
          </template>

          <!-- ── LANDING PAGE ── -->
          <template x-if="$store.detail.type === 'landing'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.headline" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Headline</p><p class="text-lg text-white font-bold" x-text="$store.detail.data.headline"></p></div>
              <div x-show="$store.detail.data.tagline" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Tagline</p><p class="text-sm text-gray-300 italic" x-text="$store.detail.data.tagline"></p></div>
              <div x-show="$store.detail.data.primaryCTA || $store.detail.data.secondaryCTA" class="grid grid-cols-2 gap-3">
                <div x-show="$store.detail.data.primaryCTA" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-3"><p class="text-xs text-brand-primary font-semibold">Primary CTA</p><p class="text-sm text-white" x-text="$store.detail.data.primaryCTA"></p></div>
                <div x-show="$store.detail.data.secondaryCTA" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Secondary CTA</p><p class="text-sm text-white" x-text="$store.detail.data.secondaryCTA"></p></div>
              </div>
              <div x-show="$store.detail.data.targetAudience || $store.detail.data.audience" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Target Audience</p><p class="text-sm text-gray-300" x-text="$store.detail.data.targetAudience || $store.detail.data.audience"></p></div>
              <div x-show="$store.detail.data.pageGoal" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Page Goal</p><p class="text-sm text-gray-300" x-text="$store.detail.data.pageGoal"></p></div>
              <div x-show="$store.detail.data.description" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Description</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.description"></p></div>
              <div x-show="$store.detail.data.keyMessages && $store.detail.data.keyMessages.length"><p class="text-xs text-gray-500 mb-2">Key Messages</p><template x-for="(msg, mi) in ($store.detail.data.keyMessages || [])" :key="mi"><div class="flex items-start gap-2 mb-1"><span class="text-brand-primary text-xs mt-0.5">*</span><p class="text-sm text-gray-300" x-text="msg"></p></div></template></div>
              <div x-show="$store.detail.data.sections && $store.detail.data.sections.length"><p class="text-xs text-gray-500 mb-2">Page Sections</p><template x-for="(sec, i) in ($store.detail.data.sections || [])" :key="i"><div class="bg-surface-800 rounded-lg p-3 mb-2"><p class="text-sm text-white font-medium" x-text="typeof sec === 'string' ? sec : (sec.name || sec.headline || 'Section ' + (i+1))"></p><p x-show="typeof sec !== 'string' && sec.headline && sec.name" class="text-xs text-gray-400 mt-1" x-text="sec.headline"></p><p x-show="typeof sec !== 'string' && sec.cta" class="text-xs text-brand-primary mt-1" x-text="'CTA: ' + sec.cta"></p></div></template></div>
              <div x-show="$store.detail.data.designNotes" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Design Notes</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.designNotes"></p></div>
              <a x-show="$store.detail.data.pagePath" :href="$store.detail.data.pagePath" target="_blank" class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>View Page</a>
              <p x-show="!$store.detail.data.pagePath" class="text-xs text-gray-500 italic">Source available -- page not yet built</p>
            </div>
          </template>

          <!-- ── LEAD MAGNET ── -->
          <template x-if="$store.detail.type === 'leadmagnet'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3">
                <div x-show="$store.detail.data.type" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Type</p><p class="text-sm text-white" x-text="$store.detail.data.type"></p></div>
                <div x-show="$store.detail.data.targetAvatar" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Target Avatar</p><p class="text-sm text-white" x-text="$store.detail.data.targetAvatar"></p></div>
                <div x-show="$store.detail.data.expectedOptIn" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Expected Opt-In</p><p class="text-sm text-white" x-text="$store.detail.data.expectedOptIn"></p></div>
              </div>
              <div x-show="$store.detail.data.description" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Description</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.description"></p></div>
              <a x-show="$store.detail.data.pagePath" :href="$store.detail.data.pagePath" target="_blank" class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>View</a>
            </div>
          </template>

          <!-- ── SALES ENABLEMENT ── -->
          <template x-if="$store.detail.type === 'sales'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.description" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Description</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.description"></p></div>
              <div x-show="$store.detail.data.sections"><p class="text-xs text-gray-500 mb-2">Sections</p><template x-for="(sec, i) in ($store.detail.data.sections || [])" :key="i"><div class="bg-surface-800 rounded-lg p-3 mb-2"><p class="text-sm text-white font-medium" x-text="typeof sec === 'string' ? sec : (sec.name || sec.title || 'Section ' + (i+1))"></p><p x-show="sec.content" class="text-xs text-gray-400 mt-1" x-text="sec.content"></p></div></template></div>
              <a x-show="$store.detail.data.id === 'one-pager'" href="./pages/one-pager.html" target="_blank" class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>View One-Pager</a>
            </div>
          </template>

          <!-- ── SEO CLUSTER ── -->
          <template x-if="$store.detail.type === 'seo-cluster'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.pillarPage" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Pillar Page</p><p class="text-sm text-white" x-text="$store.detail.data.pillarPage"></p></div>
              <div x-show="$store.detail.data.keywords"><p class="text-xs text-gray-500 mb-2">Keywords</p><div class="overflow-x-auto"><table class="w-full text-sm"><tbody><template x-for="(kw, i) in ($store.detail.data.keywords || [])" :key="i"><tr class="border-b border-surface-700"><td class="py-2 pr-3 text-gray-300" x-text="kw.keyword || kw"></td><td class="py-2 text-gray-500 text-xs" x-text="kw.volume || ''"></td><td class="py-2 text-gray-500 text-xs" x-text="kw.difficulty || ''"></td></tr></template></tbody></table></div></div>
              <div x-show="$store.detail.data.blogPosts"><p class="text-xs text-gray-500 mb-2">Blog Posts</p><template x-for="(bp, i) in ($store.detail.data.blogPosts || [])" :key="i"><div class="bg-surface-800 rounded-lg p-3 mb-2"><p class="text-sm text-gray-300" x-text="bp.title || bp"></p></div></template></div>
            </div>
          </template>

          <!-- ── SOCIAL DAY ── -->
          <template x-if="$store.detail.type === 'social-day'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3"><div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Day</p><p class="text-sm text-white" x-text="$store.detail.data.day"></p></div><div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Date</p><p class="text-sm text-white" x-text="$store.detail.data.date"></p></div></div>
              <template x-for="(pl, i) in ($store.detail.data.platforms || [])" :key="i">
                <div class="bg-surface-800 rounded-lg p-4 space-y-2">
                  <div class="flex items-center gap-2"><span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full" x-text="pl.platform"></span><span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="pl.contentType"></span></div>
                  <p x-show="pl.hook" class="text-sm text-white font-medium" x-text="pl.hook"></p>
                  <p x-show="pl.description" class="text-sm text-gray-300" x-text="pl.description"></p>
                  <div x-show="pl.hashtags" class="flex flex-wrap gap-1"><template x-for="(ht, hi) in (pl.hashtags || [])" :key="hi"><span class="text-xs text-brand-primary" x-text="ht"></span></template></div>
                </div>
              </template>
            </div>
          </template>

          <!-- ── SOCIAL CONTENT ── -->
          <template x-if="$store.detail.type === 'social-content'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Platform</p><p class="text-sm text-white" x-text="$store.detail.data.platform"></p></div>
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Content Type</p><p class="text-sm text-white" x-text="$store.detail.data.contentType"></p></div>
                <div x-show="$store.detail.data.format" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Format</p><p class="text-sm text-white" x-text="$store.detail.data.format"></p></div>
              </div>
              <div x-show="$store.detail.data.hook" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Hook</p><p class="text-sm text-white font-medium" x-text="$store.detail.data.hook"></p></div>
              <div x-show="$store.detail.data.description" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Description</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.description"></p></div>
              <div x-show="$store.detail.data.hashtags" class="flex flex-wrap gap-1"><template x-for="(ht, hi) in ($store.detail.data.hashtags || [])" :key="hi"><span class="text-xs text-brand-primary" x-text="ht"></span></template></div>
            </div>
          </template>

          <!-- ── LAUNCH TASK ── -->
          <template x-if="$store.detail.type === 'launch-task'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.description" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Description</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.description"></p></div>
              <div class="grid grid-cols-2 gap-3">
                <div x-show="$store.detail.data.priority" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Priority</p><p class="text-sm text-white" x-text="$store.detail.data.priority"></p></div>
                <div x-show="$store.detail.data.channel || $store.detail.data.category" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Channel</p><p class="text-sm text-white" x-text="$store.detail.data.channel || $store.detail.data.category"></p></div>
                <div x-show="$store.detail.data.owner" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Owner</p><p class="text-sm text-white" x-text="$store.detail.data.owner"></p></div>
                <div x-show="$store.detail.data.week" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Week</p><p class="text-sm text-white" x-text="$store.detail.data.week"></p></div>
              </div>
              <div x-show="$store.detail.data.kpi || $store.detail.data.successMetric" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">KPI / Success Metric</p><p class="text-sm text-gray-300" x-text="$store.detail.data.kpi || $store.detail.data.successMetric"></p></div>
              <div x-show="$store.detail.data.deliverables"><p class="text-xs text-gray-500 mb-2">Deliverables</p><template x-for="(d, i) in ($store.detail.data.deliverables || [])" :key="i"><div class="flex items-start gap-2 mb-1"><span class="text-brand-primary text-xs mt-0.5">*</span><p class="text-sm text-gray-300" x-text="typeof d === 'string' ? d : d.name || JSON.stringify(d)"></p></div></template></div>
            </div>
          </template>

          <!-- ── AD ── -->
          <template x-if="$store.detail.type === 'ad'">
            <div class="space-y-4">
              <div class="bg-surface-800 rounded-lg p-4"><p class="text-sm text-white font-medium" x-text="$store.detail.data.headline"></p><p class="text-sm text-gray-300 mt-2 whitespace-pre-line" x-text="$store.detail.data.primaryText"></p><p x-show="$store.detail.data.description" class="text-xs text-gray-400 mt-2" x-text="$store.detail.data.description"></p></div>
              <div class="grid grid-cols-2 gap-3">
                <div x-show="$store.detail.data.cta" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">CTA</p><p class="text-sm text-brand-primary font-medium" x-text="$store.detail.data.cta"></p></div>
                <div x-show="$store.detail.data.platform" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Platform</p><p class="text-sm text-white" x-text="$store.detail.data.platform"></p></div>
                <div x-show="$store.detail.data.avatar" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Avatar</p><p class="text-sm text-white" x-text="$store.detail.data.avatar"></p></div>
              </div>
              <div x-show="$store.detail.data.targeting" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Targeting</p><p class="text-sm text-gray-300" x-text="typeof $store.detail.data.targeting === 'string' ? $store.detail.data.targeting : JSON.stringify($store.detail.data.targeting)"></p></div>
              <div x-show="$store.detail.data.imageDescription" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Image Direction</p><p class="text-sm text-gray-300" x-text="$store.detail.data.imageDescription"></p></div>
            </div>
          </template>

          <!-- ── EMAIL ── -->
          <template x-if="$store.detail.type === 'email'">
            <div class="space-y-4">
              <div class="bg-surface-800 rounded-lg p-4">
                <p class="text-xs text-gray-500 mb-1">Subject</p>
                <p class="text-sm text-white font-medium" x-text="$store.detail.data.subject || $store.detail.data.subjectLine"></p>
              </div>
              <div x-show="$store.detail.data.preheader" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Preheader</p><p class="text-sm text-gray-300" x-text="$store.detail.data.preheader"></p></div>
              <div class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Body</p><p class="text-sm text-gray-300 whitespace-pre-line leading-relaxed" x-text="$store.detail.data.body"></p></div>
              <div class="grid grid-cols-2 gap-3">
                <div x-show="$store.detail.data.fromName" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">From</p><p class="text-sm text-white" x-text="$store.detail.data.fromName"></p></div>
                <div x-show="$store.detail.data.cta" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">CTA</p><p class="text-sm text-brand-primary" x-text="$store.detail.data.cta"></p></div>
                <div x-show="$store.detail.data.purpose" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Purpose</p><p class="text-sm text-white" x-text="$store.detail.data.purpose"></p></div>
                <div x-show="$store.detail.data.sendTiming || $store.detail.data.timing" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Timing</p><p class="text-sm text-white" x-text="$store.detail.data.sendTiming || $store.detail.data.timing"></p></div>
              </div>
            </div>
          </template>

          <!-- ── TEXT (generic) ── -->
          <template x-if="$store.detail.type === 'text'">
            <div class="space-y-4">
              <div class="bg-surface-800 rounded-lg p-4">
                <p class="text-sm text-gray-300 whitespace-pre-line leading-relaxed" x-text="typeof $store.detail.data === 'string' ? $store.detail.data : ($store.detail.data.pitchBody || $store.detail.data.body || $store.detail.data.content || JSON.stringify($store.detail.data, null, 2))"></p>
              </div>
            </div>
          </template>

          <!-- ── QUIZ ── -->
          <template x-if="$store.detail.type === 'quiz'">
            <div class="space-y-4">
              <div class="bg-surface-800 rounded-lg p-4"><p class="text-sm text-gray-300" x-text="$store.detail.data.subtitle"></p></div>
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Questions</p><p class="text-sm text-white font-semibold" x-text="$store.detail.data.questions ? $store.detail.data.questions.length : '?'"></p></div>
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Categories</p><p class="text-sm text-white font-semibold" x-text="$store.detail.data.categories ? $store.detail.data.categories.length : '?'"></p></div>
              </div>
              <div x-show="$store.detail.data.categories"><p class="text-xs text-gray-500 mb-2">Scoring Categories</p>
                <template x-for="(cat, ci) in ($store.detail.data.categories || [])" :key="ci">
                  <div class="bg-surface-800 rounded-lg p-3 mb-2">
                    <div class="flex items-center gap-2"><span class="text-xs bg-brand-primary/20 text-brand-primary px-2 py-0.5 rounded-full" x-text="cat.abbreviation"></span><p class="text-sm text-white font-medium" x-text="cat.name"></p></div>
                    <p class="text-xs text-gray-400 mt-1" x-text="cat.measures"></p>
                    <p class="text-xs text-gray-500 mt-1" x-text="cat.avatarAlignment"></p>
                  </div>
                </template>
              </div>
              <div x-show="$store.detail.data.openingCopy" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Opening Copy</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.openingCopy"></p></div>
              <a href="./pages/quiz.html" target="_blank" class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>Try Assessment</a>
            </div>
          </template>

          <!-- ── VIDEO SCRIPT ── -->
          <template x-if="$store.detail.type === 'video-script'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Funnel Stage</p><p class="text-sm text-white" x-text="$store.detail.data.funnelStage"></p></div>
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Length</p><p class="text-sm text-white" x-text="$store.detail.data.targetLength"></p></div>
              </div>
              <div x-show="$store.detail.data.hookLine" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4"><p class="text-xs text-brand-primary font-semibold mb-1">Hook</p><p class="text-sm text-gray-300" x-text="$store.detail.data.hookLine"></p></div>
              <div x-show="$store.detail.data.description" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Description</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.description"></p></div>
              <div x-show="$store.detail.data.thumbnailConcept" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Thumbnail Concept</p><p class="text-sm text-gray-300" x-text="$store.detail.data.thumbnailConcept"></p></div>
              <div x-show="$store.detail.data.timestamps" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Timestamps</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.timestamps"></p></div>
              <div x-show="$store.detail.data.tags" class="flex flex-wrap gap-1"><template x-for="(tag, ti) in ($store.detail.data.tags || [])" :key="ti"><span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="tag"></span></template></div>
              <div x-show="$store.detail.data.retentionNotes" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Retention Notes</p><p class="text-sm text-gray-400" x-text="$store.detail.data.retentionNotes"></p></div>
              <a href="./pages/youtube-gallery.html" target="_blank" class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>View Gallery</a>
            </div>
          </template>

          <!-- ── WEBINAR ── -->
          <template x-if="$store.detail.type === 'webinar'">
            <div class="space-y-4">
              <div class="bg-surface-800 rounded-lg p-4"><p class="text-sm text-gray-300" x-text="$store.detail.data.subtitle"></p></div>
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Format</p><p class="text-sm text-white" x-text="$store.detail.data.format"></p></div>
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Duration</p><p class="text-sm text-white" x-text="$store.detail.data.duration"></p></div>
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Target Registrations</p><p class="text-sm text-white" x-text="$store.detail.data.targetRegistration"></p></div>
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Conversion Goal</p><p class="text-sm text-white" x-text="$store.detail.data.conversionGoal"></p></div>
              </div>
              <div x-show="$store.detail.data.registrationPage && $store.detail.data.registrationPage.bulletPoints"><p class="text-xs text-gray-500 mb-2">Registration Copy</p>
                <template x-for="(bullet, bi) in ($store.detail.data.registrationPage ? $store.detail.data.registrationPage.bulletPoints || [] : [])" :key="bi">
                  <div class="flex items-start gap-2 mb-2"><svg class="w-3 h-3 text-brand-primary mt-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg><p class="text-sm text-gray-300" x-text="bullet"></p></div>
                </template>
              </div>
              <div x-show="$store.detail.data.speakers"><p class="text-xs text-gray-500 mb-2">Speakers</p>
                <template x-for="(sp, spi) in ($store.detail.data.speakers || [])" :key="spi">
                  <div class="bg-surface-800 rounded-lg p-3 mb-2"><p class="text-sm text-white font-medium" x-text="sp.role"></p><p class="text-xs text-gray-400 mt-1" x-text="sp.description"></p></div>
                </template>
              </div>
              <a href="./pages/webinar-registration.html" target="_blank" class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>View Registration</a>
            </div>
          </template>

          <!-- ── GROWTH CHANNEL ── -->
          <template x-if="$store.detail.type === 'growth-channel'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.name || $store.detail.data.framing || $store.detail.data.philosophy || $store.detail.data.principle || $store.detail.data.foundationalLogic" class="bg-surface-800 rounded-lg p-4">
                <p class="text-xs text-gray-500 mb-1">Strategy Overview</p>
                <p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.framing || $store.detail.data.philosophy || $store.detail.data.principle || ($store.detail.data.foundationalLogic ? $store.detail.data.foundationalLogic.slice(0, 500) : '')"></p>
              </div>
              <div x-show="$store.detail.data.kFactorTarget" class="bg-surface-800 rounded-lg p-4">
                <p class="text-xs text-gray-500 mb-1">K-Factor Target</p>
                <p class="text-sm text-white font-semibold" x-text="$store.detail.data.kFactorTarget"></p>
                <p class="text-xs text-gray-400 mt-1" x-text="$store.detail.data.kFactorMeaning"></p>
              </div>
              <div x-show="$store.detail.data.incentiveStructure || $store.detail.data.partnerCategories || $store.detail.data.communities || $store.detail.data.temperatureBands"><p class="text-xs text-gray-500 mb-2">Implementation Steps</p>
                <template x-for="(step, si) in ($store.detail.data.incentiveStructure || $store.detail.data.partnerCategories || $store.detail.data.communities || $store.detail.data.temperatureBands || [])" :key="si">
                  <div class="bg-surface-800 rounded-lg p-3 mb-2 flex items-start gap-3">
                    <span class="w-6 h-6 rounded-full bg-brand-primary/20 text-brand-primary flex items-center justify-center text-xs font-bold flex-shrink-0" x-text="si + 1"></span>
                    <p class="text-sm text-gray-300" x-text="step.milestone || step.category || step.communityName || step.temperature || JSON.stringify(step).slice(0, 150)"></p>
                  </div>
                </template>
              </div>
              <div x-show="$store.detail.data.integrationPoints"><p class="text-xs text-gray-500 mb-2">Integration Points</p>
                <template x-for="(ip, ii) in ($store.detail.data.integrationPoints || [])" :key="ii">
                  <div class="flex items-start gap-2 mb-1"><span class="text-brand-primary text-xs mt-0.5">*</span><p class="text-sm text-gray-300" x-text="ip"></p></div>
                </template>
              </div>
            </div>
          </template>

          <!-- ── SALES SCRIPT ── -->
          <template x-if="$store.detail.type === 'sales-script'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Duration</p><p class="text-sm text-white" x-text="$store.detail.data.duration"></p></div>
                <div x-show="$store.detail.data.whoUsesThis" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Who Uses This</p><p class="text-sm text-white text-xs" x-text="$store.detail.data.whoUsesThis ? $store.detail.data.whoUsesThis.slice(0, 80) + '...' : ''"></p></div>
              </div>
              <div x-show="$store.detail.data.purpose" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Purpose</p><p class="text-sm text-gray-300" x-text="$store.detail.data.purpose"></p></div>
              <div x-show="$store.detail.data.preparationChecklist"><p class="text-xs text-gray-500 mb-2">Preparation Checklist</p>
                <template x-for="(item, ii) in ($store.detail.data.preparationChecklist || [])" :key="ii">
                  <div class="flex items-start gap-2 mb-1"><span class="text-brand-accent text-xs mt-0.5">*</span><p class="text-sm text-gray-300" x-text="item"></p></div>
                </template>
              </div>
              <template x-for="(sec, si) in ($store.detail.data.sections || [])" :key="si">
                <div class="bg-surface-800 rounded-lg p-4 space-y-2">
                  <div class="flex items-center justify-between">
                    <p class="text-sm text-white font-semibold" x-text="sec.name"></p>
                    <span x-show="sec.duration" class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full" x-text="sec.duration"></span>
                  </div>
                  <p x-show="sec.goal" class="text-xs text-gray-500" x-text="sec.goal"></p>
                  <p x-show="sec.script" class="text-sm text-gray-300 whitespace-pre-line leading-relaxed" x-text="sec.script"></p>
                  <p x-show="sec.transition" class="text-xs text-brand-primary italic mt-2" x-text="sec.transition"></p>
                </div>
              </template>
            </div>
          </template>

          <!-- ── OBJECTION ── -->
          <template x-if="$store.detail.type === 'objection'">
            <div class="space-y-4">
              <div class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Why They Say It</p><p class="text-sm text-gray-300" x-text="$store.detail.data.whyTheySayIt"></p></div>
              <div class="bg-green-500/10 border border-green-500/20 rounded-lg p-4"><p class="text-xs font-semibold text-green-400 mb-1">Acknowledge</p><p class="text-sm text-gray-300" x-text="$store.detail.data.acknowledge"></p></div>
              <div class="bg-blue-500/10 border border-blue-500/20 rounded-lg p-4"><p class="text-xs font-semibold text-blue-400 mb-1">Probe</p><p class="text-sm text-gray-300" x-text="$store.detail.data.probe"></p></div>
              <div class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4"><p class="text-xs font-semibold text-brand-primary mb-1">Respond</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="typeof $store.detail.data.respond === 'string' ? $store.detail.data.respond : Object.values($store.detail.data.respond || {}).join('\n\n---\n\n')"></p></div>
              <div class="bg-purple-500/10 border border-purple-500/20 rounded-lg p-4"><p class="text-xs font-semibold text-purple-400 mb-1">Confirm</p><p class="text-sm text-gray-300" x-text="$store.detail.data.confirm"></p></div>
              <div x-show="$store.detail.data.followUpSequence"><p class="text-xs text-gray-500 mb-2">Follow-Up Sequence</p>
                <template x-for="(fu, fi) in ($store.detail.data.followUpSequence || [])" :key="fi">
                  <div class="bg-surface-800 rounded-lg p-3 mb-2 flex items-start gap-3"><span class="text-xs bg-surface-700 text-gray-300 px-2 py-0.5 rounded-full flex-shrink-0" x-text="fu.timing"></span><p class="text-sm text-gray-300" x-text="fu.action"></p></div>
                </template>
              </div>
            </div>
          </template>

          <!-- ── BATTLE CARD ── -->
          <template x-if="$store.detail.type === 'battle-card'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Competitor</p><p class="text-sm text-white font-semibold" x-text="$store.detail.data.competitor"></p></div>
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Location</p><p class="text-sm text-white" x-text="$store.detail.data.location"></p></div>
              </div>
              <div x-show="$store.detail.data.profile" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Profile</p><p class="text-sm text-gray-300" x-text="$store.detail.data.profile"></p></div>
              <div x-show="$store.detail.data.strengths">
                <p class="text-xs text-gray-500 mb-2">Strengths</p>
                <template x-for="(s, i) in ($store.detail.data.strengths || [])" :key="i"><div class="flex items-start gap-2 mb-1"><span class="text-green-400 text-xs mt-0.5">+</span><p class="text-sm text-gray-300" x-text="s"></p></div></template>
              </div>
              <div x-show="$store.detail.data.limitations">
                <p class="text-xs text-gray-500 mb-2">Limitations</p>
                <template x-for="(l, i) in ($store.detail.data.limitations || [])" :key="i"><div class="flex items-start gap-2 mb-1"><span class="text-red-400 text-xs mt-0.5">-</span><p class="text-sm text-gray-300" x-text="l"></p></div></template>
              </div>
              <div x-show="$store.detail.data.responseScript" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4"><p class="text-xs text-brand-primary font-semibold mb-1">Response Script</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.responseScript"></p></div>
              <div x-show="$store.detail.data.doNotSay" class="bg-red-500/10 border border-red-500/20 rounded-lg p-4"><p class="text-xs text-red-400 font-semibold mb-1">Do Not Say</p><p class="text-sm text-gray-300" x-text="$store.detail.data.doNotSay"></p></div>
            </div>
          </template>

          <!-- ── PR TARGET ── -->
          <template x-if="$store.detail.type === 'pr-target'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3">
                <div class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Type</p><p class="text-sm text-white" x-text="$store.detail.data.type"></p></div>
                <div x-show="$store.detail.data.expectedResponseRate" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Response Rate</p><p class="text-sm text-white" x-text="$store.detail.data.expectedResponseRate"></p></div>
              </div>
              <div x-show="$store.detail.data.description" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Description</p><p class="text-sm text-gray-300" x-text="$store.detail.data.description"></p></div>
              <div x-show="$store.detail.data.beat" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Beat</p><p class="text-sm text-gray-300" x-text="$store.detail.data.beat"></p></div>
              <div x-show="$store.detail.data.bestAngles"><p class="text-xs text-gray-500 mb-2">Best Angles</p>
                <template x-for="(a, ai) in ($store.detail.data.bestAngles || [])" :key="ai"><div class="flex items-start gap-2 mb-1"><span class="text-brand-primary text-xs mt-0.5">*</span><p class="text-sm text-gray-300" x-text="a"></p></div></template>
              </div>
              <div x-show="$store.detail.data.pitchApproach" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4"><p class="text-xs text-brand-primary font-semibold mb-1">Pitch Approach</p><p class="text-sm text-gray-300" x-text="$store.detail.data.pitchApproach"></p></div>
              <div x-show="$store.detail.data.contactMethod" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Contact Method</p><p class="text-sm text-gray-300" x-text="$store.detail.data.contactMethod"></p></div>
            </div>
          </template>

          <!-- ── PRICING TIER ── -->
          <template x-if="$store.detail.type === 'pricing-tier'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.amount || $store.detail.data.monthlyPrice" class="bg-surface-800 rounded-lg p-4 text-center"><p class="text-3xl text-brand-primary font-bold" x-text="$store.detail.data.amount || $store.detail.data.monthlyPrice"></p><p class="text-xs text-gray-500" x-text="$store.detail.data.amount ? 'giving level' : 'per month'"></p></div>
              <div x-show="$store.detail.data.whatItFunds" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">What It Funds</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.whatItFunds"></p></div>
              <div x-show="$store.detail.data.impactReport" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Impact Report</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.impactReport"></p></div>
              <div x-show="$store.detail.data.recognition" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4"><p class="text-xs text-brand-primary font-semibold mb-1">Recognition</p><p class="text-sm text-gray-300" x-text="$store.detail.data.recognition"></p></div>
              <div x-show="$store.detail.data.targetAvatar" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Target Avatar</p><p class="text-sm text-white" x-text="$store.detail.data.targetAvatar"></p></div>
              <div x-show="$store.detail.data.features"><p class="text-xs text-gray-500 mb-2">Features</p>
                <template x-for="(f, fi) in ($store.detail.data.features || [])" :key="fi"><div class="flex items-start gap-2 mb-1"><svg class="w-3 h-3 text-brand-accent mt-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg><p class="text-sm text-gray-300" x-text="f"></p></div></template>
              </div>
            </div>
          </template>

          <!-- ── STORY EMAIL ── -->
          <template x-if="$store.detail.type === 'story-email'">
            <div class="space-y-4">
              <div class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Subject</p><p class="text-sm text-white font-medium" x-text="$store.detail.data.subject"></p></div>
              <div x-show="$store.detail.data.narrativeArc" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Narrative Arc</p><p class="text-sm text-white" x-text="$store.detail.data.narrativeArc"></p></div>
              <div class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Body</p><p class="text-sm text-gray-300 whitespace-pre-line leading-relaxed" x-text="$store.detail.data.body"></p></div>
              <div class="grid grid-cols-2 gap-3">
                <div x-show="$store.detail.data.cta" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">CTA</p><p class="text-sm text-brand-primary" x-text="$store.detail.data.cta"></p></div>
                <div x-show="$store.detail.data.sequencePosition" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Position</p><p class="text-sm text-white" x-text="$store.detail.data.sequencePosition"></p></div>
                <div x-show="$store.detail.data.storyElement" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Story Element</p><p class="text-sm text-white" x-text="$store.detail.data.storyElement"></p></div>
              </div>
            </div>
          </template>

          <!-- ── CASE STUDY ── -->
          <template x-if="$store.detail.type === 'case-study'">
            <div class="space-y-4">
              <div x-show="$store.detail.data.description" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Description</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="$store.detail.data.description"></p></div>
              <div x-show="$store.detail.data.sections"><p class="text-xs text-gray-500 mb-2">Sections</p>
                <template x-for="(sec, si) in ($store.detail.data.sections || [])" :key="si"><div class="bg-surface-800 rounded-lg p-3 mb-2"><p class="text-sm text-white font-medium" x-text="sec.name || sec.title || 'Section ' + (si+1)"></p><p x-show="sec.content || sec.description" class="text-xs text-gray-400 mt-1" x-text="sec.content || sec.description"></p></div></template>
              </div>
              <a href="./pages/case-study-template.html" target="_blank" class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>View Template</a>
            </div>
          </template>

          <!-- ── BLOG ── -->
          <template x-if="$store.detail.type === 'blog'">
            <div class="space-y-4">
              <div class="grid grid-cols-2 gap-3">
                <div x-show="$store.detail.data.type" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Type</p><p class="text-sm text-white" x-text="$store.detail.data.type"></p></div>
                <div x-show="$store.detail.data.wordCount" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Word Count</p><p class="text-sm text-white" x-text="$store.detail.data.wordCount"></p></div>
                <div x-show="$store.detail.data.publishMonth" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Publish Month</p><p class="text-sm text-white" x-text="$store.detail.data.publishMonth"></p></div>
                <div x-show="$store.detail.data.targetAvatar" class="bg-surface-800 rounded-lg p-3"><p class="text-xs text-gray-500">Target Avatar</p><p class="text-sm text-white" x-text="$store.detail.data.targetAvatar"></p></div>
              </div>
              <div x-show="$store.detail.data.seoCluster" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">SEO Cluster</p><p class="text-sm text-gray-300" x-text="$store.detail.data.seoCluster"></p></div>
              <div x-show="$store.detail.data.primaryKeyword" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Primary Keyword</p><p class="text-sm text-brand-primary font-medium" x-text="$store.detail.data.primaryKeyword"></p></div>
              <div x-show="$store.detail.data.outline" class="bg-surface-800 rounded-lg p-4"><p class="text-xs text-gray-500 mb-1">Outline</p><p class="text-sm text-gray-300 whitespace-pre-line" x-text="typeof $store.detail.data.outline === 'string' ? $store.detail.data.outline : Array.isArray($store.detail.data.outline) ? $store.detail.data.outline.join('\n') : JSON.stringify($store.detail.data.outline, null, 2)"></p></div>
              <div x-show="$store.detail.data.cta" class="bg-brand-primary/10 border border-brand-primary/20 rounded-lg p-4"><p class="text-xs text-brand-primary font-semibold mb-1">CTA</p><p class="text-sm text-gray-300" x-text="$store.detail.data.cta"></p></div>
              <a x-show="$store.detail.data.pagePath" :href="$store.detail.data.pagePath" target="_blank" class="inline-flex items-center gap-2 bg-brand-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90 transition-opacity cursor-pointer"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/></svg>View Page</a>
            </div>
          </template>

        </div><!-- /detail body -->
      </div><!-- /panel -->
    </div><!-- /detail overlay -->

  </main>
</body>
</html>
