@cimplify/sdk 0.41.0 → 0.42.1

package/templates/storefront-retail/components/policy-page.tsx

@@ -0,0 +1,49 @@
+import type { BrandPolicySection } from "@/lib/brand";
+
+interface PolicyShape {
+  eyebrow: string;
+  title: string;
+  lastUpdated?: string;
+  sections: BrandPolicySection[];
+}
+
+/**
+ * Shared layout for shipping / returns / accessibility / terms / privacy.
+ * Reads a `{ eyebrow, title, lastUpdated, sections[] }` block from brand.
+ */
+export function PolicyPage({ policy }: { policy: PolicyShape }) {
+  return (
+    <article className="max-w-3xl mx-auto px-8 py-16 prose prose-lg max-w-none">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2 not-prose">
+        {policy.eyebrow}
+      </p>
+      <h1 className="text-[clamp(2.25rem,5vw,3.5rem)] font-semibold mb-2 -tracking-[0.02em]">
+        {policy.title}
+      </h1>
+      {policy.lastUpdated && (
+        <p className="text-sm text-muted-foreground not-prose mb-10">
+          Last updated: {policy.lastUpdated}
+        </p>
+      )}
+      <section className="space-y-5 leading-relaxed text-foreground/90">
+        {policy.sections.map((s) => (
+          <div key={s.heading}>
+            <h2 className="text-2xl font-semibold mt-0">{s.heading}</h2>
+            {typeof s.body === "string" ? (
+              <p>{s.body}</p>
+            ) : (
+              <>
+                <p>{s.body.intro}</p>
+                <ul className="list-disc pl-6 space-y-2">
+                  {s.body.bullets.map((b) => (
+                    <li key={b}>{b}</li>
+                  ))}
+                </ul>
+              </>
+            )}
+          </div>
+        ))}
+      </section>
+    </article>
+  );
+}

package/templates/storefront-retail/lib/brand.ts

@@ -173,6 +173,28 @@ export interface Brand {
     sections: BrandPolicySection[];
   };
 
+  // ─── Standalone policy pages ──────────────────────────────────
+  shipping: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  returns: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+  accessibility: { eyebrow: string; title: string; lastUpdated: string; sections: BrandPolicySection[] };
+
+  // ─── Auth + account UX copy ───────────────────────────────────
+  account: {
+    loginEyebrow: string; loginTitle: string; loginSubtitle: string;
+    signupEyebrow: string; signupTitle: string; signupSubtitle: string;
+    accountEyebrow: string; accountTitle: string;
+  };
+
+  // ─── Contact form copy ────────────────────────────────────────
+  contactPage: {
+    eyebrow: string; title: string; body: string;
+    reasons: string[];
+    directLines: { label: string; value: string; href: string }[];
+  };
+
+  // ─── Track-order page copy ────────────────────────────────────
+  trackOrder: { eyebrow: string; title: string; body: string };
+
   // ─── Footer ───────────────────────────────────────────────────
   footer: {
     blurb: string;
@@ -511,6 +533,77 @@ export const brand: Brand = {
     ],
   },
 
+  shipping: {
+    eyebrow: "Shipping",
+    title: "Shipping & Pickup",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Same-day Greater Accra", body: "Orders before 4pm ship the same day. Free over GH₵500." },
+      { heading: "Outside Accra", body: "Partner courier nationwide; 1–3 business days. Tracking SMS sent on dispatch." },
+      { heading: "International", body: "DHL Express across West Africa. Rates and ETA computed at checkout." },
+      { heading: "Pickup", body: "Atomic Junction store, Mon–Sat 9am–8pm. Choose Pickup at checkout; ready in 30 minutes." },
+      { heading: "Bulky / fragile items", body: "TVs, monitors, and large appliances ship by signature. We coordinate the delivery window with you 24h before." },
+    ],
+  },
+
+  returns: {
+    eyebrow: "Returns",
+    title: "Returns & Warranty",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Sealed products", body: "14 days, no questions asked. Original packaging required." },
+      { heading: "Opened products", body: "7 days, subject to a 10% restocking fee for non-defective items." },
+      { heading: "Activated SIM phones", body: "Cannot be returned once the SIM is registered. Defects covered under warranty." },
+      { heading: "Two-year warranty", body: "Manufacturer + Currents-backed extension. Covers manufacturing defects and battery degradation below 80%." },
+      { heading: "How to start", body: "Email support@currentselectronics.test with your order number. We email a prepaid label or pickup time." },
+    ],
+  },
+
+  accessibility: {
+    eyebrow: "Accessibility",
+    title: "Accessibility Statement",
+    lastUpdated: "1 May 2026",
+    sections: [
+      { heading: "Our commitment", body: "We aim for WCAG 2.1 AA on this site and test against it on every release." },
+      { heading: "What we've done", body: { intro: "Specifically, we've:", bullets: [
+        "Maintained a minimum 4.5:1 contrast ratio on body text.",
+        "Ensured every interactive element is keyboard-reachable with visible focus.",
+        "Labelled images, icons, and form fields for screen-reader users.",
+        "Avoided motion-based interactions; respected `prefers-reduced-motion`.",
+      ] } },
+      { heading: "Reporting issues", body: "Email accessibility@currentselectronics.test. We respond within 5 business days." },
+    ],
+  },
+
+  account: {
+    loginEyebrow: "Welcome back",
+    loginTitle: "Sign in to Currents",
+    loginSubtitle: "Track orders, manage your warranty, and view your trade-in credits.",
+    signupEyebrow: "Welcome",
+    signupTitle: "Create your Currents account",
+    signupSubtitle: "Save addresses, register warranties, manage trade-ins, and unlock instalment options at checkout.",
+    accountEyebrow: "Your account",
+    accountTitle: "Welcome back",
+  },
+
+  contactPage: {
+    eyebrow: "Contact",
+    title: "Talk to a real human.",
+    body: "Order question, warranty claim, business sales — fill the form and we'll reply within a business day.",
+    reasons: ["General question", "An order issue", "Warranty / repair", "Trade-in", "Business sales", "Press / partnerships"],
+    directLines: [
+      { label: "Email", value: "hello@currentselectronics.test", href: "mailto:hello@currentselectronics.test" },
+      { label: "Phone", value: "+233 244 000 000", href: "tel:+233244000000" },
+      { label: "WhatsApp", value: "+233 244 000 000", href: "https://wa.me/233244000000" },
+    ],
+  },
+
+  trackOrder: {
+    eyebrow: "Track an order",
+    title: "Where's my order?",
+    body: "Enter your order number and email. We'll show the live status, courier tracking, and ETA.",
+  },
+
   footer: {
     blurb:
       "Authorised dealer for Apple, Samsung, Sony, Bose. Same-day delivery in Accra; nationwide via partner courier. Two-year warranty on every product.",
@@ -529,19 +622,20 @@ export const brand: Brand = {
       {
         title: "Support",
         links: [
-          { label: "Contact", href: "mailto:hello@currentselectronics.test" },
-          { label: "Warranty", href: "/faq" },
-          { label: "Returns", href: "/faq" },
-          { label: "Shipping", href: "/faq" },
+          { label: "Contact", href: "/contact" },
+          { label: "Track an order", href: "/track-order" },
+          { label: "Shipping", href: "/shipping" },
+          { label: "Returns & warranty", href: "/returns" },
+          { label: "FAQ", href: "/faq" },
         ],
       },
       {
-        title: "Company",
+        title: "Account",
         links: [
-          { label: "About", href: "/about" },
-          { label: "Trade-in", href: "/about" },
-          { label: "Business sales", href: "mailto:business@currentselectronics.test" },
-          { label: "Careers", href: "/about" },
+          { label: "Sign in", href: "/login" },
+          { label: "Create account", href: "/signup" },
+          { label: "Your orders", href: "/account/orders" },
+          { label: "Settings", href: "/account/settings" },
         ],
       },
       {
@@ -549,6 +643,8 @@ export const brand: Brand = {
         links: [
           { label: "Terms of Service", href: "/terms" },
           { label: "Privacy Policy", href: "/privacy" },
+          { label: "Accessibility", href: "/accessibility" },
+          { label: "Sitemap", href: "/sitemap-page" },
         ],
       },
     ],

package/templates/storefront-services/AGENTS.md

@@ -5,31 +5,79 @@ If you are an AI agent (Claude, Cursor, Aider, devin, …) working on this store
 ## TL;DR for rebranding
 
 1. **Edit `lib/brand.ts`** — every visible string lives here.
-2. **Edit `app/globals.css`** — the `@theme { … }` block holds the palette + radius.
+2. **Edit `app/globals.css`** — `@theme { … }` for palette + radius.
 3. **Edit `.env.local`** — `NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID=bus_serene_spa` for the bundled seed.
 
 ## Aesthetic
 
-Calm, refined wellness — Booksy / Mindbody / boutique-spa territory:
+- **Fraunces serif + Inter** — warm, slightly editorial headings.
+- **Sand + sage palette** — warm cream background, deep sage primary.
+- **Generous radius**: `1rem` — calm, soft.
+- Lower-contrast than retail / fashion.
+- Schema.org `@type` is `BeautySalon`.
 
-- **Fraunces serif** for headings (warm, slightly editorial).
-- **Inter** for body and UI.
-- **Sand + sage palette**: warm cream background, deep sage primary.
-- **Soft corners**: `--radius: 1rem` — generous rounding throughout.
-- **Lower-contrast** than retail / fashion; calm-feeling.
+## Page surface
 
-## Industry-specific copy patterns
+```
+app/
+  page.tsx                       Home — hero ("Now booking"), service strips,
+                                  category grid, newsletter
+  shop/page.tsx                  Treatment menu (SDK <CataloguePage/>)
+  search/page.tsx                Search
+  collections/[slug]/page.tsx    Collection landing
+  categories/[slug]/page.tsx     Category landing (e.g. memberships, packages)
+
+  book/page.tsx                  ⭐ Services-specific: full booking widget
+                                  (treatment + 14-day date + 30-min slot grid)
+                                  → adds to cart with slot as note → /checkout
+
+  cart/page.tsx, checkout/page.tsx, orders/[id]/page.tsx
+
+  account/page.tsx               <CimplifyAccount /> (iframe)
+  account/orders/page.tsx        <CimplifyAccount section="orders" />
+  account/addresses/page.tsx     <CimplifyAccount section="addresses" />
+  account/settings/page.tsx      <CimplifyAccount section="settings" />
+  login/page.tsx, signup/page.tsx  redirects → /account
+
+  contact/page.tsx, track-order/page.tsx (find a booking)
+
+  about/page.tsx, faq/page.tsx
+  shipping/page.tsx (what to expect at the studio), returns/page.tsx (cancellations),
+  accessibility/page.tsx, terms/page.tsx, privacy/page.tsx
+
+  sitemap-page/page.tsx, sitemap.ts, robots.ts, llms.txt/route.ts, opensearch.xml/route.ts
+  error.tsx, not-found.tsx
+```
+
+## File ↔ brand-field map
+
+| File | Reads from `brand` |
+|---|---|
+| `app/layout.tsx` | identity, contact, socials, BeautySalon JSON-LD |
+| `app/page.tsx` | `brand.hero` ("Now booking") |
+| `app/about/page.tsx` | `brand.about` |
+| `app/faq/page.tsx` | `brand.faq` (booking, contraindications, memberships) |
+| `app/shipping/page.tsx` | `brand.shipping` (what to expect at the studio) |
+| `app/returns/page.tsx` | `brand.returns` (cancellation policy) |
+| `app/accessibility/page.tsx` | `brand.accessibility` |
+| `app/terms/page.tsx`, `app/privacy/page.tsx` | `brand.terms`, `brand.privacy` |
+| `app/contact/page.tsx` | `brand.contactPage`, `brand.contact` |
+| `app/track-order/page.tsx` | `brand.trackOrder` ("find a booking") |
+| `app/account/*/page.tsx` | `brand.account` (iframe owns UI) |
+| `app/book/*` | derives bookable services from product list (`type: "service"`) |
+| `app/llms.txt/route.ts` | `brand.llms`, contact, currency |
+| `components/header.tsx`, `footer.tsx` | `brand.header`, `brand.footer`, `brand.contact`, `brand.socials` |
+
+## Services-specific notes
 
-The bundled brand presets:
-- `brand.hero.badge` reads `"Now booking · April"` — month-based availability.
-- `brand.hero.primaryCtaLabel` is `"Book a treatment"`.
-- `brand.tradeIn` is omitted (irrelevant for services).
-- `brand.faq` covers booking, cancellation, contraindications, memberships.
-- Schema.org type is `BeautySalon`.
+- **Bookable services are `type: "service"` products.** The `/book` page filters the product list to type=service and treats them as treatments. Their `duration_minutes` is shown on the chip.
+- Cart-item notes carry the booked time slot — checkout sends them through Cimplify's order pipeline. The merchant's downstream system reads the note to schedule the appointment.
+- Mock seed: `--seed services` (Serene Spa).
 
-## Mock seed
+## Known TODOs
 
-Wired to `--seed services` (Serene Spa). Products in this seed are *services* (`type: "service"`), so the SDK's variant cards render `StandardServiceCard` automatically.
+- `/book` widget shows every slot as available. For production, wire `useAvailableSlots({ serviceId, date })` from `@cimplify/sdk/react` to filter to genuinely-free windows.
+- Contact + newsletter fake submits.
 
 ## Quick start
 

package/templates/storefront-services/app/accessibility/page.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+import { brand } from "@/lib/brand";
+import { PolicyPage } from "@/components/policy-page";
+
+export const metadata: Metadata = {
+  title: `${brand.accessibility.title} — ${brand.name}`,
+};
+
+export default function AccessibilityPage() {
+  return <PolicyPage policy={brand.accessibility} />;
+}

package/templates/storefront-services/app/account/addresses/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Addresses — ${brand.name}`,
+};
+
+export default function AddressesPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your addresses
+      </h1>
+      <AccountIframe section="addresses" />
+    </article>
+  );
+}

package/templates/storefront-services/app/account/orders/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Orders — ${brand.name}`,
+};
+
+export default function OrdersPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Your orders
+      </h1>
+      <AccountIframe section="orders" />
+    </article>
+  );
+}

package/templates/storefront-services/app/account/page.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Account — ${brand.name}`,
+  description: brand.account.signupSubtitle,
+};
+
+export default function AccountPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        {brand.account.accountEyebrow}
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        {brand.account.accountTitle}
+      </h1>
+      <AccountIframe />
+    </article>
+  );
+}

package/templates/storefront-services/app/account/settings/page.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { AccountIframe } from "@/components/account-iframe";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Settings — ${brand.name}`,
+};
+
+export default function SettingsPage() {
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-12">
+      <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-primary mb-2">
+        Account
+      </p>
+      <h1 className="font-serif text-[clamp(2rem,4vw,2.75rem)] font-semibold mb-8 -tracking-[0.02em]">
+        Settings
+      </h1>
+      <AccountIframe section="settings" />
+    </article>
+  );
+}

package/templates/storefront-services/app/book/book-client.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useRouter } from "next/navigation";
+import type { Product } from "@cimplify/sdk";
+import { useCart } from "@cimplify/sdk/react";
+
+interface Slot {
+  date: Date;
+  label: string;
+}
+
+/**
+ * Real booking flow:
+ *   1. Pick a treatment (left rail)
+ *   2. Pick a date (chips, today + next 13 days)
+ *   3. Pick a slot (15-minute grid, 10am–7pm)
+ *   4. Add to cart with the chosen slot as a cart-item note;
+ *      Cimplify Checkout finalises the booking.
+ *
+ * The slot grid is generated client-side as a placeholder. In production,
+ * call `useAvailableSlots({ serviceId, date })` from `@cimplify/sdk/react`
+ * to fetch real availability from the Cimplify scheduling API.
+ */
+export function BookClient({ treatments }: { treatments: Product[] }) {
+  const router = useRouter();
+  const { addToCart } = useCart();
+  const [selectedTreatment, setSelectedTreatment] = useState<Product | undefined>(
+    treatments[0],
+  );
+  const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());
+  const [selectedSlotKey, setSelectedSlotKey] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  const dates = useMemo(() => {
+    const now = new Date();
+    return Array.from({ length: 14 }).map((_, i) => {
+      const d = new Date(now);
+      d.setDate(now.getDate() + i);
+      d.setHours(0, 0, 0, 0);
+      return d;
+    });
+  }, []);
+
+  const slots = useMemo<Slot[]>(() => {
+    const out: Slot[] = [];
+    for (let h = 10; h <= 19; h++) {
+      for (const m of [0, 30]) {
+        const d = new Date(selectedDate);
+        d.setHours(h, m, 0, 0);
+        const label = `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+        out.push({ date: d, label });
+      }
+    }
+    return out;
+  }, [selectedDate]);
+
+  const slotKey = (s: Slot) => s.date.toISOString();
+
+  async function confirm() {
+    if (!selectedTreatment || !selectedSlotKey) return;
+    setSubmitting(true);
+    try {
+      await addToCart(selectedTreatment.id, 1, {
+        notes: `Booked for ${new Date(selectedSlotKey).toLocaleString()}`,
+      });
+      router.push("/checkout");
+    } catch {
+      setSubmitting(false);
+    }
+  }
+
+  if (treatments.length === 0) {
+    return (
+      <p className="text-muted-foreground">
+        No bookable treatments yet. Add a Service-type product to your catalogue first.
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-8">
+      {/* Treatments */}
+      <div>
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-3">
+          Treatment
+        </p>
+        <div className="space-y-2">
+          {treatments.map((t) => {
+            const active = selectedTreatment?.id === t.id;
+            return (
+              <button
+                key={t.id}
+                type="button"
+                onClick={() => setSelectedTreatment(t)}
+                className={[
+                  "w-full text-left rounded-2xl border p-4 transition-colors",
+                  active
+                    ? "border-primary bg-primary/5"
+                    : "border-border bg-card hover:border-foreground/30",
+                ].join(" ")}
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="min-w-0">
+                    <p className="font-semibold text-sm m-0 truncate">{t.name}</p>
+                    <p className="text-xs text-muted-foreground m-0">
+                      {t.duration_minutes ? `${t.duration_minutes} min · ` : ""}
+                      {t.currency ?? "GHS"} {t.default_price}
+                    </p>
+                  </div>
+                  {active && (
+                    <span className="grid place-items-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs">
+                      ✓
+                    </span>
+                  )}
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Date + slots */}
+      <div className="rounded-2xl border border-border bg-card p-6">
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-3">
+          Date
+        </p>
+        <div className="grid grid-cols-7 gap-1.5 mb-6">
+          {dates.map((d) => {
+            const active = d.toDateString() === selectedDate.toDateString();
+            return (
+              <button
+                key={d.toISOString()}
+                type="button"
+                onClick={() => {
+                  setSelectedDate(d);
+                  setSelectedSlotKey(null);
+                }}
+                className={[
+                  "flex flex-col items-center justify-center py-2 rounded-md transition-colors",
+                  active
+                    ? "bg-foreground text-background"
+                    : "bg-background hover:bg-muted text-foreground",
+                ].join(" ")}
+              >
+                <span className="text-[10px] uppercase tracking-wider opacity-60">
+                  {d.toLocaleString(undefined, { weekday: "short" })}
+                </span>
+                <span className="text-base font-semibold tabular-nums">{d.getDate()}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-muted-foreground mb-3">
+          Slot
+        </p>
+        <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+          {slots.map((s) => {
+            const key = slotKey(s);
+            const active = selectedSlotKey === key;
+            return (
+              <button
+                key={key}
+                type="button"
+                onClick={() => setSelectedSlotKey(key)}
+                className={[
+                  "py-2 rounded-md text-sm tabular-nums transition-colors",
+                  active
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-background border border-border hover:border-primary",
+                ].join(" ")}
+              >
+                {s.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <button
+          type="button"
+          onClick={confirm}
+          disabled={!selectedTreatment || !selectedSlotKey || submitting}
+          className="w-full mt-6 inline-flex items-center justify-center gap-2 px-5 py-3 rounded-md bg-primary text-primary-foreground font-semibold text-sm hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {submitting
+            ? "Confirming…"
+            : selectedSlotKey
+              ? `Book ${selectedTreatment?.name} at ${new Date(selectedSlotKey).toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" })}`
+              : "Pick a slot to book"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-services/app/book/page.tsx

@@ -0,0 +1,65 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { cacheTag, cacheLife } from "next/cache";
+import { getServerClient, tags, type Product } from "@cimplify/sdk/server";
+import { BookClient } from "./book-client";
+import { brand } from "@/lib/brand";
+
+export const metadata: Metadata = {
+  title: `Book a treatment — ${brand.name}`,
+  description: "Pick a treatment, pick a slot, you're booked.",
+};
+
+async function getTreatments(): Promise<Product[]> {
+  "use cache";
+  cacheTag(tags.products());
+  cacheLife("hours");
+
+  const client = getServerClient();
+  const r = await client.catalogue.getProducts({ limit: 50 });
+  if (!r.ok) return [];
+  // Booking flow only handles service-typed products.
+  return r.value.items.filter((p) => p.type === "service");
+}
+
+export default async function BookPage() {
+  const treatments = await getTreatments();
+  return (
+    <article className="max-w-5xl mx-auto px-6 sm:px-8 py-14">
+      <p className="text-[11px] font-mono uppercase tracking-[0.16em] text-primary mb-2">
+        Book a treatment
+      </p>
+      <h1 className="text-[clamp(2rem,5vw,3rem)] font-semibold mb-3 -tracking-[0.02em]">
+        Pick a treatment.<br />Pick a slot.
+      </h1>
+      <p className="text-muted-foreground leading-relaxed mb-10 max-w-xl">
+        Available windows for the next two weeks. Confirmation by SMS within a minute of
+        booking. Free cancellation up to 24 hours before.
+      </p>
+
+      <Suspense fallback={<BookSkeleton />}>
+        <BookClient treatments={treatments} />
+      </Suspense>
+    </article>
+  );
+}
+
+function BookSkeleton() {
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-8">
+      <div className="space-y-2">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-16 bg-muted rounded-2xl animate-pulse" />
+        ))}
+      </div>
+      <div className="rounded-2xl border border-border bg-card p-8">
+        <div className="h-5 w-40 bg-muted rounded mb-4 animate-pulse" />
+        <div className="grid grid-cols-3 gap-2">
+          {Array.from({ length: 9 }).map((_, i) => (
+            <div key={i} className="h-10 bg-muted rounded animate-pulse" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}