CDGAssist

As a frontend developer, implement the `HomeHero` section for the Home page. Use `useRef` for `rootRef` and `framer-motion`'s `useScroll`/`useTransform` to create parallax effects: `bgY` (0%→30%), `iconsX` (0→80px), `gradientAngle` (135→200deg), and `gradientStop` (50%→20%) all driven by `scrollYProgress` from the section's scroll range (`start start` to `end start`). Render a `motion.div hh-bg` with inline gradient background for parallax, an `hh-bg-overlay` for darkening, and a `motion.div hh-icons-layer` containing 6 floating lucide icons (`Heart`, `User`, `FileText`, `Shield`, `Star`, `Phone`) with fixed CSS positions and individual `hh-icon-float--*` class variants. In `hh-content`, render a trust badge with entrance animation (`opacity: 0, y: -16` → `opacity: 1, y: 0`), main headline, subheadline, and 4 `featurePills` (✅ Soumission, 📋 Suivi, 🔒 Sécurisé, 🇲🇦 Conforme) as animated chips. Import `HomeHero.css` (7906 chars).

As a frontend developer, implement the `HomeStatistics` section for the Home page. Build a custom `useCountUp(end, decimals, active, duration=2000)` hook using `requestAnimationFrame` with cubic ease-out (`1 - (1-progress)^3`) and `prefers-reduced-motion` short-circuit. Define 4 `STATS` entries: claims (24800+, FileText icon, blue), resolution (4.8j, Clock icon, cyan), success (97%, CheckCircle icon, green), satisfaction (4.9/5, Star icon, gold). Implement `StatCard` with staggered activation via `setTimeout(index * delay)` once section `sectionActive` is true; each card renders an icon wrap, animated numeric display with prefix/suffix, label, and description paragraph. Use `framer-motion`'s `useInView` to trigger the section. Render 3 `TRUST_ITEMS` (`ShieldCheck`, `Users`, `Award`) as a bottom trust strip. Import `HomeStatistics.css` (5858 chars).

As a frontend developer, implement the `HomeContact` section for the Home page. Render 3 `contactCards` (phone, email, chat) using `framer-motion` `AnimatePresence` and stagger container/child variants (`staggerChildren: 0.08`). Each card expands/collapses details on click (accordion-style) managed via local `useState` for `expandedId`. Phone card links to `tel:+212537669900`, email card to `mailto:reclamations@cdgprevoyance.ma`, chat card links to `/Chatbot` with a `Bot` icon. Each card has 4 detail rows with icon + label + value, a `ChevronDown` toggle that rotates on expand, and a `ctaLabel` anchor button. Use lucide-react icons: `Phone`, `Mail`, `MessageCircle`, `Clock`, `CalendarCheck`, `Zap`, `ChevronDown`, `PhoneCall`, `Send`, `Bot`. Import `HomeContact.css` (10845 chars). This is the largest section at 10817 JSX chars — allow extra effort for accordion interaction polish.

As a frontend developer, implement the `HomeMission` section for the Home page. Build a `ValueCard` sub-component with `useState` for `hovered` state that triggers `framer-motion` icon rotation (`rotate: hovered ? 360 : 0`, duration 0.6s) and a `drop-shadow` filter on the icon. Render 3 `VALUE_CARDS`: accessibility (Eye icon), security (Shield icon), simplicity (Zap icon) — each with `whileInView` entrance (`opacity: 0, y: 24` → `opacity: 1, y: 0`, viewport margin `-60px`). Render a `hm-midground` parallax decorative layer with 3 CSS blobs using CSS custom property `--scroll` for `translateY(calc(var(--scroll, 0) * -0.4px))`. Include section header with `motion.div` entrance, mission statement copy, and an `ArrowRight`-linked CTA. Read `--scroll` via `getComputedStyle` on mount. Import `HomeMission.css` (6608 chars).

As a frontend developer, implement the `HomeCTA` section for the Home page. Render a decorative `hcta-bg-layer` with parallax (`translateY(calc(var(--scroll, 0) * -0.3px))`) containing `hcta-bg-accent-line` and two circles, plus a `hcta-mid-layer` at `-0.15px` speed with 4 `hcta-mid-dot` elements. In `hcta-content`, render a `motion.div hcta-header` with staggered `whileInView` entrance (y: 24→0, duration 0.6s) containing eyebrow text ('CDG Prévoyance — Plateforme Officielle'), headline with `hcta-headline-accent` span on 'Maintenant', and subheadline copy. Render 3 `benefits` items (`CheckCircle` / `Clock` / `Headphones` lucide icons) with a second staggered entrance (delay 0.15s). Render primary (`/Claim`) and secondary CTA `motion.a` buttons using `ShieldCheck`, `Lock`, `FileText`, `ArrowRight` icons, with whileHover/whileTap scale animations (delay 0.25s). Import `HomeCTA.css` (6737 chars).

As a frontend developer, implement the `Footer` section for the Home page. Render a `ftr-top-bar` accent stripe, then a `ftr-call-strip` with phone icon, availability text, and `tel:+212537669900` anchor. In `ftr-inner`, render a `ftr-brand-row` with the CDG shield SVG logo (yellow fill, navy checkmark stroke) and 'CDGAssist' wordmark. Render 4 link columns from static arrays: `exploreLinks` (5 links to Home/Claim/Tracking/Contest/About), `communityLinks` (Chatbot/FAQ/Témoignages/Partenaires), `supportLinks` (FAQ/Contact/Accessibilité/Guide audio), `legalLinks` (Privacy/Mentions/Loi 09-08/TLS/CGU). Render 4 social icon links (`Facebook`, `Twitter`, `Linkedin`, `Youtube` from lucide-react) with `aria-label`. Bottom bar shows dynamic year via `new Date().getFullYear()`, `ShieldCheck` + `Lock` trust badges, and CNDP compliance note. Import `Footer.css` (4998 chars). This component is shared across all pages — check if it already exists before rebuilding.

As a frontend developer, implement the FAQHero section for the FAQ page. This section features a scroll-responsive gradient background using a dynamic `linear-gradient` with angle and color shifts derived from `scrollY` state, three parallax-shifted decorative background circles (parallax1=scrollY*0.25, parallax2=scrollY*0.15, parallax3=scrollY*0.35), and an IntersectionObserver-triggered animated stat counter (`useCountUp` hook with cubic ease-out) displaying questionCount (target=12) and categoryCount (target=5). Icons from `lucide-react` (HelpCircle, Search, MessageCircle, Shield) are used in the hero content. The `rootRef` tracks the hero height to compute `scrollRatio` for gradient animation. Note: Navbar component may already exist from the Home page task.

As a frontend developer, implement the ClaimHero section for the Claim page. This section renders a full-width hero (`chr-root`) with ambient background glows (`chr-bg-glow--top`, `chr-bg-glow--bottom`), an animated accent bar using `motion.div` with width/opacity entrance, and a staggered word-by-word headline using `headlineWords` array ['Soumettre', 'une', 'Réclamation'] with `headlineVariants` (blur+y fade, per-word delay via custom index). A subheadline fades in via `subheadlineVariants` at delay 0.65s. A 3-step progress tracker (`steps` array with labels 'Informations personnelles', 'Détails de la réclamation', 'Confirmation & ticket') renders with `progressVariants` at delay 0.85s — steps auto-advance every 2800ms via `setInterval` in `autoAdvanceRef`, pausing when `userInteracted` is set true via `handleStepClick`. Active step circle uses `circlePulse` (scale 1→1.08→1, 2.2s infinite). An accessibility badge animates in via `accessibilityVariants` at delay 1.05s. State: `currentStep`, `hasStarted`, `userInteracted`. Uses `useRef` for `sectionRef` and `autoAdvanceRef`. Framer Motion `motion` and `AnimatePresence` from framer-motion; icons `Volume2`, `Check` from lucide-react. ARIA label 'En-tête de soumission de réclamation'. Depends on Navbar from Home page for page chaining.

As a frontend developer, implement the ClaimBreadcrumb section for the Claim page. This section renders a `nav` element (`cb-root`) with role='navigation' and aria-label='Fil d'Ariane'. Desktop breadcrumb path (`cb-path`) shows static links for 'Accueil' and 'Déposer' with `ChevronRight` separators (size=12, strokeWidth=2.5), and a third animated `motion.span` that updates when `currentStep` changes (opacity+y fade, 0.25s easeOut). Mobile collapsed breadcrumb (`cb-mobile-current`) uses `AnimatePresence mode='wait'` with exit/enter x-slide animation (0.2s) to show the active step short label. Step indicator dots (`cb-step-dots`) map over `STEPS` array (3 steps), computing `isActive`, `isCompleted`, `isUpcoming` per dot. Clicking a step calls `handleStepClick` which enforces forward-only navigation (`stepId <= currentStep + 1`). State: `currentStep` (useState, default 1). Uses `motion`, `AnimatePresence` from framer-motion; icons `ChevronRight`, `Check` from lucide-react. ARIA status on step dots. Independent of other Claim sections — can be built in parallel.

As a frontend developer, implement the ClaimForm section for the Claim page. This is the core three-step multi-page form (`ClaimForm`) with rich state and validation. State: `step` (0-2), `direction` (+1/-1 for slide animation), `formData` (INITIAL_DATA: fullName, email, phone, ticketRef, claimType, description, files[], acceptLegal), `errors`, `touched`, `dragOver`, `submitted`, `submitting`, `ticketNumber`. Step transitions use `stepVariants` (x: ±80px, opacity) via `AnimatePresence` with custom direction prop. Progress bar derived via `useMemo` computing `progressPercent` from step index (0→0%, 1→33.3%, 2→66.6%, 3→100%). Navigation via `goNext` (validates current step, calls `validateStep`, marks `touched`, calls `handleSubmit` on step 2) and `goPrev`. File upload supports drag-and-drop (`dragOver` state), click-to-open via `fileInputRef`, validates extension against `ALLOWED_EXTENSIONS` (.pdf,.jpg,.jpeg,.png,.doc,.docx) and `MAX_FILE_SIZE_MB` (5MB). Claim type select from `CLAIM_TYPES` array (pension, reversion, indemnite, allocation, maladie, autre). Email validated with regex, phone with regex (7-15 digits). Submission generates ticket number `CDG-2026-XXXXXX` format and sets `submitted=true`. Uses `useCallback`, `useRef`, `useMemo`. Icons: User, Mail, Phone, Hash, ChevronLeft, ChevronRight, Upload, FileText, X, CheckCircle2, AlertCircle, ShieldCheck, Loader2, ClipboardList, FileCheck, Eye, ArrowRight, Home, Search from lucide-react. Independent section — no dependency on other Claim sections.

As a frontend developer, implement the ClaimAudioGuide section for the Claim page. This section provides a Web Speech API (`speechSynthesis`) audio guide with bilingual support (French/Arabic). Constant `SPEECH_SUPPORTED` checks browser capability. Two transcript arrays `TRANSCRIPT_FR` and `TRANSCRIPT_AR` each contain 11 timed segments with `start`/`end`/`text` fields (total ~120s). Player state includes `isPlaying`, `isPaused`, `currentTime`, `activeSegmentIndex`, `selectedLang` ('fr'/'ar'), `isMuted`, `showTranscript`. Controls: Play/Pause button using `SpeechSynthesisUtterance`, mute toggle (`VolumeX`/`Volume2`), language switcher between FR and AR. Active transcript segment is highlighted in real-time based on elapsed speech time via a timer `useRef`. `useCallback` wraps play/pause/stop handlers. `motion` from framer-motion for entrance animations. Icons: Play, Pause, Volume2, VolumeX, Headphones, Info, Eye from lucide-react. Accessibility-first design with ARIA live regions for transcript. Falls back gracefully when `SPEECH_SUPPORTED` is false. Independent of other Claim sections.

As a frontend developer, implement the ClaimSupport section for the Claim page. This section renders a three-card support grid (`SUPPORT_CARDS` array: 'chatbot', 'phone', 'faq') with scroll-triggered entrance animation via `IntersectionObserver` (threshold 0.08) setting `inView` state. Section heading uses `headingVariants` (opacity+y, 0.45s). Each card uses `cardVariants` with staggered delay `i * 0.12s` and easing `[0.25, 0.46, 0.45, 0.94]`. Cards include: 'Assistant virtuel' linking to `/Chatbot` with Globe language tags (Français/Darija) and 24h availability meta; 'Assistance téléphonique' linking to `tel:+212537669900` with Clock hours meta; 'Questions fréquentes' linking to `/FAQ` with inline FAQ question list. Each card has an `accentLine` class (`cs-card--chatbot`, `cs-card--phone`, `cs-card--faq`) for left-border theming and action button with `ArrowRight`/`ChevronRight` icons. State: `inView` (useState, false). Uses `useRef` for `sectionRef`, `motion` from framer-motion. Icons: MessageCircle, Phone, HelpCircle, Clock, Globe, ChevronRight, Languages, ArrowRight from lucide-react. Observer disconnects after first intersection. Independent of other Claim sections.

As a Backend Developer, create the `contestations` table in Supabase with columns (id, ticket_number, reason, details, option_type [appel_administratif|recours_contentieux|mediation], files, status, created_at, response_deadline). Enable RLS policies. Create a Supabase Edge Function or API route to validate the ticket number against the `reclamations` table before accepting a contest submission. Ensure file attachments are stored in a dedicated Supabase Storage bucket. Note: Frontend tasks that depend on this include ContestForm (f6427549) and ContestOptions (f82d5a1f).

As a Backend Developer, implement the claim tracking API using Supabase: create a `claim_timeline` table or view with columns (reclamation_id, stage, status [completed|active|pending], label, date, description) linked to the `reclamations` table. Expose a query endpoint (via Next.js API route or Supabase RLS policy) to fetch timeline data by ticket number. Ensure the ticket lookup is case-insensitive and returns 404-equivalent when not found. Note: Frontend tasks that depend on this include TrackingForm (7ddd6093) and TrackingTimeline (29173f06).

As a Backend Developer, implement the chatbot API for CDGAssist supporting French and Darija languages. Create a Next.js API route `/api/chatbot` that accepts user messages and returns contextual responses. Integrate with an AI language model API (e.g., OpenAI or Anthropic) with a system prompt trained on CDGAssist domain knowledge (claims, tracking, contestation). Implement escalation detection logic that identifies emergency keywords and triggers a response with the call button CTA (+212 537 27 98 98). Store conversation logs in a Supabase `chatbot_sessions` table. Note: Chatbot page frontend task depends on this.

As a Backend Developer, implement a secure file upload API route `/api/upload` using Next.js API routes and Supabase Storage. Validate file type (whitelist: .pdf, .jpg, .jpeg, .png, .doc, .docx), enforce max size (5MB), scan for malicious content, and return a signed URL upon successful upload. Files should be stored under a path structured as `reclamations/{ticket_number}/{filename}`. Apply CORS and rate-limiting headers. This API supports both ClaimForm and ContestForm file attachment features. Note: Depends on Supabase backend setup.

As a Frontend Developer, configure the global design system for CDGAssist in `tailwind.config.js` and global CSS: define the full color palette (primary: #003A70, primary_light: #0072BC, secondary: #0099D6, accent: #16A34A, highlight: #FFCC00, bg: #FFFFFF, surface: rgba(240,240,240,0.8), text: #000000, text_muted: #666666, border: rgba(0,58,112,0.2)), configure Crimson Pro (headings) and Source Sans 3 (body) font imports via `next/font` or Google Fonts, set up shadcn/ui component library with theme tokens matching CDG brand, define border-radius tokens (20px for cards), shadow utilities, and minimum touch target sizes (48px) for accessibility. Install and configure `framer-motion` and `lucide-react`. Create a shared `globals.css` with CSS custom properties for scroll-driven parallax (`--scroll`).

As a Full Stack Developer, initialize and configure the Supabase client for CDGAssist frontend: install `@supabase/supabase-js`, create a singleton `lib/supabase.ts` client using environment variables, and implement typed TypeScript interfaces matching the database schema (ReclamationRow, ContestationRow, ClaimTimelineRow, ChatbotSessionRow). Create helper functions: `submitClaim(data)`, `trackClaim(ticketNumber)`, `submitContestation(data)`, `uploadFile(bucket, path, file)`. Ensure all queries respect RLS and handle errors gracefully with typed error responses. Export a `supabaseAdmin` client (server-side only) using the service role key for edge functions.

As a Tech Lead, verify the end-to-end integration between the Chatbot frontend page (frontend-chatbot-page) and the Chatbot API backend (backend-chatbot-api). Ensure: (1) chat messages are sent to `/api/chatbot` and responses render in the thread correctly; (2) Darija and French language switching works end-to-end; (3) escalation signals from the API trigger the call CTA in the UI; (4) session persistence in `chatbot_sessions` table is confirmed; (5) rate limiting returns a user-friendly toast error when exceeded; (6) the floating call button (01c467a7) is visible throughout the chatbot page. Note: frontend-chatbot-page and backend-chatbot-api must be complete before this task.

As a frontend developer, implement the FAQSearchBar section for the FAQ page. This section renders a controlled text input with `useState('query')` and a `useRef(inputRef)` for focus management. It features a `Search` icon from `lucide-react` on the left, a conditional `X` clear button (visible when `hasText = query.trim().length > 0`) that clears the query and refocuses the input via `handleClear`, and a dynamic hint `<p aria-live='polite'>` that shows the current search term in guillemets or a default keyword suggestion. The `fsb-bar` div receives a `has-text` CSS class modifier when text is present. French-language placeholder and aria-labels are used throughout.

As a frontend developer, implement the FAQCategories section for the FAQ page. This section renders a horizontally scrollable category tab bar using a `scrollRef` and `useState` for `activeCategory` (default: 'reclamations'), `canScrollLeft`, and `canScrollRight`. The `updateScrollState` callback checks `el.scrollLeft` and `el.scrollWidth` to conditionally show/hide `ChevronLeft` and `ChevronRight` scroll hint buttons (opacity toggled, pointerEvents managed inline). `scrollBy` programmatically scrolls by ±200px with smooth behavior. Keyboard navigation is handled via `handleKeyDown` supporting ArrowLeft, ArrowRight, Enter, and Space keys. Five categories are defined in a `CATEGORIES` constant array with keys reclamations, suivi, contestation, securite, and generale, each with a `lucide-react` icon (FileBadge, SearchCheck, Scale, ShieldCheck, HelpCircle) and a `count` badge.

As a frontend developer, implement the FAQItems section for the FAQ page. This section renders an accordion of 8 FAQ entries defined in a `FAQ_DATA` constant array covering topics: CDGAssist platform overview, claim submission (three-step form, CDG-2026-XXXXXX ticket format), required documents (CIN, attestation de pension), claim tracking via ticket number on a timeline, rejection contestation (recours gracieux, médiation, recours contentieux), data privacy (loi 09-08, CNDP, TLS), and darija language support. Each item uses `useState` for open/closed state and `framer-motion`'s `motion` and `AnimatePresence` for animated panel expand/collapse. A `ChevronDown` icon from `lucide-react` rotates on open. The accordion uses a single-open pattern with toggling on click.

As a frontend developer, implement the FAQCta section for the FAQ page. This section uses an `IntersectionObserver` (threshold: 0.2) on `rootRef` to toggle `visible` state and trigger `framer-motion` entrance animations via `fadeUp` variants with staggered delays (0.12 * i). A Canvas-based ambient particle field is rendered via `canvasRef` using a 2D context: up to 55 particles (density-capped at w*h/14000) with random positions, radii (0.5–2.1px), velocities (±0.25), and alpha (0.08–0.43), filled as `rgba(255, 204, 0, alpha)` yellow dots that wrap around canvas edges. The canvas auto-resizes to its parent on window resize using `devicePixelRatio` for sharpness. CTA buttons use `Phone`, `FileText`, and `ArrowRight` icons from `lucide-react`, and the section links to support contact and claim submission flows.

As a frontend developer, implement the TrackingHero section for the Tracking page. This section renders a `<section className='th-root'>` with a two-column layout: a text column and an illustration column. The text column includes an animated breadcrumb nav (Home → Suivi de dossier) using `motion.a` and `motion.span` with staggered `breadcrumbAnimation` variants (custom delay `i * 0.08`), an `motion.h1` headline with `th-headline-accent` span, a `motion.p` subheadline, and a progress bar that uses `useInView` with `progressRef` and a `useEffect` to set `progressFill` to 72 after a 300ms timeout once in view. Imports `ChevronRight` and `CheckCircle2` from lucide-react and `motion`, `useInView` from framer-motion. Uses `useState`, `useEffect`, `useRef`, `useCallback`. Note: Navbar and Footer components may already exist from the Home page.

As a frontend developer, implement the TrackingForm section for the Tracking page. This section renders a ticket number search form with smart input formatting via `formatInput()` which auto-prefixes `CDG-YYYY-` and strips non-digits. State includes `ticket`, `validation`, `isSearching`, and `showHelper`. The input enforces `MAX_LENGTH=17` and `TICKET_PATTERN=/^CDG-\d{4}-\d{6}$/`. `handleKeyDown` intercepts Backspace to reformat digits correctly and triggers `handleSearch` on Enter. A `RECENT_SEARCHES` array (`['CDG-2026-123456', ...]`) is rendered as quick-select chips. Uses `AnimatePresence` from framer-motion for showing/hiding validation messages with `AlertCircle`, `CheckCircle2`, `Clock`, `FileText`, `HelpCircle`, `History` icons from lucide-react. `validate()` returns contextual error messages including missing digit count. Refs: `inputRef` and `wrapperRef`.

As a frontend developer, implement the TrackingHelp section for the Tracking page. This section renders a `<section className='thp-root'>` with a headline block (animated via `headlineVariants` using `whileInView`) containing a decorative `<hr className='thp-divider'>`, an h2 'Besoin d'aide ?' and subtitle. Below it, a `thp-cards` grid maps over `helpCards` array of 3 items: 'Contester la décision' (links to `/Contest`, `FileText` icon), 'Chatbot CDGAssist' (links to `/Chatbot`, `MessageCircle` icon), and 'Appeler l'équipe' (tel link `+212537669900`, `Phone` icon). Each card uses `cardVariants` with staggered delay `i * 0.12` and cubic-bezier easing `[0.22, 0.61, 0.36, 1]`. `expandedCard` state tracks accordion-style card expansion via `handleCardClick`. `AnimatePresence` wraps expanded content. `ChevronRight` icon used for link CTA. `useMemo` referenced in imports.

As a Frontend Developer, implement the global scroll progress bar and shared breadcrumb navigation components for CDGAssist. The scroll progress bar should be a fixed top bar that fills based on `window.scrollY / (document.body.scrollHeight - window.innerHeight)` using `requestAnimationFrame`. The breadcrumb component should accept a `steps` prop array and render accessible `<nav aria-label='Fil d\'Ariane'>` with `ChevronRight` separators and active state styling. Both components should be integrated into the `_app.tsx` layout so they apply globally. The scroll bar must use the primary color (#003A70) and be visible on all pages.

As a Frontend Developer, implement a global toast notification system for CDGAssist using shadcn/ui's `Sonner` or `Toast` component. Create a `useToast` hook and a `<ToastProvider>` in `_app.tsx`. Define typed toast variants: success (green #16A34A), error (red), info (blue #0072BC), warning (gold #FFCC00). Pre-configure notification messages for: successful claim submission (with ticket number), form validation errors, file upload success/failure, contest submission confirmation, and API error states. Ensure toasts are ARIA-live announced for screen reader accessibility.

As a Frontend Developer, implement the animated logo loading screen for CDGAssist that displays during initial page load and route transitions. Create a `<LoadingScreen>` component with the CDG shield SVG logo that uses framer-motion to animate in (scale + fade, 0.4s), holds briefly, then animates out (scale + fade out, 0.3s). Integrate via Next.js `_app.tsx` using `router.events` (`routeChangeStart`/`routeChangeComplete`) to show/hide on page transitions. The logo animation should use a CSS keyframe pulse on the yellow inner path. Ensure the loader does not block LCP (Largest Contentful Paint) by using a portal overlay.

As a Frontend Developer, implement the global floating call button (CTA) that is visible on all pages. Render a fixed-position `<a href='tel:+212537279898'>` button with a `Phone` icon from lucide-react, styled with the accent color (#0099D6) and minimum 48px touch target. Add a subtle pulse animation using framer-motion (`scale: [1, 1.08, 1]`, 2s infinite) to draw attention. The button should include an `aria-label='Appeler CDGAssist'` and be placed in the `_app.tsx` layout above the page content. On mobile, position bottom-right; on desktop, right-side midpoint.

As a Tech Lead, verify the end-to-end integration between the ClaimForm frontend implementation (a8675ae1) and the Claims API backend (backend-supabase-claims-api). Ensure: (1) the three-step form correctly calls `submitClaim()` from the Supabase client on Step 3 completion; (2) file uploads are handled via the `/api/upload` route before form submission; (3) the generated ticket number `CDG-2026-XXXXXX` from the backend is correctly displayed in the success state; (4) toast notifications fire correctly on success/error; (5) real-time form validation matches backend validation rules; (6) error states from the API are reflected in the UI. Note: ClaimForm depends on backend-supabase-claims-api, backend-file-upload-api, and cross-cutting-supabase-client.

As a frontend developer, implement the TrackingTimeline section for the Tracking page. This is the most complex section, featuring a 3D `<Canvas>` from `@react-three/fiber` with a `ParticleField` component that animates 200 particles (`count=200`) using a `Float32Array` of positions and per-particle speeds, with `requestAnimationFrame` loop resetting particles at `y > 20`. `statusColor` is parsed from hex to RGB via `useMemo` and drives `pointsMaterial` color. Timeline data is built from `buildTimelineData()` returning stages with ids (`stage-1` through final), status labels (Soumis, En cours d'examen, etc.), dates, descriptions, and `dotClass`/`cardClass` modifiers (completed/active/pending). Uses `motion` and `AnimatePresence` for card entrance animations. Icons from lucide-react: `Search`, `Clock`, `CheckCircle2`, `XCircle`, `AlertCircle`, `FileText`, `ShieldCheck`. State: `useState`, `useRef`, `useMemo`, `useEffect`.

As a frontend developer, implement the ContestHero section for the Contest page. This section renders a `co-hero-root` section with a `co-hero-inner` container housing four animated sub-elements using `framer-motion` with a reusable `fadeUp` helper (opacity 0→1, y 24→0, custom delays 0/0.1/0.15/0.2/0.25). Includes: (1) an animated `<nav>` breadcrumb with links to `/Home` and current page label; (2) a `co-hero-progress` role='list' indicator mapping PROGRESS_STEPS array (Réclamation done, Contestation active, Confirmation pending) with dot icons and connecting lines styled by completion state; (3) an `<h1>` headline with a `co-hero-headline-accent` span on 'décision'; (4) a `<p>` subheadline with 5-day response commitment copy; (5) a `co-hero-bottom` row containing a `co-hero-badge` with `lucide-react` Clock icon (size 18, strokeWidth 2.5) and '5 jours pour répondre' label. All animations stagger by 0.05s increments. Import `ContestHero.css` for layout and token styling.

As a frontend developer, implement the ContestOptions section for the Contest page. This section renders a `cop-root` section containing a heading block and an interactive option selector. Imports `FileText`, `Scale`, `Handshake`, `Check`, `ArrowRight` from `lucide-react`. Manages `selectedId` state via `useState(null)` with `handleSelect` (toggle logic: deselects if already selected) and `handleConfirm` (navigates to `/Contest` via `window.location.href`). Renders the CONTEST_OPTIONS array (appel_administratif, recours_contentieux, mediation) as a `cop-grid` role='radiogroup' with each card as role='radio' supporting keyboard nav (Enter/Space keys). Selected card receives `cop-card--selected` class and shows a `cop-selected-badge`. Each card displays its lucide icon, title, and description (with `**bold**` markdown in raw strings). A confirm button with `ArrowRight` icon is conditionally disabled when no option is selected. Import `ContestOptions.css`.

As a frontend developer, implement the ContestForm section for the Contest page — the most complex section on this page. Manages multiple state hooks: `ticket`, `reason`, `details` (string inputs), `files` (array), `ticketStatus`/`ticketMessage` (idle|validating|valid|invalid), plus analogous status fields for reason and details. Implements validation helpers: `validateTicket` (regex `/^CDG-20\d{2}-\d{6}$/`), `validateReason` (20–500 chars), `validateDetails` (min 10 chars), and `formatFileSize` (bytes→Ko/Mo). Renders a multi-field form with: (1) ticket input with inline status icon (CheckCircle/AlertCircle/Loader2 from lucide-react) and real-time validation; (2) reason textarea with character count; (3) details textarea; (4) file upload zone using `useRef` and `useCallback` with drag-and-drop, showing file list with `FileText` icons and `X` remove buttons. Displays HELPER_TIPS array (5 tips with Search/MessageSquare/FileCheck/Clock/Shield icons) in a sidebar panel with `Lightbulb` header and `HelpCircle` tooltips. Uses `framer-motion` `AnimatePresence` for validation message transitions. Import `ContestForm.css` (12343 chars of layout styles).

As a frontend developer, implement the ContestTimeline section for the Contest page. Uses `useRef` and `framer-motion` `useInView` (once: true, margin: '-80px 0px') to trigger scroll-based animations. Renders a `ctl-root` section with a heading block animated by `headingVariants` (opacity 0→1, y 16→0, 0.6s easeOut). Maps TIMELINE_STEPS array (soumission active, revision/decision/confirmation pending) as a `ctl-timeline` role='list'. Each step animates its icon via `iconVariants` (spring, stiffness 260, damping 20, delay i*0.18) and content via `contentVariants` (x -20→0, delay 0.1+i*0.18). Active step ('soumission') renders a `Check` icon from lucide-react; pending steps render a `Clock` icon. Step cards display label, duration string, desc, and a `statusLabel` badge. Uses `React.Fragment` with key per step. Import `ContestTimeline.css` (7024 chars).

As a frontend developer, implement the ContestFAQ section for the Contest page. Manages `openId` state via `useState(null)` with a `toggle` function (deselects if already open — accordion pattern). Renders FAQ_DATA array of 7 items (delay/documents/mediation/cost/response/multiple/rejection) as an accessible accordion. Each FAQ item has: a `<button>` trigger with `ChevronDown` icon (rotates on open) and `aria-expanded` attribute; an answer panel with conditional visibility. Section header includes `HelpCircle` lucide icon and an `ArrowRight` link to contact/support. Import `ContestFAQ.css` (4386 chars). Note: a similar FAQ accordion component likely exists from the FAQ page — reuse `FAQItems` patterns where possible.

As a frontend developer, implement the ContestCTA section for the Contest page. Renders a two-column `ccta-root` section with scroll-triggered `whileInView` animations using a `fadeUp` variant (opacity 0→1, y 24→0, 0.5s easeOut, custom delay i*0.12, once: true, margin: '-60px'). Left column (`ccta-left`) contains an `<h2>` headline with `ccta-headline-accent` span on 'contester' (custom=0) and a `<p>` support text describing CDGAssist team availability 24h/24 (custom=1). Right column (`ccta-right`) contains: a `ccta-buttons` div (custom=2) with a primary `<a href='tel:+212537669900'>` button with `Phone` icon and a secondary `<a href='/Chatbot'>` button with `MessageCircle` icon; an `<hr class='ccta-separator'>`; a `ccta-contact` div (custom=3) with phone link (`Phone` icon, +212 537 66 99 00) and email link (`Mail` icon, assistance@cdgassist.ma). All icons from `lucide-react` (size 16–18). Import `ContestCTA.css` (5382 chars).

As a Tech Lead, verify the end-to-end integration between the TrackingForm (7ddd6093) and TrackingTimeline (29173f06) frontend sections and the Tracking API backend (backend-tracking-api). Ensure: (1) TrackingForm's `handleSearch` calls `trackClaim(ticketNumber)` from the Supabase client; (2) the API response populates `buildTimelineData()` with real stage/status/date data instead of mock data; (3) 'not found' API responses show the correct validation error state in TrackingForm; (4) the 3D particle field in TrackingTimeline reflects the real claim status color; (5) stage transitions (Soumis → En cours d'examen → Résolu) are rendered accurately from the database. Note: Both frontend tasks depend on backend-tracking-api and cross-cutting-supabase-client.

As a Tech Lead, verify the end-to-end integration between the ContestForm (f6427549) and ContestOptions (f82d5a1f) frontend sections and the Contestation API backend (backend-contest-api). Ensure: (1) ticket validation in ContestForm calls the backend to verify the ticket exists in `reclamations` before allowing submission; (2) the selected contest option from ContestOptions is passed correctly to the `submitContestation()` API call; (3) file uploads for contest evidence use the `/api/upload` route; (4) the 5-day response deadline is displayed post-submission; (5) ContestTimeline reflects the real contestation status from the database. Note: ContestForm depends on backend-contest-api, backend-file-upload-api, and cross-cutting-supabase-client.