# Support Center Modal Implementation

## Overview
The support center has been updated to hide forms by default and show them in modal popups when users click on the hero section feature items.

## Changes Made

### 1. **Main Page Component** (`app/support-center/page.tsx`)
- Converted to a client component with state management
- Added `activeModal` state to track which modal should be displayed
- Props passed to child components to control modal visibility

### 2. **Hero Component** (`components/pages/support/SupportCenterHero.tsx`)
- Added `onFeatureClick` prop to handle feature item clicks
- Made all three feature items clickable:
  - **Submit Tickets** - Opens the Create Ticket form
  - **Knowledge Base** - Opens the Knowledge Base
  - **Track Status** - Opens the Ticket Status Check form
- Added proper accessibility attributes (`role="button"`, `tabIndex`, keyboard support)
- Added `clickable` class for enhanced styling

### 3. **Content Component** (`components/pages/support/SupportCenterContent.tsx`)
- Completely redesigned as a modal overlay system
- Forms are now hidden by default and only shown when `activeModal` is set
- Features:
  - **Full-screen modal overlay** with backdrop blur
  - **Smooth animations** (slide-in effect)
  - **Close functionality**:
    - Click overlay to close
    - Click X button to close
    - Press ESC key to close
  - **Body scroll prevention** when modal is open
  - **Custom scrollbar styling** for better UX
  - **Responsive design** with mobile optimizations

### 4. **Styling Updates** (`public/styles/pages/_support-center.scss`)
- Enhanced `.feature-item.clickable` styling:
  - Cursor pointer
  - Enhanced hover effects (lift higher, glow effect)
  - Active state for click feedback
  - Box shadow on hover with gold accent

## User Experience Flow

1. User lands on support center page
2. Sees hero section with three feature cards (no forms visible)
3. Clicks on any feature card:
   - "Submit Tickets" → Opens ticket creation form in modal
   - "Knowledge Base" → Opens knowledge base in modal
   - "Track Status" → Opens ticket status checker in modal
4. Modal appears with smooth animation
5. User can:
   - Interact with the form/content
   - Close via X button, ESC key, or clicking outside
6. Modal closes with smooth animation
7. User returns to clean hero view

## Benefits

✅ **Cleaner UI** - Hero section is not cluttered with forms  
✅ **Better Focus** - Modals help users focus on one task at a time  
✅ **Improved UX** - Clear call-to-actions with visual feedback  
✅ **Accessibility** - Keyboard navigation and proper ARIA attributes  
✅ **Mobile Friendly** - Responsive modal design works on all devices  
✅ **Performance** - Forms only render when needed  

## Technical Features

- TypeScript type safety throughout
- React hooks for state management
- Event handling (click, keyboard, ESC)
- CSS-in-JS for modal styling (with Next.js styled-jsx)
- Smooth CSS animations
- Responsive breakpoints
- Accessibility support
- Body scroll lock when modal open

## Browser Support

Works on all modern browsers with:
- CSS backdrop-filter
- CSS animations
- Flexbox
- Modern JavaScript (ES6+)

