Fellowship Convention Hymns

As a frontend developer, implement the UnlockHero section for the Unlock page. The component renders a full-section hero with two parallax decorative layers: uh-bg-layer (translateY at -0.15x scroll) containing three CSS orbs (uh-bg-orb--coral, uh-bg-orb--sky, uh-bg-orb--amber), and uh-mid-layer (translateY at -0.3x scroll) for a subtle grid texture. Inside uh-content > uh-card: a badge with uh-badge-icon and 'One-Time Unlock' label; an h1 headline with uh-headline-accent span for 'Full Access'; a stat block showing '2,850' hymns with uh-stat-number, uh-stat-label, and uh-lock-icon; an hr.uh-divider; a BENEFITS list (All Languages, Offline Access, Favorites Sync, Unlimited Browsing) each with a CSS icon class (uh-benefit-icon--lang/wifi/heart/globe), title, and desc; a price block with ₹50 and 'One-Time' labels; and a CTA button that triggers the payment modal via a data-upm-trigger attribute. Import from '../styles/UnlockHero.css'.

As a frontend developer, implement the UnlockValue section for the Unlock page. Uses useState(visible) and useRef(rootRef, cardRefs[]) hooks. An IntersectionObserver on rootRef triggers setVisible(true) at 0.12 threshold to fire scroll-triggered reveal animations and disconnects after firing. Each of the three benefit cards (All Hymns Access with IconLibrary/blue accent, Multi-Language Support with IconGlobe/coral accent, Save Favorites with IconHeart/amber accent) has a 3D tilt effect on mousemove per card ref. Inline SVG icons: IconLibrary, IconGlobe, IconHeart, IconShieldCheck (used in trust badge). BENEFITS array maps to card components with id, Icon, title, description, and accent color props. Import from '../styles/UnlockValue.css'.

As a frontend developer, implement the SongsHeader section for the Songs page. This section renders a styled header with a decorative `sh-accent-line`, an `sh-title` containing a music note icon (`♫`) and accented 'Hymns' text, and an `sh-subtitle`. The controls bar (`sh-controls`) includes: a hymn count display (`sh-count`) showing `hymnCount` state (472), a language display (`sh-lang`) with a GB flag emoji and `language` state ('English'), a view mode toggle (`sh-toggle`) with two SVG icon buttons (grid and list views) that update `viewMode` state via `useState` and apply an `active` class when selected, and an unlock status badge (`sh-unlock`) that conditionally renders locked/unlocked SVG icons and text based on `unlocked` state (currently false). Aria labels and `aria-pressed` attributes are set on toggle buttons for accessibility. Note: Navbar component may already exist from the Unlock page.

As a frontend developer, implement the AdminTopBar section for the Admin Panel page. Build the `AdminTopBar` component using `atb-root` header layout with an `atb-inner` container. Include: a brand link (`atb-brand`) with `BookOpen` lucide icon, `atb-brand-title` ('Fellowship Hymns') and `atb-brand-sub` ('Admin Console') text spans. Add an `atb-nav` aria-labeled navigation with two anchor links using `LayoutDashboard` and `ListMusic` icons (Dashboard active, Hymn Library). Implement the `atb-right` section containing a Bell notification button with `atb-notif-dot` badge indicator, an admin avatar badge showing 'A' with 'Admin' label, and a logout anchor link with `LogOut` icon navigating to '/Login'. Apply AdminTopBar.css styles. Note: this is the first section of the Admin Panel page and chains from the Login page task.

As a Backend Developer, implement Firestore CRUD operations for hymns management. Create utility functions for: (1) addHymn(hymnData) — saves a new hymn document to the 'hymns' collection with number, category, titles, and lyrics fields; (2) updateHymn(id, hymnData) — updates an existing hymn document; (3) deleteHymn(id) — removes a hymn document; (4) getAllHymns() — retrieves all hymns ordered by number; (5) getHymnById(id) — fetches a single hymn. These operations are used by the Admin Panel (ActionModals, HymnListTable) and Songs page (SongsGrid). Note: frontend tasks ActionModals (22d23cdb) and HymnListTable (584760d1) depend on these operations being available.

As a Backend Developer, implement the payment unlock and access control logic. Since the app uses localStorage-based payment state (hymnal_paid key), create the client-side payment simulation flow: (1) payment verification function that sets localStorage 'hymnal_paid' = true after successful payment simulation; (2) access control logic that reads localStorage on app init to determine if user is locked or unlocked; (3) Firestore optional user payment record storage (if user is authenticated) to persist payment state across devices; (4) unlock state propagation to Songs page to toggle locked/unlocked card states. The UnlockPaymentModal (acf4ad59) and UnlockHero (3820498e) frontend sections depend on this logic. Note: the SRD specifies ₹50 one-time payment via UPI simulation for now.

As a Backend Developer, implement Firebase Authentication for admin-only access. Set up: (1) Firebase Auth (email/password) via CDN for the admin login flow; (2) signIn(email, password) function used by LoginForm (6c2bd850) to authenticate admin; (3) signOut() function used by AdminTopBar (86fd1e91) logout link; (4) onAuthStateChanged listener to protect admin routes and redirect unauthenticated users; (5) Firestore security rules that check request.auth.uid matches the admin UID for write operations. The LoginForm currently uses a 1200ms setTimeout simulation — wire it to real Firebase Auth. Note: basic login is already done per rules, but Firebase Auth wiring to the frontend LoginForm component is required.

As a DevOps Engineer, configure Firebase Hosting for the Fellowship Convention Hymns app. Set up: (1) firebase.json with hosting configuration pointing to the public directory; (2) .firebaserc with project alias; (3) Firestore indexes for the hymns collection (orderBy number, category filter + number sort); (4) Firestore security rules file (firestore.rules) with admin-only write rules and public read rules; (5) GitHub Actions or equivalent CI/CD workflow for auto-deploy on push to main branch. The app uses HTML/CSS/Vanilla JS with no build step — Firebase Hosting serves static files directly.

As a frontend developer, implement the UnlockPaymentModal section for the Unlock page. State hooks: visible, method ('card'|'wallet'|'upi'), cardNumber, expiry, cvv, walletId, upiId, loading. useRef(cardRef) for the modal card element. PAYMENT_METHODS array (card/IconCreditCard, wallet/IconWallet, upi/IconSmartphone) drives tab selection. Input masking utilities: maskCardNumber (groups into 4-digit blocks, max 16 digits), maskExpiry (MM / YY format, max 4 digits), maskCVV (max 3 digits). Inline SVG icons: IconX (close), IconCreditCard, IconWallet, IconSmartphone, IconLock (security badge), IconLoader (spinning via upm-spin CSS animation for loading state). Modal visibility is toggled by the data-upm-trigger attribute on the UnlockHero CTA. The form conditionally renders card fields, wallet ID field, or UPI ID field based on selected method. Loading state disables form and shows IconLoader spinner. Import from '../styles/UnlockPaymentModal.css'.

As a frontend developer, implement the SongsSearchFilter section for the Songs page. This section provides a search and filter bar importing `Search`, `ChevronDown`, `X`, `SlidersHorizontal`, and `ArrowUpDown` from lucide-react. It manages `searchQuery`, `category`, `language`, and `sort` state via `useState`, and uses a `debounceRef` with `useEffect` to set `isSearching` state after a 400ms debounce on search input changes. A `useMemo` hook computes `activeFilters` as an array of chip objects from selected category (from `CATEGORIES` constant array with 8 options), language (from `LANGUAGES` with 3 options including Hindi, English, Assamese), and sort (from `SORT_OPTIONS` with 5 options) values. The `clearFilter(key)` function resets individual filters and `clearAllFilters()` resets all. The search input uses `searchInputRef` for programmatic focus on clear. Active filter chips with `X` remove buttons are rendered from `activeFilters`. A result count placeholder is displayed. Includes a `SlidersHorizontal` icon button for advanced filter toggle.

As a frontend developer, implement the AdminSidebar section for the Admin Panel page. Build the `AdminSidebar` component with `useState` hooks for `isOpen` (drawer toggle) and `hymnsExpanded` (submenu accordion). Implement a mobile bar (`asb-mobilebar`) with brand glyph 'FC' and a three-span hamburger button that toggles `is-open` class. Render a backdrop overlay (`asb-backdrop`) that closes the drawer on click. Build the `asb-panel` aside with a panel header, and a nav section containing: a Dashboard link with `LayoutDashboard` icon, a section label 'Hymn Library', a collapsible group toggle button with `BookOpen` and `ChevronRight` icons driving `hymnsExpanded` state, an `asb-submenu` with animated expansion containing Add/Edit/Delete Hymn sublinks (mapped from `hymnActions` array with `Plus`, `Pencil`, `Trash2` icons), and a Songs link with `ListMusic` icon. All links call `closeDrawer` on click. Apply AdminSidebar.css styles.

As a frontend developer, implement the AdminPanelHeader section for the Admin Panel page. Build a `HymnBookModel` 3D component using `@react-three/fiber` Canvas and `@react-three/drei` OrbitControls. The book model uses a `useRef` + `useEffect` animation loop with `requestAnimationFrame` for continuous Y-axis rotation (`rotation.y += 0.003`) and a sine-wave vertical bob (`Math.sin(Date.now() * 0.0008) * 0.06`). Construct the book geometry with: `BoxGeometry` for back cover (color `#0f0c29`), three page stack meshes at z-offsets 0.12/0.08/0.04 (cream tones), front cover (color `#302b63`), a gold spine accent using rotated box with emissive `#ffcc00`, and a cross emblem group at position [0, 0.35, 0.31] with vertical and horizontal box meshes in gold. Implement the main header component with `useState`/`useEffect`/`useRef`/`useCallback` hooks, a `FILTER_OPTIONS` array (All Languages, Hindi, English, Assamese), and action buttons using `Plus`, `Download`, `Search`, `SlidersHorizontal`, `Check` lucide icons. Apply AdminPanelHeader.css styles.

As a frontend developer, implement the AdminDashboardStats section for the Admin Panel page. Build the `AdminDashboardStats` component with a `canvasRef` for a decorative WebGL particle layer (`ads-particle-stage` wrapping a canvas element). Render a `STAT_CARDS` array of 4 cards: Total Hymns (2,847, +124, up, `Music` icon), Total Users (1,293, +86, up, `Users` icon), Payment Revenue (₹64,650, +₹4,250, up, `IndianRupee` icon, `revenue` variant), and Last Updated (2h ago, neutral, `Clock` icon). Implement the `ChangeIndicator` sub-component that renders `TrendingUp`/`TrendingDown`/`Minus` icons with corresponding `ads-change--up/down/neutral` CSS classes. Map cards in an `ads-grid` layout with each card showing icon, `ChangeIndicator`, value, label, and an `ads-card-accent` decorative bar. Apply AdminDashboardStats.css and ChangeIndicator.css styles.

As a frontend developer, implement the HymnManagementTabs section for the Admin Panel page. Build the `HymnManagementTabs` component with `useState` hook for `activeTab` (default `'all'`). Define a `TABS` array of 4 tab objects: All Hymns (248, `ListMusic`), Pending Review (12, `Clock`), Published (214, `CheckCircle2`), Archived (22, `Archive`). Render an `hmt-strip` div with `role='tablist'` mapping tabs as `<button role='tab'>` elements with `aria-selected`, `is-active` class on active tab, icon span, label span, and `hmt-badge` count span. Below the strip, render an `hmt-divider` and an `hmt-status` row showing 'Viewing', active tab label with `hmt-status-dot` indicator, and hymn count in parentheses. Drive status display from `TABS.find((t) => t.key === activeTab)`. Apply HymnManagementTabs.css styles.

As a frontend developer, implement the SongDetailHero section for the Song Detail page. This section features a full interactive 3D hymn book rendered via @react-three/fiber and @react-three/drei. The HymnBookModel component uses useFrame to animate a book-open mechanic: a `currentOpen` state (range 0.06–1.0) drives rotation on `bookRef`, `leftPageRef`, and `rightPageRef` refs for page flutter. The book floats gently via sine-wave animation on `groupRef`. The book geometry is composed of boxGeometry meshes for spine, back cover, front cover (with animated pivot group), cross emblem (with emissive coral material), and gold title plate. The `hovered` prop controls whether the book opens (targetOpen=1) or stays nearly closed (targetOpen=0.06) using THREE.MathUtils.damp. MeshDistortMaterial from drei and Float wrappers are used for ambient glow elements. The Canvas is embedded within the hero layout alongside song title, hymn number badge, and subtitle text. Imports HymnBookScene.css and SongDetailHero.css. Note: this section depends on SongsHeader from Songs page for page-level chaining.

As a Backend Developer, implement a PDF parsing and bulk upload system for the admin panel. Build a server-side or client-side PDF parser (using PDF.js via CDN) that: (1) accepts one or more PDF files of physical hymns books; (2) extracts hymn number, title, category, and lyrics for Hindi, English, and Assamese sections; (3) maps parsed data to the Firestore hymn schema; (4) batch-writes parsed hymns to Firestore using batched writes (max 500 per batch); (5) reports upload progress and errors. The feature should handle 800+ songs in a single upload session. This operation is central to the Admin Panel's bulk upload feature requested by the user.

As a Backend Developer, implement the client-side hymns search and filter logic that powers the Songs page. Build utility functions for: (1) loadAllHymns() — loads all hymns from Firestore once and caches in memory; (2) filterHymns(hymns, query, category, language) — filters by hymn number, title in all 3 languages, and category; (3) sortHymns(hymns, sortBy) — sorts by number, title, date added; (4) paginateHymns(hymns, page, perPage) — returns a page slice with total count. These utilities support SongsSearchFilter (6656662e) and SongsPagination (297942cc) frontend sections. Real-time filtering should work client-side after initial Firestore load to avoid repeated reads.

As a Tech Lead, verify the end-to-end integration between the Login page frontend (LoginForm - 6c2bd850) and the Firebase Authentication backend service (backend-admin-auth). Ensure: (1) LoginForm submits credentials to Firebase Auth instead of the setTimeout simulation; (2) successful login redirects to Admin Panel; (3) failed login shows appropriate error messages; (4) auth state persists across page refreshes; (5) AdminTopBar logout correctly signs out and redirects to Login; (6) unauthenticated access to Admin Panel routes is blocked.

As a frontend developer, implement the UnlockConfirmation section for the Unlock page. Renders a full-section confirmation state with a CSS-animated ring backdrop (uc-canvas-backdrop) containing two concentric rings: uc-ring--inner and uc-ring--outer. Inside uc-content > uc-card: a uc-icon-wrap with uc-check-circle containing an SVG checkmark path (d='M5 13l4 4L19 7') animated via uc-check-path CSS class and sky-blue glow; an h2.uc-headline 'Unlock Successful!'; a paragraph confirming full access to all hymns in Hindi, English, and Assamese with a strong tag; a uc-divider; a transaction ID row displaying hardcoded 'TXN-HYMN-2026-A7F3C81E'; an email notice block with an inline envelope SVG icon and uc-email-highlight span; and a uc-cta anchor linking to '/Songs' with library and arrow SVG icons flanking a 'Return to Library' span. Import from '../styles/UnlockConfirmation.css'.

As a frontend developer, implement the SongsGrid section for the Songs page. This section renders a hymn card grid using `DEMO_HYMNS` (9 entries with id, number, title, category, lang, locked, favorited fields including Hindi titles). It manages `favorites` state as a `Set` initialized from `DEMO_HYMNS`, `visibleCards` as a `Set` for scroll-triggered reveals, and `isSearchEmpty` boolean state. An `IntersectionObserver` (stored in `observerRef`) is set up via `useEffect` on `gridRef` watching `.sg-card-wrapper` elements with `threshold: 0.12` and `rootMargin: '0px 0px -30px 0px'`, adding card IDs to `visibleCards` on intersection to trigger CSS reveal animations. `toggleFavorite` (memoized via `useCallback`) uses `e.stopPropagation()` and `e.preventDefault()` to toggle heart (`Heart` from lucide-react) state. `handleCardClick` navigates to `/Song Detail?id=${hymn.id}` for unlocked hymns. Locked hymns show a `Lock` icon overlay; unlocked show `Unlock`. An empty state UI renders with search suggestions when `isSearchEmpty` is true, using `Search` and `Music` icons from lucide-react.

As a frontend developer, implement the HymnListTable section for the Admin Panel page. Build the component with `useState` and `useMemo` hooks managing: search query, sort column/direction, current page, and selected rows. Source data is the `ALL_HYMNS` mock array of 20 hymn objects (id, title, languages array, status, date). Implement `useMemo`-derived filtered+sorted list with column sort toggling (`ChevronUp`/`ChevronDown` icons). Implement pagination controls with `ChevronLeft`/`ChevronRight` icons slicing 8 rows per page. Render a table with columns: checkbox (`CheckSquare`), Hymn ID, Title with `BookOpen` icon, Languages as pill badges, Status as colored badges (Published/Draft/Archived variants), Date, and Actions column with `Pencil` and `Trash2` icon buttons. Include a search input with `Search` icon above the table and a `Music` icon empty-state for zero results. Apply HymnListTable.css styles.

As a frontend developer, implement the SongDetailLyrics section for the Song Detail page. This section renders multi-stanza hymn lyrics with full multilingual support (English, Hindi, Assamese) using a LANGUAGES constant and LYRICS_DATA object keyed by language. UI controls include a FONT_SIZES array (small/normal/large/xlarge mapped to 14/17/21/26px) rendered as size-selector buttons, and a language toggle bar. Stanzas are typed as 'verse' or 'chorus' with index labels (numeric for verses, 'C' for chorus). AnimatePresence and motion from framer-motion handle stanza entrance/exit animations. A Canvas from @react-three/fiber is embedded for ambient background effects. useState manages `activeLang`, `fontSize`, and `activeStanza` state. useRef and useCallback are used for scroll and highlight interactions. Imports SongDetailLyrics.css.

As a frontend developer, implement the SongDetailMetadata section for the Song Detail page. This section renders a card with hymn metadata fields: Composer/Author (John Newton), Category/Theme (with sdm-badge and sdm-badge-dot amber pill), Key & Scale (D Major — Ionian), Year/Era (1779), Historical Notes (expandable via `expanded` state toggle using `setExpanded`), and Tags array rendered as chips. An IntersectionObserver (threshold 0.15, rootMargin '0px 0px -40px 0px') sets `revealed` state to trigger CSS reveal animations (sdm-reveal classes with staggered sdm-reveal-1 through sdm-reveal-N delays). The section uses useRef for sectionRef, useCallback for handleIntersection, and useState for `expanded` and `revealed`. SVG info-circle icon is inline in the heading. Imports SongDetailMetadata.css.

As a frontend developer, implement the SongDetailActions section for the Song Detail page. This section contains a rich set of interactive action buttons using Three.js (imported as * from 'three') for WebGL glow/ripple button effects rendered via Canvas. Inline SVG icon components are defined: HeartIcon (with `filled` prop toggling fill to '#ff6f61'), ShareIcon, PrintIcon, FlagIcon, SimilarIcon, CategoryIcon, CopyIcon, CheckIcon, and CloseIcon. useState manages: `liked` (heart toggle), `copied` (clipboard feedback with CheckIcon swap), share modal visibility, report/flag modal, and similar songs panel. useMemo and useCallback optimize handler references. The GlowButton component (from GlowButton.css) wraps each action with WebGL canvas glow on hover. Actions include: Like/Unlike, Share (with copy-link sub-action using CopyIcon→CheckIcon transition), Print, Report/Flag, Similar Songs, and Browse Category. Imports GlowButton.css and SongDetailActions.css.

As a frontend developer, implement the FavoritesHeader section for the Favorites page. The component uses a `useRef` (rootRef) and `IntersectionObserver` to trigger a CSS reveal animation (`fh-visible` class added on viewport entry, then observer disconnects). Renders a glassmorphism card (`fh-card`) containing: a top row with a Heart icon (lucide-react, size=32, strokeWidth=0) in `fh-heart-icon` wrapper and a title group showing 'My Favorites' h1 plus subtitle with 🎵 emoji and a `FAVORITES_COUNT` (6) constant. Below that, two stat badges: one with Bookmark icon showing 'Total Saved' / 6, and one with Clock icon showing 'Recently Added' / 3. Apply `fh-reveal` + `fh-visible` CSS transition classes from FavoritesHeader.css (5299 chars).

As a Tech Lead, verify the end-to-end integration between the Bulk Upload UI frontend (frontend-admin-bulk-upload-ui) and the PDF parsing backend service (backend-pdf-bulk-upload). Ensure: (1) uploaded PDFs are correctly parsed and hymn data extracted; (2) parsed hymns are batch-written to Firestore with correct schema (number, category, titles, lyrics for all 3 languages); (3) progress is accurately reported in the UI; (4) errors during parsing are surfaced with helpful messages; (5) after successful upload, HymnListTable refreshes to show newly added hymns; (6) duplicate hymn numbers are handled gracefully (warn or skip).

As a frontend developer, implement the SongsPagination section for the Songs page. This section renders pagination controls managing `currentPage` and `perPage` state via `useState` (defaults: page 1, 12 per page). `totalPages` is computed as `Math.ceil(TOTAL_HYMNS / perPage)` with `TOTAL_HYMNS = 200`. A `safePage` clamp prevents currentPage from exceeding totalPages when perPage changes. `handlePrev` and `handleNext` call `goTo()` only when not at boundaries (`isFirst`/`isLast` guards). `handlePerPage` resets to page 1 on change. `getPageNumbers()` builds a page list with ellipsis (`'...'`) logic using a `delta = 2` neighbour window, always including first and last pages. A `RESULTS_OPTIONS = [12, 24, 36]` select dropdown controls perPage. SVG chevron left/right icons (`CHEVRON_LEFT`, `CHEVRON_RIGHT`) are defined as constants for nav buttons. A mobile-only `sgp-page-info--mobile` span shows 'Page X of Y'.

As a frontend developer, implement the ActionModals section for the Admin Panel page. Build the `ActionModals` component with `useState` hooks for `activeModal` (null | 'add' | 'edit' | 'delete'), `form` (initialized from `EMPTY_HYMN` template with title/english/hindi/assamese/category/status fields), `errors`, `touched`, `submitting` boolean, and `deleteTarget`. Implement `openModal(type, hymn)` and `closeModal` with `useCallback`, and expose them via `useEffect` on `window.__ActionModalsAPI` for sibling section integration (e.g., HymnListTable Pencil/Trash2 buttons). Implement `validate(form)` checking title (required, 2–120 chars), english lyrics (required, 5+ chars), and category (required). Define `CATEGORIES` array (8 categories: Praise & Worship, Redemption, Faith, etc.) and `SAMPLE_HYMN` prefill data. Render three modal types: Add Hymn form with `Plus` icon, Edit Hymn form with `Pencil` icon and pre-populated fields (title, english/hindi/assamese textareas, category select, status select), and Delete confirmation modal with `AlertCircle`, `Trash2` icons and `deleteTarget.title`. Include `Loader2` spinner during `submitting` state and `Save` icon on submit button. Use `useRef` for backdrop click-outside detection. Apply ActionModals.css styles.

As a frontend developer, implement the FavoritesFilterBar section for the Favorites page. Uses `useState` for: `searchTerm`, `category` (default 'all'), `sortBy` (default 'date'), `viewMode` (default 'grid'), `categoryOpen`, `sortOpen`, `isTyping`. Uses `useRef` for `categoryRef`, `sortRef`, and `typingTimeout`. Key behaviors: (1) click-outside detection via `document.addEventListener('mousedown')` for both category and sort dropdowns; (2) typing glow effect — `handleSearchChange` sets `isTyping=true` then clears it after 800ms timeout; (3) `isDirty` flag (searchTerm non-empty OR category !== 'all' OR sortBy !== 'date') adds `ffb-dirty` class to bar; (4) `hasActiveFilters` toggles active filter pill styling. Renders: search input with Search icon + typing glow class `ffb-typing`, category dropdown with ChevronDown + Check icons across CATEGORIES array (7 options), sort dropdown with ArrowUpDown + SORT_OPTIONS (3 options), view toggle buttons (Grid3X3 / List icons), and a 'Clear All' button (RotateCcw icon) shown when `isDirty`. Filter options sourced from CATEGORIES and SORT_OPTIONS constant arrays defined in file. Apply FavoritesFilterBar.css (8858 chars).

As a frontend developer, implement the FavoritesGrid section for the Favorites page. Uses `useState` for `hymns` (initialized from FAVORITE_HYMNS constant — 6 hymn objects each with id, number, Hindi title, English titleEn, category, categoryLabel, preview text, and liked=true). Uses `useRef` (rootRef) + `IntersectionObserver` (threshold 0.08) to add `fgr-visible` class triggering reveal animation. Two interaction handlers: `handleToggleLike(id)` toggles `liked` field via map, `handleRemove(id)` filters hymn out of state. If `hymns.length === 0` returns null (defers to FavoritesEmpty). Each card renders: hymn number badge, Hindi title, English subtitle, category badge with dynamic class from CATEGORY_CLASS map (praise/worship/prayer/fellowship/gospel variants), Hindi lyrics preview, Heart icon button (filled when liked), Eye icon button (view), Trash2 icon button (remove). Apply `fgr-reveal` + `fgr-visible` CSS animation from FavoritesGrid.css (7486 chars).

As a frontend developer, implement the FavoritesActions section for the Favorites page. Uses `useState` for: `selectAll` (bool), `selectedCount` (int), `showExportMenu` (bool), `showClearModal` (bool). Uses `useRef` for `exportBtnRef` to detect click-outside on export dropdown. `totalFavorites` is hardcoded to 12. Key handlers: `handleSelectAll` toggles selectAll and sets selectedCount to totalFavorites or 0; `handleRemoveSelected` resets count+selectAll; `handleExport(format)` closes export menu (stub); `handleClearAll` sets showClearModal=true; `confirmClearAll` resets state and closes modal; `cancelClearAll` closes modal. Two `useEffect` hooks: (1) click-outside for export menu (active only when `showExportMenu`); (2) Escape key closes clear modal (active only when `showClearModal`). Renders: select-all checkbox row with Check icon and selected count label; button row with 'Remove Selected' (Trash2 icon, disabled when !hasSelection), export dropdown button (Download icon, opens menu with PDF/CSV options using FileText/FileSpreadsheet icons), 'Clear All' button (AlertTriangle icon); confirmation modal overlay with AlertTriangle warning, confirm/cancel buttons. Apply FavoritesActions.css (9141 chars).

As a Tech Lead, verify the end-to-end integration between the Unlock page frontend sections (UnlockHero - 3820498e, UnlockPaymentModal - acf4ad59, UnlockConfirmation - 2a3a0c78) and the payment unlock backend logic (backend-payment-unlock). Ensure: (1) UnlockHero CTA opens UnlockPaymentModal via data-upm-trigger attribute; (2) payment simulation correctly sets localStorage hymnal_paid=true; (3) UnlockConfirmation renders after successful payment with transaction ID; (4) Songs page immediately reflects unlocked state when returning from Unlock flow; (5) SongsHeader unlock badge updates to show unlocked state; (6) previously locked hymns in SongsGrid become accessible after payment.

As a Tech Lead, verify the end-to-end integration between the language-dependent frontend sections (Navbar - 4c33dca4, SongsHeader - 489432d6, SongsGrid - e927ff26, SongDetailLyrics - 5c5460a9, LoginFooter - e361e3c8) and the language service (backend-language-service). Ensure: (1) language selection in Navbar correctly updates localStorage hymnal_lang and fires languagechange event; (2) SongsGrid hymn titles update immediately on language switch without page reload; (3) SongDetailLyrics correctly switches all stanzas to selected language; (4) language persists across page navigations; (5) Hindi Devanagari, English, and Assamese scripts all render legibly with the correct font (Noto Sans Devanagari).

As a frontend developer, implement the FavoritesEmpty section for the Favorites page. This is a static empty-state component with no props or state. Renders: two decorative background ring divs (`femp-bg-ring`, `femp-bg-ring-inner`) for glassmorphism depth, a `femp-surface` container holding: Heart icon (lucide-react, size=48, className='femp-icon') in `femp-icon-wrap`, an h2 'No Favorites Yet' headline, an encouraging subtitle paragraph, and an anchor CTA button linking to '/Songs' with text 'Browse Hymns' and an ArrowRight icon (size=18, strokeWidth=2.4). Conditionally shown when FavoritesGrid returns null (zero hymns). Apply FavoritesEmpty.css (4408 chars).

As a Tech Lead, verify the end-to-end integration between the Admin Panel frontend sections (ActionModals - 22d23cdb, HymnListTable - 584760d1) and the Firestore CRUD backend (backend-hymns-crud-api). Ensure: (1) Add Hymn modal saves to Firestore and updates the table; (2) Edit Hymn modal pre-populates from Firestore data and saves updates; (3) Delete confirmation removes from Firestore and updates the table; (4) HymnListTable loads real hymns from Firestore instead of ALL_HYMNS mock data; (5) search and sort in HymnListTable work against live data; (6) HymnManagementTabs counts reflect actual Firestore document counts.

As a Tech Lead, verify the end-to-end integration between the Songs page frontend sections (SongsSearchFilter - 6656662e, SongsGrid - e927ff26, SongsPagination - 297942cc) and the backend search/filter service (backend-search-filter). Ensure: (1) SongsGrid loads real hymns from Firestore via getAllHymns(); (2) SongsSearchFilter filters the live Firestore-loaded hymns array in real time; (3) search works across all 3 language titles and hymn number; (4) category filter chips correctly narrow results; (5) SongsPagination accurately reflects filtered result counts; (6) locked hymns show lock overlay for unpaid users based on localStorage hymnal_paid state.

As a Tech Lead, verify the end-to-end integration between the Favorites page frontend sections (FavoritesGrid - 1ab0d634, FavoritesHeader - 8d123518, FavoritesActions - f7f6bb87) and the localStorage favorites service (backend-favorites-localstorage). Ensure: (1) FavoritesGrid loads hymns from localStorage hymnal_favs and fetches their full data from Firestore; (2) heart toggle in SongsGrid (e927ff26) correctly adds/removes from localStorage; (3) FavoritesHeader stats (total saved, recently added) reflect actual localStorage data; (4) FavoritesActions 'Clear All' correctly empties localStorage; (5) FavoritesEmpty shows when no favorites are stored; (6) favorited state persists across page navigations.