# Spanish Template Design

GitHub Issue: #615

## Overview

Add Spanish language support for dealer landing pages. Dealers select a default language in the editor; visitors can toggle between English and Spanish on the public page.

## Requirements

- Translate all public-facing dealer template text to Spanish
- Exceptions: AMSOIL brand name, dealer business/contact info
- Dealer selects default language in basic editor (defaults to English)
- Visitors see language switcher in header
- Same URL regardless of language (no /es/ routes)
- Session-only persistence for visitor language choice

## Data Model

### Dealer Table

Add `preferredLanguage` column:

```prisma
model Dealer {
  // ... existing fields
  preferredLanguage  String   @default("en")  // "en" or "es"
}
```

### Visitor Language Storage

Store in `sessionStorage` with key `dlp-lang-{subdomain}`:

- Scoped per dealer
- Session-only (resets on browser close)
- No cookie consent concerns

### Language Resolution Order

1. Visitor's sessionStorage choice (if set)
2. Dealer's `preferredLanguage` from database
3. Fall back to `"en"`

## Translation Architecture

### Approach

Simple TypeScript translation object. No external i18n library.

### Translation File

Location: `/lib/translations/dealer-template.ts`

```typescript
export type Language = 'en' | 'es';

export const dealerTemplateTranslations = {
  en: {
    shopNow: 'SHOP NOW',
    findProducts: 'FIND YOUR PRODUCTS',
    vehicles: {
      autoLt: 'Auto/LT',
      // ...
    },
    // ... ~50 strings total
  },
  es: {
    shopNow: 'COMPRAR AHORA',
    findProducts: 'ENCUENTRA TUS PRODUCTOS',
    vehicles: {
      autoLt: 'Auto/LT',
      // ...
    },
    // ...
  },
} as const;

export function t(lang: Language, key: string): string {
  // Dot-notation lookup
}
```

## Component Architecture

### LanguageProvider

Client component providing language context:

```typescript
// /components/LanguageProvider.tsx
'use client';

export function LanguageProvider({
  defaultLanguage,
  subdomain,
  children
}: Props) {
  const [language, setLanguage] = useState(() => {
    if (typeof window !== 'undefined') {
      return sessionStorage.getItem(`dlp-lang-${subdomain}`) || defaultLanguage;
    }
    return defaultLanguage;
  });

  useEffect(() => {
    sessionStorage.setItem(`dlp-lang-${subdomain}`, language);
  }, [language, subdomain]);

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
}
```

### LanguageSwitcher

Header toggle component:

```typescript
// /components/LanguageSwitcher.tsx
'use client';

export function LanguageSwitcher() {
  const { language, setLanguage } = useLanguage();

  return (
    <div className="flex gap-2">
      <button onClick={() => setLanguage('en')}
              className={language === 'en' ? 'active' : ''}>EN</button>
      <button onClick={() => setLanguage('es')}
              className={language === 'es' ? 'active' : ''}>ES</button>
    </div>
  );
}
```

### ISR Compatibility

- Server renders one cached HTML page (dealer's default language)
- Language switching is client-side only
- No cache duplication
- Brief flash of default language before hydration (acceptable tradeoff)

## Editor Changes

Add dropdown to EditorForm.tsx in Business Information section:

```typescript
<div className="form-group">
  <label htmlFor="preferredLanguage">Default Page Language</label>
  <select
    id="preferredLanguage"
    value={formData.preferredLanguage}
    onChange={handleChange}
  >
    <option value="en">English</option>
    <option value="es">Spanish (Espanol)</option>
  </select>
  <p className="help-text">
    Choose the default language for your dealer page.
    Visitors can switch languages using the toggle on your page.
  </p>
</div>
```

## Files to Create

| File                                  | Purpose                              |
| ------------------------------------- | ------------------------------------ |
| `lib/translations/dealer-template.ts` | All English/Spanish strings + helper |
| `components/LanguageProvider.tsx`     | Context for language state           |
| `components/LanguageSwitcher.tsx`     | EN/ES toggle button                  |

## Files to Modify

| File                                  | Changes                                    |
| ------------------------------------- | ------------------------------------------ |
| `prisma/schema.prisma`                | Add `preferredLanguage` field              |
| `components/DealerTemplate.tsx`       | Replace hardcoded strings with `t()` calls |
| `app/dealers/[subdomain]/page.tsx`    | Wrap template in `LanguageProvider`        |
| `app/dashboard/editor/EditorForm.tsx` | Add language dropdown                      |
| `app/api/dealer/update/route.ts`      | Accept and save `preferredLanguage`        |
| `types/dealer.ts`                     | Add `preferredLanguage` to type            |

## Migration

```bash
npx prisma migrate dev --name add-dealer-preferred-language
```

## Out of Scope

- Editor UI translation (future work)
- Dashboard translation (future work)
- Additional languages beyond English/Spanish
- URL-based locale routing
- SEO metadata translation (could add later)