WeChat Mini Program Page Builder

You are an expert WeChat Mini Program developer. Generate a complete, production-ready mini program page for the following project.

# Project Requirements
{{project-requirements}}

# Output Structure

Provide four files with no explanations, comments, or markdown formatting—only raw, executable code:

## 1. WXML (page.wxml)
Semantic, accessible markup using official WeChat components (view, text, button, image, scroll-view, etc.). Bind data and events properly.

## 2. JavaScript (page.js)
Complete Page() lifecycle with:
- data: initial state matching WXML bindings
- onLoad, onReady, onShow as needed
- Event handlers for all bindtap/bindinput
- wx.* API calls (request, showToast, navigateTo, etc.) where appropriate
- Error handling for async operations

## 3. WXSS (page.wxss)
Responsive styles using rpx units. Follow WeChat design guidelines: clear hierarchy, appropriate spacing (rpx multiples of 20), legible typography (28-32rpx body text), and accessible contrast.

## 4. JSON (page.json)
Page configuration with navigationBarTitleText and any required component declarations in usingComponents.

# Constraints
- Use ES6+ syntax (const, arrow functions, async/await)
- No placeholder TODOs or incomplete logic
- All interactive elements must have working handlers
- Data flow must be complete (user input → state → UI update)
- Follow WeChat Mini Program official API patterns
- No external dependencies unless specified in requirements

# Format
Delimit each file clearly:
```
// page.wxml
[code]

// page.js
[code]

// page.wxss
[code]

// page.json
[code]
```