You are VibeCoder — a full-stack production AI that builds modern, mobile-first, privacy-respecting web apps. Build a complete dating website called **SparkMeet** aimed at **Gen Z (ages 18–26)**. The deliverable must be a production-ready, accessible, performant, and secure full-stack app (frontend + backend + database + infra + tests + documentation). Use modern tech: React + TypeScript (Next.js recommended for SSR/edge), Tailwind CSS for styling, Prisma or an ORM for DB, PostgreSQL (or Supabase/PlanetScale), Redis for caching & rate limits, WebSocket (or Supabase Realtime) for chat, S3 (or equivalent) for images. Provide a runnable repo layout, README, and end-to-end tests.

--- PRODUCT VISION
- Short pitch: SparkMeet — a playful, safe, swipeable dating app for Gen Z that focuses on authenticity, micro-vibes, and fast matches.
- Tone & Branding: playful, concise, inclusive. Use short microcopy and emojis sparingly. UI: rounded cards, neon gradient accents (pink/purple/teal), large tappable targets.
- Target: mobile-first progressive web app (works on desktop & mobile).

--- CORE MVP FEATURES (must implement)
1. Onboarding / Auth
- Email + password (strong password rules) + email verification.
- OAuth 2.0 options: Google & Apple (if available).
- Phone number + OTP or passwordless email as an option.
- Age verification (users must be >= 18) — soft: date of birth input; hard: optional ID/photo check flows.
2. Profile
- Multi-photo upload (max 10), photos stored on S3 with signed uploads.
- Bio, pronouns, location (city), age, interests (tag list), Spotify/Instagram optional links, study/work info.
- "Vibe badges" (fun little tags) and 3-sentence “Sparkline” — concise highlight visible in cards.
3. Discovery
- Swipe interface + grid/list mode.
- Filters: distance, age range, interests, online now.
- “Spark” mechanic: a paid or earned boost that increases visibility.
4. Matching
- Mutual likes create a Match — open match chat.
- Notification on match + celebratory modal/UI.
5. Chat
- Real-time messaging via WebSocket or WebRTC data channels.
- Read receipts, typing indicator, image support, message delete for own messages.
- Safety commands: report, block, mute.
6. Safety & Moderation
- Content moderation pipeline for images and text (automated + human queue).
- Report/Block flows, rate limiting, anti-spam heuristics.
7. Monetization (optional basic)
- Subscriptions (monthly) + in-app credits ("Sparks" to boost).
- Stripe integration for payments.
8. Notifications & Emails
- Push notifications (web push + mobile) and transactional emails.
9. Admin Dashboard
- User search, reports queue, content moderation, ban/unban, analytics.
10. Metrics & Analytics
- Event tracking (profile_view, like, match, message_sent, report_submitted) suitable for Mixpanel/Amplitude.

--- DESIGN & UI SYSTEM
- Component library: Button, Card, Avatar, Modal, Input, Toggle, Tag, Badge, Toast.
- Responsive breakpoints; mobile-first.
- Accessibility (a11y): proper aria labels, keyboard navigation, color contrast, focus states.
- Animations: subtle microinteractions on like/match using Lottie or CSS transforms.

--- DETAILED PAGE & UI COMPONENTS (with **every** button + exact behavior)

1) Landing / Home (unauthenticated)
- Buttons:
- `Sign Up` -> opens onboarding modal. Behavior: opens `/signup` route. Track event: `cta_signup_clicked`.
- `Log In` -> opens login modal. Behavior: `/login`. Track `cta_login_clicked`.
- `Learn More` -> scroll or route to features section. Track `cta_learn_more`.
- SEO meta tags and social preview.

2) Onboarding (Signup flow)
- Inputs: email, DOB, password OR OAuth flow buttons.
- Buttons:
- `Continue` (on each step) -> validate inputs client-side, call `/api/auth/signup/step` with payload, show loader, on success go next. Analytics `onboarding_step_completed` with properties {step, method}.
- `Use Google` / `Use Apple` -> trigger OAuth popup, on success complete onboarding server side and redirect to profile builder.
- `Back` -> navigate to previous step, save partial state in localStorage.
- `Skip` (for optional steps) -> store default values and continue.
- Validation: strong password rules, DOB => must be >= 18 else show friendly rejection modal with help.

3) Profile Builder
- Buttons:
- `Upload Photo` (per slot) -> open image picker, client validates file type/size, then uploads via signed URL to S3: PUT signed URL. After upload, POST `/api/users/{id}/photos` to register. Show progress and allow reorder. Immediately run image moderation; if blocked, notify user and remove photo.
- `Save Profile` -> PUT `/api/users/{id}` with full profile JSON. On success show toast "Profile saved".
- `Add Badge` -> opens tag selector modal; PUT update profile interests.
- `Preview Profile` -> open public view page; track `profile_preview`.
- Edge cases: network failure -> retry modal with retry/back options.

4) Discovery / Swipe Screen (primary)
- Layout: central card with person profile; swipe gestures (touch, mouse drag) + buttons under the card.
- Buttons (explicit list with behavior):
- `X / Pass` button:
- UI: visible, accessible label `Pass`.
- Action: optimistic UI remove card, POST `/api/discovery/pass` payload {userId, targetId}. If response error, revert card and show error toast. Track `discovery_pass`.
- `Like` (heart):
- UI: toggleable, triggers animation.
- Action: optimistic UI mark liked. POST `/api/matches/like` with {fromUserId, toUserId}. If response returns `{match: true, matchId}`, open Match modal that prompts "You matched — Send a message". Create a conversation in DB and navigate to chat if user clicks. Track `discovery_like` with property {match: boolean}.
- `SuperSpark` (special):
- UI: uses Sparks credit or subscription. If user has credits, pressing consumes credit and sends a stronger signal. POST `/api/matches/superspark`. Show confirmation modal with microcopy and animation. Track `discovery_superspark`.
- `Info` (i icon):
- Opens detailed overlay with more profile fields and common interests. Track `discovery_info_open`.
- Swipe gestures:
- Right = Like, Left = Pass, Up = SuperSpark. On each gesture, call the same endpoints as corresponding buttons. Debounce swipes to prevent accidental repeats.

5) Profile Card (viewing someone)
- Buttons:
- `Message`:
- Enabled only if matched. If not matched, button text `Like to Match` and clicking performs like flow.
- If matched, opens chat window, focus input. Track `profile_message_open`.
- `Spark` icon on card:
- Behavior same as SuperSpark.
- `Report`:
- Opens report modal to select reason (harassment, nudity, fake profile, minors, spam). On submit: POST `/api/reports` with last messages & last 5 photos metadata. Immediately create moderation ticket, optionally auto-suspend if severe reason. Track `profile_report_submitted`.
- `Block`:
- POST `/api/users/{me}/block` -> server adds block and prevents recommendations/messages. Client hides the user and shows undo toast `User blocked`.
- `Follow` (if you want social features) — optional.

6) Chat / Messaging
- Buttons and behaviors:
- `Send` (text):
- Enabled when input non-empty. Action: optimistic append message to chat UI with temporary id, send over WebSocket `message_send` event and fallback to POST `/api/messages` if socket fails. On ACK replace temp id with real id. Track `message_sent` with length properties.
- Validation: check for banned words; block sending or flag if present.
- `Attach Photo`:
- Similar to profile photo upload; upload signed URL then send image message. Moderation pipeline runs; if flagged, remove message and notify both users if required.
- `Delete` (own message):
- Sends DELETE `/api/messages/{id}`; client hides message and shows "Message deleted". Server keeps audit copy for moderation but hides content from the other user.
- `Block/Report` (within chat):
- Same endpoints as profile, but attach last 10 messages to the report payload automatically.
- `Start Video Date`:
- If both agree, start WebRTC flow via signaling server. Button `Start Video` triggers call offer, sends push to other user; state in DB: `call_request`. Track `video_call_requested`.

7) Settings & Account
- Buttons:
- `Change Password` -> form with current/new/confirm and validation. POST `/api/auth/change-password`.
- `Delete Account` -> requires password confirm and shows 2-step modal. DELETE `/api/users/{id}` (soft delete: mark as deleted, anonymize). Provide grace period before permanent deletion.
- `Privacy Settings` toggles:
- `Show me in Discovery` toggle -> PUT `/api/users/{id}/privacy`.
- `Allow message from non-matches` toggle -> PUT.
- `Manage Subscription` -> links to billing portal (Stripe) or shows plan details.
- `Export My Data` -> triggers job and email with ZIP (GDPR request), track `data_export_requested`.

--- API DESIGN (examples)
- `POST /api/auth/signup` {email, password, dob} -> 201 {userId, nextStep}
- `POST /api/auth/login` {email, password} -> {token, refreshToken, expiresAt}
- `GET /api/discovery?cursor=...&filters=...` -> list of profiles
- `POST /api/matches/like` {fromUserId, toUserId} -> {match: boolean, matchId?: string}
- `POST /api/matches/superspark` {fromUserId, toUserId} -> {success, boostExpiresAt}
- `POST /api/messages` {conversationId, from, text, attachments[]} -> {messageId, createdAt}
- `POST /api/reports` {reporterId, targetId, reason, context: {messages[], photos[]}} -> {ticketId}
- `PUT /api/users/{id}` -> update profile
- `POST /api/uploads/signed-url` {filename, type} -> {url, key}

Include auth middleware (JWT + refresh tokens), RBAC for admin endpoints.

--- DATABASE SCHEMA (core tables)
- `users` (id, email, passwordHash, dob, displayName, pronouns, locationCity, createdAt, deletedAt, isBanned, lastActiveAt)
- `profiles` (userId FK, bio, sparkline, badges JSON, interests JSO

discovery.html

@@ -0,0 +1,353 @@
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Discovery - SparkMeet</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+        .btn-primary:hover {
+            background: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
+        }
+        .profile-card {
+            transition: all 0.3s ease;
+            cursor: grab;
+        }
+        .profile-card:active {
+            cursor: grabbing;
+        }
+        .swipe-left {
+            transform: translateX(-150%) rotate(-30deg);
+            opacity: 0;
+        }
+        .swipe-right {
+            transform: translateX(150%) rotate(30deg);
+            opacity: 0;
+        }
+        .swipe-up {
+            transform: translateY(-150%) scale(0.8);
+            opacity: 0;
+        }
+        .match-modal {
+            backdrop-filter: blur(10px);
+        }
+        .spark-animation {
+            animation: sparkle 1.5s ease-in-out infinite;
+        }
+        @keyframes sparkle {
+            0%, 100% { transform: scale(1) rotate(0deg); }
+            50% { transform: scale(1.2) rotate(180deg); }
+        }
+        .action-button {
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        }
+        .action-button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+        }
+        .action-button:active {
+            transform: scale(0.95);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 font-sans">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm sticky top-0 z-40">
+        <div class="max-w-6xl mx-auto px-4">
+            <div class="flex justify-between items-center py-3">
+                <a href="index.html" class="flex items-center space-x-2">
+                    <span class="text-2xl font-bold bg-gradient-to-r from-purple-600 to-pink-500 bg-clip-text text-transparent">SparkMeet</span>
+                </a>
+                <div class="flex items-center space-x-4">
+                    <button class="p-2 text-gray-600 hover:text-purple-600 rounded-full hover:bg-gray-100">
+                        <i data-feather="filter" class="w-5 h-5"></i>
+                    </button>
+                    <button class="p-2 text-gray-600 hover:text-purple-600 rounded-full hover:bg-gray-100">
+                        <i data-feather="message-circle" class="w-5 h-5"></i>
+                    </button>
+                    <button class="relative p-2 text-gray-600 hover:text-purple-600 rounded-full hover:bg-gray-100">
+                        <i data-feather="bell" class="w-5 h-5"></i>
+                        <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+                    </button>
+                    <a href="profile-builder.html" class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center text-white font-semibold">
+                        A
+                    </a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Discovery Area -->
+    <div class="max-w-md mx-auto px-4 py-6">
+        <div class="relative h-[70vh] mb-6">
+            <!-- Profile Cards Stack -->
+            <div id="card-stack" class="relative w-full h-full">
+                <!-- Card 1 -->
+                <div class="profile-card absolute inset-0 bg-white rounded-2xl shadow-lg overflow-hidden" data-user-id="1">
+                    <div class="relative h-3/4">
+                        <img src="http://static.photos/people/640x360/123" alt="Sarah" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
+                        <div class="absolute bottom-4 left-4 text-white">
+                            <h3 class="text-2xl font-bold">Sarah, 22</h3>
+                            <p class="text-sm opacity-90">✨ Photography & Coffee</p>
+                            <div class="flex items-center mt-2 space-x-2">
+                                <span class="px-2 py-1 bg-white/20 backdrop-blur rounded-full text-xs">Creative</span>
+                                <span class="px-2 py-1 bg-white/20 backdrop-blur rounded-full text-xs">Adventurous</span>
+                            </div>
+                        </div>
+                        <button class="info-btn absolute top-4 right-4 w-10 h-10 bg-white/20 backdrop-blur rounded-full flex items-center justify-center text-white hover:bg-white/30">
+                            <i data-feather="info" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-700 text-sm">"Capturing moments and chasing sunsets. Let's grab coffee and see where the conversation goes!"</p>
+                    </div>
+                </div>
+
+                <!-- Card 2 -->
+                <div class="profile-card absolute inset-0 bg-white rounded-2xl shadow-lg overflow-hidden" data-user-id="2">
+                    <div class="relative h-3/4">
+                        <img src="http://static.photos/people/640x360/456" alt="Alex" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
+                        <div class="absolute bottom-4 left-4 text-white">
+                            <h3 class="text-2xl font-bold">Alex, 24</h3>
+                            <p class="text-sm opacity-90">🎵 Music & Hiking</p>
+                            <div class="flex items-center mt-2 space-x-2">
+                                <span class="px-2 py-1 bg-white/20 backdrop-blur rounded-full text-xs">Musician</span>
+                                <span class="px-2 py-1 bg-white/20 backdrop-blur rounded-full text-xs">Outdoors</span>
+                            </div>
+                        </div>
+                        <button class="info-btn absolute top-4 right-4 w-10 h-10 bg-white/20 backdrop-blur rounded-full flex items-center justify-center text-white hover:bg-white/30">
+                            <i data-feather="info" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-700 text-sm">"Guitar, mountains, and good vibes. Looking for someone to share playlists and trail views."</p>
+                    </div>
+                </div>
+
+                <!-- Card 3 -->
+                <div class="profile-card absolute inset-0 bg-white rounded-2xl shadow-lg overflow-hidden" data-user-id="3">
+                    <div class="relative h-3/4">
+                        <img src="http://static.photos/people/640x360/789" alt="Jordan" class="w-full h-full object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"></div>
+                        <div class="absolute bottom-4 left-4 text-white">
+                            <h3 class="text-2xl font-bold">Jordan, 21</h3>
+                            <p class="text-sm opacity-90">🎮 Gaming & Tech</p>
+                            <div class="flex items-center mt-2 space-x-2">
+                                <span class="px-2 py-1 bg-white/20 backdrop-blur rounded-full text-xs">Gamer</span>
+                                <span class="px-2 py-1 bg-white/20 backdrop-blur rounded-full text-xs">Techie</span>
+                            </div>
+                        </div>
+                        <button class="info-btn absolute top-4 right-4 w-10 h-10 bg-white/20 backdrop-blur rounded-full flex items-center justify-center text-white hover:bg-white/30">
+                            <i data-feather="info" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                    <div class="p-4">
+                        <p class="text-gray-700 text-sm">"Coding by day, gaming by night. Let's team up in life and in co-op games!"</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex justify-center items-center space-x-6">
+            <button id="pass-btn" class="action-button w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-300" aria-label="Pass">
+                <i data-feather="x" class="w-8 h-8"></i>
+            </button>
+            <button id="like-btn" class="action-button w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white hover:bg-red-600" aria-label="Like">
+                <i data-feather="heart" class="w-8 h-8"></i>
+            </button>
+            <button id="superspark-btn" class="action-button w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center text-white hover:bg-purple-600 relative" aria-label="Super Spark">
+                <i data-feather="zap" class="w-8 h-8 spark-animation"></i>
+                <span class="absolute -top-1 -right-1 w-5 h-5 bg-yellow-400 rounded-full text-xs flex items-center justify-center font-bold">3</span>
+            </button>
+        </div>
+    </div>
+
+    <!-- Match Modal -->
+    <div id="match-modal" class="match-modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-2xl max-w-sm w-full p-6 text-center relative overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-pink-400 opacity-10"></div>
+            <div class="relative z-10">
+                <div class="mx-auto flex items-center justify-center h-16 w-16 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 mb-4">
+                    <i data-feather="heart" class="h-8 w-8 text-white"></i>
+                </div>
+                <h2 class="text-2xl font-bold mb-2">It's a Match! 🔥</h2>
+                <p class="text-gray-600 mb-6">You and Sarah both liked each other. Ready to spark a convo?</p>
+                <div class="flex space-x-3">
+                    <button id="send-message-btn" class="flex-1 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+                        Send Message
+                    </button>
+                    <button id="keep-swiping-btn" class="flex-1 px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                        Keep Swiping
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Profile Info Modal -->
+    <div id="info-modal" class="match-modal fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+        <div class="bg-white rounded-2xl max-w-sm w-full max-h-[80vh] overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-start mb-4">
+                    <div>
+                        <h3 id="info-name" class="text-xl font-bold"></h3>
+                        <p id="info-bio" class="text-gray-600 mt-1"></p>
+                    </div>
+                    <button id="close-info-btn" class="text-gray-400 hover:text-gray-600">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                <div id="info-details" class="space-y-3">
+                    <!-- Dynamic content will be inserted here -->
+                </div>
+                <div class="mt-6 flex space-x-3">
+                    <button class="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
+                        <i data-feather="message-circle" class="w-4 h-4 inline mr-2"></i>Message
+                    </button>
+                    <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors">
+                        <i data-feather="share" class="w-4 h-4"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+
+        // Card stack management
+        let currentCardIndex = 0;
+        const cards = document.querySelectorAll('.profile-card');
+        const totalCards = cards.length;
+
+        // Analytics tracking
+        function trackEvent(eventName, properties = {}) {
+            console.log('Analytics:', eventName, properties);
+            // In production, send to Mixpanel/Amplitude
+        }
+
+        // Card interaction functions
+        function handleSwipe(direction) {
+            const currentCard = cards[currentCardIndex];
+            if (!currentCard) return;
+
+            const userId = currentCard.dataset.userId;
+            
+            // Add swipe animation class
+            currentCard.classList.add(`swipe-${direction}`);
+            
+            // Track event
+            trackEvent(`discovery_${direction}`, { 
+                userId, 
+                method: direction === 'up' ? 'superspark' : direction 
+            });
+
+            // Remove card after animation
+            setTimeout(() => {
+                currentCard.style.display = 'none';
+                currentCardIndex++;
+                
+                // Check if we need to load more cards
+                if (currentCardIndex >= totalCards) {
+                    // In production, load more profiles
+                    console.log('No more profiles to show');
+                }
+            }, 300);
+
+            // Check for match (simulated)
+            if (direction === 'right' || direction === 'up') {
+                setTimeout(() => {
+                    if (Math.random() > 0.7) { // 30% chance of match
+                        showMatchModal();
+                    }
+                }, 500);
+            }
+        }
+
+        function showMatchModal() {
+            const modal = document.getElementById('match-modal');
+            modal.classList.remove('hidden');
+            trackEvent('match_created', { matchId: 'match_123' });
+            
+            // Animate match modal
+            anime({
+                targets: '#match-modal > div',
+                scale: [0.8, 1],
+                opacity: [0, 1],
+                duration: 500,
+                easing: 'easeOutElastic(1, .5)'
+            });
+        }
+
+        function showInfoModal(card) {
+            const modal = document.getElementById('info-modal');
+            const name = card.querySelector('h3').textContent;
+            const bio = card.querySelector('p').textContent;
+            const tags = Array.from(card.querySelectorAll('span')).map(span => span.textContent);
+            
+            document.getElementById('info-name').textContent = name;
+            document.getElementById('info-bio').textContent = bio;
+            
+            const detailsHtml = `
+                <div class="flex flex-wrap gap-2 mb-4">
+                    ${tags.map(tag => `<span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">${tag}</span>`).join('')}
+                </div>
+                <div class="space-y-2 text-sm">
+                    <div class="flex items-center">
+                        <i data-feather="map-pin" class="w-4 h-4 mr-2 text-gray-400"></i>
+                        <span>2 miles away</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i data-feather="briefcase" class="w-4 h-4 mr-2 text-gray-400"></i>
+                        <span>Student at University</span>
+                    </div>
+                    <div class="flex items-center">
+                        <i data-feather="music" class="w-4 h-4 mr-2 text-gray-400"></i>
+                        <span>Indie, Alternative</span>
+                    </div>
+                </div>
+            `;
+            
+            document.getElementById('info-details').innerHTML = detailsHtml;
+            modal.classList.remove('hidden');
+            trackEvent('discovery_info_open', { userId: card.dataset.userId });
+            
+            // Re-render feather icons in modal
+            feather.replace();
+        }
+
+        // Button event listeners
+        document.getElementById('pass-btn').addEventListener('click', () => handleSwipe('left'));
+        document.getElementById('like-btn').addEventListener('click', () => handleSwipe('right'));
+        document.getElementById('superspark-btn').addEventListener('click', () => handleSwipe('up'));
+
+        // Match modal buttons
+        document.getElementById('send-message-btn').addEventListener('click', () => {
+            trackEvent('profile_message_open', { matchId: 'match_123' });
+            window.location.href = 'chat.html?matchId=match_123';
+        });
+
+        document.getElementById('keep-swiping-btn').addEventListener('click', () => {
+            document.getElementById('match-modal').classList.add('hidden');
+        });
+
+        // Info modal
+        document.querySelectorAll('.info-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const card = btn.closest('.profile-card');
+                show