# AI_GUIDE — App 6 · Barber Booking

> **Audience:** AI coding agents and developers.
> **Goal:** (A) rebuild App 6 exactly, (B) build a *similar* app in the same style (another booking or service business), or (C) port it to a native stack.
> Read in this order: `DESIGN_SYSTEM.md` (rules + every component) → this file (procedures) → `tokens.json` (numbers). Source of truth for pixels = the CSS in `App 6 - Barber.html`.

---

## 1. File map

| File | Contains | Edit when you… |
|---|---|---|
| `App 6 - Barber.html` | Fonts, **all CSS** (`:root` tokens + commented sections), script tags | change look, spacing, colours |
| `src/ui.jsx` | Data arrays, `money`, `weekDays`, store (`StoreCtx`, `useStoreState`, `useStore`), icons (`I`, `ICONS`), `StatusBar`, `TabBar`, `Toast`/`useToast`, `Rating`, `Photo` | change content, add icons, add store fields |
| `src/screens.jsx` | `Onboarding`, `Home`, `ServiceCard`, `Services`, `TopBar`, `Details` (+ sheet), `Bookings`, `Favorites`, `Messages`, `Profile`, `Success`, `Phone` (router), `App` (stage + 3 phones) | add or change screens and flows |
| `assets/*.jpg` | Photos | swap imagery |
| `tokens.json` | Machine-readable tokens | keep in sync when you change CSS |

Load order: React → ReactDOM → Babel → `ui.jsx` → `screens.jsx`. Every file exports with `Object.assign(window, {...})`. **Never** name a global `styles`.

---

## 2. Rebuild App 6 from scratch (exact)

1. **Shell:** copy the `<head>` of the HTML (font link + the `TOKENS`/`DEVICE`/`PRIMITIVES` CSS). Add a `#stage` 1024×768, scaled with `Math.min(innerWidth/1024, innerHeight/768)`.
2. **Phone:** `.phone` 278×652 with a white bezel (see tokens `shadow.phone`) → `.screen` radius 40 → `.island`, `StatusBar`, `.view` (top 40), optional `TabBar`, `Toast`, `.home-ind`.
3. **Primitives:** build `.btn(.pri|.ghost)`, `.ibtn(.pri)`, `.search`, `.cat-ic`, `.rate`, `.svc`, `.act`, `.day`, `.time`, `.tabbar` exactly as DESIGN_SYSTEM §5.
4. **Screens:** follow the DESIGN_SYSTEM §6 table from top to bottom, using the layout numbers in §5 (promo 178, gallery 168, etc.).
5. **State:** one `useStoreState()` at the App root inside `StoreCtx.Provider` so all phones share favourites and bookings.
6. **Routing:** `Phone` keeps `route = {v, tab, salon, service, from}`. `v ∈ onboard | tabs | details | services | success`. Details uses the `push` animation; everything else uses `fade`.
7. **Verify** (§6 below).

---

## 3. Make a *similar* app (clone the style for a new business)

The style = **white + one accent, filled-accent selection, ring+soft-shadow tiles, photo-led cards, Plus Jakarta Sans**. To clone:

1. Copy the whole `apps/app-6/` folder to `apps/app-N/` and rename the HTML.
2. **Brand:** change `--brand`, `--brand-600` (≈8% darker), `--brand-50` (≈6% tint) and the `rgba` inside `--shadow-brand` (the same hue at 35%). Keep everything else.
3. **Content:** edit `CATEGORIES`, `SERVICES`, `SALONS`, `SLIDES`, `TIMES`, `TABS` in `ui.jsx`. Put new photos in `assets/` under the names referenced by `img`.
4. **Icons:** add icons to `ICONS` (24 viewBox, 1.7 stroke, round, no fill) and reference them by name.
5. **Copy tone:** short, warm, second person ("Your Style, Your Barber, Just One Tap"). Headlines are 3 short lines, the last line in the accent colour.
6. Keep the three-phone composition (Onboarding · Home · Details). It's the showcase layout the launcher thumbnail expects.

**Example re-skins:**

| Business | `--brand` | Categories | Hero title |
|---|---|---|---|
| Nail studio | `#E8467C` | Manicure · Pedicure · Gel · Nail Art · More | "Gel Polish Deluxe" |
| Spa / massage | `#2FA38A` | Massage · Facial · Sauna · Body Scrub · More | "Deep Tissue 60′" |
| Dentist | `#2F7BFF` | Checkup · Cleaning · Whitening · Braces · More | "Whitening Session" |
| Pet grooming | `#8A5CF6` | Bath · Haircut · Nails · Teeth · More | "Full Groom Package" |

---

## 4. Customisation cookbook

| I want to… | Do this |
|---|---|
| Change the accent colour | `:root` → `--brand*` + the `--shadow-brand` rgba |
| Change the font | Swap the Google Fonts link and `--font`; keep weights 400–700 |
| Denser or airier layout | `--gutter` (14) and the `.svc-grid` gap (10) |
| Rounder or squarer UI | `--r-md` (12) drives buttons, tiles, days and cards; `--r-lg` / `--r-xl` drive the promo card and gallery |
| Add a category | Push `{id,label,icon}` to `CATEGORIES` (keep 5 so they fit; the last one should be "More") |
| Add a service | Push to `SERVICES` with `cat` = a category id |
| Add a promo offer | Push to `SALONS`; the pager dots appear automatically |
| Change the booking days or times | `weekDays()` base date and `TIMES`; unavailable logic lives in `Details` (`(day + k) % 4 === 3`) |
| New tab | Add to `TABS`, then a branch in `Phone()`; max 5 tabs |
| Dark mode | Override `--ink`/`--card`/`--field`/`--line`/`--canvas` under a `.dark` class on `.screen`; keep the accent |
| Reset demo data | `localStorage.removeItem('app6')` |

---

## 5. Porting to native

| Web | SwiftUI | Jetpack Compose | React Native |
|---|---|---|---|
| `--brand` | `Color("Brand")` = #FD6F29 | `val Brand = Color(0xFFFF6A1F)` | `colors.brand` |
| `.btn.pri` | `Button{}.frame(height: 40*k).background(Brand, in: .rect(cornerRadius: 12)).shadow(color: Brand.opacity(0.35), radius: 7, y: 6)` | `Button(shape = RoundedCornerShape(12.dp), colors = …Brand)` + `Modifier.shadow` | `Pressable` + `borderRadius:12` + shadow |
| Tile ring + soft shadow | `.overlay(RoundedRectangle(cornerRadius: 12).stroke(Line))` + `.shadow(opacity .06, radius 7, y 4)` | `border(1.dp, Line, shape)` + `shadow(4.dp)` | `borderWidth:1, borderColor:line` + shadow |
| Selected = filled | a `isSelected` ternary on background/foreground | same | same |
| Tab bar | `TabView` with `.tint(Brand)` | `NavigationBar` with Brand indicator | `@react-navigation/bottom-tabs` with `tabBarActiveTintColor` |
| Sheet | `.sheet(isPresented:)` + `.presentationDetents([.medium])` | `ModalBottomSheet` | `@gorhom/bottom-sheet` |
| Scale | the web phone is 266pt inner; for a 390pt device multiply sizes by **k ≈ 1.47** | same | same |

---

## 6. Verification checklist
- [ ] The three phones show Onboarding, Home and Details at `top:58`; no text overflows (titles use ellipsis).
- [ ] Every selectable control has idle and selected states, with the orange fill + glow when selected.
- [ ] Onboarding: the pager advances, Next becomes Get Started, and Skip/Get Started go to Home.
- [ ] Home: the category toggles filter the grid, search filters by name, promo dots switch offers, and the card, `+` and service cards open Details.
- [ ] Details: gallery swipe and dots work, the heart toggles a favourite (also visible in Favorites), days and times select (unavailable ones are disabled), Book → sheet → Confirm → Success → Bookings (badge count updates on the other phones).
- [ ] Tab bar content clears the bar (78px bottom padding).
- [ ] Touch targets ≥ 20px at phone scale (≈ 44pt native).
- [ ] No console errors; `tokens.json` matches the CSS.