
  (function(){
    try{
      // This page is designed dark-first: dark unless the user explicitly chose Light in Settings.
      var saved = localStorage.getItem('varoom_theme');
      document.documentElement.setAttribute('data-theme', saved === 'light' ? 'light' : 'dark');
    }catch(e){}
  })();



  (async function(){
    try{
      const { data: { session } } = await supabaseClient.auth.getSession();
      if (!session) {
        window.location.replace('/login?redirect=' + encodeURIComponent('/pricing'));
        return;
      }

      const { data: profile, error } = await supabaseClient
        .from('profiles')
        .select('role')
        .eq('id', session.user.id)
        .maybeSingle();

      if (error || !profile) {
        window.location.replace('/login');
        return;
      }
      if (profile.role !== 'host') {
        window.location.replace('/client-home');
        return;
      }

      document.body.classList.remove('auth-pending');
    } catch (error) {
      console.error('Pricing access check failed:', error);
      window.location.replace('/login');
    }
  })();



  (function(){
    const page = document.getElementById('pricing-page');

    /* ---------- Billing period + prices ---------- */
    const plans = Array.prototype.slice.call(page.querySelectorAll('[data-plan]'));
    const sw = document.getElementById('billing-switch');
    const monthlyLabel = document.getElementById('billing-monthly-label');
    const yearlyLabel = document.getElementById('billing-yearly-label');
    const soonBadge = document.getElementById('billing-soon');
    const note = document.getElementById('billing-note');
    const status = document.getElementById('pricing-status');
    const state = { billing: 'monthly' };

    function fmt(n){ return Number(n).toLocaleString('en-KE'); }
    function yearlyReady(){
      return plans.every(function(p){ return Number(p.getAttribute('data-price-yearly')) > 0; });
    }

    function render(){
      const yearly = state.billing === 'yearly';
      plans.forEach(function(p){
        const value = p.getAttribute(yearly ? 'data-price-yearly' : 'data-price-monthly');
        p.querySelector('[data-amount]').textContent = fmt(value);
        p.querySelector('[data-period]').textContent = yearly ? '/year' : '/month';
      });
      sw.setAttribute('aria-checked', yearly ? 'true' : 'false');
      monthlyLabel.classList.toggle('is-active', !yearly);
      yearlyLabel.classList.toggle('is-active', yearly);
    }

    if (yearlyReady()) {
      sw.removeAttribute('aria-disabled');
      soonBadge.style.display = 'none';
      note.textContent = '';
    } else {
      sw.setAttribute('aria-disabled', 'true'); // annual prices not defined yet: toggle is visible but inert
    }

    function toggle(next){
      if (sw.getAttribute('aria-disabled') === 'true') return;
      state.billing = next || (state.billing === 'monthly' ? 'yearly' : 'monthly');
      render();
    }
    sw.addEventListener('click', function(){ toggle(); });
    monthlyLabel.addEventListener('click', function(){ toggle('monthly'); });
    yearlyLabel.addEventListener('click', function(){ toggle('yearly'); });

    /* ---------- Server-owned niche plan IDs ---------- */
    (async function loadPlans(){
      try {
        const sessionResult = await supabaseClient.auth.getSession();
        const session = sessionResult && sessionResult.data && sessionResult.data.session;
        if (!session || !session.access_token) return;
        const response = await fetch('/api/billing/plans', { headers: { Authorization: 'Bearer ' + session.access_token } });
        const result = await response.json().catch(function(){ return {}; });
        if (!response.ok || !Array.isArray(result.plans) || !result.plans.length) throw new Error(result.error || 'No plans configured');
        const isLegacy = result.plans[0].niche === 'legacy';
        const legacyFeatures = [
          ['All core host tools', 'Limited storage', 'Standard listing access'],
          ['Everything in Basic', 'Video listings', 'Increased storage', 'Get showcased to new clients searching within your niche'],
          ['Everything in Growth', 'Elie', 'Advanced video listing capabilities', 'Maximum storage', 'Get showcased to new clients in Marketplace and Discover', 'Elie can encourage clients in empty conversations to start conversations with hosts in their niche']
        ];
        result.plans.forEach(function(plan, index){
          const shortName = plan.display_name.toLowerCase();
          const card = isLegacy ? plans[index] : plans.find(function(item){ return item.querySelector('.plan-name').textContent.toLowerCase() === shortName; });
          if (!card) return;
          if (isLegacy) {
            card.querySelector('.plan-name').textContent = plan.display_name;
            card.querySelector('.plan-desc').textContent = ['Essential tools for getting started on VaRoom', 'More visibility and better listing capabilities', 'Maximum visibility and intelligent client engagement'][index];
            card.querySelector('.plan-features').innerHTML = legacyFeatures[index].map(function(feature){ return '<li><svg class="check" aria-hidden="true"><use href="#pc-check"/></svg><span>' + feature + '</span></li>'; }).join('');
            card.querySelector('[data-plan-cta]').textContent = ['Get Started', 'Upgrade to Growth', 'Upgrade to Pro'][index];
          }
          card.setAttribute('data-plan', plan.id);
          card.setAttribute('data-price-monthly', String(plan.monthly_amount_minor / 100));
          card.querySelector('[data-amount]').textContent = fmt(plan.monthly_amount_minor / 100);
          const limit = plan.features && plan.features.max_active_listings;
          const rows = card.querySelectorAll('.plan-features li span');
          if (rows[0] && limit) rows[0].textContent = 'Up to ' + limit + ' active listings';
          const cta = card.querySelector('[data-plan-cta]');
          cta.setAttribute('data-plan-cta', plan.id);
        });
        const entitlementResponse = await fetch('/api/billing/entitlements', { headers: { Authorization: 'Bearer ' + session.access_token } });
        const entitlementResult = await entitlementResponse.json().catch(function(){ return {}; });
        if (!entitlementResponse.ok) throw new Error(entitlementResult.error || 'Unable to load your subscription');
        const entitlements = entitlementResult.entitlements;
        const currentPlanId = entitlements && entitlements.active && entitlements.subscription && entitlements.subscription.plan_id;
        if (currentPlanId) {
          const currentPlanButton = page.querySelector('[data-plan="' + currentPlanId + '"] [data-plan-cta]');
          if (currentPlanButton) {
            currentPlanButton.textContent = 'Current Plan';
            currentPlanButton.disabled = true;
            currentPlanButton.setAttribute('aria-current', 'true');
          }
        }
      } catch (error) { status.textContent = error.message || 'Unable to load plans'; }
    })();

    /* ---------- CTAs ----------
       The browser supplies only a VaRoom plan ID. The server owns prices,
       Paystack plan codes and activation; return/callback pages never grant access. */
    page.querySelectorAll('[data-plan-cta]').forEach(function(btn){
      btn.addEventListener('click', async function(){
        const id = btn.getAttribute('data-plan-cta');
        const card = page.querySelector('[data-plan="' + id + '"]');
        const name = card.querySelector('.plan-name').textContent;
        document.dispatchEvent(new CustomEvent('varoom:plan-select', { detail: { plan: id, billing: state.billing } }));
        btn.disabled = true;
        status.textContent = 'Opening secure checkout for ' + name + '…';
        try {
          const sessionResult = await supabaseClient.auth.getSession();
          const session = sessionResult && sessionResult.data && sessionResult.data.session;
          if (!session || !session.access_token) throw new Error('Please log in again to continue.');
          let pendingListingId = null;
          try {
            const pointer = window.VaRoomListingDraftCache.createListingDraftCache().getPointer(session.user.id);
            const requestedNiche = new URLSearchParams(window.location.search).get('niche');
            if (pointer && pointer.listingId && pointer.returnTo === 'list'
                && pointer.createdAt && Date.now() - pointer.createdAt <= 7 * 24 * 60 * 60 * 1000
                && (!requestedNiche || pointer.category === requestedNiche)) {
              pendingListingId = pointer.listingId;
            }
          } catch (error) {
            console.warn('Unable to read the listing draft for subscription checkout:', error);
          }
          try {
            const pending = JSON.parse(sessionStorage.getItem('varoom_listing_after_upgrade') || 'null');
            if (pending && pending.id) pendingListingId = pending.id;
          } catch (_) {}
          const checkoutBody = { plan: id };
          if (pendingListingId) checkoutBody.listing_id = pendingListingId;
          if (new URLSearchParams(window.location.search).get('returnTo') === 'list') checkoutBody.return_to = 'list';
          const response = await fetch('/api/billing/checkout', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + session.access_token },
            body: JSON.stringify(checkoutBody)
          });
          const result = await response.json().catch(function(){ return {}; });
          if (!response.ok || !result.authorization_url) throw new Error(result.error || 'Unable to start checkout.');
          window.location.assign(result.authorization_url);
        } catch (error) {
          status.textContent = error.message || 'Unable to start checkout. Please try again.';
          btn.disabled = false;
        }
      });
    });

    async function refreshReturnedBillingStatus(){
      if (new URLSearchParams(window.location.search).get('billing') !== 'return') return;
      const returnParams = new URLSearchParams(window.location.search);
      const returnToList = returnParams.get('returnTo') === 'list';
      const paymentReference = returnParams.get('reference') || returnParams.get('trxref');
      let attempts = 0;
      async function checkStatus(){
        try {
          const sessionResult = await supabaseClient.auth.getSession();
          const session = sessionResult && sessionResult.data && sessionResult.data.session;
          if (!session || !session.access_token) return;
          let payment = null;
          if (paymentReference) {
            const paymentResponse = await fetch('/api/billing/payments/' + encodeURIComponent(paymentReference), {
              headers: { Authorization: 'Bearer ' + session.access_token }
            });
            const paymentResult = await paymentResponse.json().catch(function(){ return {}; });
            if (!paymentResponse.ok) throw new Error(paymentResult.error || 'Unable to verify payment');
            payment = paymentResult.payment;
          }
          const response = await fetch('/api/billing/entitlements', { headers: { Authorization: 'Bearer ' + session.access_token } });
          const result = await response.json().catch(function(){ return {}; });
          const entitlements = result.entitlements;
          const subscription = entitlements && entitlements.subscription;
          if (response.ok && entitlements && entitlements.active && subscription && subscription.status === 'active'
              && paymentReference && payment && payment.status === 'succeeded'
              && subscription.plan_id === payment.plan_id) {
            status.textContent = 'Your ' + subscription.plan_id + ' plan is active.';
            const currentPlanButton = page.querySelector('[data-plan="' + subscription.plan_id + '"] [data-plan-cta]');
            if (currentPlanButton) {
              currentPlanButton.textContent = 'Current Plan';
              currentPlanButton.disabled = true;
              currentPlanButton.setAttribute('aria-current', 'true');
            }
            if (returnToList) {
              try { sessionStorage.removeItem('varoom_listing_after_upgrade'); } catch (_) {}
              window.setTimeout(function(){ window.location.replace('/list?subscription=return'); }, 700);
            }
            return;
          }
          if (payment && ['failed', 'abandoned', 'refunded'].includes(payment.status)) {
            status.textContent = 'Your payment was not completed. Your plan has not been activated.';
            return;
          }
          status.textContent = 'Your payment is being verified. Your plan will activate only after VaRoom confirms it.';
        } catch (error) {
          status.textContent = 'Your payment is being verified. Refresh this page shortly for the latest status.';
        }
        attempts++;
        if (attempts < 60) window.setTimeout(checkStatus, 2000);
      }
      checkStatus();
    }

    render();
    refreshReturnedBillingStatus();
  })();


Pricing

Basic

Pro

Premium