garnet-system

As a frontend developer, implement the LandingHero section for the Landing page. This is a complex 3D interactive hero using `@react-three/fiber` Canvas and `@react-three/drei` Points/PointMaterial. Key elements: `fibonacciSphere` utility generating evenly distributed star positions on a sphere; `Starfield` component rendering a Three.js Points cloud with per-frame rotation via `useFrame`; interactive category galaxy where hovering/clicking star clusters reveals product deal cards for 6 categories (Smartphones, Laptops, Headphones, Watches, Home Appliances, Fashion) each with 3 platform listings (Amazon, Flipkart, Meesho with INR prices). Uses `useState`, `useRef`, `useMemo`, `useCallback`, `useEffect` from React; `useThree` for camera; `Search` and `X` icons from lucide-react; `Suspense` for Canvas lazy loading. Includes a search bar UI overlaid on the 3D canvas. Import `LandingHero.css`. Integrate `*THREE` for geometry. This is the most complex section on the page.

As a frontend developer, implement the LandingPlatformTrust section for the Landing page. Build the section using `framer-motion` (`motion`, `useInView`, `animate`) and `lucide-react` (`ShieldCheck`, `RefreshCw`). Render platform logo cards for Amazon.in (color #FF9900), Flipkart (#2874F0), and Meesho (#F43397) each with custom inline SVG icons (80×80 viewBox with branded colors and text). Implement `AnimatedCounter` component with `useState` for count, `useRef` for `hasAnimated` guard, using `framer-motion`'s `animate` function to count from 0 to target over 1.8s with cubic easing — activates once when `inView` becomes true. Apply `containerVariants` with `staggerChildren: 0.15` and `logoVariants` with `grayscale(1)` hidden state animating to full color on reveal. Import `LandingPlatformTrust.css`.

As a frontend developer, implement the LandingFeatures section for the Landing page. Build three `FeatureCard` components using advanced `framer-motion` hooks: `useMotionValue` for normalized pointer position (x, y 0–1), `useSpring` (stiffness 300, damping 20) for smooth `rotateX`/`rotateY` (±8°), `useTransform` and `useMotionTemplate` to generate a dynamic `radial-gradient` highlight background following cursor position. Each card uses `onMouseMove` to compute normalized pointer coords from `getBoundingClientRect`, resetting to center (0.5) on `onMouseLeave`. Feature data: BadgeIndianRupee icon (ft-icon-price) for 'Real-Time Price Comparison', TrendingUp (ft-icon-chart) for 'Price History & Trends', Bot (ft-icon-ai) for 'AI-Powered Verdict'. Render decorative parallax star field (12 positioned spans) and two nebula blobs. Cards animate in with `whileInView` opacity 0→1, y 40→0. Import `LandingFeatures.css`.

As a frontend developer, implement the LandingHowItWorks section for the Landing page. Build the section using `gsap` and `gsap/ScrollTrigger` (registered via `gsap.registerPlugin`). Maintain `activeStep` state (useState, default -1) and refs: `sectionRef`, `lineRef` (SVG path), `progressRef` (animated SVG stroke), `stepRefs` array for 4 step cards. On mount: measure SVG path total length via `getTotalLength()`, set `strokeDasharray` and `strokeDashoffset` to full length, create a GSAP timeline with `ScrollTrigger` (trigger: section, start: 'top 70%', end: 'bottom 40%', scrub: 0.6) animating `strokeDashoffset` to 0. Second `ScrollTrigger` updates `activeStep` index based on scroll progress (0–3). Each step card animates in with `gsap.fromTo` (opacity 0→1, y 30→0) with staggered delays (i * 0.12). Steps: Search (Search icon), Set Preferences (SlidersHorizontal), Compare (Scale), Buy Smart (ShoppingBag). Background includes 12 decorative star spans. Import `LandingHowItWorks.css`.

As a frontend developer, implement the LandingTestimonials section for the Landing page. Build a 3D carousel using `framer-motion` `useMotionValue` for `rotation` and `useTransform` for per-card 3D positioning. Constants: CARD_COUNT=3, ANGLE_STEP=120°, RADIUS=280, DEG2RAD. `CarouselCard` uses `useTransform` on rotation to compute per-frame: `sinVal * RADIUS * 0.55` for x-offset, cosine-based scale (0.78–1.0), opacity (0.45–1.0), blur (0–2px), zIndex, and `rotateY` (-angle * 0.9) — creating a true 3D carousel effect. Drag interaction uses `useRef` for `isDragging`, `dragStartX`, `dragStartRotation`; `useMotionValue` `rotation`; `useState` for `activeIndex`. `snapToNearest` utility snaps to nearest 120° increment handling multi-revolution angles. Testimonials: Priya M. (5★, ₹2,300 laptop saving), Rohan K. (5★, AI verdict price drop), Ananya S. (5★, no jargon). Import `LandingTestimonials.css`.

As a frontend developer, implement the LandingCTA section for the Landing page. Build using `framer-motion` (`motion`, `AnimatePresence`) and `lucide-react` (`ArrowRight`, `Play`). Implement: magnetic primary CTA button with `useRef` (`primaryRef`) tracking mouse offset via `handlePrimaryMouseMove` (computes x/y from `getBoundingClientRect`, applies `translate(x*0.15px, y*0.15px)` transform) and `handlePrimaryMouseLeave` (resets transform); `triggerBurst` callback spawning 10 `motion.span` particles on mouse enter with random x/y offsets (±80px range), animating opacity/scale to 0 over 0.6s, auto-clearing after 700ms via `setTimeout`; `scrollToHowItWorks` smooth-scrolling to `.la-slot-landinghowitworks` selector. Background: 15 static `cta-star` spans in `cta-stars` div with CSS scroll parallax (`--scroll` var). Secondary 'How It Works' button with `Play` icon. Heading: 'Ready to Find Your Best Deal?'. Import `LandingCTA.css`.

As a frontend developer, implement the Footer section for the Landing page. Build the `Footer` component with a 4-column `ftr-grid` layout: (1) Brand column with 'Garnet-System' brand name (first letter 'G' wrapped in span) and tagline about smart price comparison; (2) Quick Links column mapping `quickLinks` array (Home → /Landing, Search Prices → /Search, View Results → /Results) as `ftr-link` anchors; (3) Supported Platforms column mapping `platforms` array (AZ/Amazon, FK/Flipkart, MO/Meesho with external hrefs) as `ftr-platform` anchors with `target='_blank' rel='noopener noreferrer'`; (4) Contact column with `Mail` and `MapPin` icons from lucide-react showing support@garnet-system.in and Ahmedabad, Gujarat, India. Include `ftr-divider` hr, bottom bar with dynamic `new Date().getFullYear()` copyright, and Privacy/Terms `ftr-legal-link` anchors. Import `Footer.css`. Note: this component may already exist from a prior page — check before recreating.

As a frontend developer, implement the SearchHero section for the Search page. This is a static hero section using the `sh-root` container with an `sh-inner` div housing an `<h1>` with `.sh-tagline` and `.sh-tagline-accent` span for highlighted text, a `<p>` with `.sh-intro` for the subtitle copy, and an `sh-icon-row` div containing three `sh-platform-dot` spans with individual modifier classes `sh-pdot-amazon`, `sh-pdot-flipkart`, and `sh-pdot-meesho` for platform branding dots. A decorative `sh-accent-bar` div is rendered at the bottom. No state or interactivity required. Note: Navbar component may already exist from the Landing page.

As a Backend Developer, implement the POST /api/v1/ai-verdict endpoint using FastAPI and LiteLLM for LLM routing to GPT-5.4. Accept JSON body with: product_query (str), platform_data (array of normalized product listings), price_history (object with historical data). Use the weighted scoring formula — Price (40%), Rating (25%), Reviews (15%), Delivery Speed (20%) — to determine best deal. Construct a prompt for the LLM to generate a conversational AI verdict (good time to buy / wait / avoid) with confidence percentage and reasoning. Return JSON: {verdict: 'buy'|'wait'|'avoid', label, reasoning, confidence, best_platform, best_price}. Respect the AI verdict rules defined in the SRD (e.g., all-time low triggers 'buy', elevated prices trigger 'wait'). Note: Frontend sections AIVerdictCard (Search and Results pages) depend on this endpoint.

As a Frontend Developer, set up a shared API client layer for the React frontend to communicate with the FastAPI backend. Create an axios or fetch-based API client with base URL configured from environment variable (VITE_API_BASE_URL or REACT_APP_API_BASE_URL). Implement typed API service functions: searchProducts(query, budget, platform, city), getPriceHistory(productQuery, platform), getAIVerdict(productQuery, platformData, priceHistory). Add request/response interceptors for error handling and loading state management. Export these services from a shared /src/services/ directory so all pages (Search, Results) can use them consistently. This is a cross-cutting frontend concern.

As a frontend developer, implement the ResultsFiltersBar section for the Results page. This section renders a multi-group filter panel with the following interactive state managed via React useState hooks: `activePlatforms` (array toggled via `togglePlatform`), `minPrice`/`maxPrice` (controlled text inputs for INR range), `activeRating` (single-select toggle from RATINGS array: 3+, 4+, 4.5+), `activeDelivery` (single-select from DELIVERY_OPTIONS with emoji icons: Today ⚡, Within 2 Days 🚚, This Week 📦), and `mobileOpen` (boolean controlling a mobile drawer via `rfb-mobile-toggle` button with aria-expanded). Active filter state is compiled into `activePills` array with per-pill `onRemove` handlers and rendered as dismissible chips. A `handleClear` function resets all filters. Platform options (Amazon, Flipkart, Meesho) render colored dot indicators via `rfb-dot-amazon`, `rfb-dot-flipkart`, `rfb-dot-meesho` CSS classes. The mobile toggle button renders an SVG hamburger icon. Styles are imported from `ResultsFiltersBar.css`. This is a page-chaining entry section — depends_on includes the parent Search page task ID.

As a Backend Developer, implement a reusable web scraping service layer for the Garnet-System. Create async scraper modules for Amazon.in, Flipkart, and Meesho using httpx or playwright (for JS-rendered pages). Each scraper must extract: product title, current price, MRP, discount percentage, rating, review count, delivery estimate, seller name, and buy URL. Implement concurrent scraping using asyncio.gather to search all three platforms simultaneously as required by the SRD. Add retry logic, user-agent rotation, and error handling for anti-bot measures. Expose a unified async function search_all_platforms(query, platform_preference) used by the POST /api/v1/search endpoint. Add scrapy/playwright/httpx to requirements.txt.

As a Backend Developer, implement a data normalization module that standardizes raw scraped product data from all three platforms (Amazon.in, Flipkart, Meesho) into a unified schema. Normalize: product titles (strip variant noise), prices (ensure float with INR handling), discount_pct computation ((MRP - price) / MRP * 100) when not provided, rating normalization to float out of 5, review_count as integer, delivery_estimate to structured days estimate (for delivery speed scoring), and seller_name. Handle edge cases: out-of-stock detection, price variations by seller (use lowest FBA/Flipkart-assured price), Meesho median price selection. Export as Pydantic models for use in the search and AI verdict endpoints. Note: this module is a dependency of the Product Search API (9be2a12f) and AI Verdict API (1ab3df02).

As a Backend Developer, implement a caching layer for product search results and price history data to reduce redundant scraping calls and improve response latency. Use Redis (or a lightweight in-memory TTL cache with cachetools) with configurable TTL (e.g., 10 minutes for search results, 1 hour for price history). Cache key: hash of (query, platform_preference). Add REDIS_URL environment variable to config. Integrate cache check-before-fetch and cache-write-after-fetch in the search and price history service layers. Note: SRD requires real-time data with minimal latency — caching with short TTL balances freshness and performance.

As a Backend Developer, implement the GET /api/v1/emi endpoint using FastAPI. Accept query params: price (float), platform (str, optional). Return structured EMI options per platform: Flipkart, Amazon, Meesho — each with a list of EMI plans containing description, monthly_amount, tenure_months, interest_rate, and is_best flag. Compute EMI using standard formula P*r*(1+r)^n/((1+r)^n-1). Also return no-cost EMI options where available. This endpoint supports the EMIAndDetails section on the Results page (6b0d88fe). Note: frontend EMIAndDetails depends on this endpoint for live EMI data.

As a Frontend Developer, set up environment variable configuration for the React frontend. Create .env.development and .env.production files (and .env.example for documentation) with VITE_API_BASE_URL pointing to the FastAPI backend. Configure Vite proxy settings in vite.config.js for local development to proxy /api requests to the backend container, avoiding CORS issues during development. Add environment type checking using a central config.js or env.ts module that validates required environment variables at startup and exports typed constants. This ensures consistent API base URL usage across all service functions.

As a Backend Developer, implement data privacy compliance measures as required by the SRD. Ensure no user search history is stored in the database (verify ac53f97d models do not include user search logs). Add request logging that strips PII before writing to logs (no IP addresses, no search queries in persistent logs). Implement in-memory-only session handling for any temporary context. Add privacy policy endpoint GET /api/v1/privacy-info returning the data handling statement. Ensure GDPR/PDPA-compatible response headers (no tracking cookies from backend). Document data retention policy in README. Verify DATABASE_URL config does not point to a user-tracking schema.

As a frontend developer, implement the SearchForm section for the Search page. This is the primary interactive search form using `useState` hooks for `product`, `productTouched`, `budget`, `platform`, `city`, and `isSearching` state. It renders a canvas-based particle animation via `canvasRef` and `useCallback`/`useEffect` — the `initCanvas` function spawns 40 particles with randomized positions, velocities, and alpha values rendered using the Canvas 2D API with `requestAnimationFrame`, wrapping particles at canvas edges and drawing blue `rgba(26, 115, 232, alpha)` circles. The form includes a text input for product name with inline validation (`productValid`/`productInvalid`), a dual-thumb budget range slider with `formatINR` formatting for INR display (min ₹100, max ₹100,000, step ₹100), a platform selector mapping the `PLATFORMS` constant (any/amazon/flipkart/meesho) with `sf-platform-dot--*` modifier classes, a city text input, and a submit button that sets `isSearching` to true during submission. Canvas resizes on DPR changes.

As a frontend developer, implement the ResultsSummary section for the Search page. Uses `useState` for `sortBy` (default `best_deal`), `filters` (initial array of budget/platform/city filter objects with type, label, icon fields), and `mobileOpen` toggle state. Renders an `rs-left` block with an SVG magnifier icon and query text plus result count. Includes a mobile `rs-toggle` button that toggles `rs-collapsible--open` class on the collapsible container. The collapsible area contains: filter tags rendered from the `filters` array with `rs-tag--budget`, `rs-tag--platform`, `rs-tag--city` modifier classes via `filterClass()`, each tag clickable to call `removeFilter(index)`, plus a `rs-clear-all` button calling `clearAllFilters()`. A sort dropdown using the `sortOptions` constant (best_deal/price_asc/price_desc/rating) with a `rs-sort-select-wrap` wrapper. All filter removal is immutable via `Array.filter`.

As a frontend developer, implement the ComparisonTable section for the Search page. Uses `useState` for `activeRow` (null by default) to highlight hovered/selected rows. Renders a `ct-table-wrap` containing an HTML `<table>` with `ct-table` class. Each row is built from the `products` array containing 4 mock products across amazon/flipkart/meesho platforms with fields: `id`, `platform`, `platformName`, `productName`, `price`, `mrp`, `discount`, `rating`, `reviews`, `deliveryDays`, `deliveryCity`, `seller`, `buyUrl`, and `isBest`. Helper functions include `getDiscountClass()` returning `ct-discount-badge--high/medium/low` based on discount threshold, `getDeliveryClass()` returning `ct-delivery--fast/normal` for ≤2 days, `getDeliveryLabel()` for human-readable delivery text, `renderStars()` building star strings from float ratings, and `formatReviewCount()` formatting numbers as `k` abbreviations. Rows with `isBest: true` receive a best-deal badge. Rows trigger `setActiveRow` on interaction.

As a frontend developer, implement the AIVerdictCard section for the Search page. Imports Three.js and uses `useRef` for `mountRef` to host a Three.js canvas. The `verdictKey` is hardcoded to `gooddeal` (selectable from `verdicts` map containing `gooddeal`, `wait`, `hotdeal` keys, each with label, icon, iconClass, badgeClass, cardClass, barClass, reasoning text, and confidence integer). In `useEffect`, a Three.js scene is set up with `PerspectiveCamera` (FOV 42, z=4.2), `WebGLRenderer` (alpha, antialias, transparent background), an `IcosahedronGeometry(0.72, 1)` mesh with `MeshStandardMaterial` (color/emissive driven by verdictKey: `0x1A73E8` for gooddeal, `0xFF7043` for wait, `0xFFC107` for hotdeal, opacity 0.5, wireframe false), plus a `MeshBasicMaterial` wireframe overlay. The card displays: verdict icon, label badge with `av-badge--*` class, reasoning text paragraph, and a confidence bar fill using `av-conf-bar-fill--*` class scaled to the `confidence` percentage value.

As a frontend developer, implement the PriceHistoryChart section for the Search page. Imports `react-chartjs-2` `Line` component and registers `CategoryScale`, `LinearScale`, `PointElement`, `LineElement`, `Title`, `Tooltip`, `Legend`, `Filler` from Chart.js. Uses Three.js for a `GalaxyBackground` sub-component rendered in a `containerRef` div: creates a starfield with 200 stars using `BufferGeometry`, randomized positions and colors from a palette of `#1A73E8`, `#FF7043`, `#FFC107`, rendered with `PerspectiveCamera` (FOV 45, z=18) and transparent `WebGLRenderer`. Price data is generated via `generatePriceData(base, variance, trend)` producing 30-day arrays for amazon (base 1299), flipkart (base 1349), and meesho (base 1199). `generateDates(30)` formats dates as `en-IN` locale strings. A `sliceData(days)` helper slices all arrays by day range. The `trendLabel(prices)` function computes % change and returns `phc-stat-change--down/up/neutral` class. State includes a days-range selector (7/15/30 days). The chart renders three `Line` datasets with fill gradients and the `Filler` plugin.

As a frontend developer, implement the AlternativesSection section for the Search page. This is a static grid section with no state. Renders an `al-inner` container with heading `al-heading` and subtitle `al-subtitle`. Maps the `alternatives` array (5 items: Samsung Galaxy M14, Realme Narzo 60X, POCO M6 Pro, OnePlus Nord CE 3 Lite, Vivo T2x) into `al-card` anchor tags with `target='_blank'` and `rel='noopener noreferrer'`. Each card contains: `al-card-img-wrap` with an `al-card-img` product image loaded from SSL Amazon CDN URLs, a conditional `al-badge` span rendered only when `item.badge` is truthy (values: null, 'Bestseller', 'Top Rated', 'Great Value'), `al-card-body` with platform name, product title (`al-card-title`), star rating via `starRating()` helper (building `★`/`☆` character arrays), price, MRP, and discount badge. The `al-grid` uses CSS grid layout for responsive card arrangement.

As a frontend developer, implement the ResultsHeader section for the Results page. This section renders a two-column layout with a product image column (rh-image-col with rh-image-wrap and rh-product-img) and a product info column (rh-info-col). The info column includes: a breadcrumb nav (rh-breadcrumb) with ChevronRight separators linking to /Landing and /Search; an h1 product name; platform badge chips (rh-badge rh-badge--amazon/flipkart/meesho) using ShoppingBag, Zap, and Package lucide icons from platformIcons map; a best price callout block (rh-best-price) with TrendingDown icon, price value, and platform label; and a star rating display using renderStars() and formatReviewCount() helpers. Uses static productData object with name, image, bestPrice, bestPricePlatform, lowestPrice, averageRating, reviewCount, and platforms array. Imports from ResultsHeader.css. Note: Navbar component may already exist from Landing page.

As a frontend developer, implement the ComparisonTable section for the Results page. This section renders a sortable multi-platform price comparison table using `PLATFORM_DATA` (Flipkart, Amazon, Meesho with priceNum, mrp, discount, rating, reviews, delivery, seller, buyUrl). State is managed via `useState('price')` for `sortKey`, with sorted array derived using spread + sort — supporting three sort modes: price (ascending priceNum), discount (descending), and rating (descending). Each platform row renders: a logo badge (`ct-flipkart`, `ct-amazon`, `ct-meesho` CSS classes), price vs MRP with discount badge colored via `getDiscountClass` (ct-high/ct-mid/ct-low thresholds at 30%/20%), star rating rendered by `renderStars()` helper (full ★, half ★, empty ★ spans), delivery info with `deliveryFast` flag, seller name, and a 'Buy Now' CTA linking to `buyUrl`. A `ct-best-badge` with pulsing dot marks the best deal. The section header includes a 'Live Prices · Updated Now' badge. Sort control buttons are rendered for Price / Discount / Rating. Styles from `ComparisonTable.css`.

As a frontend developer, implement the PriceHistoryChart section for the Results page. This section integrates Chart.js via `react-chartjs-2` `<Line>` component with registered modules: CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler. Three platform datasets (Amazon #1A73E8, Flipkart #FF7043, Meesho #FFC107) are generated using `generatePriceHistory(base, volatility, days)` with realistic INR base prices and stored in `BASE_DATA` keyed by range (7/14/30 days). State includes `range` (useState 30), `dimmed` (object toggling platform visibility), and `tooltip` (object with visible/x/y/label/values for custom hover tooltip). `buildDateLabels(days)` generates date strings from June 25, 2026. `priceDelta(arr)` computes % change and direction (drop/rise) per platform for stat cards below the chart. `toggleDim(platform)` updates dimmed state. `chartRef` (useRef) references the Chart.js instance. A range selector renders 7D/14D/30D buttons. Each platform has a clickable legend chip that dims its dataset. `formatINR(n)` formats numbers with `en-IN` locale. A `<canvas>`-based custom tooltip is rendered via tooltip state. Styles from `PriceHistoryChart.css`. Note: similar PriceHistoryChart section exists on the Search page — reuse or extend that component if already implemented.

As a frontend developer, implement the AIVerdictCard section for the Results page. This section renders an AI-powered recommendation card using `VERDICT_DATA` (type: 'buy', confidence: 87, priceVsAvg: '-15%', bestPlatform: 'Amazon') and `VERDICT_CONFIG` mapping verdict types (buy/wait/avoid) to badge CSS classes (`avc-buy`, `avc-wait`, `avc-avoid`). An `IntersectionObserver` (threshold: 0.3) triggers a confidence bar animation via `useState(0)` → `setFillWidth(verdict.confidence)` with a 150ms delay, guarded by `animatedRef.current` to fire only once. The card ref is `cardRef` (useRef). The verdict text supports dangerouslySetInnerHTML for inline `<strong>` tags. Four insight rows render from `verdict.insights` array with type-based icon and color (positive ✅ green, neutral 📦 blue, warning ⚠️ amber). A section label with decorative lines ('Smart Analysis') wraps the card. Styles from `AIVerdictCard.css`. Note: similar AIVerdictCard exists on the Search page — reuse or extend that component if already implemented.

As a frontend developer, implement the AlternativeProducts section for the Results page. This is a static display section rendering `ALTERNATIVE_PRODUCTS` array (4 items: Samsung Galaxy M34 5G, Redmi Note 13 Pro 5G, realme narzo 60 5G, POCO M6 Pro 5G) as product cards. Each card shows: category eyebrow with `categoryIcon` emoji, product name, `priceMin`–`priceMax` range, star rating (numeric), review count, savings badge, and platform availability pills rendered from each product's `platforms` array using `ap-pill-amazon`, `ap-pill-flipkart`, `ap-pill-meesho` CSS classes. A `ratingClass` (ap-rating-good / ap-rating-avg) styles the rating display. Each card is an anchor tag linking to `/Results?q=<encoded-product-name>`. The section header includes an `ap-eyebrow` ('More Options'), `ap-title` ('Similar Products to Compare'), `ap-subtitle`, and a 'View All' link to `/Search` with an SVG arrow icon. A decorative `ap-divider` appears above the header. No state hooks are used — purely static render. Styles from `AlternativeProducts.css`. Note: similar AlternativesSection exists on the Search page — reuse card UI patterns if applicable.

As a Backend Developer, implement the weighted deal scoring algorithm as specified in the SRD. Function signature: score_listings(listings: List[NormalizedProduct]) -> ScoredResult. Weights: Price 40% (lower = higher score), Rating 25% (higher = better), Reviews count 15% (more = better trust signal), Delivery speed 20% (faster = better). Normalize each dimension to 0–1 scale before applying weights. Return a ranked list with scores and the top recommendation. Apply AI verdict rules: current price vs 30-day average triggers 'wait'; all-time low triggers 'buy'; Meesho cheapest but rating < 3.5 triggers quality warning; prices within ₹100 triggers 'similar pricing' note. This module is consumed by both the Product Search API and AI Verdict API endpoints.

As a Backend Developer, implement a delivery estimation service that maps city inputs to delivery time estimates per platform. Accept city (str) and platform (str) as inputs. Maintain a mapping of tier-2 cities (Ahmedabad, Surat, etc.) to estimated delivery days per platform (Amazon Prime, Flipkart Assured, Meesho standard). Return structured delivery estimate: {days: int, label: str, is_fast: bool}. This is used in the normalized product data and contributes to the delivery speed dimension of the weighted scoring algorithm. Note: SRD specifies delivery time estimates as a user input and system output requirement.

As a Backend Developer, implement the GET /api/v1/alternatives endpoint using FastAPI. Accept query params: product_query (str), category (str, optional), max_budget (float, optional). Search and return 4–8 alternative or similar products in the same category across all three platforms. Each alternative product should include: name, category, price_min, price_max (across platforms), rating, review_count, platforms (array of available platforms), savings_vs_searched (percentage), and buy URLs per platform. This endpoint supports the AlternativeProducts section on Results page (6a0c6085 / c9a5a4d6) and AlternativesSection on Search page (27824525 / b7ce467d).

As a Frontend Developer, implement React Error Boundaries and global error handling for the Garnet-System React app. Create an ErrorBoundary component wrapping each page (Landing, Search, Results) to catch render-time errors gracefully. Implement a global API error handler in the API client (39e90447) that standardizes error responses (network errors, 422 validation errors, 500 server errors) into user-friendly toast notifications or inline error states. Add a loading skeleton component for async sections (ComparisonTable, PriceHistoryChart, AIVerdictCard) that shows while API calls are in-flight. Export shared ErrorBoundary, LoadingSkeleton, and ErrorMessage components from /src/components/shared/.

As a Backend Developer, extend the web scraping service (a57ec7eb) to support additional Indian e-commerce platforms beyond Amazon.in, Flipkart, and Meesho. Add scrapers for: Snapdeal, Myntra, Jabong, and brand websites (Sony India, Noise, boAt, Firebolt). Each scraper must extract the same normalized fields: product title, current price, MRP, discount %, rating, review count, delivery estimate, seller name, and buy URL. Update the unified search_all_platforms() function to include these new scrapers using asyncio.gather for concurrent execution. Add platform identifier to each result. Update the platform_preference field in the search endpoint to support the new platforms. Handle cases where a product is not listed on a given platform.

As a Backend Developer, implement the GET /api/v1/filter endpoint using FastAPI. Accept query params: product_query (str), platforms (comma-separated list including all supported platforms), min_price (float), max_price (float), min_rating (float), max_delivery_days (int), discount_min (float). Apply these filters server-side on the normalized product results from the search service. Return filtered and sorted product listings. This endpoint supports the advanced platform-specific filtering feature requested for all supported platforms (Amazon, Flipkart, Meesho, Snapdeal, Myntra, Jabong, brand sites). Note: The ResultsFiltersBar frontend components (f8ae9a55, 227d131e) depend on this endpoint for live filtered results.

As a Frontend Developer, update the SearchForm platform selector (b1ed2bde, a84514e1) and ComparisonTable components (5c2eb167, bcbb3aaf) to support the expanded platform list beyond Amazon, Flipkart, and Meesho. Add platform options and visual badges for Snapdeal, Myntra, Jabong, Sony India, boAt, Noise, and Firebolt. Update platform color constants and CSS modifier classes (e.g., sf-platform-dot--snapdeal, ct-snapdeal, ct-myntra). Update the ResultsFiltersBar platform filter chips (227d131e, f8ae9a55) to include all new platforms. Ensure platform pills in AlternativeProducts cards (c9a5a4d6, 6a0c6085, b7ce467d, 27824525) also reflect the expanded platform set. Note: this task depends on temp_multi_platform_scraper being implemented so API responses include new platform data.

As a Backend Developer, implement rate limiting for the scraping-heavy API endpoints (POST /api/v1/search, GET /api/v1/price-history, GET /api/v1/alternatives) to prevent abuse and protect against anti-bot bans. Use slowapi or fastapi-limiter with Redis backend for distributed rate limiting. Configure limits: search endpoint 10 req/min per IP, price-history 20 req/min, alternatives 15 req/min. Add X-RateLimit-* headers to responses. Return 429 Too Many Requests with Retry-After header when limit is exceeded. Document rate limits in API responses and .env.example. Note: this complements the CORS and middleware setup in e58b11c8.

As a frontend developer, implement the ResultsFiltersBar section for the Results page. This section is a fully interactive filter bar using useState for platforms (multi-select chip toggles with rfb-chip-dot--amazon/flipkart/meesho classes), rating dropdown (RATING_OPTIONS array), delivery speed dropdown (DELIVERY_OPTIONS array), and min/max price inputs. The countActive() helper computes the number of active filters for badge display. Includes a Three.js AccentLine sub-component that mounts a WebGLRenderer with OrthographicCamera onto a ref'd div, using a custom ShaderMaterial with uTime, uActive, and uResolution uniforms — the GLSL fragment shader animates a sine-wave pulse line when filters are active (uActive > 0.5) vs. a flat 18% intensity when idle. Uses useRef for the mount element and animateRef for the animation loop, with useEffect for Three.js setup/teardown and useCallback for the resize handler. Imports THREE from 'three' and styles from ResultsFiltersBar.css.

As a frontend developer, implement the ComparisonTable section for the Results page. This section renders a static comparison table (ct-root > ct-inner) using PLATFORM_DATA array with entries for Amazon.in, Flipkart, and Meesho — each containing price, mrp, discount, rating, reviewCount, deliveryDays, deliveryLabel, seller, sellerTrust, buyUrl, and isBest flags. The renderStars() helper renders SVG star icons with a LinearGradient half-star (ct-half-grad) for fractional ratings, and ct-star--empty class for unfilled stars. formatReviewCount() abbreviates counts to 'k' notation. getDeliveryColorClass() applies ct-delivery-dot--warn or ct-delivery-dot--late classes based on delivery day thresholds. The isBest flag highlights the best-deal row. Includes an h2 heading and subheading with ct-product-label span. Imports from ComparisonTable.css. Note: A ComparisonTable component was previously implemented for the Search page — reuse or adapt that component.

As a frontend developer, implement the PriceHistoryChart section for the Results page. This section uses react-chartjs-2 Line chart with Chart.js modules registered: CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler. State includes timeRange (useState defaulting to '30d') and hiddenPlatforms (useState object for per-platform toggle). generateDateLabels() produces the last 30 day labels in en-IN locale; generatePriceSeries() produces randomized price data with volatility and trend params. The three platform datasets (amazonPrices, flipkartPrices, meeshoPrices) use platformColors map with line colors (#FF7043, #1A73E8, #FFC107), matching bg fills, and fill:true with tension:0.35. getFilteredData() slices data based on timeRange (7d/14d/30d) and excludes hidden platforms. Time range toggle buttons (ranges array with 7d/14d/30d keys) and per-platform legend toggles call togglePlatform(). Imports from PriceHistoryChart.css. Note: A PriceHistoryChart was previously implemented for the Search page — reuse or adapt.

As a frontend developer, implement the AIVerdictCard section for the Results page. This section features a VerdictSphere Three.js sub-component that mounts a PerspectiveCamera (FOV 40) renderer on a containerRef, rendering: a SphereGeometry(1, 48, 48) MeshStandardMaterial core sphere; a TorusGeometry(1.25, 0.04) outer glow ring with emissive color; and small orbiting SphereGeometry(0.06) particle meshes in a group. All Three.js colors and emissive values derive from the verdict's color prop. The verdicts object defines three states — buy (#43A047, TrendingUp icon), wait (#FF9800, Clock icon), avoid (#EF5350, AlertTriangle icon) — each with label, text, confidence percentage, cssClass, and icon. Uses useState, useEffect, useRef, and useMemo. Imports Sparkles, TrendingUp, Clock, AlertTriangle from lucide-react and THREE from 'three'. Styles from AIVerdictCard.css. Note: An AIVerdictCard was previously implemented for the Search page — reuse or adapt.

As a frontend developer, implement the AlternativeProducts section for the Results page. This section renders a static ap-grid of anchor cards (ap-card) linking to /Results, using the alternativeProducts array of 4 smartphone entries each with id, category, name, priceMin, priceMax, rating, reviewCount, platforms array, and priceVsSearched value. Each card displays: ap-card-category span, ap-card-name h3, ap-card-meta div with price range (formatPrice() helper using toLocaleString en-IN with ₹ prefix) and rating block (ap-card-rating with ap-card-rating-stars using renderStars(), numeric rating, and ap-card-rating-count). Platform badges are mapped from the platforms array. The section includes an h2 heading (ap-heading) and subheading paragraph (ap-subheading). formatPrice uses toLocaleString('en-IN'). Imports from AlternativeProducts.css.

As a frontend developer, implement the CallToAction section for the Results page. This section has two interactive state flags: saved (useState boolean toggled by a 'Save Deal' / 'Saved!' button) and notifyEmail (useState boolean toggled by a price-drop notification checkbox/button). The Three.js decorative orb accent uses a canvas ref (canvasRef) with a WebGLRenderer (alpha: true), PerspectiveCamera (FOV 35, position z=8), and a central group containing: a SphereGeometry(0.7, 48, 48) sphere with MeshStandardMaterial (#4D90FE, emissive #1A73E8); two TorusGeometry rings — ring1 (radius 1.25, tube 0.03, #FF7043 emissive) rotated at x=PI*0.45/y=PI*0.15, ring2 (radius 1.5, tube 0.025, #FFC107 emissive) rotated at x=PI*0.6/y=-PI*0.2; and a SphereGeometry(0.08) particle (#FFEB3B, emissiveIntensity 0.8). Lighting uses AmbientLight(0xffffff, 0.6) plus two PointLights (#4D90FE and #FF7043). A resize handler reads parent.clientWidth for canvas sizing. Imports from CallToAction.css.

As a Tech Lead, verify the end-to-end integration between the Search page frontend implementation and the backend search API. Ensure the SearchForm component correctly calls the POST /api/v1/search endpoint with product, budget, platform, and city fields from the form state. Verify that ResultsSummary, ComparisonTable, AIVerdictCard, and PriceHistoryChart on the Search page correctly consume and render live API responses instead of static mock data. Confirm error states (product not found, budget exceeded, network error) are handled gracefully in the UI. Note: depends on frontend tasks (b1ed2bde, 63a693bc, 5c2eb167, 80aa70aa, 34bbeb59) and backend tasks (temp_backend_search_api, temp_backend_price_history_api, temp_backend_ai_verdict_api, temp_frontend_api_client).

As a frontend developer, implement the EMIAndDetails section for the Results page. This is the most complex section, comprising three sub-panels: (1) EMI Tab Panel — `activeTab` state (useState 'Flipkart') controls which platform's EMI rows render from `EMI_DATA` object keyed by Flipkart/Amazon/Meesho; each row shows platform logo badge (`ed-emi-platform-logo--flipkart/amazon/meesho` classes), description, monthly amount, tenure, and an optional 'Best Deal' badge for `isBest: true` rows. (2) EMI Calculator — `loanAmount` (useState '11000'), `tenure` (useState '12'), `interestRate` (useState '0') are controlled inputs; `calcEMI()` computes EMI using standard formula P*r*(1+r)^n/((1+r)^n-1) displayed as formatted INR output. (3) Seller Info Panel — renders `SELLERS` array (Cloudtail/RetailNet/TechZone) with platform dot indicators (`ed-seller-platform-dot--amazon/flipkart/meesho`), numeric rating, review count, and `<StarRating rating={...} />` sub-component that renders 5 `ed-star`/`ed-star--empty` spans. (4) Return Policies — renders `RETURN_POLICIES` array (Amazon/Flipkart/Meesho) as text rows. Styles from `EMIAndDetails.css`.

As a Tech Lead, verify the end-to-end integration between the SearchForm frontend component and the POST /api/v1/search backend endpoint. Ensure that form submission from SearchForm (b1ed2bde) correctly calls the search API via the shared API client (39e90447), passing product, budget, platform, and city. Verify the response is correctly routed to the Results page via URL params or React Router navigation state. Confirm loading states, validation errors (empty product), and API error states (network failure, no results) are handled gracefully in the SearchForm UI.

As a Tech Lead, verify the end-to-end integration between both SearchForm frontend components (Search page: b1ed2bde, a84514e1) and the POST /api/v1/search backend endpoint. Ensure form submission correctly calls the search API via the shared API client (39e90447) with product, budget, platform, and city. Verify multi-platform support (including new platforms: Snapdeal, Myntra, Jabong, brand sites) is reflected in the platform selector. Confirm loading states, validation errors, and API error states are handled gracefully. Note: this task corresponds to existing integration task a83f74c4 — if already covered, skip.

As a Tech Lead, verify the end-to-end integration between the multi-platform frontend UI updates and the extended multi-platform scraping backend. Ensure new platforms (Snapdeal, Myntra, Jabong, Sony India, boAt, Noise, Firebolt) appear correctly in the search form selector, comparison table, filter bar, and alternative products sections. Verify platform-specific data (price, MRP, discount, delivery, seller) from the extended scraper flows correctly into all UI components. Confirm 'Not listed' handling displays gracefully when a product is unavailable on a given platform. Verify buy links for brand sites open the correct product pages.

As a Tech Lead, verify the end-to-end integration between the Landing page hero search bar (13ad8c9e) and the Search page SearchForm (b1ed2bde). Ensure clicking a category star in the LandingHero 3D galaxy or submitting the hero search bar correctly navigates to /Search with query params (q, p) pre-populated. Verify SearchForm's useEffect correctly reads these URL params on mount and pre-fills the product and platform fields. Confirm the CTA buttons in LandingCTA (a7847d12) navigate to /Search correctly.

As a Tech Lead, verify the end-to-end integration between the ResultsHeader frontend section (Results page: c79fcb40) and the POST /api/v1/search backend endpoint. Ensure ResultsHeader replaces static productData (name, image, bestPrice, bestPricePlatform, lowestPrice, averageRating, reviewCount, platforms) with live data from the search API response. Verify platform badge chips render correctly for all supported platforms (including new ones). Confirm breadcrumb navigation from /Landing → /Search → /Results works correctly with live product name in the heading.

As a Tech Lead, verify the end-to-end integration between the Results page frontend implementation and the backend APIs. Ensure the Results page receives search context (from SearchForm navigation or URL params) and uses it to call the product search API, price history API, and AI verdict API. Verify ResultsHeader, ComparisonTable, AIVerdictCard, PriceHistoryChart, ResultsFiltersBar, and AlternativeProducts all correctly render live backend data. Confirm filter bar interactions (platform toggle, rating, delivery, price range) correctly filter the live API response data client-side. Verify buy links point to live platform URLs returned by the API. Note: depends on frontend tasks (c79fcb40, 227d131e, bcbb3aaf, 8f843e9c, ede78ee8, 6a0c6085, 3dd8f6fe) and backend tasks (temp_backend_search_api, temp_backend_price_history_api, temp_backend_ai_verdict_api, temp_frontend_api_client).

As a Tech Lead, verify the end-to-end integration between the PriceHistoryChart frontend components (Search page: 34bbeb59, Results page: ede78ee8) and the GET /api/v1/price-history backend endpoint. Ensure chart components replace static mock/generated data with live API responses from the price history service. Verify date labels, platform price arrays, all-time low/high stats, and range selectors (7d/14d/30d) all correctly reflect API data. Confirm error and loading states are handled gracefully when price history is unavailable.

As a Tech Lead, verify the end-to-end integration between the AIVerdictCard frontend components (Search page: 80aa70aa, Results page: 8f843e9c) and the POST /api/v1/ai-verdict backend endpoint. Ensure both AIVerdictCard instances replace hardcoded verdict data with live API responses routed through LiteLLM to GPT-5.4. Verify verdict type (buy/wait/avoid), confidence percentage, reasoning text, best platform, and insight bullets all render correctly from API response. Confirm the confidence bar animation (IntersectionObserver trigger) still functions with dynamic data. Confirm error handling when AI verdict endpoint is unavailable.

As a Tech Lead, verify the end-to-end integration between the ComparisonTable frontend components (Search page: 5c2eb167, Results page: bcbb3aaf) and the POST /api/v1/search backend endpoint. Ensure both ComparisonTable instances replace static PLATFORM_DATA / mock products arrays with live normalized product data from the search API response. Verify price, MRP, discount, rating, review count, delivery info, seller name, buy URL, and best-deal flag all render correctly from API data. Confirm sort controls (Price / Discount / Rating), best-deal badge, and 'Buy Now' links to live platform URLs function correctly with dynamic data.

As a Tech Lead, verify the end-to-end integration between the EMIAndDetails frontend section (Results page: 6b0d88fe) and the GET /api/v1/emi backend endpoint. Ensure EMI tab panels (Flipkart/Amazon/Meesho) render live EMI plan data from the API instead of static EMI_DATA. Verify the EMI calculator's calcEMI() function remains client-side (no API call needed for calculation). Confirm seller info and return policies sections still render correctly. Verify loading and error states when the EMI endpoint is unavailable.

As a Tech Lead, verify the end-to-end integration between the AlternativeProducts/AlternativesSection frontend components (Results page: 6a0c6085, Search page: 27824525) and the GET /api/v1/alternatives backend endpoint. Ensure both sections replace static ALTERNATIVE_PRODUCTS / alternatives arrays with live API data. Verify product cards render correctly with live price ranges, ratings, platform pills, and savings badges. Confirm '/Results?q=<encoded-product-name>' navigation links are correctly derived from live API product names.

As a Tech Lead, verify the end-to-end integration between the ResultsFiltersBar frontend components (Results page: 227d131e, Search page: f8ae9a55) and the GET /api/v1/filter backend endpoint. Ensure filter state (platforms, rating, delivery, price range) correctly constructs API query params and calls the filter endpoint. Verify filtered results update ComparisonTable and other result sections dynamically. Confirm active filter pills reflect applied filters from live API responses. Verify the AccentLine Three.js shader animates correctly when live filters are active.

As a Tech Lead, verify the end-to-end integration between the EMIAndDetails frontend section (Results page: 6b0d88fe) and the GET /api/v1/emi backend endpoint. Ensure EMI tab panels render live EMI plan data from the API instead of static EMI_DATA. Verify the EMI calculator's calcEMI() remains client-side. Confirm seller info and return policies render correctly. Verify loading and error states when the EMI endpoint is unavailable. Note: this task corresponds to existing integration task 25c07d9b — check for duplication before executing.