layouts

src/app/login/LoginPageClient.tsx

@@ -12,13 +12,7 @@ export function LoginPageClient() {
   const searchParams = useSearchParams();
   const nextPath = searchParams.get("next") || "/profile";
 
-  const {
+  const { requestOtp, verifyOtp, loginPassword, loginGoogle, loginBookingRef } = useAuth();
-    requestOtp,
-    verifyOtp,
-    loginPassword,
-    loginSocial,
-    loginBookingRef,
-  } = useAuth();
 
   const [tab, setTab] = useState<Tab>("otp");
   const [email, setEmail] = useState("");
@@ -59,15 +53,17 @@ export function LoginPageClient() {
     if (r.ok) router.push(nextPath);
   }
 
-  function handleSocial(provider: "google" | "apple" | "facebook") {
+  async function handleGoogle() {
-    loginSocial(provider);
+    setMessage(null);
-    router.push(nextPath);
+    await loginGoogle();
   }
 
-  function handleBookingRef(e: React.FormEvent) {
+  async function handleBookingRef(e: React.FormEvent) {
     e.preventDefault();
     setMessage(null);
-    const r = loginBookingRef(bookingRef);
+    setLoading(true);
+    const r = await loginBookingRef(bookingRef);
+    setLoading(false);
     setMessage(r.message);
     if (r.ok) router.push(nextPath);
   }
@@ -162,7 +158,7 @@ export function LoginPageClient() {
                     />
                   </label>
                   <p className="text-xs text-[var(--color-muted)]">
-                    Demo: enter <strong>123456</strong>
+                    Use the code sent to your email (hotel guest OTP).
                   </p>
                   <div className="flex gap-2">
                     <button
@@ -212,7 +208,7 @@ export function LoginPageClient() {
                 />
               </label>
               <p className="text-xs text-[var(--color-muted)]">
-                Demo password: <strong>shitaye</strong> or <strong>demo123</strong>
+                Use your Yaltopia homes account password
               </p>
               <button
                 type="submit"
@@ -226,32 +222,20 @@ export function LoginPageClient() {
 
           {tab === "social" && (
             <div className="space-y-3">
-              <p className="text-sm text-[var(--color-muted)]">
-                Mock sign-in — no external redirect in this demo.
-              </p>
               <button
                 type="button"
-                onClick={() => handleSocial("google")}
+                onClick={() => void handleGoogle()}
                 className="flex w-full items-center justify-center gap-2 rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] py-3 text-sm font-semibold transition hover:bg-[var(--color-surface-muted)]"
               >
                 <span className="text-base" aria-hidden>
-                  G
+                  <svg className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+                  </svg>
                 </span>
-                Continue with Google
+                Login with Google
-              </button>
-              <button
-                type="button"
-                onClick={() => handleSocial("apple")}
-                className="flex w-full items-center justify-center gap-2 rounded-full border border-[var(--color-border)] bg-[var(--color-text)] py-3 text-sm font-semibold text-white transition hover:opacity-90"
-              >
-                Continue with Apple
-              </button>
-              <button
-                type="button"
-                onClick={() => handleSocial("facebook")}
-                className="flex w-full items-center justify-center gap-2 rounded-full border border-[var(--color-border)] bg-[#1877f2] py-3 text-sm font-semibold text-white transition hover:opacity-95"
-              >
-                Continue with Facebook
               </button>
             </div>
           )}
@@ -269,11 +253,15 @@ export function LoginPageClient() {
                 />
               </label>
               <p className="text-xs text-[var(--color-muted)]">
-                Try <strong>SHITAYE-2026-DEMO</strong> or <strong>GUEST-1234</strong> — no email
+                Enter the booking code from your confirmation email. You must have used the same
-                required. You can place orders and view a limited stay profile.
+                email at booking so your account links for the full guest portal.
               </p>
-              <button type="submit" className="btn-mustard w-full justify-center py-3 text-sm">
+              <button
-                Continue with booking ID
+                type="submit"
+                disabled={loading}
+                className="btn-mustard w-full justify-center py-3 text-sm disabled:opacity-60"
+              >
+                {loading ? "Signing in…" : "Continue with booking code"}
               </button>
             </form>
           )}

src/app/profile/ProfilePageClient.tsx

@@ -1,16 +1,18 @@
 "use client";
 
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { RequireAuth } from "@/components/RequireAuth";
 import { useAuth } from "@/context/AuthContext";
 import type { OrderCategory, OrderRecord } from "@/context/AuthContext";
 import {
-  seedAppointments,
+  guestMe,
-  seedRewardsHistory,
+  guestOrders,
-  seedShuttle,
+  guestPointsHistory,
-} from "@/lib/mocks/guestData";
+  guestSpaBookings,
-import { siteConfig } from "@/lib/mocks/site";
+  type PointLedgerRow,
+  type SpaBookingRow,
+} from "@/lib/guest-hotel-api";
 
 const orderTabs: { id: OrderCategory | "all"; label: string }[] = [
   { id: "all", label: "All" },
@@ -60,13 +62,66 @@ export function ProfilePageClient() {
 }
 
 function ProfileContent() {
-  const { session, orders, logout } = useAuth();
+  const { session, logout, accessToken } = useAuth();
   const [orderFilter, setOrderFilter] = useState<OrderCategory | "all">("all");
+  const [apiBalance, setApiBalance] = useState<number | null>(null);
+  const [apiLedger, setApiLedger] = useState<PointLedgerRow[]>([]);
+  const [apiOrders, setApiOrders] = useState<OrderRecord[]>([]);
+  const [appointments, setAppointments] = useState<SpaBookingRow[]>([]);
+
+  useEffect(() => {
+    if (!accessToken || !session) return;
+    const pid = session.propertyId;
+    if (!pid) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const me = await guestMe(pid, accessToken);
+        const ph = await guestPointsHistory(pid, accessToken);
+        const ord = await guestOrders(pid, accessToken);
+        const spa = await guestSpaBookings(pid, accessToken);
+
+        if (!cancelled) {
+          setApiBalance(me.balance);
+          setApiLedger(ph.data ?? []);
+          setApiOrders(
+            (ord.data ?? []).map((o) => ({
+              id: o.id,
+              category: o.type,
+              title:
+                o.type === "room-service"
+                  ? "Room Service Order"
+                  : o.type === "laundry"
+                    ? "Laundry Request"
+                    : o.type === "gym"
+                      ? "Gym Booking"
+                      : "Spa Booking",
+              detail: o.detail,
+              totalUsd: Number(o.total ?? 0),
+              placedAt: o.createdAt,
+              status: (["pending", "confirmed", "completed"].includes(o.status.toLowerCase())
+                ? o.status.toLowerCase()
+                : "pending") as OrderRecord["status"],
+            })),
+          );
+          setAppointments(spa.data ?? []);
+        }
+      } catch {
+        if (!cancelled) {
+          setApiOrders([]);
+          setAppointments([]);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [accessToken, session]);
 
   const filteredOrders = useMemo(() => {
-    if (orderFilter === "all") return orders;
+    if (orderFilter === "all") return apiOrders;
-    return orders.filter((o) => o.category === orderFilter);
+    return apiOrders.filter((o) => o.category === orderFilter);
-  }, [orders, orderFilter]);
+  }, [apiOrders, orderFilter]);
 
   if (!session) {
     return null;
@@ -86,24 +141,19 @@ function ProfileContent() {
           <div className="mt-6 flex flex-col gap-4 border-b border-[var(--color-border)] pb-8 md:flex-row md:items-end md:justify-between">
             <div>
               <h1 className="font-heading text-3xl font-semibold text-[var(--color-text)] md:text-4xl">
-                {session.kind === "member"
+                Hello, {session.displayName}
-                  ? `Hello, ${session.displayName}`
-                  : `Welcome, ${session.guestName}`}
               </h1>
               <p className="mt-2 text-sm text-[var(--color-muted)]">
-                {session.kind === "member" ? (
-                  <>
                 <span className="font-medium text-[var(--color-text)]">{session.email}</span>
-                    {" · "}
+                {session.bookingCode ? (
-                    Signed in via {session.authMethod}
-                  </>
-                ) : (
                   <>
-                    Booking <span className="font-mono font-semibold">{session.bookingRef}</span>
                     {" · "}
-                    {session.roomLabel} · checkout {session.checkOut}
+                    Booking code{" "}
+                    <span className="font-mono font-semibold text-[var(--color-text)]">
+                      {session.bookingCode}
+                    </span>
                   </>
-                )}
+                ) : null}
               </p>
             </div>
             <div className="flex flex-wrap gap-2">
@@ -125,55 +175,26 @@ function ProfileContent() {
               <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)]">
                 Rewards points
               </p>
-              {session.kind === "member" ? (
               <>
                 <p className="mt-3 font-heading text-4xl font-semibold text-[var(--color-text)]">
-                    {session.points.toLocaleString()}
+                  {(apiBalance ?? session.points).toLocaleString()}
                 </p>
                 <p className="mt-1 text-sm text-[var(--color-muted)]">
-                    {session.tier} tier · earn on stays & dining
+                  {apiBalance != null ? "Live balance" : "Balance unavailable"}
                 </p>
               </>
-              ) : (
-                <p className="mt-3 text-sm leading-relaxed text-[var(--color-muted)]">
-                  Full loyalty points unlock when you sign in with email. Booking-ID access covers
-                  orders and stay tools.
-                </p>
-              )}
-            </div>
-
-            <div className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-6 shadow-sm lg:col-span-2">
-              <p className="text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)]">
-                Airport shuttle
-              </p>
-              <p className="mt-2 font-heading text-xl text-[var(--color-text)]">
-                Lobby pickup · {seedShuttle.lobbyPickupTime}
-              </p>
-              <p className="mt-2 text-sm text-[var(--color-muted)]">
-                {new Date(seedShuttle.departureDate).toLocaleDateString(undefined, {
-                  weekday: "long",
-                  month: "long",
-                  day: "numeric",
-                })}{" "}
-                · {seedShuttle.airport}
-              </p>
-              <p className="mt-1 text-sm font-medium text-[var(--color-text)]">
-                {seedShuttle.flightLabel}
-              </p>
-              <p className="mt-3 text-xs text-[var(--color-muted)]">{seedShuttle.notes}</p>
-              <a
-                href={`mailto:${siteConfig.email}?subject=Shuttle%20change`}
-                className="mt-4 inline-block text-sm font-semibold text-[var(--color-accent)] hover:underline"
-              >
-                Request a change
-              </a>
             </div>
           </div>
 
           <section className="mt-12">
             <h2 className="font-heading text-2xl text-[var(--color-text)]">Booked appointments</h2>
+            {appointments.length === 0 ? (
+              <p className="mt-4 rounded-xl border border-dashed border-[var(--color-border)] bg-[var(--color-surface-muted)] px-4 py-8 text-sm text-[var(--color-muted)]">
+                No gym/spa bookings found.
+              </p>
+            ) : (
               <ul className="mt-4 grid gap-3 md:grid-cols-2">
-              {seedAppointments.map((a) => (
+                {appointments.map((a) => (
                   <li
                     key={a.id}
                     className="rounded-2xl border border-[var(--color-border)] bg-[var(--color-surface)] p-5 shadow-sm"
@@ -181,19 +202,22 @@ function ProfileContent() {
                     <p className="text-xs font-semibold uppercase tracking-wider text-[var(--color-primary)]">
                       {a.status}
                     </p>
-                  <p className="mt-2 font-semibold text-[var(--color-text)]">{a.title}</p>
+                    <p className="mt-2 font-semibold text-[var(--color-text)]">
-                  <p className="mt-1 text-sm text-[var(--color-muted)]">{a.when}</p>
+                      {a.offering?.name ?? "Spa/Gym booking"}
-                  <p className="mt-1 text-sm text-[var(--color-muted)]">{a.where}</p>
+                    </p>
+                    <p className="mt-1 text-sm text-[var(--color-muted)]">
+                      {formatWhen(a.scheduledAt ?? a.createdAt)}
+                    </p>
                   </li>
                 ))}
               </ul>
+            )}
           </section>
 
           <section className="mt-12">
             <h2 className="font-heading text-2xl text-[var(--color-text)]">Orders</h2>
             <p className="mt-1 text-sm text-[var(--color-muted)]">
-              Room service, laundry, gym, and spa — including demo history and new orders from this
+              Room service, laundry, gym, and spa
-              device.
             </p>
             <div className="mt-4 flex flex-wrap gap-2">
               {orderTabs.map((t) => (
@@ -225,21 +249,33 @@ function ProfileContent() {
           </section>
 
           <section className="mt-12">
-            <h2 className="font-heading text-2xl text-[var(--color-text)]">Rewards earned</h2>
+            <h2 className="font-heading text-2xl text-[var(--color-text)]">Rewards history</h2>
             <ul className="mt-4 space-y-2">
-              {seedRewardsHistory.map((r) => (
+              {apiLedger.length > 0
+                ? apiLedger.map((r) => (
                     <li
                       key={r.id}
                       className="flex items-center justify-between rounded-xl border border-[var(--color-border)] bg-[var(--color-surface)] px-4 py-3 text-sm"
                     >
                       <div>
-                    <p className="font-medium text-[var(--color-text)]">{r.label}</p>
+                        <p className="font-medium text-[var(--color-text)]">{r.reason.replace(/_/g, " ")}</p>
-                    <p className="text-xs text-[var(--color-muted)]">{r.earnedAt}</p>
+                        <p className="text-xs text-[var(--color-muted)]">{formatWhen(r.createdAt)}</p>
                       </div>
-                  <span className="badge-mustard">+{r.points} pts</span>
+                      <span
+                        className={
+                          r.delta >= 0 ? "badge-mustard" : "rounded-full bg-red-100 px-3 py-1 text-xs font-semibold text-red-800"
+                        }
+                      >
+                        {r.delta >= 0 ? "+" : ""}
+                        {r.delta} pts
+                      </span>
                     </li>
-              ))}
+                  ))
+                : null}
             </ul>
+            {apiLedger.length === 0 ? (
+              <p className="mt-4 text-sm text-[var(--color-muted)]">No rewards history returned yet.</p>
+            ) : null}
           </section>
         </div>
       </div>

src/components/Footer.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import { siteConfig } from "@/lib/mocks/site";
+import { siteConfig } from "@/lib/site-config";
 
 export function Footer() {
   return (

src/components/Header.tsx

@@ -1,9 +1,12 @@
+"use client";
+
 import Image from "next/image";
 import Link from "next/link";
 import { HeaderAccount } from "@/components/HeaderAccount";
 import { CurrencySwitcher } from "@/components/CurrencySwitcher";
 import { ReviewsMenu } from "@/components/ReviewsMenu";
-import { siteConfig } from "@/lib/mocks/site";
+import { siteConfig } from "@/lib/site-config";
+import { useAuth } from "@/context/AuthContext";
 
 const nav = [
   { href: "/#rooms", label: "Rooms" },
@@ -16,6 +19,8 @@ const nav = [
 ];
 
 export function Header() {
+  const { session } = useAuth();
+
   return (
     <header className="sticky top-0 z-40">
       <div className="border-b border-white/10 bg-[var(--color-navy)] text-white">
@@ -72,12 +77,14 @@ export function Header() {
           </nav>
           <div className="flex shrink-0 items-center gap-2 md:gap-3">
             <HeaderAccount />
+            {!session && (
               <Link
                 href="/booking"
                 className="btn-mustard px-4 py-2.5 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary)] md:px-5"
               >
                 Book
               </Link>
+            )}
           </div>
         </div>
       </div>

src/components/HeaderAccount.tsx

@@ -13,12 +13,8 @@ export function HeaderAccount() {
   }
 
   if (session) {
-    const points =
+    const points = session.points;
-      session.kind === "member" ? session.points : "—";
+    const label = session.displayName.split(" ")[0] ?? "Guest";
-    const label =
-      session.kind === "member"
-        ? session.displayName.split(" ")[0] ?? "Guest"
-        : session.guestName.split(" ")[0] ?? "Guest";
 
     return (
       <div className="flex items-center gap-2 sm:gap-3">
@@ -27,7 +23,7 @@ export function HeaderAccount() {
           className="hidden max-w-[140px] truncate rounded-full border border-[var(--color-border)] bg-[var(--color-surface-muted)] px-3 py-1.5 text-xs font-semibold text-[var(--color-primary)] sm:inline-block"
           title="Loyalty points"
         >
-          {points !== "—" ? `${points} pts` : "Stay"}
+          {`${points} pts`}
         </Link>
         <Link
           href="/profile"

src/components/OutletCard.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
-import type { Outlet } from "@/lib/mocks/outlets";
+import type { Outlet } from "@/lib/data/outlets";
 
 type Props = { outlet: Outlet };