GoalCircle

As a frontend developer, implement the LoginHero section for the Login page. This component manages five state hooks: email, password, remember (checkbox), showPassword (toggle), and errors ({email, password}). Implements inline validation via validateEmail (checks non-empty and regex pattern) and validatePassword (checks non-empty and min length 6). onChange handlers for email and password clear the corresponding error on input. handleSubmit prevents default, runs both validators, sets errors on failure, or clears errors and proceeds to submit logic on success. Renders a full-section layout with decorative elements: lh-bg-glow radial background, lh-accent-ring stadium accent, and lh-ball-decor soccer ball glow. The form card (lh-card inside lh-card-wrapper) contains a brand header with ⚽ icon and GoalCircle logo text, a heading/subtitle, and a form with: an email field using lucide-react Mail icon with lh-error-input class on error, a password field using lucide-react Lock icon with Eye/EyeOff toggle for showPassword state, a remember-me checkbox, a forgot password link, a submit button, and a sign-up redirect link to /Signup. Styles from LoginHero.css.

As a frontend developer, implement the Footer section for the Login page. This is a static functional component that computes currentYear via new Date().getFullYear(). Defines four internal link arrays: productLinks (Live Scores, Circles, Predictions, Memory Reel, Schedule), companyLinks (Team, World Cup Hub, Notifications, Reactions), resourceLinks (Getting Started, Circle Timeline, Your Profile, Create Account), and legalLinks (Privacy Policy, Terms of Service, Cookie Policy, Data Rights). Renders a footer with ftr-root class containing a ftr-glow decorative element, a ftr-container with a 4-column ftr-grid (brand column with ⚽ logo, tagline, and three link columns mapped from their respective arrays), an ftr-divider, and an ftr-bottom section showing copyright with dynamic year. Note: this component likely already exists from previous pages — reuse if available, otherwise implement from Footer.css styles.

As a frontend developer, implement the HomeHero section for the Home page. This section features a full 3D stadium scene rendered via @react-three/fiber Canvas with custom components: Pitch (planeGeometry grass mesh), PitchMarkings (ring/plane/box geometries for field lines), BleacherRow (dynamically positioned seat meshes using useMemo around a circular radius), and CrowdSeat (animated sphereGeometry with useFrame pulsing scale and emissive color using STADIUM_COLORS array). Integrate OrbitControls and Text from @react-three/drei. Use gsap for entrance animations triggered on mount. Include a ChevronDown scroll indicator from lucide-react. Manage state with useState/useEffect/useRef/useMemo/useCallback hooks. The 3D canvas acts as the hero background with the stadium crowd animation creating a live atmosphere effect.

As a Backend Developer, integrate an external Football API (e.g., football-data.org or API-Football) to fetch live FIFA World Cup 2026 match data: live scores, match schedules, standings, team rosters, and player lists. Implement a caching layer (Redis or Supabase Edge Functions) to reduce API calls during peak traffic. Expose internal endpoints: GET /api/matches/live, GET /api/matches/schedule, GET /api/matches/:id, GET /api/teams, GET /api/teams/:id/players. Handle rate limiting and fallback data for API downtime.

As a Backend Developer, implement the Friend Circles CRUD API using Supabase: POST /api/circles (create invite-only group), GET /api/circles (list user's circles), GET /api/circles/:id (circle details + members), POST /api/circles/:id/invite (generate invite link/code), POST /api/circles/:id/join (join via invite code), DELETE /api/circles/:id/members/:userId (remove member), PATCH /api/circles/:id (update settings: notifications, privacy, role). Enforce RLS so only circle members can read circle data. Store circle metadata: name, isPrivate, ownerId, memberLimit, matchId. This API supports the Circles page, CircleRoom page, and YourCircles/DiscoverCircles sections.

As a Backend Developer, implement user profile management API: GET /api/profile (current user profile), PATCH /api/profile (update username, bio, location, favoriteTeam, country, preferences), GET /api/profile/stats (circles count, reels count, reactions count, predictions count, badges), GET /api/profile/notifications-settings, PATCH /api/profile/notifications-settings, GET /api/profile/sessions, DELETE /api/profile/sessions/:id (revoke session), POST /api/profile/export (trigger data export), DELETE /api/profile (account deletion with confirmation). Store profile: userId, username, bio, location, favoriteTeam, country, theme, privacyLevel, notificationPrefs JSON, matchAlerts JSON. Linked to Supabase Auth user.

As a Frontend Developer, implement global client-side state management using React Context + useReducer (or Zustand): (1) AuthContext — current user, session, loading state, login/logout actions. (2) MatchContext — current live match data, match events stream from Supabase Realtime subscription. (3) NotificationContext — unread count, notification list, mark-as-read actions. (4) CircleContext — active circle, members list, live reaction feed subscription. Set up React Query (TanStack Query) for server state: API caching, background refetch for live scores, optimistic updates for likes/reactions. Configure Supabase client singleton with auth session injection.

As a DevOps Engineer, set up a CI/CD pipeline (GitHub Actions or similar) for automated build, test, and deployment: (1) PR checks — lint, type-check (tsc --noEmit), unit test run. (2) Staging deploy — on merge to main, deploy frontend to Vercel preview, run Supabase migrations on staging DB. (3) Production deploy — on release tag, deploy to production with Supabase migrations, smoke tests. (4) Performance budget check — Lighthouse CI for Core Web Vitals (LCP, FID, CLS) given the heavy 3D/animation content. (5) Bundle size analysis to prevent regression on the heavy Three.js/GSAP stack.

As a frontend developer, implement the MatchInfo section for the Home page. This section renders a horizontally scrollable list of MatchCard components driven by a static MATCHES array containing World Cup 2026 fixture data (USA vs Mexico, Brazil vs England, Argentina vs Germany, France vs Japan) with statuses: 'live', 'upcoming', 'final'. Each MatchCard uses cardRef/scoreRef via useRef, entrance stagger animations via gsap, and a custom useCountdown hook that parses kickoffTime strings and counts down using setInterval. Cards display home/away team names with flag emojis, scores (null for upcoming), live minute indicator, venue via MapPin icon, and a goal flash animation when goalJustScored is true. Uses Clock, ChevronRight, Users, MapPin icons from lucide-react. Animate card entrances with staggerDelay prop.

As a frontend developer, implement the LiveScores section for the Home page. This section renders an 8-match list using a MATCHES array with statuses 'live', 'upcoming', and 'final', normalized via normalizeMatch() utility that handles null scores for upcoming matches. Uses framer-motion motion components for card animations and gsap ScrollTrigger (registered via gsap.registerPlugin) for scroll-driven reveal animations. Includes a statusBadgeClass() helper that maps status to CSS class names ('ls-live-badge', etc.). Each match row displays home/away team crests (flag emojis), team names, scores, minute indicator for live matches, date, and group label. Includes Zap, ArrowRight, Check icons from lucide-react. Uses useState, useRef, useEffect, useCallback, useMemo hooks for filter/display state management.

As a frontend developer, implement the FriendReactions section for the Home page. This section renders a REACTIONS array of 6 friend reaction cards with reactionTypes: 'voice', 'selfie', 'video', 'emoji' — each with a reactionTypeLabel, username, initials avatar, circle name, timestamp, isNew badge, and truncated text with expandable fullText. Uses AnimatePresence and motion from framer-motion for card enter/exit animations. Reaction type icons rendered via Mic, Camera, Video, Smile, Users, Play, Image from lucide-react mapped to reactionType values. State managed via useState for expanded card tracking and useRef/useEffect for animation triggers. Includes an ArrowRight CTA link. New reactions flagged with isNew show a pulsing badge indicator.

As a frontend developer, implement the QuickActions section for the Home page. This section renders three ACTION_CARDS ('Create Circle' → /Circles, 'Join Circle' → /CircleRoom, 'View Memory Reel' → /MemoryReel) each with PlusCircle, Users, or PlayCircle icons from lucide-react and color variants (primary/secondary/accent). Cards use cardRefs and iconRefs arrays managed via useRef for per-card gsap hover animations: on mouseEnter gsap.to animates card background to #3B82F6 and icon to rotation 15/y -8; on mouseLeave reverts to #111827/rotation 0. handleCardClick creates a DOM ripple span (class 'qa-card-ripple') positioned at click coordinates, appended to the card element, then removed on animationend, followed by a 200ms setTimeout navigation via window.location.href. Uses useCallback for all handlers.

As a frontend developer, implement the HomeCTA section for the Home page. This section uses a refs object (useRef with keys: root, headline, subheadline, features, buttons) and a setRef(key) factory function to assign DOM nodes. On mount, gsap.context() creates a ScrollTrigger-driven timeline (trigger: el.root, start: 'top 82%', toggleActions: 'play none none reverse') that sequentially animates headline (opacity/y, 0.65s power3.out), subheadline (-=0.35 overlap, 0.55s), features (-=0.3, 0.5s), and buttons (-=0.25, 0.5s) into view. Renders a FEATURES array of 3 pill spans (AI Memory Reels, Circle Sharing, Live Notifications) each with a colored dot (dotClass: 'ai'/'share'/'live'). Includes two-layer parallax background divs (hct-bg-layer at -0.15x scroll, hct-mid-layer at -0.3x scroll) with glow/dots decorative divs. CTA buttons link to /Signup. Registers ScrollTrigger plugin via gsap.registerPlugin.

As a frontend developer, implement the CirclesHeader section for the Circles page. This section renders a full 3D stadium scene using @react-three/fiber Canvas with OrbitControls and a custom StadiumMesh component built from Three.js primitives (torusGeometry for outer/inner rings, circleGeometry for the pitch disc, ringGeometry for center circle, planeGeometry for center line). GSAP animations drive continuous y-axis rotation on the outer ring (45s loop) and lights group (30s loop), plus a yoyo scale pulse on the arch group (2.5s sine.inOut). Six floating arch structures are positioned radially around the stadium at 1.45 radius using trigonometric placement. Stat badges using lucide-react icons (Plus, Users, Trophy, Star) overlay the 3D canvas. Import CirclesHeader.css for layout and positioning styles.

As a frontend developer, implement the NotificationHeader section for the Notification page. The component uses a useState hook to manage unreadCount (initialized to 7) and renders a <header> with class nh-root containing an nh-inner div. Inside, render a title row (nh-title-row) with an <h1> displaying 'Notifications' and a <span> badge (nh-badge) showing the unread count with an aria-label for accessibility. Below that, render an nh-subtitle paragraph describing real-time match event alerts (goals, red cards, penalties, VAR decisions, reactions from circles). Finally, render a decorative nh-accent-bar div with aria-hidden. Apply NotificationHeader.css styles including the accent bar gradient styling.

As a frontend developer, implement the WorldCupHero section for the WorldCup page. This section features a full 3D stadium silhouette rendered via @react-three/fiber Canvas with a `StadiumScene` component that uses `useFrame` to rotate a `groupRef` group of 28 arch segments across 3 concentric rings (radii 3.6, 4.3, 5.1) using `boxGeometry` with per-ring opacity/color (#3B82F6, #F59E0B, #FBBF24). Includes a central pitch plane (`circleGeometry`), center circle (`ringGeometry`), and center line (`planeGeometry`). A `ParticleField` component renders 380 ambient crowd dots using `Float32Array` positions. GSAP animations drive hero text entrance. Uses `useRef`, `useEffect`, `useState`, `useCallback` from React and imports `three` directly. Styles come from `WorldCupHero.css`.

As a frontend developer, implement the LiveMatches section for the WorldCup page. This section renders a horizontally scrollable carousel of match cards using `ChevronLeft`/`ChevronRight` (lucide-react) navigation buttons and a `useCountdown` custom hook that computes `hours`, `minutes`, `seconds` from a `targetISO` string via `useCallback` and `useState`/`useEffect` with a `setInterval`. The static `MATCHES` array contains 6 matches with statuses `live`, `upcoming`, and `finished`, each with `homeFlag`/`awayFlag` URLs from flagcdn.com, venue, group, minute, and score data. Live matches display a pulsing minute badge and scores; upcoming matches show countdown timers; finished matches show final scores. Uses `MapPin` and `Eye` icons. Styles come from `LiveMatches.css`.

As a frontend developer, implement the TeamPages section for the WorldCup page. This section renders a searchable, filterable grid of 24+ team cards using a `useMemo`-derived filtered list driven by a `useState` search query and a region filter. Each team card displays emoji flag, team name, FIFA rank, group, region, and an array of `keyPlayers`. The `AnimatePresence` + `motion.div` from framer-motion animate card entrance/exit transitions. A `Search` icon (lucide-react) decorates the search input. Filters include region tabs (South America, Europe, North America, Asia, Africa). Styles come from `TeamPages.css`.

As a frontend developer, implement the PredictionLeaderboard section for the WorldCup page. This section renders a tabbed leaderboard with three tabs (`week`, `alltime`, `phase`) driven by a `useState` active tab, each with a `count` label. The `LEADERBOARD_DATA` object provides ranked entries with `initials`, `accuracy`, `points`, `streak`, and `badges` arrays. Top 3 entries render podium-style with `Trophy` and `Medal` icons (lucide-react). Each row shows an avatar/initials circle, nation flag, accuracy bar, streak indicator using `Flame`/`Zap` icons, badge chips, and a points total. `TrendingUp` and `ArrowRight` icons are used for CTAs. Styles come from `PredictionLeaderboard.css`.

As a frontend developer, implement the UpcomingMatches section for the WorldCup page. This section renders 5 upcoming match cards (Semifinal, Quarterfinal, Round of 16) from a static `MATCHES` array. Each card features a `Countdown` sub-component that uses `useState` + `useEffect` with `setInterval` and a `digitsRef`/`prevRef` to track digit changes for GSAP flip animations on day/hour/minute/second digits. `formatCountdown` computes `d`/`h`/`m`/`s` from millisecond difference. `formatMatchDate` and `formatMatchTime` use `toLocaleDateString`/`toLocaleTimeString`. Matches flagged `near: true` get a highlighted treatment. GSAP drives card stagger entrance animations via `gsap` import. Uses `MapPin`, `ArrowRight`, `Calendar` icons from lucide-react. Styles come from `UpcomingMatches.css`.

As a frontend developer, implement the WorldCupCTA section for the WorldCup page. This section features a @react-three/fiber `Canvas` with a `ParticleField` component that creates 320 ambient particles via `THREE.BufferGeometry`, `THREE.PointsMaterial` (color `0xF59E0B`, additive blending), and `OrbitControls` from @react-three/drei. A cursor-reactive gradient background uses `mousemove` event listener updating `mousePos` state (`useState`) to shift radial gradient positions. Three GSAP pulse rings (`ring1Ref`, `ring2Ref`, `ring3Ref`) animate via a `gsap.timeline({ repeat: -1 })` with staggered `fromTo` scale (0→2.6) and opacity sequences. A `STATS` array of 4 items (48 Nations, 104 Matches, 12.4K Fans, 3.2M Reactions) renders with animated counters in a `statsRef` array. CTA buttons use `Plus` and `Users` icons; a secondary link uses `ArrowRight`. Styles come from `WorldCupCTA.css`.

As a frontend developer, implement the ProfileSidebar section for the Profile page. Build an <aside className='psb-root'> component that uses useState for expanded/activeSection/isMobile state and a useEffect with a resize listener to toggle mobile mode at 768px breakpoint. Render a mobile toggle bar with ChevronUp/ChevronDown icons (lucide-react) showing userInitials mini-avatar and user name. Below it, render a collapsible psb-content div (psb-expanded/psb-collapsed classes) containing a desktop psb-user-header with avatar, name (@jamesm_wc2026 handle), and a <nav> with NAV_SECTIONS array (Profile Info, Preferences, Account, Notifications with badge '3', Privacy) each with their respective lucide icons. handleNavClick sets activeSection and collapses on mobile. Keyboard accessible toggle via onKeyDown. Note: This sidebar may share structural patterns with Navbar from Login page. Import ProfileSidebar.css.

As a Backend Developer, implement real-time communication using Supabase Realtime (WebSockets) for live match events, goal alerts, and reaction feed updates. Set up Supabase channels for: (1) match event broadcasts (goals, red cards, penalties, VAR), (2) circle reaction feeds (new reactions pushed to circle members), (3) live score updates. Implement a server-side event processor that listens to Football API webhooks or polling and broadcasts to relevant channels. Ensure channels are scoped per circle_id to enforce privacy. This service feeds into the 30-second capture countdown notification.

As a Backend Developer, implement the reactions API for capturing and storing fan reactions: POST /api/reactions (create reaction with type: voice/selfie/video/text/emoji), GET /api/circles/:id/reactions (timeline feed for a circle), GET /api/reactions/:id, DELETE /api/reactions/:id. Handle media uploads (voice recordings, selfies, videos) via Supabase Storage with pre-signed URLs. Store reaction metadata: userId, circleId, matchId, matchMinute, eventType, reactionType, mediaUrl, textContent, emojis[], aiCaption, filterApplied. Enforce max file sizes (voice: 5MB, video: 50MB, image: 10MB). RLS ensures reactions are only visible to circle members.

As a Backend Developer, implement the predictions API: POST /api/predictions (submit prediction for a match), GET /api/predictions/my (user's prediction history with status won/lost/pending), GET /api/predictions/contests (active contests list), GET /api/predictions/leaderboard?scope=global|friends, POST /api/predictions/contests/:id/join. Store prediction data: userId, matchId, contestId, predictionType (winner/score/scorer/extraTime/penalties/chaos/live), value, odds, pointsEarned, status. Implement scoring logic that evaluates predictions against final match results fetched from Football API. Support dynamic prediction templates (group stage, knockout, high-profile, friend group custom predictions). Leaderboard aggregates points with streak tracking.

As a frontend developer, implement the CirclesActionBar section for the Circles page. This is a static call-to-action section rendering inside a `.cab-root` section with a `.cab-inner` container. It includes a decorative icon strip with `.cab-icon-dot` elements and a `.cab-icon-circle` containing an inline SVG compass/crosshair icon. A heading reads 'Build Your Circle' with a highlighted span, followed by supporting copy about invite-only groups. Two action buttons use lucide-react icons: a primary `.cab-btn-primary` linking to `/CircleRoom` (Plus icon, 'Create Circle') and a secondary `.cab-btn-secondary` linking to `/Circles` (Compass icon, 'Browse Circles'). A decorative `.cab-light-band` div provides a stadium-light accent. Import CirclesActionBar.css for all styles.

As a frontend developer, implement the YourCircles section for the Circles page. This section manages a `showEmpty` boolean useState to toggle between 6 hardcoded `sampleCircles` objects (with fields: id, name, memberCount, isPrivate, isActive, lastActivity, activityDisplay) and an empty state. Each circle renders in a `Card` sub-component that uses `useRef` and `useCallback` to track mouse position via `onMouseMove`, setting `--mouse-x` and `--mouse-y` CSS custom properties on the card element for a radial glow effect via `.yc-card-glow`. Cards display a Lock or Globe icon from lucide-react based on `circle.isPrivate`, an Active/Idle badge driven by `circle.isActive`, member count with Users icon, last activity with Clock icon, and a UserPlus action. Import YourCircles.css for card layout and hover glow styles.

As a frontend developer, implement the DiscoverCircles section for the Circles page. This is the most complex section, combining a Three.js WebGL globe background (rendered via raw canvas ref with useRef/useEffect, using THREE.SphereGeometry, THREE.LineSegments for lat/lon grid lines, and OrbitControls-style animation loop) with a filterable card carousel. State includes `activeCategory` (from 6 CATEGORIES objects with id/label), `currentIndex` for carousel pagination, and category-filtered `DISCOVER_CIRCLES` data (8 circles with name, badge/badgeType, tags array, description, members count, avatarColors/avatarInitials arrays, matchActivity, isPublic). Category filter tabs scroll horizontally. ChevronLeft/ChevronRight buttons advance the carousel. Each circle card renders avatar stack from avatarColors/Initials, a badge (Trending/Nearby/Public), tag pills, description, member count, matchActivity, and a Lock/Globe icon from lucide-react. Import DiscoverCircles.css for globe canvas positioning, category tab styles, and card carousel layout.

As a frontend developer, implement the CircleSettings section for the Circles page. This section manages 6 pieces of useState: `matchNotifications` (true), `goalAlerts` (true), `friendReactions` (false), `publicProfile` (false), `showOnlineStatus` (true), and `preferredRole` ('member'). A `toggleKnobsRef` array ref collects toggle knob DOM elements via a `registerKnob` useCallback. A useEffect registers GSAP mouseenter/mouseleave handlers on all knobs for a scale(1.18) pop animation using `back.out(2.5)` ease; cleanup removes event listeners. The settings object defines two groups — notifications (match events, goal reaction reminders, friend reactions) and privacy (public profile, show online status) — each rendered as toggle rows with paired on/off lucide-react icons (Bell/BellOff, Eye/EyeOff). A `preferredRole` select uses `roleOptions` (member, captain, co_host, spectator) with a ChevronDown icon and UserCheck/Users icons. A privacy links list renders Shield, FileText, Lock icons with ExternalLink. Import CircleSettings.css for toggle, select, and section card styles.

As a frontend developer, implement the NotificationFilters section for the Notification page. The component defines a FILTERS constant array with 6 filter objects (all, goals, redCards, penalties, varDecisions, matchEnd), each with key, label, count, and dotColor properties. Uses useState for activeFilter (default 'all') and dropdownOpen (default false), plus useCallback hooks for handleSelect (sets activeFilter and closes dropdown) and toggleDropdown. Renders a desktop pill bar (nf-bar) with role='group' mapping each filter to a button (nf-pill / nf-pill--active) containing a colored dot (nf-pill-dot with inline background style), label text, and a count badge (nf-badge). Also renders a mobile dropdown with a trigger button (nf-dropdown-trigger) showing active filter's dot color and label plus a ChevronDown icon (lucide-react) that rotates via nf-dropdown-chevron--open class. When dropdownOpen, renders an nf-dropdown-menu div with role='listbox' listing all filters as buttons (nf-dropdown-item / nf-dropdown-item--active) with Check icon (lucide-react) for the selected item and aria-selected attributes. Apply NotificationFilters.css (4960 chars of styles).

As a frontend developer, implement the ProfileHeader section for the Profile page. Build a component using useRef (ringCanvasRef) and useEffect to mount a Three.js scene with a WebGLRenderer (alpha: true, antialias: true). Create a TorusGeometry(1.0, 0.04, 32, 80) outer ring with MeshBasicMaterial (color 0x3B82F6, opacity 0.55) animated via ring.rotation.z += 0.003. Add a dotsGroup with 6 SphereGeometry(0.035) dots at computed angles using colors [0xF59E0B, 0x3B82F6, 0xFBBF24, 0xEF4444], counter-rotating at -0.0025. Add an inner faint TorusGeometry(0.85, 0.02) ring in amber. Animate entrance with gsap.fromTo on ring/innerRing scale using elastic.out easing. Display PROFILE object data (Marcus Rivera, @marcus_r, friendCircles: 7, memories: 142, predictions: 38) with Users and PenLine lucide icons. Handle resize to update renderer size. Cleanup cancelAnimationFrame and removeEventListener on unmount. Import ProfileHeader.css.

As a frontend developer, implement the ProfileBasicInfo section for the Profile page. Build a form component with useState for formData (username, bio, location, favoriteTeam, country from INITIAL_DATA), saved boolean, and dirtyFields object. Implement isFieldDirty callback comparing formData fields to INITIAL_DATA, handleChange updating formData and dirtyFields, handleSave setting saved=true and clearing dirtyFields with a 3s timeout via setTimeout, and handleReset restoring INITIAL_DATA. Render a pbi-card with a header showing User and Flag lucide icons, country badge with COUNTRY_FLAGS emoji lookup, and pbi-form with labeled input fields for username (User icon), bio textarea, MapPin location input, Shield favoriteTeam select (TEAM_OPTIONS array of 16 teams), Globe country select. Show Save (Save icon) and Reset buttons conditionally on hasChanges. Display Check icon on saved state. Import ProfileBasicInfo.css.

As a frontend developer, implement the ProfileStats section for the Profile page. Build a component using sectionRef, cardRefs, badgeRefs, and valueRefs (all useRef arrays) with an animated.current guard flag. In useEffect, create a gsap.context() with a ScrollTrigger timeline (trigger: sectionRef, start: 'top 85%') that stagger-animates cardRefs (opacity 0→1, y 28→0, stagger 0.12, power2.out) and counter-animates numeric values in valueRefs. Render 4 STAT_CARDS (circles: 12, reels: 47, reactions: 2314, predictions: 156) with Users/Film/Heart/Trophy lucide icons, accent styling, trend badges (+3 this month etc.), and rank label (#42 Global). Below cards, render a badge grid of 12 BADGES using Star/Award/Flame/Shield/Zap/Crown/Trophy lucide icons with color classes (gold, purple, red, blue, green, silver) and earned dates. Import ProfileStats.css.

As a frontend developer, implement the ProfilePreferences section for the Profile page. Build a complex preferences form with useState for: dirty/saved booleans, notificationFreq (bool), matchStartAlert (bool), halftimeAlert (bool), reactions object (voice/selfie/video/text/emoji all true), privacyLevel ('friends'), theme ('dark'), and matchAlerts object (goals/red_cards/penalties/var/fulltime/extra_time). Implement markDirty callback, handleToggleReaction and handleToggleAlert callbacks updating respective state objects, handleSave with 2500ms auto-clear, handleReset restoring all defaults. Render sections using Bell/Mic/Shield/Trophy/Palette/Save/RotateCcw/Check/ChevronDown/ScrollText lucide icons: (1) Notification frequency toggles for matchStartAlert and halftimeAlert, (2) REACTION_OPTIONS toggle list (5 types with emoji labels), (3) PRIVACY_LEVELS select dropdown (4 options), (4) THEME_OPTIONS selector (dark/light/system with emoji icons), (5) MATCH_ALERTS toggle list (6 alert types with emoji). Show Save and Reset buttons with dirty state guard and Check icon on saved. Import ProfilePreferences.css.

As a frontend developer, implement the ProfileAccount section for the Profile page. Build a large account management form with multiple useState hooks: email/emailVerified, countryCode/phone/phoneVerified, connectedAccounts (CONNECTED_ACCOUNTS array with google/apple/facebook/twitter entries with iconClass variants), currentPassword/newPassword/confirmPassword, showCurrent/showNew/showConfirm (Eye/EyeOff lucide toggles), twoFAEnabled. Implement getPasswordStrength() scoring function checking length>=8/12, uppercase, digits, special chars returning 'weak'/'fair'/'good'/'strong'. Render STRENGTH_CONFIG-driven strength bar with dynamic fill classes (pac-strength-fill--weak/fair/good/strong). Render SESSIONS array (3 sessions: MacBook/iPhone/iPad with device, location, IP, lastActive, isCurrent badge, emoji icons) with revoke buttons for non-current sessions. Render CONNECTED_ACCOUNTS list with connect/disconnect toggle per account using pac-connected-icon--google/apple/facebook/twitter CSS classes. Include X icon (lucide) for disconnect actions. Import ProfileAccount.css.

As a frontend developer, implement the ProfileNotifications section for the Profile page. Build a component with useState for toggles object (goal_alert: true, match_schedule: true, friend_circle: true, memory_reel: true, prediction_reminder: false), frequency slider (0–4 mapped to FREQ_LEVELS: Off/Low/Med/High/Real-time), and saved boolean. Use useRef for sectionRef and toggleRowsRef array. In useEffect, run a gsap.context() stagger animation (opacity 0→1, y 20→0, duration 0.5, stagger 0.08, power2.out) on toggleRowsRef rows. Render three NOTIFICATION_TOGGLES categories (match/social/ai) each with their icon (Bell/Users/Sparkles lucide), pnt-cat-icon--match/social/ai CSS classes, title, description, and nested toggle items. Each item has an id-keyed boolean toggle switch. Render a frequency range input slider with FREQ_LEVELS labels. handleSave sets saved=true with 2500ms timeout. Show Check icon on saved state. Import ProfileNotifications.css.

As a frontend developer, implement the ProfileDangerZone section for the Profile page. Build a component with useState for showModal (bool), deleteInput (string), deleteInputFocused (bool), and exporting (bool). Use sectionRef and cardRefs array. In useEffect, run gsap.fromTo on '.pdz-card' elements (opacity 0→1, y 24→0, duration 0.45, stagger 0.1, power2.out). Render two pdz-card elements: (1) Export Data card with Download lucide icon, description of GoalCircle data archive, and handleExportData triggering a 2-second exporting spinner state. (2) Delete Account card with Trash2 lucide icon and a handleOpenModal button. Implement a Framer Motion AnimatePresence modal using motion.div with modalBackdrop (opacity fade) and modalPanel (spring scale/y animation, stiffness 400, damping 30) variants. Modal contains DELETE_CONFIRM_TEXT ('delete my account') typed confirmation input with deleteInputFocused state, isInputMatch guard disabling confirm button, handleConfirmDelete and handleCloseModal handlers. Use AlertTriangle and Shield lucide icons in headings. Import ProfileDangerZone.css.

As a frontend developer, implement the CircleRoomHeader section for the CircleRoom page. Build the `<header className='crh-root'>` component using lucide-react icons (ArrowLeft, Users, Zap). Render a back navigation row with an `<a href='/Circles'>` link and breadcrumb trail (Home / Circles / The Squad). Below that, render a `crh-card` containing: a live event strip with an animated `crh-live-dot` pulse and a GOAL ALERT event badge using the Zap icon; a card body with circle info row showing a soccer emoji icon and '⚽ The Squad' label with Users icon member count; a match score block with `crh-teams-row` showing Brazil (🇧🇷) vs Germany (🇩🇪) with `crh-score-digit` elements ('2' : '1') and a `crh-elapsed` element showing '72′'; and a bottom `crh-meta-row` with match label 'Group Stage · Match 23' and a 'Group E' stage badge. This component is static (no state hooks). May reuse breadcrumb/nav patterns from Circles pages.

As a frontend developer, implement the ReactionHeader section for the Reaction page. This section renders a full-width header with an animated 30-second countdown timer using requestAnimationFrame (rafRef, startTimeRef) for high-precision ticking. Key elements include: an ambient red glow div (rh-ambient), scanline texture overlay (rh-scanlines), a pulsing event badge with live dot and MATCH_DATA.eventType label, a matchup row showing homeTeam/awayTeam with flag emojis and team names, an SVG circular progress ring (circumference = 2π×44, dashOffset computed from progressFraction) that turns urgent when secondsLeft <= 10, and an isExpired state that applies the 'rh-expired' class. Uses Zap and Clock from lucide-react. Component must cleanup cancelAnimationFrame on unmount.

As a frontend developer, implement the ScheduleHero section for the Schedule page. This section renders a full-bleed hero (`sh-root`) with animated stadium light rays (16 `sh-ray` divs with gold/red/blue color variants), a glow wash layer (`sh-glow-center` and `sh-glow-bottom`), decorative SVG-style field lines (`sh-field-circle` and `sh-field-half`), and a content block featuring a trophy emoji, an h1 headline with a highlighted span (`sh-headline-highlight`), a subhead paragraph, and a stats row. The stats row maps over the STATS array ([{value:'104',label:'Total Matches'},{value:'16',label:'Host Cities'},{value:'48',label:'Teams'}]) using React.Fragment with dividers between entries, each rendered as `sh-stat` with `sh-stat-value` and `sh-stat-label` spans. A CTA anchor (`sh-cta`) links to /WorldCup with an arrow span. All decorative elements use aria-hidden. Note: check if a shared Navbar component exists from the WorldCup page before creating a new one.

As a Backend Developer, implement push notification delivery using a service such as Firebase Cloud Messaging (FCM) or Web Push API. Set up: (1) device token registration endpoint POST /api/notifications/register, (2) notification trigger logic that fires within 30 seconds of a goal/red card/penalty/VAR event, (3) notification templates for each event type (goal, card, VAR, match start, memory reel ready), (4) user notification preferences storage and filtering so users only receive alerts for matches and teams they follow. Integrate with the WebSocket event service to trigger push when a match event arrives.

As an AI Engineer, implement the AI content generation pipeline: (1) Match summary generation — after match ends, call LLM API (OpenAI/Claude) with match events and user reactions to produce a narrative summary. (2) Memory Reel generation — POST /api/memory-reel/generate collects all reactions (voice/video/photos/text) for a matchId+circleId, sequences them by matchMinute, and assembles metadata for a compiled reel (stored in Supabase, media assembled via ffmpeg or a video processing service). (3) AI caption generation — POST /api/reactions/:id/caption generates a social-ready caption for a reaction using vision/text AI. (4) AI highlights endpoint — GET /api/circles/:id/highlights returns top moments ranked by reaction density and event significance. Store generated content in ai_content table with type, matchId, circleId, content, generatedAt.

As a frontend developer, implement the NotificationList section for the Notification page. The component imports multiple lucide-react icons (BellOff, Clock, Flame, Flag, Goal, RectangleHorizontal, Eye, Mic, Camera, AlertTriangle, CircleDot) and gsap for animations. Defines NOTIFICATION_DATA array of 7 notification objects each with id, type (goal/card/var/penalty/final/general), title, match, score, minute, timestamp (Date.now() offsets), read boolean, hasTimer boolean, eventIcon emoji, teamFlags emojis, badge ('live'/'recent'/'past'), and description. Defines EVENT_TYPE_CONFIG mapping event types to lucide icon components, cssClass, and label strings. Uses useState for the notification list and read state management, useEffect for gsap entrance animations on notification cards, useRef for card element refs, and useCallback for mark-as-read and dismiss interactions. Renders a scrollable notification list where each card displays: event type icon (colored per EVENT_TYPE_CONFIG cssClass), team flags, match title, score, minute, timestamp, badge chip (live/recent/past), description text, and a live countdown timer for items with hasTimer=true. Unread items have a distinct visual treatment. Empty state renders BellOff icon with messaging. Apply NotificationList.css (8702 chars of styles) and gsap-powered stagger entrance animations.

As a frontend developer, implement the CircleRoomLive section for the CircleRoom page. Build the component using `useState`, `useEffect`, and `useMemo` from React plus lucide-react icons (Clock, Play, Activity, Timer). Implement a `useMatchCountdown` custom hook that uses `setInterval` to tick a countdown from ~182 seconds, with a `formatCountdown(seconds)` helper that formats as 'Xm Ys' or 'Ys'. Define static `MATCH_EVENTS` array (8 events: goals, yellow-card, red-card, var, substitution) with fields id, minute, type, team, desc, player, detail. Define `HOME_TEAM` (France/FRA) and `AWAY_TEAM` (Brazil/BRA) constants with name, code, record fields. Implement `EVENT_TYPE_MAP` lookup object mapping event types (goal, yellow-card, red-card, var, penalty, substitution) to badge text, badgeClass, and markerClass CSS identifiers. Render a live timeline of match events styled per event type with team markers, minute indicators, player names, and detail text. Display the countdown timer using the custom hook. Apply CSS from CircleRoomLive.css (10873 chars).

As a frontend developer, implement the CircleReactionsFeed section for the CircleRoom page. Build the component using `useState` from React and lucide-react icons (MessageSquare, Mic, Camera, Video, Smile, ChevronDown, Zap, Play, Pause). Define a `REACTIONS` array of 6 entries with fields: id, friend (name, avatar, initials, online bool), type (voice/selfie/video/text/emoji), content, duration, timestamp, isNew, isTrending, and emojis array (icon + count). Define a `FILTERS` array with keys: all, voice, selfie, video, text, emoji. Implement `formatTimeAgo(timestamp)` and `getReactionTypeLabel(type)` helpers, plus `getReactionTypeIcon(type)` which returns the appropriate lucide icon (Mic/Camera/Video/MessageSquare/Smile) per type. Render a filterable reaction feed with filter pill tabs, each reaction card showing avatar initials (with online dot indicator), isNew/isTrending badges, reaction type icon and label, content/duration, emoji reaction counts with icons, and a Play/Pause toggle for audio/video types. Manage active filter state with `useState`.

As a frontend developer, implement the CircleParticipants section for the CircleRoom page. Build the component using `useState`, `useRef`, `useCallback`, and `useEffect` from React plus lucide-react icons (Users, ChevronRight, X). Define a `PARTICIPANTS` array of 9 members with fields: id, name, initials, role (Circle Host / Member), status (reacting / online), reactionCount, hot (boolean for fire badge), and reactions array (emoji, text, time). Manage `activeParticipant` state (null or participant id) to show/hide a slide-out or modal detail panel listing that participant's reactions. Manage `scrollEnd` state tied to a `scrollRef` via a scroll event listener using `useEffect` and `useCallback`. Render a horizontal or vertical scrollable participant list with avatar initials, online/reacting status indicator, reaction count badge, and a 🔥 hot badge for participants with `hot: true`. Clicking a participant opens a detail panel (using X icon to close via `setActiveParticipant(null)`) showing their recent emoji reactions with text and timestamps.

As a frontend developer, implement the CircleActions section for the CircleRoom page. Build the component using `useState`, `useEffect`, `useCallback`, and `useRef` from React plus lucide-react icons (Mic, Camera, Video, MessageSquare, Smile, Share2, Settings, Bell, X, Clock, Globe, Users, Lock, Check). Define `QUICK_ACTIONS` array (5 items: voice/selfie/video/text/emoji with icon components, cta bool, and keyboard shortcut char) and `SHARE_TARGETS` array (circle/public/private with icon and desc). Manage state: `shareEnabled` bool, `shareTarget` string, `showSharePanel` bool, `recordingKey` string|null (active recording), `showNotifPrompt` bool, `countdown` number (starts at 30), `countdownActive` bool. Implement a 30-second countdown `useEffect` with `setInterval` for goal-scored urgency window. Implement `handleAction(key)` to toggle `recordingKey` on/off. Implement `handleShareToggle` to toggle `shareEnabled` and `showSharePanel`. Implement `handleShareTarget(target)` to update `shareTarget`. Implement `dismissNotif` and `enableNotifications` (calls `Notification.requestPermission()` browser API). Implement `handleBarMouseMove` on a `barRef` that reads button `getBoundingClientRect()` and sets CSS custom properties for cursor-reactive shine on `.ca-btn` elements.

As a frontend developer, implement the ReactionCapture section for the Reaction page. This section provides a multi-tab capture interface with four tabs (voice, selfie, video, text/emoji) driven by TABS config and lucide-react icons (Camera, Mic, Video, MessageSquare, Zap, RotateCcw, Send, Smile). The Voice tab renders a VoiceWaveform canvas component that draws 64 animated bars using requestAnimationFrame — bars animate between idle (height 4–12px) and active recording (height up to 60px) with a tri-color gradient (red/amber/blue when recording, blue shades when idle), using useRef for barsRef and animRef. The Text/Emoji tab shows an EMOJI_OPTIONS grid (12 emoji choices) and a textarea with 280-char CHAR_LIMIT counter. All tabs track recording state and elapsed time via formatTime helper. Uses useCallback and useEffect for canvas resize handling with devicePixelRatio scaling.

As a frontend developer, implement the FilterBar section for the Schedule page. This section manages four pieces of state via useState: `activeStage` (default 'all'), `activeRegion` (default 'all'), `searchQuery`, and `searchFocused`. It renders a stage pill selector from the STAGES array (7 entries: all, group, round16, quarter, semi, final, third) with match counts from STAGE_COUNTS, a region dropdown from the REGIONS array (6 entries), and a search input wrapper (`searchWrapRef`) with a cursor-reactive glow div (`searchGlowRef`) that tracks mousemove/mouseleave/mouseenter events via useEffect to dynamically set glow position and opacity based on focus state. A second useEffect attaches a 3D tilt effect to the active stage pill (`activePillRef`) using CSS perspective transforms. A computed `filterCount` badge shows the number of active filters. A clear-all control conditionally renders when `hasActiveFilters` is true. All event listeners are cleaned up in useEffect return functions with passive options where appropriate.

As a frontend developer, implement the UpcomingMatches section for the Schedule page. This section imports gsap, lucide-react icons (MapPin, ArrowRight, Calendar), and renders a list of 5 hardcoded match objects (arg-bra, fra-eng, esp-ger, por-ned, usa-mex) with home/away team names, flag emojis, stage labels, venue, city, and a kickoff Date object. It includes a `Countdown` sub-component that uses useState and useEffect with a 1-second setInterval to compute days/hours/minutes/seconds remaining via `formatCountdown(ms)`, with a `digitsRef` and `prevRef` to detect digit changes and trigger GSAP flip animations on individual digit elements. Helper functions `formatMatchDate` and `formatMatchTime` use toLocaleDateString/toLocaleTimeString with locale 'en-US'. Match cards display a 'near' badge for the first entry and a compact countdown in list view, expanding to a full countdown grid on selection. Note: a similarly named UpcomingMatches component exists in WorldCup page (task c5656ac0) — confirm whether it can be reused or if this Schedule-specific version has distinct data and layout.

As a frontend developer, implement the LiveScores section for the Schedule page. This section imports `@react-three/fiber` Canvas, gsap, and uses useState, useEffect, useRef, useCallback, and useMemo. It renders a 3D particle field via the `StadiumParticles` sub-component that creates a Float32Array of 200 particles positioned randomly in a 14×8×6 space using useMemo, with a `meshRef` for the points mesh and `groupRef` for the group. Goal events trigger a GSAP scale pulse (1→2.5→1, yoyo repeat:1) on groupRef and a material color/opacity animation on meshRef. The main component renders 5 simulated live match cards from the MATCHES array (BRA/GER, ARG/FRA, ENG/ESP, POR/NED, JPN/MAR) with homeScore/awayScore, live minute indicator, possession bar, stats (shotsOnTarget, corners, fouls), recentGoal scorer callout, and a FLAG_EMOJI lookup map. A `goalEvents` state array is populated by detecting score changes, triggering the 3D particle burst. The Canvas is layered as a background behind the match cards using absolute positioning.

As a frontend developer, implement the MatchDetails section for the Schedule page. This is the most complex section, using useState to manage the selected match index and active tab. It renders a carousel of 5 detailed match objects (BRA/ARG, and others) navigated via ChevronLeft/ChevronRight lucide icons. Each match card displays: a status badge (finished/live/upcoming), home and away team info with flag emojis and color-coded team codes (`md-home`/`md-away`), a score display, venue/date/time/group metadata using MapPin, Calendar, Clock, Users icons. Below the score is a tab bar with tabs for Events, Lineups, Stats, and H2H. The Events tab renders a timeline of match events (goal ⚽, yellow 🟨, sub 🔄) with minute stamps. The Lineups tab renders `homeRoster` and `awayRoster` arrays (11 players each) with jersey number, name, position, and captain flag. The Stats tab renders a possession bar and stat rows for shots, shotsOnTarget etc. The H2H tab renders a 5-entry head-to-head history table with `h2hSummary` win/draw/loss counts and `homeForm`/`awayForm` arrays rendered as colored W/D/L badges. Lucide icons Sparkles, Zap, Star are used for decorative highlights. AI prediction percentage is shown with a Sparkles icon.

As a frontend developer, implement the ScheduleStats section for the Schedule page. This section imports gsap and lucide-react icons (Trophy, Calendar, Users, Zap, TrendingUp, TrendingDown, Flame, Target, Crown). It uses useState for `lightStyle` and `lightsActive`, and useRef for `rootRef` and `valueRefs` (an array ref). On mount, a GSAP context animates numeric stat card values from 0 to their target using `valueRefs.current.forEach` — each element reads `el.dataset.target` and skips entries with `el.dataset.isText` set. The 6 STAT_CARDS array includes entries for total matches (64), teams (32), knockout countdown (8), most-watched team ('BRA' — text value), predictions (247K), and completed matches (48), each with icon, iconClass, accentClass, trend string, trendDir ('up'/'neutral'), and optional badge string. A second useEffect tracks cursor mousemove on `rootRef` to animate 12 stadium light rays (`rayCount = 12`) reactively via `lightStyle` state. A LEADERBOARD array of 5 entries is rendered with rank, username, score, and `isTop` flag for gold/silver/bronze styling.

As a frontend developer, implement the MatchHeader section for the CircleTimeline page. This section renders a live match header using a static MATCH data object (Brazil vs Portugal, WC2026 Round of 16) and a MATCH_EVENTS array. Key implementation details: (1) useState hooks for matchMinute (starts at 74) and displayStatus (starts at 'live'); (2) useEffect with setInterval firing every 60000ms to simulate a live match clock ticking, capping at 95 minutes and transitioning displayStatus to 'ended'; (3) useMemo hooks to derive statusBadgeClass ('mh-status-live', 'mh-status-ended', 'mh-status-upcoming') and statusLabel ('LIVE', 'FULL TIME', 'UPCOMING') based on displayStatus; (4) homeHighlighted/awayHighlighted booleans for score-based team highlighting; (5) getEventEmoji() and getEventClass() helpers mapping event types (goal ⚽, card-yellow 🟨, card-red 🟥, var 📺) to CSS classes like 'mh-event-goal', 'mh-event-card-yellow'; (6) renders team flags, score display, status badge, stadium/location/attendance metadata, and an event icon row from MATCH_EVENTS. Styles from MatchHeader.css (8931 chars). Note: this is the entry section for the CircleTimeline page and chains from CircleRoom page.

As a frontend developer, implement the MemoryReelHeader section for the MemoryReel page. This section renders a `mrh-root` section with a decorative SVG stadium silhouette background (`mrh-stadium-bg`) featuring three concentric ellipses and two tiers of dynamically generated crowd dots (80 upper-tier, 64 lower-tier) computed via trigonometric positioning. The main content displays an AI Memory Reel label badge, match stage ('Quarter Final'), home/away team matchup cards with emoji flags (🇦🇷 ARG vs 🇵🇹 POR), final score (3–2), match metadata (date, time, venue, attendance), a match summary paragraph with inner HTML rendering a `<strong>27 reactions</strong>` callout, and a horizontal scrolling stat pills row rendering five pills (⚽ Goals, 🟨 Yellow Cards, ⏱️ Added Time, 🎯 Shots on Target, 👥 Attendance). Uses static `matchData` and `statPills` data objects. No state or API calls — purely presentational with CSS-driven layout.

As a frontend developer, implement the TeamPageHero section for the TeamPage using Three.js. This section mounts a WebGL renderer via a `mountRef` useRef hook inside a useEffect. It creates a scene with a PerspectiveCamera (FOV 60, z=8) and a WebGLRenderer with alpha/antialias and devicePixelRatio clamped to 2. Two particle systems are constructed: (1) a primary ring of 180 particles using BufferGeometry with `position`, `color`, and `size` attributes — particles are color-lerped across three stops (#3B82F6 → #F59E0B → #FBBF24) and placed on a warped orbital ring using sine/cosine offsets; rendered with PointsMaterial using AdditiveBlending and vertexColors; (2) a second orbit ring of 120 points. The renderer animates continuously. Import and apply TeamPageHero.css for layout styling. Includes proper cleanup of renderer and animation frame on unmount.

As a Tech Lead, verify end-to-end integration between the Circles page frontend sections (YourCircles: baadff88, DiscoverCircles: 97aa1207, CirclesActionBar: 9b339732, CircleSettings: e9298e0c) and the Friend Circles backend API (temp_backend_circles_api). Ensure circle creation, invite flow, join via code, and settings updates persist correctly. Confirm RLS policies prevent unauthorized circle data access. Validate that the Circles page loads the authenticated user's circles and available public/discoverable circles from the API.

As a Tech Lead, verify end-to-end integration between the Profile page frontend sections (ProfileHeader: dde8a998, ProfileBasicInfo: 43562dda, ProfilePreferences: 5334c531, ProfileStats: 53ed1eec, ProfileNotifications: 8203b585, ProfileAccount: c2055b6f, ProfileSidebar: 5fa74139, ProfileDangerZone: 0db07550) and the User Profile backend API (temp_backend_profile_api). Confirm profile data loads and updates persist correctly. Validate notification preferences toggle changes are reflected in push notification delivery. Confirm session revocation works. Validate the export and account deletion flows complete end-to-end. Ensure real stats (circles, reactions, predictions) are fetched from backend aggregations.

As a frontend developer, implement the ReactionPreview section for the Reaction page. This section provides a playback preview UI for captured reactions with five tabs (voice, selfie, video, text, emoji) via CAPTURE_TABS and lucide-react icons (Play, Pause, SkipBack, SkipForward, Mic, Camera, Video, MessageSquare, Smile, RotateCcw, Check, Edit3). The core visual is a WaveformCanvas component rendering 64 bars with per-bar baseHeight, phase, and speed properties using barsRef; bars animate with sinusoidal amplitude modulation (phaseRef increments by 0.04 per frame) when isPlaying=true, using a blue gradient (rgba 59,130,246 stops) with shadowBlur glow. Canvas uses ResizeObserver for responsive sizing with devicePixelRatio support. Transport controls manage isPlaying state. Includes a confirm/re-record action row with RotateCcw and Check buttons.

As a frontend developer, implement the TimelineControls section for the CircleTimeline page. This section provides filter pills, a sort toggle, and a search bar for the reactions timeline. Key implementation details: (1) useState hooks for activeFilter (default 'all'), sortOrder ('newest'/'oldest'), and searchQuery; (2) pillsRef array ref for GSAP targets; (3) GSAP stagger reveal on mount — gsap.to(pillsRef.current) with opacity/y animation, duration 0.45, stagger 0.06, ease 'power2.out'; (4) second useEffect watches activeFilter and fires gsap.fromTo on '.tc-filter-pill.tc-active' with scale 0.94→1, duration 0.3, ease 'back.out(2)'; (5) FILTER_OPTIONS array with keys: all, voice, selfie, video, text, emoji (with emoji icons); (6) filter pills rendered with aria-pressed, tc-active class toggling, tc-count badge on 'all' showing 24; (7) ArrowUpDown lucide icon for sort toggle button; (8) Search/X lucide icons for search input with clear button; (9) useCallback for handleFilterClick, handleSortToggle, handleSearchChange, handleSearchClear. Styles from TimelineControls.css (6247 chars). Depends on gsap and lucide-react packages.

As a frontend developer, implement the ReactionCards section for the CircleTimeline page. This is the core feed component rendering friend reactions with rich media support. Key implementation details: (1) REACTIONS static array of 6 items with fields: id, friendName, friendAvatar (pravatar URLs), timestamp, matchMinute, matchEvent, reactionType (voice/selfie/video/text/emoji), content (type-specific: duration for voice, thumbnail URLs for selfie/video, text for text, emojis array for emoji), likes, liked, replies; (2) reactionIcons map using lucide icons Mic, Camera, Play, MessageSquare, Smile (size={11}); (3) badgeClassMap mapping reactionType to CSS classes ('rc-badge-voice', etc.); (4) useState for reactions array and sharedId (for share feedback state); (5) loadingMore state ref via useRef and endRef for scroll; (6) toggleLike useCallback mutates reactions state toggling liked boolean and incrementing/decrementing likes count; (7) card renders: avatar img, friendName, timestamp, matchMinute + matchEvent badge, reactionType badge with icon, type-specific content area (voice player UI, selfie/video thumbnail with Play overlay, text bubble, emoji display), Heart/MessageCircle/Share2 action buttons from lucide-react. Styles from ReactionCards.css (9131 chars). Independent of TimelineControls (parallel build).

As a frontend developer, implement the MemoryReelVideo section for the MemoryReel page. This section builds a fully custom HTML5 video player using `useRef(videoRef)` and seven state hooks: `playing`, `currentTime`, `duration`, `buffered`, `volume`, `muted`, `scrubbing`. Features include: play/pause toggle via `togglePlay` callback that calls `vid.play()`/`vid.pause()`, a scrubbing-aware progress bar with `handleProgressClick`, `handleProgressMouseDown`, and `useEffect`-attached `mousemove`/`mouseup` window listeners for drag scrubbing, a buffered track layer, a volume slider with `handleVolumeChange`, mute toggle via `handleMuteToggle`, and a download button. Video events `onLoadedMetadata`, `onTimeUpdate`, `onPlay`, `onPause`, `onEnded` update state. Dynamic CSS classes `mrv-playing` and `mrv-scrubbing` are conditionally applied. Uses `formatTime` utility for `currentTime`/`duration` display. Imports `Play`, `Pause`, `Download`, `Clock`, `Film`, `Volume2`, `VolumeX` from lucide-react.

As a frontend developer, implement the MemoryReelStats section for the MemoryReel page. This section renders four stat cards defined in `STAT_CARDS` (Goals Scored, Key Moments, Crowd Reactions, Friends Participated) using a `gsap` + `ScrollTrigger` animated counter via the `AnimatedNumber` sub-component. `AnimatedNumber` accepts `target`, `duration`, and `suffix` props; uses a `useRef(triggered)` guard and `gsap.context()` to animate a `{ val: 0 }` object with `power2.out` easing triggered on `top 85%` scroll entry (`once: true`), updating `display` state via `onUpdate`. The 'Key Moments' card (`id: 'moments'`) additionally renders an inline moment list with timestamps (14', 38', 67', 82') and descriptions. Section header includes a `<Zap>` icon label 'AI Analysis', an `<h2>` with accent span, and a subtitle. Decorative `mrs-bg-lines` div renders motion-line background. Imports `gsap`, `ScrollTrigger`, and `Zap`, `Clock`, `Users`, `Trophy` from lucide-react.

As a frontend developer, implement the MemoryReelHighlights section for the MemoryReel page. This section renders six AI-identified highlight cards from the `HIGHLIGHTS` array (Messi Freekick, VAR Overturns Penalty, Alisson Double-Save, Mbappe Counter-Attack, Bellingham Volley, Red Card) with per-card gradient backgrounds, accent colors, category badges, timestamp overlays, view counts, and a 'Most Viewed' badge. A `FILTERS` tab bar (All, Goals, VAR, Saves, Cards) drives `activeFilter` state via `useState('all')`, filtering the displayed highlights via `Array.filter`. A `useRef(canvasRef)` enables a Canvas 2D particle background animation managed via `useRef(animFrameRef)` with a `useEffect` render loop. Individual card refs are collected in `useRef(cardRefs)`. Each card renders a `<Play>` icon overlay and `<Eye>` view-count badge from lucide-react, plus the AI caption and timestamp. CSS classes use per-card inline `gradient` and `accent` style props for dynamic theming.

As a frontend developer, implement the MemoryReelReactions section for the MemoryReel page. This section renders eight friend reactions from the `REACTION_DATA` array covering five reaction types: `voice` (with animated waveform indicator), `selfie` (with Unsplash avatar image), `video` (with thumbnail preview), `emoji` (rendering an array of 5 emoji glyphs), and `text`. A `FILTER_TABS` tab bar (All Reactions, Voice, Video, Selfies, Emojis, Text) controls the active filter via `useState`. Each reaction card renders: a DiceBear initials avatar (`api.dicebear.com/9.x/initials/svg`), user name, reaction type icon from lucide-react (`Mic`, `Video`, `Camera`, `SmilePlus`, `MessageSquare`), timestamp, and preview content. A `ChevronDown` 'Load More' control and a `Users` participant count header are also present. `REACTION_TYPE_M` (truncated in source) likely maps type keys to display metadata. Section is purely presentational with client-side filter state — no API calls.

As a frontend developer, implement the MemoryReelSharing section for the MemoryReel page. This section implements a share flow with `useState(copied)` and `useState(toastMsg)` controlling a timed toast notification via `useRef(toastTimer)` and a `showToast` callback that auto-clears after 2200ms. Features include: a primary 'Share to Stories' CTA button calling `handlePrimaryShare`, secondary action buttons (e.g., Download, Share to Circle, Email) calling `handleSecondaryAction(label)`, a copy-link row with the hardcoded `SHARE_LINK` constant, `navigator.clipboard.writeText()` in `handleCopyLink` toggling the `copied` state and showing a 'Link copied to clipboard' toast, social platform share buttons calling `handleSocialShare(platform)`, and a magnetic tilt effect on social buttons via `handleMouseMove`/`handleMouseLeave` applying `rotateX`/`rotateY` CSS transforms based on cursor position within the button rect. Decorative background includes `msh-glow-top`, `msh-glow-bottom`, and four `msh-line` divs. Imports `Share2`, `Users`, `Download`, `Mail`, `Link`, `Copy`, `Check` from lucide-react.

As a frontend developer, implement the TeamGrid section for the TeamPage. The component renders a 6-member team grid defined by the `TEAM_MEMBERS` constant array, each member having `name`, `role`, `roleClass`, `initials`, `bio`, `xHandle`, and `github` fields. Uses `framer-motion` with `useInView` (margin '-80px 0px', once: true) for scroll-triggered stagger animations via `containerVariants` (staggerChildren: 0.1, delayChildren: 0.15) and `cardVariants` (opacity/y/scale, cubic-bezier ease). Each card displays role badge with class `tg-badge-{role}`, initials avatar, bio text, and social links for X and GitHub handles. Apply TeamGrid.css for role-specific badge color tokens and grid layout.

As a frontend developer, implement the TeamStats section for the TeamPage. This section integrates `@react-three/fiber` Canvas with three custom 3D icon components: `GlobeIcon` (wireframe sphere with inner transparent layer, rotation.y += 0.005 and rotation.x += 0.002 per frame), `TrophyIcon` (group with cylinderGeometry base/stem, sphereGeometry bowl, and two torusGeometry handles, all in #FBBF24 metalness material, rotation.y += 0.006), and `UsersIcon` (group, rotation.y += 0.004). Uses `gsap` with `ScrollTrigger` plugin (registered via `gsap.registerPlugin`) to animate stat counters on scroll. Uses `useState`, `useEffect`, `useRef`, and `useCallback` from React. Each stat card is composed of a 3D Canvas icon alongside a numeric counter and label. Apply TeamStats.css for layout and color styling.

As a frontend developer, implement the TeamCulture section for the TeamPage. Renders a `VALUES` array of 4 objects (title + desc) for: 'Passion for the Game', 'Fan-First Innovation', 'Together We Rise', and 'Authentic Connection'. Each value card uses a `ValueIcon` sub-component that returns one of 4 inline SVGs (heart/flame, lightbulb, users/team, shield-check) selected by index. Alongside the values list, mounts a `ThreeDGoalOrb` sub-component using raw Three.js (not R3F) via `mountRef`; the orb scene is set up inside a useEffect with a PerspectiveCamera (FOV 45), dynamically sized via `getBoundingClientRect` and a `resize` event listener. State `canvasSize` ({w, h}) is managed with `useState`. The renderer and resize listener are cleaned up on unmount. Apply TeamCulture.css for two-column layout and card styles.

As a frontend developer, implement the JoinCTA section for the TeamPage. Renders a `@react-three/fiber` Canvas (camera z=7, fov=45, dpr=[1,2]) containing a `StadiumOrb` component with two layered `icosahedronGeometry` meshes: outer (args=[1.8, 2], #3B82F6 wireframe, opacity 0.18) and inner (args=[1.55, 3], #F59E0B wireframe, opacity 0.1), plus 5 small `Sphere` accent dots from `@react-three/drei` in blue/amber colors at fixed positions. The `StadiumOrb` useEffect adds a `mousemove` listener that computes normalized x/y from window dimensions, then uses a `requestAnimationFrame` tick loop with lerp (factor 0.04) for smooth group rotation. A `gsap.fromTo` elastic scale animation (scale 0.85→1, duration 1.6, ease 'elastic.out(1, 0.5)', delay 0.3) plays on mount. The canvas has ambient and two point lights (blue + amber). Static CTA content includes `ArrowRight` and `MessageCircle` icons from `lucide-react`. Apply JoinCTA.css with `jc-root`, `jc-border-accent`, `jc-glow`, and `jc-canvas-wrapper` classes.

As a frontend developer, implement the PredictionsHero section for the Predictions page. This section renders a full 3D hero using @react-three/fiber Canvas with a custom StadiumRing component built from Three.js geometries: an outer torus ring (torusGeometry args [3.6, 0.04]) with blue emissive material, an inner accent ring (args [3.0, 0.025]) in gold, and a lower red accent ring (args [4.0, 0.03]). The StadiumRing includes 16 FBBF24 light-point spheres positioned via trigonometric angle calculation around the ring, plus 36 colored crowd-dot spheres (gold/blue/red cycling via modulo). GSAP animates the ring with a continuous 24s y-axis rotation (repeat: -1). The hero overlays text content with Trophy, Clock, Users, ArrowRight, and Zap icons from lucide-react, served via OrbitControls for orbit interaction. Styles come from PredictionsHero.css. Note: Navbar component may already exist from a previous page.

As a Tech Lead, verify end-to-end integration between the LiveScores frontend sections (Home page LiveScores: 02e767d7, Schedule page LiveScores: d6d455f9) and the Football API backend service (temp_backend_football_api). Ensure live match data flows correctly from the Football API integration service through the backend endpoints to the frontend components. Confirm real-time score updates via Supabase Realtime (temp_backend_realtime_websockets) are received and rendered in the UI without polling delays. Validate match status transitions (upcoming → live → finished) render correctly in all affected components.

As a Tech Lead, verify end-to-end integration between the Notification page frontend sections (NotificationHeader: 856ce4e7, NotificationFilters: 9ae56230, NotificationList: 1a6e7b89) and the Push Notification service (temp_backend_push_notifications) + WebSocket service (temp_backend_realtime_websockets). Confirm that goal/card/VAR events from the Football API trigger push notifications delivered to the user's device within 30 seconds. Validate the NotificationList renders real notifications from the backend with correct event types, timestamps, and match data. Confirm mark-as-read updates persist to the notifications table via the backend.

As a Tech Lead, verify end-to-end integration between the Schedule page frontend sections (ScheduleHero: 82b94be6, FilterBar: 412de456, UpcomingMatches: 813ec450, LiveScores: d6d455f9, MatchDetails: 7b738413, ScheduleStats: 8ea83ed6) and the Football API backend service (temp_backend_football_api). Confirm match schedules, live scores, and match details (events, lineups, stats, H2H) are fetched from real Football API data. Validate filter/search operations correctly query backend endpoints. Ensure countdown timers on upcoming matches use accurate kickoff times from the API.

As a Tech Lead, verify end-to-end integration between the CircleRoom page frontend sections (CircleRoomHeader: fcd80cf8, CircleRoomLive: d5215cb9, CircleReactionsFeed: 343c6f73, CircleParticipants: 113ee2b1, CircleActions: 0cbfe6c6) and the backend services (temp_backend_circles_api, temp_backend_reactions_api, temp_backend_realtime_websockets). Confirm the live match event timeline updates in real-time. Verify new reactions from circle members appear in the feed without refresh. Confirm participant online/reacting status updates via WebSocket presence. Validate that recording actions (voice/selfie/video/text/emoji) from CircleActions correctly invoke the reactions API.

As a frontend developer, implement the ReactionOptions section for the Reaction page. This section is an enhancement panel with five interactive controls managed via useState: aiCaption (boolean toggle), filter (string from FILTER_OPTIONS — 7 choices including stadium-glow, pitch-green, golden-hour, retro-kit, bw, vivid), textOverlay (string input), sticker (nullable id from STICKERS — 8 emoji stickers), and clarity (number slider defaulting to 75). A useMemo-computed activeCount badge displays the number of active enhancements with a pulsing dot. The options are laid out in an ro-grid with individual ro-card elements that gain ro-active class when selected. AI Caption card uses an inline SVG clock icon. Filter and sticker selections use mapped button grids. The clarity control is a range slider. Heading includes an inline SVG star/polygon icon.

As a frontend developer, implement the LoadMore section for the CircleTimeline page. This section provides paginated loading of additional reactions with loading/exhausted state management. Key implementation details: (1) LOAD_DELAY_MS=1200, INITIAL_TOTAL=18, PER_PAGE=6 constants; (2) useState for loading (false), exhausted (false), loaded (INITIAL_TOTAL=18); (3) totalAvailable computed via useRef as INITIAL_TOTAL + random (2–5) × PER_PAGE, set once on mount; (4) loadCountRef useRef tracking how many times load was triggered; (5) handleLoadMore useCallback: guards on loading/exhausted, sets loading true, setTimeout 1200ms simulates fetch, increments loadCountRef, calculates next = loaded + PER_PAGE, sets exhausted if next >= totalAvailable, updates loaded state, resets loading; (6) remaining = totalAvailable - loaded for counter display; (7) conditional render: non-exhausted state shows lm-counter div with lm-counter-dot and remaining count text + lm-btn button with Layers lucide icon (normal) or lm-spinner/lm-spinner-ring animated CSS spinner + 'Loading reactions...' text (loading), button has aria-busy and aria-label; (8) exhausted state shows lm-empty div with Inbox lucide icon (size=28), 'You're all caught up' title, subtitle text. Styles from LoadMore.css (5039 chars). Depends on both ReactionCards and TimelineControls being present.

As a frontend developer, implement the ActiveContests section for the Predictions page. This section renders a filterable contest card grid driven by a static CONTESTS array of 9 entries (ids 1–9) covering Active, Upcoming, and Closed statuses with fields: name, prizePool, participants, team1/team2 with flag emoji, deadline ISO string, and urgency class. Filter state is managed via useState with FILTER_TABS = ['All', 'Active', 'Upcoming', 'Closed']. A formatDeadline() utility converts ISO deadline strings into countdown or human-readable display. Card enter animations use GSAP (useRef, useCallback, useEffect). Icons used: Trophy, Users, Clock, ArrowRight, ChevronRight, SearchX from lucide-react. An empty search state renders a SearchX icon. Styles from ActiveContests.css.

As a frontend developer, implement the MyPredictions section for the Predictions page. This section uses useState initialized with a static PREDICTIONS array of 5 entries (ids 1–5) each containing match, date, prediction text, odds, status ('Won'/'Lost'/'Pending'), and pointsEarned. Summary statistics (wonCount, lostCount, pendingCount, totalPoints) are computed inline via array filter/reduce. Status icons are resolved via statusIconMap (Trophy for Won, XCircle for Lost, Clock for Pending) and badge CSS classes via statusBadgeMap. An empty state branch renders a CircleOff/Target icon with a call-to-action prompt. Eye and Edit2 icons from lucide-react are used for per-row actions. ArrowRight used for navigation CTA. Styles from MyPredictions.css.

As a frontend developer, implement the Leaderboards section for the Predictions page. This section manages two static datasets: GLOBAL_LEADERBOARD (15 entries) and FRIENDS_LEADERBOARD (8 entries), each with rank, name, initials, points, correct, total, streak, and isUser flag. State includes active tab (global/friends) managed via useState and pagination via ITEMS_PER_PAGE = 10 with useMemo for slicing. TOP_BADGES maps ranks 1–3 to emoji icons (🏆🥈🥉) with CSS classes ldb-badge-gold/silver/bronz. The current user row (isUser: true) receives highlighted styling. Column sorting via useMemo is implied by the data model. Styles from Leaderboards.css.

As a frontend developer, implement the PredictionRules section for the Predictions page. This section renders an animated accordion driven by a PANELS array of 4 entries (ids: 'participate', 'scoring', 'prizes', 'fair-play') each with an icon component (HelpCircle, Trophy, Gift, Clock, Swords), title, and JSX content including a prr-scoring-table with prediction types, points, and difficulty columns. Open/close state is managed via useState. GSAP with ScrollTrigger (registered via gsap.registerPlugin) drives scroll-triggered entrance animations via useRef, useEffect, and useCallback. ChevronDown icon animates on accordion open/close. Highlight spans use className 'prr-highlight'. Styles from PredictionRules.css.

As a Tech Lead, verify end-to-end integration between the MemoryReel page frontend sections (MemoryReelHeader: 66a20ba1, MemoryReelVideo: 24e299ad, MemoryReelReactions: 2a828210, MemoryReelHighlights: 70627715, MemoryReelStats: ec7e7d7b, MemoryReelSharing: a7e2fb45) and the AI content generation service (temp_backend_ai_service). Confirm that after a match ends, the memory reel generation is triggered, reactions are assembled, and the resulting video URL is accessible via the MemoryReelVideo player. Validate AI highlights ranking and captions render correctly from backend-generated data. Confirm the share flow correctly references the generated reel URL.

As a frontend developer, implement the ReactionShare section for the Reaction page. This section handles sharing the reaction to circles and friends using GSAP animations. State includes: selectedCircle (from CIRCLES array — 3 circles with memberCount and avatarEmoji), dropdownOpen (circle selector dropdown), checkedFriends (Set — default includes f1–f4 from FRIENDS array of 6), dmEnabled (boolean), and shared (boolean). Uses circleCardRef for cursor-reactive CSS custom properties (--mouse-x, --mouse-y) via onMouseMove/onMouseLeave handlers. GSAP entrance animation fades in entranceRefs elements with fromTo opacity:0→1 and y:16→0 with 0.1s stagger and power3.out ease. On handleShare, shareBtnRef gets a scale 0.96 yoyo pulse and successRef animates scale:0.85→1 fade-in. Imports Send, Check, Users, ChevronDown, Shield, UserPlus, MessageCircle from lucide-react. Uses gsap.context for cleanup on unmount.

As a Tech Lead, verify end-to-end integration between the CircleTimeline page frontend sections (MatchHeader: b4e0e3d7, TimelineControls: c16ae826, ReactionCards: cbe954ef, LoadMore: c23687ab) and the Reactions API (temp_backend_reactions_api) + WebSocket service (temp_backend_realtime_websockets). Confirm the timeline feed loads existing circle reactions from the API and receives new reactions in real-time via Supabase Realtime channel without requiring page refresh. Validate filter/sort controls correctly query the API. Confirm pagination (LoadMore) correctly fetches additional pages from the backend.

As a Tech Lead, verify end-to-end integration between the Predictions page frontend sections (PredictionsHero: 19e977c1, ActiveContests: f5718614, MyPredictions: 35d3e125, Leaderboards: 891a798d, PredictionRules: 950d43dc) and the Predictions backend API (temp_backend_predictions_api). Confirm active contests load from the API with real match data. Verify prediction submission (including dynamic templates for group/knockout/high-profile matches) persists to the predictions table. Confirm leaderboard data (global and friends scopes) reflects accurate points and streaks. Validate AI challenge mode accuracy tracking updates correctly post-match.

As a Tech Lead, verify end-to-end integration between the Reaction page frontend sections (ReactionHeader: f406d1ec, ReactionCapture: 84f12873, ReactionPreview: 741b1259, ReactionOptions: abeca0da, ReactionShare: 287b192a) and the Reactions backend API (temp_backend_reactions_api). Confirm that voice, selfie, video, text, and emoji reactions captured in the UI are correctly uploaded to Supabase Storage and metadata persisted to the reactions table. Validate the 30-second countdown (triggered by push notification) flows correctly from NotificationList → Reaction page → API submission → CircleTimeline feed update. Ensure AI caption generation (temp_backend_ai_service) is triggered post-upload.