You are a Next.js expert who builds lead capture pages with API integrations. Before writing code, explain what React hooks you'll use and how you'll handle form state. Then create the implementation.

I need to build this in steps. Step 1: Create a landing page at /lp/lead-magnet in my existing Next.js 16 project (using TypeScript and Tailwind 3.4). Follow the form patterns in our /contact page if you can access it.

The page should have a form with these fields:
- name (text input)
- email (email input)
- business type (dropdown with default 'Select one': service, product, both)
- monthly revenue (dropdown with default 'Select one': 0-10k, 10k-50k, 50k+)
- biggest challenge (textarea, max 500 chars with character counter showing remaining - prevent typing beyond 500)

Use Tailwind for styling with a clean centered card on white background.

Validation rules:
- All fields required
- Email must be valid format (show error: 'Please enter a valid email like name@company.com')
- Show error messages in red text below each field if invalid
- On submit: show loading spinner, disable button
- If any field is empty or email is bad, show errors and don't submit
- For now, just log the form data to console on submit

Output format: Give me the complete page.tsx file with inline comments explaining the validation logic. Then list the steps to add this to my project.

If you're not sure about Next.js 16 features or need clarification, please ask before writing code. Next steps will be: connecting to Kit.com API, then Vercel AI Gateway, then showing results.

You are a Next.js expert who builds lead capture pages with API integrations. Before writing code, explain what React hooks you'll use and how you'll handle form state. Then create the implementation.

I need to build this in steps. Step 1: Create a landing page at /lp/lead-magnet in my existing Next.js 16 project (using TypeScript and Tailwind 3.4). Follow the form patterns in our /contact page if you can access it.

The page should have a form with these fields:
- name (text input)
- email (email input)
- business type (dropdown with default 'Select one': service, product, both)
- monthly revenue (dropdown with default 'Select one': 0-10k, 10k-50k, 50k+)
- biggest challenge (textarea, max 500 chars with character counter showing remaining - prevent typing beyond 500)

Use Tailwind for styling with a clean centered card on white background.

Validation rules:
- All fields required
- Email must be valid format (show error: 'Please enter a valid email like name@company.com')
- Show error messages in red text below each field if invalid
- On submit: show loading spinner, disable button
- If any field is empty or email is bad, show errors and don't submit
- For now, just log the form data to console on submit

Output format: Give me the complete page.tsx file with inline comments explaining the validation logic. Then list the steps to add this to my project.

If you're not sure about Next.js 16 features or need clarification, please ask before writing code. Next steps will be: connecting to Kit.com API, then Vercel AI Gateway, then showing results.

You are a Next.js expert who builds lead capture pages with API integrations. Before writing code, explain what React hooks you'll use and how you'll handle form state. Then create the implementation.

I need to build this in steps. Step 1: Create a landing page at /lp/lead-magnet in my existing Next.js 16 project (using TypeScript and Tailwind 3.4). Follow the form patterns in our /contact page if you can access it.

The page should have a form with these fields:
- name (text input)
- email (email input)
- business type (dropdown with default 'Select one': service, product, both)
- monthly revenue (dropdown with default 'Select one': 0-10k, 10k-50k, 50k+)
- biggest challenge (textarea, max 500 chars with character counter showing remaining - prevent typing beyond 500)

Use Tailwind for styling with a clean centered card on white background.

Validation rules:
- All fields required
- Email must be valid format (show error: 'Please ente