# Master Implementation Plan: "Book a Call" Support Design

This document outlines the step-by-step implementation for adding a static "Book a Call" CTA (Design Focused) to the FlexStock setup flow.

---

## 🎨 Step 1: Create Shared Support Template
Create a new file: `templates/setup/support-block.php`.

**Content Outline:**
A reusable "Need Help?" card component.
- **Icon:** A simple calendar or chat SVG.
- **Heading:** "Talk to an Expert".
- **Description:** "Book a free 30-min call to help you finish your setup."
- **Button:** 
  ```html
  <a href="https://calendly.com/flexstock/30min" target="_blank" class="ssgs-btn border">Book a Call</a>
  ```
- **Styling Note:** Use a light border, subtle shadow, and centered alignment.

---

## 🚀 Step 2: Zero State/Welcome Integration
Modify `templates/setup/welcome.php`.

**Design Shift:**
Place a secondary button next to or below the primary "Start setup" button.
```html
<!-- Inside the .content div -->
<div class="ssgs-btn-group">
    <button @click.prevent="state.setupStarted = true" class="ssgs-btn blue">Start setup</button>
    <a href="https://calendly.com/flexstock/30min" target="_blank" class="ssgs-btn border">Book a Call</a>
</div>
```

---

## ⚙️ Step 3: Stepper Flow Integration (base.php)
Update the main structure in `templates/setup/base.php` to handle a responsive side-column.

**Layout Shift:**
Wrap the existing content in a row structure.
- **Column 1 (Large - 8/12):** Existing `ssgs-tab__content`.
- **Column 2 (Small - 4/12):** The `support-block.php` template.

**Visibility Logic:**
```php
<div class="ssgs-column-4" x-show="state.setupStarted && state.currentStep < 5">
    <?php ssgsw()->load_template('setup/support-block'); ?>
</div>
```

---

## 📱 Step 4: Responsive Style Polish
Add styles to `src/scss/main.scss`.

**Key CSS Requirements:**
1.  **Sidebar Alignment:** Ensure the `ssgs-column-4` has a fixed or clean sticky behavior on desktop.
2.  **Mobile Behavior:** On screens `< 768px`, the sidebar should stack below the main content.
3.  **Visual Consistency:** Match the existing `ssgs-` design system.
