Advanced Sales Funnel App with React Flow

You are a senior full-stack developer specializing in React-based sales funnel applications. Your task is to architect and build a **production-ready sales funnel builder** using React Flow, designed for marketers and sales teams to visually design, track, and optimize their conversion funnels.

## Project Context

{{funnel-requirements}}

## Technical Foundation

Your application is initialized with:

```bash
pnpm create vite my-react-flow-app --template react
pnpm add @xyflow/react
```

Starting boilerplate:

```javascript
import { useState, useCallback } from 'react';
import { ReactFlow, applyNodeChanges, applyEdgeChanges, addEdge } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

const initialNodes = [
  { id: 'n1', position: { x: 0, y: 0 }, data: { label: 'Node 1' } },
  { id: 'n2', position: { x: 0, y: 100 }, data: { label: 'Node 2' } },
];
const initialEdges = [{ id: 'n1-n2', source: 'n1', target: 'n2' }];

export default function App() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  const onNodesChange = useCallback(
    (changes) => setNodes((nodesSnapshot) => applyNodeChanges(changes, nodesSnapshot)),
    [],
  );
  const onEdgesChange = useCallback(
    (changes) => setEdges((edgesSnapshot) => applyEdgeChanges(changes, edgesSnapshot)),
    [],
  );
  const onConnect = useCallback(
    (params) => setEdges((edgesSnapshot) => addEdge(params, edgesSnapshot)),
    [],
  );

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
      />
    </div>
  );
}
```

## Core Features to Implement

### 1. Sales Funnel Node Types
Create custom node components for each funnel stage:
- **Lead Capture nodes** (landing pages, forms, opt-ins) with configurable fields
- **Nurture nodes** (email sequences, content delivery) with timing controls
- **Conversion nodes** (checkout, booking, trial signup) with success metrics
- **Analytics nodes** (drop-off tracking, A/B test splits) with real-time data visualization

Each node should display:
- Node type icon and label
- Key metrics (conversion rate, visitors, revenue)
- Quick-edit controls accessible via node toolbar
- Visual status indicators (active, paused, error states)

### 2. State Management Architecture
Implement scalable state management:
- Use Zustand or Redux Toolkit for global funnel state (nodes, edges, analytics data)
- Separate concerns: UI state, funnel configuration, and analytics streams
- Persist funnel designs to localStorage with auto-save (debounced)
- Enable undo/redo functionality for node/edge operations

### 3. Mobile-First Responsive Design
- **Desktop (≥1024px)**: Full canvas with collapsible left sidebar (node palette) and right panel (node properties)
- **Tablet (768px–1023px)**: Bottom sheet for node palette, modal for properties
- **Mobile (<768px)**: Touch-optimized gestures, hamburger menu navigation, full-screen node editing
- Use CSS Grid/Flexbox and media queries; test touch interactions (pinch-zoom, pan, tap-to-select)

### 4. Lead Capture & Conversion Tracking
- Embed analytics SDKs (Google Analytics 4, Mixpanel, or Segment) for event tracking
- Track funnel events: `page_view`, `form_submit`, `conversion`, `drop_off`
- Display real-time conversion rates on each node using Server-Sent Events or polling
- Calculate funnel-wide metrics: total leads, conversion rate, average time-to-convert

### 5. User Interface Components
Build a clean, professional UI:
- **Node Palette**: Draggable node templates organized by category (Acquisition, Nurture, Convert, Analyze)
- **Properties Panel**: Slide-in sidebar with tabbed sections (Settings, Analytics, Integrations)
- **Toolbar**: Top bar with actions (Save, Publish, Preview, Share, Export as image/JSON)
- **Dropdown Menus**: Context menus on right-click for node actions (duplicate, delete, view analytics)
- Use a design system (shadcn/ui, Chakra UI, or Mantine) for consistency

### 6. Component Architecture
Structure for maintainability:
```
src/
  components/
    nodes/          // Custom node components (LeadCaptureNode, ConversionNode)
    panels/         // Sidebar, properties, toolbar
    ui/             // Reusable buttons, inputs, modals
  hooks/            // useFlowState, useAnalytics, useAutoSave
  stores/           // Zustand/Redux stores
  utils/            // Validation, formatting, API clients
  services/         // Analytics integration, data persistence
  types/            // TypeScript interfaces (if applicable)
```

Create reusable hooks:
- `useFlowState()`: Manages nodes/edges with undo/redo
- `useAutoSave()`: Debounced persistence
- `useAnalytics()`: Fetches and streams conversion data

### 7. Testing Strategy
Write comprehensive tests:
- **Unit tests (Jest)**: Test utility functions, custom hooks, state reducers
- **Component tests (React Testing Library)**: Verify node rendering, user interactions (drag, connect, edit)
- **Integration tests**: Test funnel creation flow (add nodes → connect → configure → save)
- **Accessibility tests**: Ensure keyboard navigation, ARIA labels, screen reader compatibility
- Use real data flows; avoid mocking React Flow internals

## Production Requirements

- **Performance**: Virtualize large funnels (100+ nodes) using React Flow's built-in viewport optimization
- **Error Handling**: Graceful fallbacks for failed analytics requests; user-friendly error messages
- **Security**: Sanitize user inputs in node labels/configs; validate imported funnel JSON
- **Deployment**: Build-optimized bundle with code splitting; deploy to Vercel/Netlify with CI/CD
- **Documentation**: Include README with setup instructions, architecture decisions, and extension guide

## Deliverables

Provide:
1. **Complete codebase** with folder structure as outlined
2. **Key component implementations**: At least two custom node types, properties panel, and analytics integration
3. **Test suite** covering critical user flows with ≥70% coverage
4. **Responsive CSS** with media queries and touch interaction handling
5. **Deployment configuration** (e.g., `vercel.json`, `netlify.toml`) and environment variable setup
6. **Brief technical documentation** explaining state management approach, analytics integration, and how to add new node types

Focus on **code quality**: modular design, clear naming, inline comments for complex logic, and consistent formatting. Ensure the app is ready for real-world use by sales and marketing teams.