Phase 2

Base app architecture:

    Route groups for customer, staff and owner.
* Reusable design system with around 20 UI components.
* Complete Prisma schema.
* Authentication with email/password and Google.
* Role and permission model.
* Protected routes.
* Clean separation between features, services, components and shared utilities.

src/app/(auth)/layout.tsx

@@ -0,0 +1,14 @@
+import { Scissors } from "lucide-react";
+
+export default function AuthLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col bg-stone p-6">
+      <div className="mx-auto flex w-full max-w-md flex-1 flex-col justify-center">
+        <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-[1.25rem] bg-ink text-3xl text-white shadow-xl shadow-ink/20">
+          <Scissors className="h-7 w-7" aria-hidden="true" />
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/(auth)/register/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+import { RegisterForm } from "@/features/auth/components/register-form";
+
+export const metadata: Metadata = {
+  title: "Create Account",
+};
+
+export default function RegisterPage() {
+  return (
+    <div>
+      <h1 className="mb-2 text-3xl font-bold tracking-tight">Create Account</h1>
+      <p className="mb-10 text-muted">Join to track your appointments and loyalty.</p>
+      <RegisterForm />
+    </div>
+  );
+}

src/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { SignInForm } from "@/features/auth/components/sign-in-form";
+
+export const metadata: Metadata = {
+  title: "Sign In",
+};
+
+export default function SignInPage() {
+  return (
+    <div>
+      <h1 className="mb-2 text-4xl font-bold tracking-tight">Welcome back</h1>
+      <p className="mb-12 leading-relaxed text-muted">
+        Please enter your credentials to access your appointments.
+      </p>
+      {/* useSearchParams in SignInForm requires a Suspense boundary. */}
+      <Suspense>
+        <SignInForm />
+      </Suspense>
+    </div>
+  );
+}

src/app/(customer)/appointments/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { Calendar } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Appointments" };
+
+export default function AppointmentsPage() {
+  return <ComingSoon icon={Calendar} title="Appointments" phase="Phase 2: Customer Accounts" />;
+}

src/app/(customer)/home/page.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import { auth } from "@/auth";
+
+export const metadata: Metadata = { title: "Home" };
+
+export default async function CustomerHomePage() {
+  const session = await auth();
+
+  return (
+    <div className="px-6 pt-12">
+      <p className="text-xs font-medium text-muted">Signed in as</p>
+      <h1 className="text-2xl font-bold tracking-tight">{session?.user?.name ?? session?.user?.email}</h1>
+      <p className="mt-6 text-sm text-muted">
+        The full personalized home (upcoming appointment, loyalty progress, quick booking) is designed
+        in <code>templates/23-...html</code> and scoped for a later phase — this route exists now to
+        prove sign-in → protected layout → bottom nav works end to end.
+      </p>
+    </div>
+  );
+}

src/app/(customer)/layout.tsx

@@ -0,0 +1,23 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { BottomNav, type BottomNavItem } from "@/components/navigation/bottom-nav";
+
+const NAV_ITEMS: BottomNavItem[] = [
+  { href: "/home", label: "Home", icon: "house" },
+  { href: "/appointments", label: "Bookings", icon: "calendar-check" },
+  { href: "/settings", label: "Settings", icon: "user" },
+];
+
+export default async function CustomerLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session?.user) {
+    redirect("/sign-in?callbackUrl=/home");
+  }
+
+  return (
+    <div className="min-h-screen bg-stone pb-24">
+      {children}
+      <BottomNav items={NAV_ITEMS} variant="customer" />
+    </div>
+  );
+}

src/app/(customer)/settings/page.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { auth } from "@/auth";
+import { ProfileCard } from "@/components/ui/profile-card";
+import { SignOutButton } from "@/features/auth/components/sign-out-button";
+
+export const metadata: Metadata = { title: "Settings" };
+
+export default async function CustomerSettingsPage() {
+  const session = await auth();
+
+  return (
+    <div className="space-y-6 px-6 pt-12">
+      <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
+      <ProfileCard
+        name={session?.user?.name ?? "Signed-in customer"}
+        meta={session?.user?.email}
+        avatarUrl={session?.user?.image ?? undefined}
+      />
+      <p className="text-sm text-muted">
+        Preferred barber, loyalty card, and notification preferences are designed in
+        <code> templates/10, 11, 35</code> and land in later phases.
+      </p>
+      <SignOutButton />
+    </div>
+  );
+}

src/app/(owner)/layout.tsx

@@ -0,0 +1,30 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { BottomNav } from "@/components/navigation/bottom-nav";
+import { STAFF_NAV_ITEMS } from "@/lib/navigation/staff-nav-items";
+import { hasPermission } from "@/lib/auth/permissions";
+import { Permission } from "@/generated/prisma/enums";
+
+/**
+ * Owner is a permission on a staff account, not a separate account type
+ * (see docs/implementation-plan.md §3, §11) — this layout reuses the exact
+ * same shell/nav as (staff), and only adds a permission check on top.
+ */
+export default async function OwnerLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session?.user) {
+    redirect("/sign-in?callbackUrl=/owner");
+  }
+
+  const canManageStaff = await hasPermission(session.user.id, Permission.MANAGE_STAFF);
+  if (!canManageStaff) {
+    redirect("/staff");
+  }
+
+  return (
+    <div className="min-h-screen bg-stone pb-24">
+      {children}
+      <BottomNav items={STAFF_NAV_ITEMS} variant="staff" />
+    </div>
+  );
+}

src/app/(owner)/owner/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { ChartLine } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Business Dashboard" };
+
+export default function OwnerDashboardPage() {
+  return <ComingSoon icon={ChartLine} title="Business Dashboard" phase="Phase 4: Owner Administration" />;
+}

src/app/(owner)/owner/team/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { Users } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Team Management" };
+
+export default function OwnerTeamPage() {
+  return <ComingSoon icon={Users} title="Team Management" phase="Phase 4: Owner Administration" />;
+}

src/app/(staff)/layout.tsx

@@ -0,0 +1,28 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { BottomNav } from "@/components/navigation/bottom-nav";
+import { STAFF_NAV_ITEMS } from "@/lib/navigation/staff-nav-items";
+import { prisma } from "@/lib/db/prisma";
+
+export default async function StaffLayout({ children }: { children: React.ReactNode }) {
+  const session = await auth();
+  if (!session?.user) {
+    redirect("/sign-in?callbackUrl=/staff");
+  }
+
+  // Real role gating, not just "is signed in" — a registered customer with
+  // no StaffProfile is bounced back to their own home rather than seeing
+  // an empty staff shell. See docs/implementation-plan.md §3 (role
+  // conflicts) and §11 (permission enforcement).
+  const staffProfile = await prisma.staffProfile.findUnique({ where: { userId: session.user.id } });
+  if (!staffProfile) {
+    redirect("/home");
+  }
+
+  return (
+    <div className="min-h-screen bg-stone pb-24">
+      {children}
+      <BottomNav items={STAFF_NAV_ITEMS} variant="staff" />
+    </div>
+  );
+}

src/app/(staff)/staff/clients/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { Users } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Clients" };
+
+export default function StaffClientsPage() {
+  return <ComingSoon icon={Users} title="Clients" phase="Phase 3: Barber Tools" />;
+}

src/app/(staff)/staff/current/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { Scissors } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Current Appointment" };
+
+export default function StaffCurrentPage() {
+  return <ComingSoon icon={Scissors} title="Current Appointment" phase="Phase 3: Barber Tools" />;
+}

src/app/(staff)/staff/page.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+import { CalendarDays } from "lucide-react";
+import { ComingSoon } from "@/components/feedback/coming-soon";
+
+export const metadata: Metadata = { title: "Calendar" };
+
+export default function StaffCalendarPage() {
+  return <ComingSoon icon={CalendarDays} title="Calendar" phase="Phase 3: Barber Tools" />;
+}

src/app/(staff)/staff/settings/page.tsx

@@ -0,0 +1,43 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { ShieldCheck } from "lucide-react";
+import { auth } from "@/auth";
+import { Button } from "@/components/ui/button";
+import { ProfileCard } from "@/components/ui/profile-card";
+import { SignOutButton } from "@/features/auth/components/sign-out-button";
+import { hasPermission } from "@/lib/auth/permissions";
+import { Permission } from "@/generated/prisma/enums";
+
+export const metadata: Metadata = { title: "Staff Settings" };
+
+export default async function StaffSettingsPage() {
+  const session = await auth();
+  if (!session?.user) return null;
+
+  // Real permission check, not the templates' unconditional mock "Switch to
+  // Admin View" button (see docs/implementation-plan.md §3) — only staff
+  // whose Role actually grants MANAGE_STAFF see a way into the owner area.
+  const canManageStaff = await hasPermission(session.user.id, Permission.MANAGE_STAFF);
+
+  return (
+    <div className="space-y-6 px-6 pt-12">
+      <h1 className="text-2xl font-bold tracking-tight">Staff Settings</h1>
+      <ProfileCard name={session.user.name ?? "Staff member"} meta={session.user.email} avatarUrl={session.user.image ?? undefined} />
+
+      {canManageStaff && (
+        <Link
+          href="/owner"
+          className="flex items-center gap-3 rounded-jumbo border border-line bg-white p-5 text-sm font-bold hover:bg-stone"
+        >
+          <ShieldCheck className="h-5 w-5 text-accent" aria-hidden="true" />
+          Switch to Owner Admin
+        </Link>
+      )}
+
+      <Button variant="ghost" className="w-full" disabled>
+        Working Hours, Breaks &amp; Time Off — Phase 3
+      </Button>
+      <SignOutButton />
+    </div>
+  );
+}

src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,3 @@
+import { handlers } from "@/auth";
+
+export const { GET, POST } = handlers;

src/app/globals.css

@@ -0,0 +1,59 @@
+@import "tailwindcss";
+
+/*
+ * Design tokens ported from /templates. The majority of the 22 UX Pilot
+ * exports converge on this palette (ink/stone/surface/muted/line/accent) —
+ * see docs/implementation-plan.md §8. Two competing palettes found in the
+ * templates (a salon-red variant on the staff calendar, a blue variant on
+ * the appointments list) were NOT carried forward; that section explains
+ * why. `--radius-jumbo`/`--radius-tile` use the larger of the two radius
+ * scales found in the templates, per the same recommendation.
+ */
+@theme {
+  --color-ink: #111b15;
+  --color-stone: #f4f6f4;
+  --color-surface: #ffffff;
+  --color-muted: #6c7870;
+  --color-line: #e1e7e2;
+  --color-accent: #10b981;
+  --color-accent-loyalty: #f59e0b;
+
+  /* Semantic status colors — replaces the ad hoc per-screen status colors
+     found in the templates (see docs/implementation-plan.md §8). */
+  --color-status-confirmed: #10b981;
+  --color-status-pending: #f59e0b;
+  --color-status-cancelled: #ef4444;
+  --color-status-completed: #6c7870;
+
+  --radius-jumbo: 1.5rem;
+  --radius-tile: 1rem;
+
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+}
+
+@layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    @apply bg-stone text-ink antialiased;
+  }
+
+  /* Visible focus ring for keyboard users everywhere — the templates had
+     no explicit focus state beyond the browser default on form inputs
+     (see docs/implementation-plan.md §8, Accessibility risks). */
+  :focus-visible {
+    @apply outline-none ring-2 ring-ink ring-offset-2 ring-offset-stone;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,41 @@
+import type { Metadata, Viewport } from "next";
+import { Inter } from "next/font/google";
+import { Providers } from "@/components/providers";
+import "./globals.css";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: "NextChair",
+    template: "%s — NextChair",
+  },
+  description:
+    "Book your next barber appointment in seconds — services, staff and loyalty rewards in one place.",
+};
+
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: "cover",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className={inter.variable}>
+      <body className="font-sans">
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,46 @@
+import { Scissors } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { auth } from "@/auth";
+import { Button } from "@/components/ui/button";
+
+export default async function WelcomePage() {
+  const session = await auth();
+  if (session?.user) {
+    redirect("/home");
+  }
+
+  return (
+    <div className="flex min-h-screen flex-col justify-end bg-ink px-8 pb-16 text-white">
+      <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl bg-white text-ink">
+        <Scissors className="h-7 w-7" aria-hidden="true" />
+      </div>
+      <h1 className="mb-4 text-5xl font-bold tracking-tight">NextChair</h1>
+      <p className="mb-12 max-w-xs text-lg text-white/70">
+        Precision grooming at your fingertips. Book your next visit in seconds.
+      </p>
+
+      <div className="space-y-4">
+        <Button asChild variant="secondary" size="lg" className="w-full bg-white">
+          <Link href="/register">Create Account</Link>
+        </Button>
+        <Button
+          asChild
+          variant="secondary"
+          size="lg"
+          className="w-full border-2 border-white/20 bg-transparent text-white hover:bg-white/10"
+        >
+          <Link href="/sign-in">Sign In</Link>
+        </Button>
+      </div>
+
+      {/*
+        The templates' "Continue as Guest" goes straight to the business
+        home/booking flow (template 20 → 15). That flow isn't built yet
+        (Phase 1: Customer Booking), so this button isn't shown rather than
+        linking somewhere that doesn't work yet — see
+        docs/implementation-plan.md §16 for the phase it belongs to.
+      */}
+    </div>
+  );
+}

src/app/style-guide/interactive.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { BottomSheet } from "@/components/ui/bottom-sheet";
+import { Card } from "@/components/ui/card";
+import { ErrorState } from "@/components/feedback/error-state";
+import { Modal } from "@/components/ui/modal";
+import { MonthCalendar } from "@/components/ui/month-calendar";
+import { ProfileCard } from "@/components/ui/profile-card";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+
+/**
+ * Client-only demo for components that need interaction state — kept
+ * separate so the style guide page itself stays a Server Component. This
+ * is also the reason `ProfileCard`'s `onEdit` and `ErrorState`'s
+ * `onRetry` are demonstrated here rather than in page.tsx: a Server
+ * Component can't pass a live event-handler closure as a prop to a
+ * Client Component (Next.js build error "Event handlers cannot be passed
+ * to Client Component props") — the handler has to originate from
+ * somewhere already client-side, which this component is.
+ */
+export function StyleGuideInteractive() {
+  const [switchOn, setSwitchOn] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [month, setMonth] = useState(() => new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
+  const [editCount, setEditCount] = useState(0);
+  const [retryCount, setRetryCount] = useState(0);
+
+  return (
+    <div className="space-y-8">
+      <Card className="space-y-4 p-6">
+        <Switch
+          checked={switchOn}
+          onCheckedChange={setSwitchOn}
+          label="Booking confirmations"
+          description="Email when a booking is confirmed"
+        />
+        <Switch defaultChecked={false} label="Require staff approval" />
+      </Card>
+
+      <Tabs defaultValue="upcoming">
+        <TabsList>
+          <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
+          <TabsTrigger value="past">Past</TabsTrigger>
+        </TabsList>
+        <TabsContent value="upcoming">
+          <p className="text-sm text-muted">Upcoming appointments render here.</p>
+        </TabsContent>
+        <TabsContent value="past">
+          <p className="text-sm text-muted">Past appointments render here.</p>
+        </TabsContent>
+      </Tabs>
+
+      <div className="flex flex-wrap gap-3">
+        <Button variant="secondary" onClick={() => setModalOpen(true)}>
+          Open Modal
+        </Button>
+        <Button variant="secondary" onClick={() => setSheetOpen(true)}>
+          Open Bottom Sheet
+        </Button>
+      </div>
+
+      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title="Cancel Appointment?">
+        <p className="mb-6 text-sm text-muted">
+          This is within the free cancellation window. Are you sure you want to cancel?
+        </p>
+        <div className="flex gap-3">
+          <Button variant="secondary" className="flex-1" onClick={() => setModalOpen(false)}>
+            Keep it
+          </Button>
+          <Button variant="destructive" className="flex-1" onClick={() => setModalOpen(false)}>
+            Cancel it
+          </Button>
+        </div>
+      </Modal>
+
+      <BottomSheet open={sheetOpen} onClose={() => setSheetOpen(false)} title="Add a Note">
+        <Textarea placeholder="e.g. skin sensitivity, specific style requests…" />
+        <Button className="mt-4 w-full" onClick={() => setSheetOpen(false)}>
+          Save Note
+        </Button>
+      </BottomSheet>
+
+      <MonthCalendar month={month} onMonthChange={setMonth} selectedDate={selectedDate} onSelectDate={setSelectedDate} />
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div>
+          <ProfileCard
+            name="Alex Chen"
+            meta={`Edited ${editCount}×`}
+            onEdit={() => setEditCount((c) => c + 1)}
+          />
+        </div>
+        <ErrorState onRetry={() => setRetryCount((c) => c + 1)} description={`Retried ${retryCount}×`} />
+      </div>
+    </div>
+  );
+}

src/app/style-guide/page.tsx

@@ -0,0 +1,211 @@
+import type { Metadata } from "next";
+import { Calendar, House, Scissors, Users, Settings } from "lucide-react";
+import { AppointmentCard } from "@/components/ui/appointment-card";
+import { BarberCard } from "@/components/ui/barber-card";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { EmptyState } from "@/components/feedback/empty-state";
+import { ErrorState } from "@/components/feedback/error-state";
+import { Input } from "@/components/ui/input";
+import { CardSkeleton } from "@/components/feedback/skeleton";
+import { LoyaltyCard } from "@/components/ui/loyalty-card";
+import { ProfileCard } from "@/components/ui/profile-card";
+import { Select } from "@/components/ui/select";
+import { ServiceCard } from "@/components/ui/service-card";
+import { StatusPill } from "@/components/ui/status-pill";
+import { StyleGuideInteractive } from "./interactive";
+
+export const metadata: Metadata = {
+  title: "Style Guide",
+};
+
+const SECTION_TITLE = "mb-4 text-xs font-bold uppercase tracking-widest text-muted";
+
+export default function StyleGuidePage() {
+  return (
+    <div className="mx-auto max-w-2xl space-y-12 px-6 py-12">
+      <header>
+        <h1 className="text-3xl font-bold tracking-tight">Design System</h1>
+        <p className="mt-2 text-muted">
+          Reusable components, built from the visual language in <code>/templates</code>. See{" "}
+          <code>docs/implementation-plan.md</code> §7–8 for the source analysis. Reference only —
+          not a route real users will see.
+        </p>
+      </header>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Buttons</h2>
+        <div className="flex flex-wrap items-center gap-3">
+          <Button variant="primary">Primary</Button>
+          <Button variant="accent">Save</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="destructive">Cancel Appointment</Button>
+          <Button variant="primary" isLoading>
+            Loading
+          </Button>
+          <Button variant="primary" disabled>
+            Disabled
+          </Button>
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Status Pills</h2>
+        <div className="flex flex-wrap gap-2">
+          <StatusPill status="confirmed" />
+          <StatusPill status="pending_approval" />
+          <StatusPill status="in_progress" />
+          <StatusPill status="completed" />
+          <StatusPill status="cancelled" />
+          <StatusPill status="no_show" />
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Forms</h2>
+        <Card className="space-y-4 p-6">
+          <Input label="Email Address" placeholder="name@example.com" type="email" />
+          <Input label="With an error" defaultValue="not-an-email" error="Enter a valid email address" />
+          <Select label="Time Zone" defaultValue="europe-london">
+            <option value="europe-london">Europe/London (GMT+0)</option>
+            <option value="america-new_york">America/New_York (GMT-5)</option>
+          </Select>
+          <Checkbox label="Create an account" description="Track this booking and start earning loyalty stamps." />
+        </Card>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Switch &amp; Tabs</h2>
+        <StyleGuideInteractive />
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Profile &amp; Barber Cards</h2>
+        <div className="space-y-4">
+          {/* onEdit needs a real client-side closure — it lives in
+              StyleGuideInteractive, not here (see "Switch & Tabs" section
+              above), so this Server Component page never passes an event
+              handler directly to a Client Component. */}
+          <ProfileCard
+            name="Marcus Reed"
+            meta="Master Barber · Active"
+            avatarUrl="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg"
+          />
+          <div className="flex gap-5">
+            <BarberCard
+              staff={{
+                id: "1",
+                name: "Marcus",
+                avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg",
+              }}
+              selected
+            />
+            <BarberCard
+              staff={{
+                id: "2",
+                name: "Leo",
+                avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg",
+              }}
+              isPreferred
+            />
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Appointment &amp; Service Cards</h2>
+        <div className="space-y-4">
+          <AppointmentCard
+            status="confirmed"
+            serviceName="Standard Cut"
+            staff={{
+              id: "1",
+              name: "Marcus Reed",
+              avatarUrl: "https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg",
+            }}
+            formattedDate="Sat, Oct 12"
+            formattedTime="2:00 PM"
+            actions={
+              <>
+                <Button variant="secondary" size="sm" className="flex-1">
+                  Reschedule
+                </Button>
+                <Button variant="destructive" size="sm" className="flex-1">
+                  Cancel
+                </Button>
+              </>
+            }
+          />
+          <Card className="divide-y divide-line px-5">
+            <ServiceCard
+              service={{ id: "1", name: "Haircut & Style", durationMinutes: 30, formattedPrice: "£22.00" }}
+              action={<Button size="sm">Book</Button>}
+            />
+            <ServiceCard
+              service={{ id: "2", name: "Skinfade / Taper & Style", durationMinutes: 30, formattedPrice: "£25.00" }}
+              action={<Button size="sm">Book</Button>}
+            />
+          </Card>
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Loyalty Card</h2>
+        <LoyaltyCard
+          businessName="TrimTime"
+          memberNumber="8421"
+          stampsRequired={10}
+          stampsEarned={7}
+          rewardLabel="50% OFF"
+          termsLine="Valid for 12 months. One reward per visit."
+        />
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Feedback &amp; Status States</h2>
+        <div className="grid gap-4 sm:grid-cols-3">
+          <CardSkeleton />
+          <EmptyState icon={Calendar} title="No upcoming appointments" description="Book your next visit." />
+          <ErrorState />
+        </div>
+      </section>
+
+      <section>
+        <h2 className={SECTION_TITLE}>Bottom Navigation (reference only)</h2>
+        <p className="mb-3 text-sm text-muted">
+          Rendered inline here (not fixed) so both variants are visible at once — see{" "}
+          <code>components/navigation/bottom-nav.tsx</code>.
+        </p>
+        <div className="space-y-3">
+          <div className="flex items-center justify-between rounded-xl border border-line bg-white px-5 py-2">
+            {[
+              { icon: House, label: "Home" },
+              { icon: Calendar, label: "Bookings" },
+              { icon: Users, label: "Settings" },
+            ].map(({ icon: Icon, label }, i) => (
+              <div key={label} className={`flex flex-col items-center gap-1 ${i === 0 ? "text-ink" : "text-muted"}`}>
+                <Icon className="h-5 w-5" aria-hidden="true" />
+                <span className="text-[10px] font-bold uppercase tracking-widest">{label}</span>
+              </div>
+            ))}
+          </div>
+          <div className="flex items-center justify-between rounded-xl bg-[#0c0c0c] px-5 py-2 text-gray-400">
+            {[
+              { icon: Calendar, label: "Calendar" },
+              { icon: Scissors, label: "Current" },
+              { icon: Users, label: "Clients" },
+              { icon: Settings, label: "Settings" },
+            ].map(({ icon: Icon, label }, i) => (
+              <div key={label} className={`flex flex-col items-center gap-1 ${i === 3 ? "text-white" : ""}`}>
+                <Icon className="h-5 w-5" aria-hidden="true" />
+                <span className="text-[10px] font-medium">{label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}