@pylonsync/create-pylon 0.3.273 → 0.3.275

package/templates/local-service/app/dashboard/dashboard-client.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { db, callFn } from "@pylonsync/react";
+import { useAuth } from "@pylonsync/client";
+import { siteConfig } from "@/lib/site.config";
+import type { BookingRow, OwnerBookingsResult } from "@/lib/booking";
+
+// The owner's live bookings dashboard. Liveness rides the SAME public
+// BookedSlot projection the picker uses: `db.useQuery("BookedSlot")` re-renders
+// the instant a slot is taken or freed (cross-tab, via the replica), which
+// triggers a re-fetch of the owner-gated `bookingsForOwner` — so new bookings
+// appear and cancellations drop off without a refresh. Customer PII only ever
+// travels through that gated call.
+export function BookingsDashboard({ userEmail }: { userEmail: string }) {
+  const { data: slotRows } = db.useQuery<{ id: string }>("BookedSlot");
+  const liveKey = slotRows.length;
+
+  const [bookings, setBookings] = useState<BookingRow[] | null>(null);
+  const [denied, setDenied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  async function load() {
+    try {
+      const r = await callFn<OwnerBookingsResult>("bookingsForOwner", {});
+      if (!r.authorized) {
+        setDenied(true);
+      } else {
+        setBookings(r.bookings);
+        setDenied(false);
+        setError(null);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+
+  useEffect(() => {
+    void load();
+    // Re-fetch whenever the live booked-slot set changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [liveKey]);
+
+  async function act(id: string, fn: "confirmBooking" | "cancelBooking") {
+    setBusyId(id);
+    try {
+      await callFn(fn, { bookingId: id });
+      await load();
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  if (denied) return <OwnerOnly email={userEmail} />;
+  if (error) {
+    return (
+      <div className="rounded-xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">
+        {error}
+      </div>
+    );
+  }
+  if (!bookings) return <Skeleton />;
+
+  // Upcoming = not cancelled and ending in the future. Group by day.
+  const nowMs = Date.now();
+  const active = bookings.filter((b) => b.status !== "cancelled");
+  const upcoming = active.filter((b) => Date.parse(b.endsAt) >= nowMs);
+  const todayKey = new Date().toLocaleDateString();
+  const todayCount = upcoming.filter(
+    (b) => new Date(b.startsAt).toLocaleDateString() === todayKey,
+  ).length;
+  const pendingCount = upcoming.filter((b) => b.status === "pending").length;
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">Bookings</h1>
+        <p className="mt-1 text-sm text-zinc-500">
+          Live — new bookings appear the moment they happen; cancelling frees the
+          slot on the site instantly.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Stat label="Upcoming" value={upcoming.length} />
+        <Stat label="Today" value={todayCount} />
+        <Stat label="Awaiting confirm" value={pendingCount} />
+      </div>
+
+      <UpcomingList bookings={upcoming} busyId={busyId} onAct={act} />
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-xl border border-zinc-200 bg-white p-4">
+      <div className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">
+        {label}
+      </div>
+      <div className="mt-1 text-2xl font-semibold tabular-nums text-zinc-900">{value}</div>
+    </div>
+  );
+}
+
+function UpcomingList({
+  bookings,
+  busyId,
+  onAct,
+}: {
+  bookings: BookingRow[];
+  busyId: string | null;
+  onAct: (id: string, fn: "confirmBooking" | "cancelBooking") => void;
+}) {
+  // Group chronologically by calendar day.
+  const groups = useMemo(() => {
+    const m = new Map<string, BookingRow[]>();
+    for (const b of bookings) {
+      const key = new Date(b.startsAt).toLocaleDateString(undefined, {
+        weekday: "long",
+        month: "short",
+        day: "numeric",
+      });
+      const arr = m.get(key) ?? [];
+      arr.push(b);
+      m.set(key, arr);
+    }
+    return Array.from(m.entries());
+  }, [bookings]);
+
+  if (bookings.length === 0) {
+    return (
+      <div className="rounded-xl border border-dashed border-zinc-300 p-10 text-center text-sm text-zinc-500">
+        No upcoming bookings yet. Share your site — new bookings land here live.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {groups.map(([day, items]) => (
+        <div key={day}>
+          <h2 className="mb-2 text-[13px] font-semibold text-zinc-900">{day}</h2>
+          <div className="overflow-hidden rounded-xl border border-zinc-200">
+            {items.map((b, i) => (
+              <BookingItem
+                key={b.id}
+                booking={b}
+                busy={busyId === b.id}
+                onAct={onAct}
+                last={i === items.length - 1}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function BookingItem({
+  booking,
+  busy,
+  onAct,
+  last,
+}: {
+  booking: BookingRow;
+  busy: boolean;
+  onAct: (id: string, fn: "confirmBooking" | "cancelBooking") => void;
+  last: boolean;
+}) {
+  const service = siteConfig.services.items.find((s) => s.slug === booking.serviceSlug);
+  return (
+    <div
+      className={
+        "flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-3 " +
+        (last ? "" : "border-b border-zinc-100")
+      }
+    >
+      <div className="w-20 shrink-0 text-[14px] font-semibold tabular-nums text-zinc-900">
+        {new Date(booking.startsAt).toLocaleTimeString(undefined, {
+          hour: "numeric",
+          minute: "2-digit",
+        })}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="text-[14px] font-medium text-zinc-900">
+            {booking.customerName}
+          </span>
+          <StatusBadge status={booking.status} />
+        </div>
+        <div className="truncate text-[12.5px] text-zinc-500">
+          {service?.name ?? booking.serviceSlug} · {booking.customerEmail}
+          {booking.customerPhone ? ` · ${booking.customerPhone}` : ""}
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        {booking.status === "pending" ? (
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => onAct(booking.id, "confirmBooking")}
+            className="rounded-md bg-zinc-900 px-3 py-1.5 text-[12.5px] font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-50"
+          >
+            {busy ? "…" : "Confirm"}
+          </button>
+        ) : null}
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => onAct(booking.id, "cancelBooking")}
+          className="rounded-md border border-zinc-300 px-3 py-1.5 text-[12.5px] font-medium text-zinc-600 transition-colors hover:border-red-300 hover:text-red-600 disabled:opacity-50"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const tone =
+    status === "confirmed"
+      ? "bg-green-50 text-green-700"
+      : status === "cancelled"
+        ? "bg-zinc-100 text-zinc-500"
+        : "bg-amber-50 text-amber-700";
+  return (
+    <span className={"rounded-full px-2 py-0.5 text-[10px] font-medium capitalize " + tone}>
+      {status}
+    </span>
+  );
+}
+
+/* --------------------------- owner-only gate -------------------------- */
+
+function OwnerOnly({ email }: { email: string }) {
+  return (
+    <div className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center">
+      <h1 className="text-lg font-semibold">This dashboard is owner-only</h1>
+      <p className="mx-auto mt-2 max-w-md text-sm text-zinc-500">
+        You&apos;re signed in as{" "}
+        <span className="font-medium text-zinc-700">{email || "this account"}</span>.
+        Only the shop owner can see bookings. Set{" "}
+        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">
+          PYLON_OWNER_EMAIL={email || "you@yourshop.com"}
+        </code>{" "}
+        in your{" "}
+        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">.env</code>,
+        restart, and reload — or sign in with the owner account.
+      </p>
+    </div>
+  );
+}
+
+/* ----------------------------- user menu ------------------------------ */
+
+export function UserMenu({ email }: { email: string }) {
+  const { signOut } = useAuth();
+  const initial = (email.trim()[0] || "?").toUpperCase();
+  async function onSignOut() {
+    await signOut();
+    window.location.assign("/");
+  }
+  return (
+    <details className="group relative">
+      <summary className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-zinc-900 text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden">
+        {initial}
+      </summary>
+      <div className="absolute right-0 top-full z-40 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white py-1 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.25)]">
+        <div className="border-b border-zinc-100 px-3 py-2">
+          <div className="truncate text-[13px] font-medium text-zinc-900">
+            {email || "Signed in"}
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={onSignOut}
+          className="flex w-full items-center px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+        >
+          Sign out
+        </button>
+      </div>
+    </details>
+  );
+}
+
+/* ------------------------------ skeleton ------------------------------ */
+
+function Skeleton() {
+  return (
+    <div className="space-y-8">
+      <div className="h-6 w-32 animate-pulse rounded bg-zinc-100" />
+      <div className="grid gap-4 sm:grid-cols-3">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="h-20 animate-pulse rounded-xl bg-zinc-100" />
+        ))}
+      </div>
+      <div className="h-48 animate-pulse rounded-xl bg-zinc-100" />
+    </div>
+  );
+}

package/templates/local-service/app/dashboard/page.tsx

@@ -0,0 +1,63 @@
+import React, { use } from "react";
+import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+import { UserMenu, BookingsDashboard } from "./dashboard-client";
+
+export const metadata: Metadata = {
+  title: `Dashboard — ${siteConfig.brand.name}`,
+  robots: "noindex",
+};
+
+// `app/dashboard/page.tsx` → `/dashboard`. Server-side auth gate only; the OWNER
+// gate (only PYLON_OWNER_EMAIL sees the bookings + customer PII) lives in the
+// `bookingsForOwner` function via `ctx.env`. A non-owner gets a clean
+// "owner-only" card from the client. Reading `auth` here opts the render out of
+// caching, which is correct — the dashboard is private + noindex.
+export default function DashboardPage({ auth, response, serverData }: PageProps) {
+  // Anonymous visitors and guest sessions (guest_… ids) get bounced to login —
+  // the dashboard is for the real, signed-in owner only.
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const email = me?.email ?? "";
+
+  return (
+    <Shell email={email}>
+      <BookingsDashboard userEmail={email} />
+    </Shell>
+  );
+}
+
+function Shell({ email, children }: { email: string; children: React.ReactNode }) {
+  const { brand } = siteConfig;
+  return (
+    <div className="flex min-h-screen flex-col bg-white text-zinc-900">
+      <header className="border-b border-zinc-200">
+        <div className="mx-auto flex h-14 max-w-4xl items-center justify-between px-6">
+          <div className="flex items-center gap-2">
+            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+              {brand.letter}
+            </span>
+            <span className="text-[15px] font-semibold tracking-tight">
+              {brand.name} <span className="text-zinc-400">/ bookings</span>
+            </span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/"
+              className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+            >
+              View site ↗
+            </Link>
+            <UserMenu email={email} />
+          </div>
+        </div>
+      </header>
+      <main className="flex-1">
+        <div className="mx-auto max-w-4xl px-6 py-8">{children}</div>
+      </main>
+    </div>
+  );
+}

package/templates/local-service/app/error.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { type ErrorBoundaryProps } from "@pylonsync/react";
+
+// `app/error.tsx` → the error boundary for this segment. Hydrated + interactive:
+// `reset()` re-attempts the route. The thrown error reaches the client as
+// `{ message, digest }` only — the stack stays in the dev overlay / server logs.
+export default function Error({ error, reset }: ErrorBoundaryProps) {
+  return (
+    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
+      <h1 className="text-2xl font-semibold tracking-tight">Something went wrong</h1>
+      <p className="mt-2 text-zinc-500">{error.message}</p>
+      {error.digest ? (
+        <p className="mt-1 text-xs text-zinc-400">
+          Reference: <code>{error.digest}</code>
+        </p>
+      ) : null}
+      <button
+        type="button"
+        onClick={reset}
+        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/templates/local-service/app/globals.css

@@ -0,0 +1,148 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Tailwind v4 scans these globs for class names. Add more @source lines if you
+   put markup elsewhere. The @pylonsync/client line lets its components
+   (EnsureGuest, auth helpers) keep any classes they ship. */
+@source "../app/**/*.{tsx,ts,jsx,js}";
+@source "../components/**/*.{tsx,ts,jsx,js}";
+@source "../lib/**/*.{tsx,ts,jsx,js}";
+@source "../node_modules/@pylonsync/client/**/*.{tsx,ts,jsx,js}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* shadcn/ui design tokens (new-york / zinc) + the marketing brand accent. The
+   three brand vars are defaults — app/layout.tsx overrides them from
+   lib/site.config.ts on <html>, so re-theming the whole page is one edit there. */
+:root {
+  --radius: 0.625rem;
+  --brand: #4f46e5;
+  --brand-soft: #eef2ff;
+  --paper: #fafafa;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-brand: var(--brand);
+  --color-brand-soft: var(--brand-soft);
+  --color-paper: var(--paper);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-border, currentColor);
+    outline-color: var(--color-ring);
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
+  }
+  button {
+    cursor: pointer;
+  }
+}

package/templates/local-service/app/layout.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+import { Link, type PageAuth } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+import { SectionScroller } from "@/components/section-scroller";
+
+// A layout wraps every page. This marketing layout renders a slim nav and a
+// footer, both driven by lib/site.config.ts. `auth.user_id` is resolved
+// server-side from the session cookie before any HTML is sent, so the owner
+// sees "Dashboard" and everyone else sees "Sign in" — no flash, no client fetch.
+interface LayoutProps {
+  children: React.ReactNode;
+  url: string;
+  auth: PageAuth;
+}
+
+export default function RootLayout({ children, url, auth }: LayoutProps) {
+  // A guest session (minted by <EnsureGuest> for the live picker) has a
+  // `guest_…` user id — that's an anonymous visitor, NOT the signed-in owner,
+  // so it shouldn't flip the nav to "Dashboard".
+  const signedIn = Boolean(auth?.user_id && !auth.user_id.startsWith("guest_"));
+  const { brand, colors } = siteConfig;
+
+  // Auth + dashboard render bare (no marketing chrome). Match the path PREFIX.
+  const path = (url ?? "").split("?")[0];
+  const BARE_PREFIXES = ["/login", "/dashboard"];
+  const isBare = BARE_PREFIXES.some((p) => path === p || path.startsWith(p + "/"));
+
+  return (
+    <html
+      lang="en"
+      style={
+        {
+          "--brand": colors.brand,
+          "--brand-soft": colors.brandSoft,
+          "--paper": colors.paper,
+        } as React.CSSProperties
+      }
+    >
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+        />
+      </head>
+      <body className="flex min-h-screen flex-col bg-background text-foreground antialiased">
+        <SectionScroller />
+        {isBare ? (
+          children
+        ) : (
+          <>
+            <header className="sticky top-0 z-30 border-b border-zinc-200/70 bg-white/85 backdrop-blur">
+              <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
+                <Link href="/" className="flex items-center gap-2">
+                  <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+                    {brand.letter}
+                  </span>
+                  <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
+                    {brand.name}
+                  </span>
+                </Link>
+                <nav className="flex items-center gap-2">
+                  <a
+                    href="/#services"
+                    className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex"
+                  >
+                    Services
+                  </a>
+                  {signedIn ? (
+                    <Link
+                      href="/dashboard"
+                      className="inline-flex items-center rounded-full bg-zinc-900 px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:bg-zinc-700"
+                    >
+                      Dashboard
+                    </Link>
+                  ) : (
+                    <>
+                      <Link
+                        href="/login"
+                        className="hidden rounded-full px-3 py-1.5 text-[13px] font-medium text-zinc-600 transition-colors hover:text-zinc-900 sm:inline-flex"
+                      >
+                        Sign in
+                      </Link>
+                      <a
+                        href="/#book"
+                        className="inline-flex items-center rounded-full bg-brand px-3.5 py-1.5 text-[13px] font-medium text-white transition-colors hover:opacity-90"
+                      >
+                        {siteConfig.hero.ctaLabel}
+                      </a>
+                    </>
+                  )}
+                </nav>
+              </div>
+            </header>
+
+            <main className="flex-1">{children}</main>
+
+            <SiteFooter />
+          </>
+        )}
+      </body>
+    </html>
+  );
+}
+
+function SiteFooter() {
+  const { brand, location } = siteConfig;
+  return (
+    <footer className="border-t border-zinc-200/70 bg-white">
+      <div className="mx-auto max-w-5xl px-6 py-12">
+        <div className="flex flex-col items-start justify-between gap-6 sm:flex-row">
+          <div className="max-w-sm">
+            <Link href="/" className="inline-flex items-center gap-2">
+              <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+                {brand.letter}
+              </span>
+              <span className="text-[15px] font-semibold tracking-tight text-zinc-900">
+                {brand.name}
+              </span>
+            </Link>
+            <p className="mt-3 text-[13px] leading-relaxed text-zinc-500">
+              {brand.footerBlurb}
+            </p>
+          </div>
+          <div className="text-[13px] leading-relaxed text-zinc-500">
+            <div className="font-medium text-zinc-900">Visit</div>
+            <p className="mt-2 max-w-[14rem]">{location.address}</p>
+            <p className="mt-2">{location.phone}</p>
+            <a href={`mailto:${brand.email}`} className="mt-1 inline-block hover:text-zinc-900">
+              {brand.email}
+            </a>
+          </div>
+        </div>
+        <div className="mt-10 flex flex-col items-start justify-between gap-3 border-t border-zinc-200/70 pt-6 text-[12px] text-zinc-400 sm:flex-row sm:items-center">
+          <span>
+            © {new Date().getFullYear()} {brand.copyrightName}
+          </span>
+          <span>
+            Built with{" "}
+            <a href="https://pylonsync.com" className="font-medium text-zinc-600 hover:text-zinc-900">
+              Pylon
+            </a>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}