# Pricing Toggle Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Add a monthly/yearly billing toggle to the marketing homepage so visitors can view pricing for both billing periods.

**Architecture:** Single-file modification to static HTML. Toggle uses vanilla JS to swap pricing text and dim the Starter card (annual-only) when Monthly is selected. No build step, no dependencies.

**Tech Stack:** HTML, CSS, vanilla JavaScript (inline in `<style>` and `<script>` tags)

---

## Task 1: Add CSS for Billing Toggle

**Files:**

- Modify: `public/index.html:395-398` (insert before `.subscribe-button:focus-visible`)

**Step 1: Add toggle CSS**

Insert after line 393 (after the closing `}` of `.seo-section__inner li`):

```css
.billing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.billing-toggle button {
  background: none;
  border: none;
  color: rgba(148, 163, 184, 0.7);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.billing-toggle button:hover {
  color: rgba(56, 189, 248, 0.8);
  border-bottom-color: rgba(56, 189, 248, 0.3);
}

.billing-toggle button[aria-checked='true'] {
  color: #38bdf8;
  font-weight: 600;
}

.billing-toggle button:focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.toggle-separator {
  color: rgba(148, 163, 184, 0.5);
  font-size: 0.85rem;
  user-select: none;
}
```

**Step 2: Verify CSS added**

Open `public/index.html` and confirm the `.billing-toggle` styles are present around line 395-440.

**Step 3: Commit**

```bash
git add public/index.html
git commit -m "feat(pricing): add billing toggle CSS styles"
```

---

## Task 2: Add CSS for Disabled State and Badge

**Files:**

- Modify: `public/index.html` (append after billing toggle CSS from Task 1)

**Step 1: Add disabled state and badge CSS**

Insert immediately after the `.toggle-separator` rule:

```css
.pricing-card--disabled {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.annual-only-badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(148, 163, 184, 0.2);
  color: rgba(148, 163, 184, 0.9);
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: none;
}

.pricing-card--disabled .annual-only-badge {
  display: block;
}
```

**Step 2: Verify CSS added**

Confirm `.pricing-card--disabled` and `.annual-only-badge` styles are present.

**Step 3: Commit**

```bash
git add public/index.html
git commit -m "feat(pricing): add disabled state and annual-only badge CSS"
```

---

## Task 3: Add Billing Toggle HTML

**Files:**

- Modify: `public/index.html:439-442` (inside `.pricing-header`)

**Step 1: Add toggle markup**

Replace lines 439-442:

```html
<div class="pricing-header">
  <span class="eyebrow">Plans</span>
  <h2 id="pricing-heading">Choose the plan that meets your needs</h2>
</div>
```

With:

```html
<div class="pricing-header">
  <span class="eyebrow">Plans</span>
  <h2 id="pricing-heading">Choose the plan that meets your needs</h2>
  <div class="billing-toggle" role="radiogroup" aria-label="Billing period">
    <button type="button" role="radio" aria-checked="false" data-interval="monthly">Monthly</button>
    <span class="toggle-separator" aria-hidden="true">·</span>
    <button type="button" role="radio" aria-checked="true" data-interval="yearly">Yearly</button>
  </div>
</div>
```

**Step 2: Verify HTML added**

Open browser to `http://localhost:3029` and confirm toggle appears below "Choose the plan that meets your needs".

**Step 3: Commit**

```bash
git add public/index.html
git commit -m "feat(pricing): add billing toggle HTML markup"
```

---

## Task 4: Update Pricing Cards with Data Attributes

**Files:**

- Modify: `public/index.html` (pricing card articles)

**Step 1: Update Starter card**

Find the Starter card (around line 444) and update:

```html
<article class="pricing-card pricing-card--annual" data-tier="starter">
  <span class="annual-only-badge">Annual only</span>
  <h3>Starter</h3>
  <p
    class="pricing-amount"
    data-monthly="$4.00"
    data-monthly-suffix="/ month (billed annually)"
    data-yearly="$4.00"
    data-yearly-suffix="/ month (billed annually)"
  >
    $4.00
    <span>/ month (billed annually)</span>
  </p>
</article>
```

**Step 2: Update Growth card**

Find the Growth card (around line 461) and update:

```html
<article class="pricing-card" data-tier="growth">
  <h3>Growth</h3>
  <p
    class="pricing-amount"
    data-monthly="$25"
    data-monthly-suffix="/ month"
    data-yearly="$25"
    data-yearly-suffix="/ month (billed annually)"
  >
    $25
    <span>/ month (billed annually)</span>
  </p>
</article>
```

**Step 3: Update Enhanced card**

Find the Enhanced card (around line 478) and update:

```html
<article class="pricing-card pricing-card--highlight" data-tier="enhanced">
  <h3>Enhanced</h3>
  <p
    class="pricing-amount"
    data-monthly="$50"
    data-monthly-suffix="/ month"
    data-yearly="$50"
    data-yearly-suffix="/ month (billed annually)"
  >
    $50
    <span>/ month (billed annually)</span>
  </p>
</article>
```

**Step 4: Update Professional card**

Find the Professional card (around line 495) and update:

```html
<article class="pricing-card" data-tier="professional">
  <h3>Professional</h3>
  <p
    class="pricing-amount"
    data-monthly="$200"
    data-monthly-suffix="/ month"
    data-yearly="$200"
    data-yearly-suffix="/ month (billed annually)"
  >
    $200
    <span>/ month (billed annually)</span>
  </p>
</article>
```

**Step 5: Verify data attributes**

Inspect each pricing card in browser DevTools and confirm `data-tier`, `data-monthly`, `data-monthly-suffix`, `data-yearly`, `data-yearly-suffix` attributes are present.

**Step 6: Commit**

```bash
git add public/index.html
git commit -m "feat(pricing): add data attributes to pricing cards"
```

---

## Task 5: Add JavaScript Toggle Logic

**Files:**

- Modify: `public/index.html` (add script before closing `</body>`)

**Step 1: Add toggle script**

Insert before the closing `</body>` tag (around line 688):

```html
<script>
  (function () {
    var toggle = document.querySelector('.billing-toggle');
    var buttons = toggle.querySelectorAll('button');
    var cards = document.querySelectorAll('.pricing-card');
    var starterCard = document.querySelector('[data-tier="starter"]');

    function updatePricing(interval) {
      // Update button states
      buttons.forEach(function (btn) {
        var isActive = btn.dataset.interval === interval;
        btn.setAttribute('aria-checked', isActive ? 'true' : 'false');
      });

      // Update pricing display using safe DOM methods
      cards.forEach(function (card) {
        var amount = card.querySelector('.pricing-amount');
        if (!amount) return;

        var price = amount.dataset[interval];
        var suffix = amount.dataset[interval + 'Suffix'];

        if (price && suffix) {
          // Clear existing content safely
          while (amount.firstChild) {
            amount.removeChild(amount.firstChild);
          }
          // Add price as text node
          amount.appendChild(document.createTextNode(price));
          // Create and append span for suffix
          var suffixSpan = document.createElement('span');
          suffixSpan.textContent = suffix;
          amount.appendChild(suffixSpan);
        }
      });

      // Handle Starter card disabled state
      if (interval === 'monthly') {
        starterCard.classList.add('pricing-card--disabled');
      } else {
        starterCard.classList.remove('pricing-card--disabled');
      }
    }

    // Click handlers
    buttons.forEach(function (btn) {
      btn.addEventListener('click', function () {
        updatePricing(btn.dataset.interval);
      });
    });

    // Keyboard navigation
    toggle.addEventListener('keydown', function (e) {
      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
        e.preventDefault();
        var buttonArray = Array.from(buttons);
        var currentIndex = buttonArray.findIndex(function (btn) {
          return btn.getAttribute('aria-checked') === 'true';
        });
        var nextIndex;
        if (e.key === 'ArrowRight') {
          nextIndex = (currentIndex + 1) % buttons.length;
        } else {
          nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
        }
        buttons[nextIndex].click();
        buttons[nextIndex].focus();
      }
    });
  })();
</script>
```

**Step 2: Test toggle functionality**

1. Open `http://localhost:3029`
2. Click "Monthly" - verify:
   - "Monthly" turns cyan
   - Starter card dims to 50% opacity
   - "Annual only" badge appears on Starter
   - Growth shows "$25 / month"
   - Enhanced shows "$50 / month"
   - Professional shows "$200 / month"
3. Click "Yearly" - verify:
   - "Yearly" turns cyan
   - Starter card returns to full opacity
   - "Annual only" badge hides
   - All cards show "/ month (billed annually)"
4. Test keyboard: Tab to toggle, use Arrow keys

**Step 3: Commit**

```bash
git add public/index.html
git commit -m "feat(pricing): add JavaScript toggle functionality"
```

---

## Task 6: Final Verification and Squash Commit

**Files:**

- None (verification only)

**Step 1: Full visual test**

1. Desktop (1024px+): Verify 4-column grid, toggle centered
2. Tablet (768px-1023px): Verify 2-column grid
3. Mobile (<768px): Verify single-column, badge repositions

**Step 2: Accessibility test**

1. Tab through toggle - focus ring visible
2. Screen reader: Toggle announces "Billing period" radiogroup
3. Arrow keys navigate between Monthly/Yearly

**Step 3: Create final commit (optional squash)**

If commits should be squashed:

```bash
git rebase -i HEAD~5
# Mark commits 2-5 as 'squash' (s)
# Edit commit message to: "feat(pricing): add monthly/yearly billing toggle to homepage"
```

Or keep granular commits and push:

```bash
git push -u origin feature/pricing-toggle
```

---

## Summary

| Task | Description                  | Files               |
| ---- | ---------------------------- | ------------------- |
| 1    | Add billing toggle CSS       | `public/index.html` |
| 2    | Add disabled state CSS       | `public/index.html` |
| 3    | Add toggle HTML              | `public/index.html` |
| 4    | Add data attributes to cards | `public/index.html` |
| 5    | Add JavaScript logic         | `public/index.html` |
| 6    | Final verification           | N/A                 |

**Total estimated tasks:** 6
**Key testing:** Manual browser verification at `http://localhost:3029`