From b013b338396fc81487ca48c54417efc8d7121f38 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Tue, 12 May 2026 13:56:51 -0400
Subject: [PATCH] new pricing

---
 pages/features.php        |  2 +-
 pages/pricing.php         |  6 ++---
 theme/assets/css/main.css | 50 +++++++++++++++++++++++++++++++++++++++
 theme/assets/js/main.js   | 21 ++++++++++++++++
 theme/blocks/index.php    | 29 +++++++++++++++++++----
 5 files changed, 100 insertions(+), 8 deletions(-)

diff --git a/pages/features.php b/pages/features.php
index a66ef1f..b231449 100644
--- a/pages/features.php
+++ b/pages/features.php
@@ -56,7 +56,7 @@ return <<<'ORIBI_SYNC_CONTENT'
 <!-- /wp:oribi/feature-section -->
 
 <!-- wp:oribi/value-section {"variant":"alt","heading":"Service Levels by Plan","lead":"Platform features are identical on every plan. What changes is screen capacity and the support behind it.","columns":2} -->
-<!-- wp:oribi/value-card {"iconType":"fontawesome","faIcon":"fas fa-paintbrush","title":"Content Design Hours","description":"Growth includes 2 hours per month and Scale includes 5 hours per month of in-house creative work — fresh graphics, motion content, and seasonal campaigns."} /-->
+<!-- wp:oribi/value-card {"iconType":"fontawesome","faIcon":"fas fa-paintbrush","title":"Content Design Hours","description":"Growth includes 1 hour per month and Scale includes 2 hours per month of in-house creative work — fresh graphics, motion content, and seasonal campaigns."} /-->
 <!-- wp:oribi/value-card {"iconType":"fontawesome","faIcon":"fas fa-user-tie","title":"Account Management","description":"Growth gets a named contact. Scale gets a dedicated account manager with monthly check-ins and quarterly business reviews."} /-->
 <!-- wp:oribi/value-card {"iconType":"fontawesome","faIcon":"fas fa-headset","title":"Support Response Times","description":"Starter: 2–3 business days. Growth: same-day. Scale: 1-hour response."} /-->
 <!-- wp:oribi/value-card {"iconType":"fontawesome","faIcon":"fas fa-life-ring","title":"Remote Support Add-On","description":"Add player health monitoring, remote troubleshooting, and proactive issue resolution to any plan for $1.99/screen/month."} /-->
diff --git a/pages/pricing.php b/pages/pricing.php
index 3dfef82..46c4f4c 100644
--- a/pages/pricing.php
+++ b/pages/pricing.php
@@ -9,11 +9,11 @@ return <<<'ORIBI_SYNC_CONTENT'
 <!-- wp:oribi/page-hero-animated {"title":"Simple pricing. All features on every plan.","description":"No feature gating. No per-screen upsells. Pick your tier, connect your screens, and you're done. Every plan includes the full platform - API, SSO, audit logs, analytics, everything."} /-->
 
 <!-- wp:oribi/pricing-section {"heading":"Pick Your Tier and Go Live Fast","lead":"Every plan includes the full OTS platform. The only difference is screen capacity and the service level behind it."} -->
-<!-- wp:oribi/pricing-card {"name":"Starter","tagline":"Best for small rollouts","price":"$19","pricePer":"per month","features":["3 screens included","10GB media storage","Support within 2–3 business days","Shared support queue","Full platform access — API, SSO, analytics, audit logs","Save $38 when billed annually"],"btnText":"Get Started","btnUrl":"/contact"} /-->
+<!-- wp:oribi/pricing-card {"name":"Starter","tagline":"Best for small rollouts","price":"$19","pricePer":"per month","annualPrice":"$16","annualPer":"per month, billed annually","annualSavings":"Save $38 per year","features":["3 screens included","10GB media storage","Support within 2–3 business days","Shared support queue","Full platform access — API, SSO, analytics, audit logs","Save $38 when billed annually"],"btnText":"Get Started","btnUrl":"/contact"} /-->
 
-<!-- wp:oribi/pricing-card {"name":"Growth","tagline":"Built for growing teams","price":"$39","pricePer":"per month","features":["8 screens included","50GB media storage","Same-day support response","Named account contact","2 hours of content design per month","Quarterly business review","Save $78 when billed annually"],"btnText":"Get Started","btnUrl":"/contact","featured":true,"badge":"Most Popular"} /-->
+<!-- wp:oribi/pricing-card {"name":"Growth","tagline":"Built for growing teams","price":"$39","pricePer":"per month","annualPrice":"$33","annualPer":"per month, billed annually","annualSavings":"Save $78 per year","features":["8 screens included","50GB media storage","Same-day support response","Named account contact","1 hour of content design per month","Quarterly business review","Save $78 when billed annually"],"btnText":"Get Started","btnUrl":"/contact","featured":true,"badge":"Most Popular"} /-->
 
-<!-- wp:oribi/pricing-card {"name":"Scale","tagline":"For high-visibility networks","price":"$79","pricePer":"per month","features":["20 screens included","100GB media storage","1-hour support response","Dedicated account manager","5 hours of content design per month","Monthly check-ins plus quarterly reviews","Save $158 when billed annually"],"btnText":"Contact Us","btnUrl":"/contact"} /-->
+<!-- wp:oribi/pricing-card {"name":"Scale","tagline":"For high-visibility networks","price":"$79","pricePer":"per month","annualPrice":"$66","annualPer":"per month, billed annually","annualSavings":"Save $158 per year","features":["20 screens included","100GB media storage","1-hour support response","Dedicated account manager","2 hours of content design per month","Monthly check-ins plus quarterly reviews","Save $158 when billed annually"],"btnText":"Contact Us","btnUrl":"/contact"} /-->
 <!-- /wp:oribi/pricing-section -->
 
 <!-- wp:oribi/feature-section {"variant":"alt","heading":"Optional Add-Ons","lead":"Remote Support - $1.99/screen/month","columns":1} -->
diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index c4ddb54..6ce3dcb 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -2501,6 +2501,56 @@ p:last-child { margin-bottom: 0; }
 .pricing-features li:last-child { border-bottom: none; }
 .pricing-check { color: var(--color-primary); font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
 
+/* ── Billing period toggle ─────────────────────────────────── */
+.pricing-billing-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .375rem;
+  margin-bottom: 2.5rem;
+  background: var(--color-border);
+  border-radius: 100px;
+  padding: .3rem;
+  width: fit-content;
+  margin-inline: auto;
+}
+.pbt-option {
+  background: transparent;
+  border: none;
+  border-radius: 100px;
+  cursor: pointer;
+  font-size: .9rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  padding: .45rem 1.25rem;
+  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  white-space: nowrap;
+}
+.pbt-option.active {
+  background: var(--card-bg);
+  color: var(--color-heading);
+  box-shadow: 0 1px 4px rgba(0,0,0,.12);
+}
+.pbt-save-pill {
+  background: var(--color-primary);
+  color: #fff;
+  font-size: .68rem;
+  font-weight: 700;
+  letter-spacing: .04em;
+  padding: .2rem .55rem;
+  border-radius: 100px;
+  text-transform: uppercase;
+}
+.pricing-savings {
+  font-size: .82rem;
+  font-weight: 600;
+  color: var(--color-primary);
+  margin-top: .35rem;
+}
+
 @media (max-width: 900px) {
   .pricing-grid-3 { grid-template-columns: 1fr; max-width: 400px; }
 }
diff --git a/theme/assets/js/main.js b/theme/assets/js/main.js
index ad07b99..9be33b6 100644
--- a/theme/assets/js/main.js
+++ b/theme/assets/js/main.js
@@ -744,6 +744,27 @@ document.addEventListener('DOMContentLoaded', () => {
     stages.forEach(function (stage) { io.observe(stage); });
   }
 
+  /* ── Pricing billing toggle ─────────────────────────────── */
+  document.querySelectorAll('.pricing-billing-toggle').forEach(function(toggle) {
+    toggle.addEventListener('click', function(e) {
+      var btn = e.target.closest('.pbt-option');
+      if (!btn) return;
+      var billing = btn.dataset.billing;
+      toggle.querySelectorAll('.pbt-option').forEach(function(b) {
+        b.classList.toggle('active', b === btn);
+        b.setAttribute('aria-pressed', b === btn ? 'true' : 'false');
+      });
+      var section = toggle.closest('section');
+      if (!section) return;
+      section.querySelectorAll('.pbt-show-monthly').forEach(function(el) {
+        el.hidden = (billing === 'annual');
+      });
+      section.querySelectorAll('.pbt-show-annual').forEach(function(el) {
+        el.hidden = (billing === 'monthly');
+      });
+    });
+  });
+
   function startTsSlides(stage) {
     var slides = stage.querySelectorAll('.ts-slide');
     if (!slides.length) return;
diff --git a/theme/blocks/index.php b/theme/blocks/index.php
index 89d2de5..562f7f3 100644
--- a/theme/blocks/index.php
+++ b/theme/blocks/index.php
@@ -539,6 +539,9 @@ add_action('init', function () {
             'tagline' => ['type' => 'string', 'default' => ''],
             'price' => ['type' => 'string', 'default' => ''],
             'pricePer' => ['type' => 'string', 'default' => ''],
+            'annualPrice' => ['type' => 'string', 'default' => ''],
+            'annualPer' => ['type' => 'string', 'default' => ''],
+            'annualSavings' => ['type' => 'string', 'default' => ''],
             'features' => ['type' => 'array', 'default' => []],
             'btnText' => ['type' => 'string', 'default' => 'Get Started'],
             'btnUrl' => ['type' => 'string', 'default' => '/contact'],
@@ -1793,6 +1796,11 @@ function oribi_render_pricing_section($a, $content, $block)
     $cls = $a['variant'] === 'alt' ? 'section section-alt' : 'section';
     $count = count($block->inner_blocks);
     $has_label = !empty($a['label']);
+    $toggle = '
+<div class="pricing-billing-toggle" role="group" aria-label="Billing period">
+  <button class="pbt-option pbt-monthly active" data-billing="monthly" aria-pressed="true">Monthly</button>
+  <button class="pbt-option pbt-annual" data-billing="annual" aria-pressed="false">Annual <span class="pbt-save-pill">Save 17%</span></button>
+</div>';
     ob_start();
     if ($has_label): ?>
 <section class="<?php echo esc_attr($cls); ?>">
@@ -1803,6 +1811,7 @@ function oribi_render_pricing_section($a, $content, $block)
                 <h2><?php echo wp_kses_post($a['heading']); ?></h2>
                 <?php if ($a['lead']): ?><p class="lead"><?php echo wp_kses_post($a['lead']); ?></p><?php endif; ?>
             </div>
+            <?php echo $toggle; ?>
             <div class="pricing-grid pricing-grid-<?php echo intval($count); ?>">
                 <?php echo $content; ?>
             </div>
@@ -1816,6 +1825,7 @@ function oribi_render_pricing_section($a, $content, $block)
             <h2><?php echo wp_kses_post($a['heading']); ?></h2>
             <?php if ($a['lead']): ?><p class="lead"><?php echo wp_kses_post($a['lead']); ?></p><?php endif; ?>
         </div>
+        <?php echo $toggle; ?>
         <div class="pricing-grid pricing-grid-<?php echo intval($count); ?>">
             <?php echo $content; ?>
         </div>
@@ -1849,6 +1859,13 @@ function oribi_render_pricing_card($a)
         }
     }
 
+    $has_annual = !empty($a['annualPrice']);
+    $monthly_price = $a['price'] ?? '';
+    $monthly_per   = $a['pricePer'] ?? '';
+    $annual_price  = $a['annualPrice'] ?? '';
+    $annual_per    = $a['annualPer'] ?? '';
+    $annual_savings = $a['annualSavings'] ?? '';
+
     ob_start(); ?>
 <div class="pricing-card<?php echo $featured ? ' featured' : ''; ?>">
     <?php if ($featured && !empty($a['badge'])): ?>
@@ -1863,11 +1880,15 @@ function oribi_render_pricing_card($a)
     endif; ?>
     <div class="pricing-name"><?php echo esc_html($a['name']); ?></div>
     <p class="pricing-tagline"><?php echo wp_kses_post($a['tagline']); ?></p>
-    <?php if (!empty($a['price'])): ?>
+    <?php if ($monthly_price): ?>
     <div class="pricing-price">
-        <div class="pricing-amount"><?php echo wp_kses_post($a['price']); ?></div>
-        <?php if (!empty($a['pricePer'])): ?><div class="pricing-per"><?php echo wp_kses_post($a['pricePer']); ?></div><?php
-        endif; ?>
+        <div class="pricing-amount pbt-show-monthly"><?php echo wp_kses_post($monthly_price); ?></div>
+        <?php if ($monthly_per): ?><div class="pricing-per pbt-show-monthly"><?php echo wp_kses_post($monthly_per); ?></div><?php endif; ?>
+        <?php if ($has_annual): ?>
+        <div class="pricing-amount pbt-show-annual" hidden><?php echo wp_kses_post($annual_price); ?></div>
+        <?php if ($annual_per): ?><div class="pricing-per pbt-show-annual" hidden><?php echo wp_kses_post($annual_per); ?></div><?php endif; ?>
+        <?php if ($annual_savings): ?><div class="pricing-savings pbt-show-annual" hidden><?php echo esc_html($annual_savings); ?></div><?php endif; ?>
+        <?php endif; ?>
     </div>
     <?php
     endif; ?>