# Business Rules — react-frontend-app

## BR-1: Default Theme Rule
The site MUST use the **red** theme when no stored theme preference exists (first visit, cleared storage, or unsupported storage).

## BR-2: Theme Persistence Rule
Whenever the visitor switches themes, the chosen theme MUST be written to `localStorage` immediately, so a page reload or new visit resolves to the same theme (BR-1 only applies when nothing is stored).

## BR-3: Valid Theme Values Rule
Only two theme values are valid: `red` and `purple`. If a stored value is anything else (corrupted/unexpected), the app MUST fall back to the default theme (`red`) rather than error.

## BR-4: Content Fidelity Rule
All rendered marketing copy, prices (€300 / €750 / "Op maat"), and the contact e-mail (`info@slpsoftware.nl`) MUST match the reference HTML designs exactly for this iteration (per requirements FR-1); no content may be altered, abbreviated, or replaced with placeholder text.

## BR-5: Reduced Motion Rule
When the visitor's OS/browser signals `prefers-reduced-motion: reduce`, both the hero caret blink animation AND the theme-switch color transition MUST be instant / non-animated.

## BR-6: Single Route Rule (current iteration)
For this iteration, all page sections (nav, hero, packages, process, about, contact, footer) are rendered under a single index route (`/`). No section requires its own route yet.

## Decision Flow: Theme Resolution on Load

```mermaid
graph TD
    load_pref{"Stored theme value exists?"}
    valid_check{"Stored value is 'red' or 'purple'?"}
    use_stored_value["Use stored value as active theme"]
    fallback_default["Fall back to default theme: red"]

    load_pref -->|"No"| fallback_default
    load_pref -->|"Yes"| valid_check
    valid_check -->|"Yes"| use_stored_value
    valid_check -->|"No (corrupted/unexpected)"| fallback_default

    classDef decision fill:#fbd38d,stroke:#92400e,stroke-width:1px,color:#000;
    classDef outcome fill:#9ae6b4,stroke:#2f855a,stroke-width:1px,color:#000;

    class load_pref,valid_check decision;
    class use_stored_value,fallback_default outcome;
```

Text alternative: If no stored theme exists, or the stored value is not "red"/"purple", the app falls back to red; otherwise the valid stored value is used.