Interactive Booklet Component

# BOOKLET COMPONENT - AI IMPLEMENTATION GUIDE

## OVERVIEW
Interactive React booklet with 3D page-turning animations. Uses Framer Motion + CSS 3D transforms.

## QUICK INSTALL
```bash
npm install framer-motion
```

## QUICK START
```tsx
import Booklet from "@/components/Booklet";

const pages = [
  {
    leftContent: <div>Left page content</div>,
    rightContent: <div>Right page content</div>,
  },
];

<Booklet pages={pages} maxWidth={600} />
```

## PROPS REFERENCE
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| pages | BookletPage[] | required | Array of page content |
| theme | BookletTheme | see below | Color/style customization |
| maxWidth | number | 600 | Maximum width in pixels |
| className | string | "" | Additional CSS classes |
| title | string | undefined | Title below booklet |
| subtitle | string | undefined | Subtitle below title |

## BOOKLET PAGE TYPE
```tsx
interface BookletPage {
  leftContent: React.ReactNode;  // Left page (typically text)
  rightContent: React.ReactNode; // Right page (typically visual)
}
```

## THEME OPTIONS
```tsx
interface BookletTheme {
  primaryColor?: string;    // Accent color (default: #703B3B)
  bindingColor?: string;    // Book binding (default: same as primary)
  pageColor?: string;       // Page background (default: #FFFBF5)
  textureColor?: string;    // Paper texture (default: #e8e0d0)
  showTexture?: boolean;    // Show paper pattern (default: true)
  showPageNumbers?: boolean; // Show page numbers (default: true)
}
```

## THEME EXAMPLES
```tsx
// Classic burgundy
<Booklet theme={{ primaryColor: "#703B3B" }} />

// Ocean blue
<Booklet theme={{ primaryColor: "#1e3a5f", pageColor: "#f0f7ff" }} />

// Forest green
<Booklet theme={{ primaryColor: "#2d5a3d", pageColor: "#f5fff8" }} />

// No texture, no page numbers
<Booklet theme={{ showTexture: false, showPageNumbers: false }} />
```

## FULL USAGE EXAMPLE
```tsx
const pages = [
  {
    leftContent: (
      <div>
        <h3 className="text-2xl font-bold mb-2">Chapter 1</h3>
        <p className="text-sm">Introduction text...</p>
      </div>
    ),
    rightContent: (
      <img src="/chapter1.png" alt="Chapter 1" className="max-w-full" />
    ),
  },
  {
    leftContent: (
      <div>
        <h3 className="text-2xl font-bold mb-2">Chapter 2</h3>
        <p className="text-sm">More content...</p>
      </div>
    ),
    rightContent: (
      <div className="text-6xl text-center">2</div>
    ),
  },
];

<Booklet
  pages={pages}
  theme={{
    primaryColor: "#1e3a5f",
    pageColor: "#fafafa",
  }}
  maxWidth={700}
  title="My Story"
  subtitle="A journey in pages"
/>
```

## KEY FEATURES
- 3D page flip with drag interaction
- Touch + mouse support
- Smooth Framer Motion transitions
- Page indicators for quick navigation
- Fully responsive
- TypeScript support
- Accessible (ARIA labels)

## DEPENDENCIES
- react >= 18
- framer-motion >= 10
- tailwindcss (optional but recommended)

## NOTES FOR AI ASSISTANTS
1. Component is self-contained - just copy Booklet.tsx
2. Pages array is required, minimum 1 page
3. Each page needs both leftContent and rightContent
4. Theme props are all optional with sensible defaults
5. maxWidth controls the booklet size, maintains 1.5:1 aspect ratio
6. Works in Next.js App Router with "use client" directive