# Custom Dealer Logo Feature

## Overview

Add the ability for dealers to upload a custom logo that displays alongside their business name in the page header.

## Requirements

- Dealers can upload a custom logo via the Basic Information editor
- Logo displays to the left of the dealer's business name in Row 2 of the header
- Logo is optional - no placeholder shown when absent
- Uses existing Cloudflare image upload infrastructure
- Counts toward dealer's 100 image limit

## Data Model

### Prisma Schema

Add new field to Dealer model:

```prisma
model Dealer {
  // ... existing fields ...
  logoUrl              String?    // Custom dealer logo URL
}
```

### MediaAsset Integration

- New upload context: `'logo'`
- Logo uploads create a MediaAsset record (counts toward 100 image limit)
- When replacing a logo, delete old MediaAsset first

## Editor UI

### Layout

Integrate logo upload into the Domain Settings section as a 2-column layout:

```
┌───────────────────────────────────────────────────────────────────┐
│  Domain Settings                                                  │
│  ┌─────────────────────────────────┐  ┌─────────────────────────┐ │
│  │  Subdomain                      │  │   Dealer Logo           │ │
│  │  [test-dealer    ▼ .myamsoil]   │  │   ┌─────────────┐       │ │
│  │                                 │  │   │             │       │ │
│  │  Custom Domain (Growth+)        │  │   │  (preview)  │       │ │
│  │  [www.example.com          ]    │  │   │   80x80     │       │ │
│  │                                 │  │   └─────────────┘       │ │
│  │                                 │  │   [Choose] [Remove]     │ │
│  │                                 │  │   PNG, JPG, max 5MB     │ │
│  └─────────────────────────────────┘  └─────────────────────────┘ │
└───────────────────────────────────────────────────────────────────┘
```

### Responsive Behavior

- Desktop: 2 columns side-by-side
- Mobile: Stack vertically (domain settings on top, logo below)

### Upload Behavior

- **No logo state:** Empty placeholder with "Choose File" button
- **With logo:** Thumbnail preview with "Choose File" (replace) and "Remove" buttons
- **Upload flow:** Select file → Upload immediately → Preview updates on success
- **Validation:** PNG, JPG, WebP only; max 5MB

## Header Display

### Layout

Logo appears to the left of the dealer's business name in Row 2, left-aligned with the AMSOIL logo in Row 1:

```
┌─────────────────────────────────────────────────────────────────┐
│ [AMSOIL Logo] INDEPENDENT DEALER          📍 City, ST  📞 Phone │  ← Row 1
├─────────────────────────────────────────────────────────────────┤
│ [Dealer Logo]  Dealer Business Name                             │  ← Row 2
└─────────────────────────────────────────────────────────────────┘
  ↑
  Left edge aligns with AMSOIL logo above
```

### Styling

- Logo max-height: ~40-48px (match visual weight of h1 dealer name)
- Maintain aspect ratio (no stretching)
- Gap between logo and text: ~0.75rem
- Vertically centered with dealer name
- No modifications to the logo image (no border-radius, filters, etc.)

### Conditional Rendering

```tsx
<div className="dealer-name-row">
  {dealer.logoUrl && (
    <img src={dealer.logoUrl} alt="" className="dealer-logo" />
  )}
  <h1 className="dealer-name">{dealer.businessName}</h1>
</div>
```

**Without logo:** Business name left-aligned as currently displayed.

**With logo:** Logo + name displayed together, both left-aligned.

## Error Handling

### Upload Errors

- Network failure → Toast error, keep existing logo
- File too large → Toast "Image must be under 5MB"
- Invalid format → Toast "Please upload PNG, JPG, or WebP"
- 100 image limit reached → Toast "Image limit reached. Delete unused images to upload more."

### Logo Deletion

- Remove logo: Delete MediaAsset record, set `logoUrl` to null
- Replace logo: Delete old MediaAsset first, upload new one (net zero change to count)

### Image Loading (Public Page)

- If `logoUrl` exists but image fails to load: Hide broken image, show only business name
- Use `onError` handler for graceful degradation

## Migration

- Existing dealers get `logoUrl: null` (no visual change)
- No backfill needed

## Files to Modify

1. `prisma/schema.prisma` - Add `logoUrl` field
2. `app/dashboard/editor/EditorForm.tsx` - Add logo upload UI, 2-column layout
3. `app/api/dealer/update/route.ts` - Accept `logoUrl` field
4. `components/DealerTemplate.tsx` - Display logo in header
5. `public/assets/dealer-template.css` - Styles for logo in header
6. `types/dealer.ts` - Update Dealer type (if not auto-generated)
7. `hooks/useImageUpload.ts` - Add 'logo' to UploadContext type (if needed)