Role & Objective

You are a world-class Product Designer and Frontend Engineer. Build the single-screen mobile application for "SpotDrop" — a minimal, AI-native visual commerce tool that lets users snap a photo of a real-world object and immediately reveals the exact product model, price, and a direct 1-tap link to buy online.

Helpful Context & Visual Style

Target User: High-intent visual shoppers who want an exact SKU match instantly without manual text searching.

Visual Aesthetic: Dark-mode primary, sleek, camera-first utility aesthetic (similar to Snapchat meets Apple Wallet or Klarna). High contrast, high legibility, clean typography, minimalist borders.

Vibe: Precise, effortless, premium tool.

App Flow & Key User Journey

The application operates as a dynamic, single-page web/mobile view with 3 core states:

STATE 1: CAMERA SCANNER (Default view on launch)

Fullscreen viewfinder showing an active camera preview feed or stylized camera placeholder frame.
Minimal overlay UI: Top app header with "SpotDrop" logo and subtle status dot.
Target Reticle: A glowing, subtle target frame in the center of the screen indicating where to align the object.
Bottom Controls: Prominent round Shutter Button in the center, flanked by a secondary "Upload Photo / Gallery" button on the left.

STATE 2: AI PROCESSING (Triggered on shutter tap / upload)

Smooth transition state overlaying the camera feed.
A modern scanning line animation sweeping vertically across the captured image.
Status text displaying dynamic loading states: "Analyzing image...", "Matching SKU...", "Fetching lowest price..."

STATE 3: MATCH & BUY RESULT (Bottom Drawer / Sheet)

An elegant bottom sheet slides up over the background photo, taking up 45% of the screen.
Visual Match Indicator: High confidence badge ("98% Match - Exact Model Found").
Identified Product Details: Product Title (e.g., "Sony WH-1000XM5 Wireless Headphones - Black"), Verified Brand Name, Thumbnail image preview.
Price & Source: Highlighted lowest price in bold green text (e.g., "$348.00"), displaying vendor name (e.g., "Amazon").
Primary Call to Action (CTA): High-contrast, full-width button reading "Buy on Amazon ->" that opens the destination link in a new tab.
Reset / Retake Option: A discreet "Scan Another Item" button or swipe-down gesture to reset back to STATE 1.

Implementation Notes & Technical Constraints

Component Framework: React + Tailwind CSS + Lucide React Icons + Shadcn UI components.

Responsive Design: Optimized specifically for mobile viewport dimensions (max-w-md centered on desktop preview).

State Management: Use React useState to mock and demonstrate switching between STATE 1 (Camera), STATE 2 (Scanning Animation), and STATE 3 (Result Drawer) seamlessly when clicking the shutter button.

Mock Data: Pre-populate realistic result data for demo purposes (e.g., exact match title, price, merchant name, thumbnail).

Interactivity:

Tapping the Shutter Button transitions from STATE 1 to STATE 2 for 1.5 seconds, then reveals STATE 3.
Tapping "Scan Another Item" closes the drawer and restores STATE 1.

Role & Objective

Overall Objective

Provide a seamless, ultra-fast "Shoot and Buy" visual discovery interface that turns a real-world photo into an exact product match and outbound checkout link in under two screens.

Helpful Context & Visual Style

Target User: High-intent visual shoppers who want an exact SKU match instantly without manual text searching.
Visual Aesthetic: Dark-mode primary, sleek, camera-first utility aesthetic (similar to Snapchat meets Apple Wallet or Klarna). High contrast, high legibility, clean typography, minimalist borders.
Vibe: Precise, effortless, premium tool.

App Flow & Key User Journey

The application operates as a dynamic, single-page web/mobile view with 3 core states:

STATE 1: CAMERA SCANNER (Default view on launch)
- Fullscreen viewfinder showing an active camera preview feed or stylized camera placeholder frame.
- Minimal overlay UI: Top app header with "SpotDrop" logo and subtle status dot.
- Target Reticle: A glowing, subtle target frame in the center of the screen indicating where to align the object.
- Bottom Controls: Prominent round Shutter Button in the center, flanked by a secondary "Upload Photo / Gallery" button on the left.
STATE 2: AI PROCESSING (Triggered on shutter tap / upload)
- Smooth transition state overlaying the camera feed.
- A modern scanning line animation sweeping vertically across the captured image.
- Status text displaying dynamic loading states: "Analyzing image...", "Matching SKU...", "Fetching lowest price..."
STATE 3: MATCH & BUY RESULT (Bottom Drawer / Sheet)
- An elegant bottom sheet slides up over the background photo, taking up 45% of the screen.
- Visual Match Indicator: High confidence badge ("98% Match - Exact Model Found").
- Identified Product Details: Product Title (e.g., "Sony WH-1000XM5 Wireless Headphones - Black"), Verified Brand Name, Thumbnail image preview.
- Price & Source: Highlighted lowest price in bold green text (e.g., "$348.00"), displaying vendor name (e.g., "Amazon").
- Primary Call to Action (CTA): High-contrast, full-width button reading "Buy on Amazon ->" that opens the destination link in a new tab.
- Reset / Retake Option: A discreet "Scan Another Item" button or swipe-down gesture to reset back to STATE 1.

Implementation Notes & Technical Constraints

Component Framework: React + Tailwind CSS + Lucide React Icons + Shadcn UI components.
Responsive Design: Optimized specifically for mobile viewport dimensions (max-w-md centered on desktop preview).
State Management: Use React useState to mock and demonstrate switching between STATE 1 (Camera), STATE 2 (Scanning Animation), and STATE 3 (Result Drawer) seamlessly when clicking the shutter button.
Mock Data: Pre-populate realistic result data for demo purposes (e.g., exact match title, price, merchant name, thumbnail).
Interactivity:
- Tapping the Shutter Button transitions from STATE 1 to STATE 2 for 1.5 seconds, then reveals STATE 3.
- Tapping "Scan Another Item" closes the drawer and restores STATE 1.