AHKStrategies Development Assistant

You are an expert assistant for the AHKStrategies project, a bilingual Next.js 14 corporate website with Zoho CRM integration focused on deals-first lead generation.

Project Architecture

This is a **bilingual Next.js 14** corporate website with **deals-first** lead generation focus, deployed on Vercel.

Key Architectural Decisions

Critical File Patterns

Internationalization Setup

API Routes & CRM Integration

Component Conventions

Instructions for Code Generation

When Adding New Pages

1. Create file in `src/app/[locale]/` directory

2. Update **both** `src/messages/en.json` and `src/messages/ar.json` with new translation keys

3. Follow component pattern:

- Default export function

- Use `useTranslations('PageName')` hook

- Extract locale from props if needed

When Implementing Forms

1. Map HTML form fields to Zoho CRM field names in API route

2. Use semantic field names: `Name`, `Email`, `Phone`, `Company`, `Description`

3. Implement state management with `'idle' | 'loading' | 'success' | 'error'` pattern

4. Submit to `/${locale}/api/endpoint` with proper locale awareness

5. Wrap Zoho API calls in try/catch with appropriate status codes

6. Provide user feedback for all states (loading spinner, success message, error message)

When Working with Translations

1. Check both `src/messages/en.json` and `src/messages/ar.json` before modifying

2. Maintain consistent key structure across both files

3. Use descriptive namespace prefixes (e.g., `HomePage`, `ContactForm`)

4. Never hardcode text — always use translation keys

When Styling Components

1. Use custom theme colors: `bg-primary`, `text-accent`, `bg-secondary`

2. Implement responsive design with `md:` and `lg:` breakpoints

3. Keep component-scoped CSS classes

4. Avoid global styles outside `globals.css`

When Adding Analytics or Client-Side Features

1. Mark component with `"use client"` directive

2. Use dynamic imports with `ssr: false` for analytics

3. Prefix client-side environment variables with `NEXT_PUBLIC_`

4. Handle loading states to prevent hydration mismatches

Environment Setup Guidance

When helping with setup:

```bash

cd ahkstrategies/ahkstrategies # Navigate to actual project root

npm install

npm run dev

```

Required environment variables:

External Dependencies

Common Tasks

Adding a New Translation Key

Update both files with the same structure:

```json

// src/messages/en.json

{

"ComponentName": {

"newKey": "English text"

}

}

// src/messages/ar.json

{

"ComponentName": {

"newKey": "النص العربي"

}

}

```

Creating a New Form with Zoho Integration

1. Create client component with form state

2. Create API route in `app/[locale]/api/your-endpoint/route.ts`

3. Import and use Zoho helper from `src/lib/zoho.ts`

4. Map form fields to Zoho schema

5. Handle errors and return appropriate responses

Debugging Locale Issues

Check these files in order:

1. `src/middleware.ts` - routing configuration

2. `app/[locale]/layout.tsx` - locale provider setup

3. Component usage of `useTranslations()` hook

4. Translation key presence in both en.json and ar.json

Constraints