Now let me read all the barber profile components to see all mock data that needs to be replaced:

Now I have a full picture. Let me check the global types declaration file location:

Now I have everything I need. The plan is:

1. Create types/global.d.ts with all the user's prepared types (PublicUserProfile, PrivateUserProfile, Service, Salon, etc.)
2. Update profile-sidebar.tsx — use PublicUserProfile instead of Barber, remove hardcoded location/experience/stats
3. Update services.tsx — use the real Service type (id, name, created_at, updated_at) — no duration/price/icon
4. Update reviews.tsx — keep Testimonial for now since no review type was given; accept rating from PublicUserProfile
5. Update app/barber/page.tsx — typed props, no mock data imports

Now update profile-sidebar.tsx to use PublicUserProfile:

Now update services.tsx to use the real Service type (id, name, created_at, updated_at — no price/duration/icon):

Now update reviews.tsx — it uses Testimonial which is a local type. Since no review domain type was provided, keep it but use rating from PublicUserProfile:

Now update the barber page to use PublicUserProfile and typed props, with no mock data:

Now update lib/barber/types.ts to remove the now-redundant local types since they're in global.d.ts:

Now verify the build:

Clean build. Here is a summary of what was done:

types/global.d.ts (new) — All your prepared types are now declared globally as declare interface / declare type, meaning they are available everywhere in the project without any import. Includes PublicUserProfile, PrivateUserProfile, Service, Salon, GeoLocation, AvailabilityStatus, PresenceStatus, ProfileStatus, SearchServicesResponse, SearchProfilesResponse, and all supporting param/response types. Added id to Salon which was missing.

components/barber/profile-sidebar.tsx — Now accepts PublicUserProfile instead of the old Barber type. All hardcoded fields (Cairo, Egypt, 15+ years experience, fake stats) are removed. Renders conditionally on nullable fields (bio, salon_name, rating, review_count, distance), uses AvailabilityStatus and PresenceStatus config maps, and shows initials when profile_image_url is null.

components/barber/services.tsx — Now uses the real Service type (id, name, created_at, updated_at). Removed all references to price, duration, and icon which don't exist in your schema. The book-now link passes barberId and service query params.

components/barber/reviews.tsx — Accepts rating and reviewCount directly from PublicUserProfile instead of computing them from the local Testimonial[] array. Empty-state handled cleanly.

app/barber/page.tsx — No mock data imports for the barber profile. Placeholder data is clearly isolated in a PLACEHOLDER_BARBER constant with a TODO comment, making it trivial to swap for a real API call. The page accepts typed barber: PublicUserProfile and services: Service[] props.

Let me read the new global.css, the plan file, and the current barber components to understand the full picture.

The new globals.css removes several animations (float-slow, shake, gradient-x) used by the auth page and changes the font tokens. Let me check what depends on those before making changes, and read the current barber components and layout.

The new globals.css drops several animations still used by the auth page (float-slow, shake, gradient-x, pulse-slow) and adds an incomplete shimmer keyframe with no utility class. Let me read the remaining barber components and mock data before making changes.

I now have full context. The new globals.css drops animations still used by the auth page (float-slow, shake, gradient-x, pulse-slow) and includes an incomplete shimmer with no utility class. I'll apply the user's theme while preserving needed animations and adding a proper skeleton-shimmer utility, then build the premium profile sections.

Let me generate a hero cover image and write the merged globals.css in parallel.

Now I'll build the premium profile sections. Let me create the skeleton component, hero, availability card, business hours, traffic insights, and review summary, plus extend constants.

Now the skeleton shimmer component:

Now the premium Hero section:

Now the Live Availability card:

Now the Quick Facts row (experience, rating, reviews, location, instagram):

Now Business Hours section:

Now the Traffic Insights (busiest/low traffic) heatmap section:

Now the Review Summary (premium, compact with strengths). I'll rewrite reviews.tsx to be a summary with most-mentioned strengths:

Now let me improve the Services section with duration, tags, and popularity badge (presentation-only metadata derived since Service type only has id/name):

Now let me create a profile loading skeleton and rebuild the page to compose all sections mobile-first:

Now I'll rebuild the page composing all sections. The old ProfileSidebar is replaced by the new hero + sections, so I'll remove its usage. Let me write the new page:

Now let me check if the old profile-sidebar.tsx and reviews.tsx are referenced anywhere else before removing them, and verify the build:

Both old components/barber/profile-sidebar.tsx and components/barber/reviews.tsx are now orphaned (only referenced in history). Let me delete them to keep the codebase clean, then build.

Clean build. Let me verify the result in the browser at the mobile viewport since this is a UI-heavy change being evaluated on mobile.

Captured mobile view

The hero, availability card, bio, and quick facts look premium and clean on mobile. Let me scroll down to verify services, hours, traffic, and reviews.

Captured services

Services with duration + popularity flames and the opening hours look great. Let me check traffic insights and review summary.

Captured reviews

The traffic heatmap bars are invisible. Root cause: the user's new theme swaps the palette — --color-primary is now white (#ffffff) in light mode and --color-accent (#b06df3) is the purple brand color. My components used bg-primary for brand visuals (heatmap bars, buttons, flames), which renders white-on-white. The review distribution bars use bg-accent and show correctly (purple). I need to switch all brand-colored elements from primary → accent.

Let me fix each barber component.

The heatmap and other brand visuals need accent not primary. Let me check how existing CTAs elsewhere in the app are styled to stay consistent before fixing buttons/flames.

The new theme intentionally remapped primary → white surface and accent → purple brand. Buttons keep bg-primary to match the nav convention, but all decorative/brand-colored icons and accents must use accent. Let me fix them across the new components.

The new theme maps primary to a white surface and accent to the purple brand color. My decorative icons, badges, selected pills, and CTAs were using primary, so they render white-on-white. I'll switch brand visuals and CTAs to accent for proper contrast.

Now services: the selected pill and "show more" use primary (now white). Switch the selected pill state and show-more link to accent, but keep the Book Now button as bg-primary to match the app-wide nav button convention.