# 🚀 GoGiftings Next.js Migration & Optimization Plan

## 1. 📂 Current Architecture Analysis
The `/gogiftings_final/` folder contains a fully built, SEO-optimized HTML/CSS/JS frontend for a UAE e-commerce gifting platform. 

### Key Characteristics:
*   **Architecture:** Traditional Multi-Page Application (MPA).
*   **Scale:** 80+ files covering Home, Listing, Checkout, Auth, Subscriptions, Events, and AI Assistant.
*   **Styling:** Highly custom vanilla CSS (`styles.css` + `gg-*.css` patches).
*   **Scripting:** DOM-heavy JavaScript for UI interactions (drawers, modals, sliders).
*   **SEO:** Built-in JSON-LD structured data.

---

## 2. 🏗️ Recommended Next.js File Structure

The project should follow the **Next.js App Router** structure, with cleanly separated API and Context layers.

```text
gogiftings-nextjs/
├── app/
│   ├── (shop)/                      # Route group for shopping
│   │   ├── listing/page.tsx         
│   │   ├── product/[slug]/page.tsx  
│   ├── (auth)/                      # Route group for authentication
│   │   ├── login/page.tsx           
│   │   ├── register/page.tsx
│   ├── checkout/page.tsx            
│   ├── layout.tsx                   # Global Layout (Header, Footer, Providers)
│   ├── page.tsx                     # Homepage
├── components/
│   ├── layout/                      # Global UI components (Header, Footer, AddonDrawer)
│   ├── ui/                          # Reusable smaller components (Button, ProductCard)
├── context/                         # Global State (CartContext, LocationContext)
├── hooks/                           # Custom React Hooks for API & State
│   ├── useAddons.ts                 
│   ├── useCart.ts                   
├── services/                        # API Services Layer (Axios/Fetch calls)
│   ├── apiClient.ts                 # Base API client with interceptors
│   ├── addonService.ts              
├── types/                           # TypeScript Interfaces
│   ├── api.ts                       
│   ├── addon.ts                     
├── public/                          # Assets, Images, Fonts
├── styles/                          # Global CSS and modular CSS files
```

---

## 3. 🛠️ Step-by-Step Execution Plan

### Step 1: Initialization & Asset Setup
*   Run `npx create-next-app@latest gogiftings-nextjs`.
*   Move images, SVGs, and fonts to `/public/assets/`.
*   **CSS Strategy:** For a quick start, bundle all `gg-*.css` into `app/globals.css`. (See *CSS Optimization* below for long-term strategy).

### Step 2: Global Layout (`app/layout.tsx`)
*   Extract the `<header>`, `<div class="topbar">`, and `<footer>`.
*   *Note:* Components with interactivity (language switchers, location modals) must use `"use client"`.

### Step 3: Overlays, Modals & State
*   Wrap the application in a `CartProvider` (React Context) so the `AddonDrawer` can be opened from any page seamlessly.

### Step 4: Componentizing the Homepage
*   Break `index.html` into `<HeroBanner />`, `<CategorySidebar />`, and `<ProductCard />`.
*   Replace vanilla JS sliders with **Swiper.js** or **Embla Carousel**.

### Step 5: JavaScript Fixes ➔ React State
*   **Do not directly copy** the old `gg-*.js` files. 
*   Rewrite logic (like calculating total addon prices) natively using `useState` and `onClick` handlers.

---

## 4. 🔗 Robust API Integration (Laravel)

To ensure high performance and standardized API calling:

### A. Define the API Standard (`types/api.ts`)
```typescript
export interface ApiResponse<T> {
    status: boolean;
    message: string;
    data: T;
}
```

### B. Define Entity Interfaces (`types/addon.ts`)
```typescript
export interface Addon {
    id: number;
    name: string;
    price: number;
    image_url: string;
    is_selected?: boolean; 
}
```

### C. Services Layer (`services/addonService.ts`)
Create a dedicated service using an `apiClient` (Axios) to handle Auth tokens and errors cleanly.
```typescript
import { apiClient } from './apiClient';
import { ApiResponse } from '../types/api';
import { Addon } from '../types/addon';

export const getAddons = async (): Promise<ApiResponse<Addon[]>> => {
    const response = await apiClient.get('/addons');
    return response.data; 
};
```

### D. Optimized Custom Hooks (`hooks/useAddons.ts`)
Use **SWR** or **React Query** for caching, deduplication, and loading states.
```typescript
import useSWR from 'swr';
import { getAddons } from '../services/addonService';

export const useAddons = () => {
    const { data, error, isLoading, mutate } = useSWR('/addons', getAddons, {
        revalidateOnFocus: false, 
        dedupingInterval: 60000,  
    });

    return {
        addons: data?.data || [],
        isLoading,
        isError: error,
        mutate
    };
};
```

---

## 5. 🎨 CSS Optimization Strategy

For a project heavily styled with multiple files (`gg-v27-butterfly-3d.css`), using **CSS Modules (`.module.css`)** is highly recommended over simple Global CSS.

*   **Global CSS (Phase 1):** Paste everything into `globals.css` to make the site look right immediately.
*   **CSS Modules (Phase 2):** Extract specific styles into `Component.module.css`.
    *   **Pros:** Prevents class name collisions automatically.
    *   **Performance:** Next.js Code-splits CSS Modules, meaning the browser only downloads the CSS required for the exact components on the screen, vastly improving load times.

---

## 6. 🌐 SEO Metadata
*   Use the Next.js `generateMetadata` API in your `page.tsx` files.
*   Inject the existing JSON-LD (Schema markup) using the `next/script` component.