@fayz-ai/plugin-agenda 0.2.1 → 0.3.0

package/dist/public/index.cjs

@@ -1,14 +1,132 @@
 'use strict';
 
-var chunkGAJVIEXM_cjs = require('../chunk-GAJVIEXM.cjs');
-require('../chunk-SYDBDI3Q.cjs');
+var chunkLFUELUIT_cjs = require('../chunk-LFUELUIT.cjs');
 var react = require('react');
+var lucideReact = require('lucide-react');
 var core = require('@fayz-ai/core');
 var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
 
+// src/public/data.ts
+function createMockPublicBookingProvider(options) {
+  const inner = chunkLFUELUIT_cjs.createMockAgendaProvider({ seed: options.seed });
+  const { services, professionalId } = options;
+  return {
+    async getServices() {
+      return services;
+    },
+    async getAvailableSlots(query) {
+      return inner.getAvailableSlots({
+        assigneeId: query.assigneeId ?? professionalId,
+        date: query.date,
+        durationMinutes: query.durationMinutes,
+        slotInterval: query.slotInterval
+      });
+    },
+    async createBooking(input) {
+      const service = services.find((s) => s.id === input.serviceId);
+      if (!service) throw new Error("Servi\xE7o inv\xE1lido");
+      const booking = await inner.createBooking({
+        kind: "appointment",
+        // Mock: the customer is captured as the booking title; the Supabase
+        // path upserts a person record server-side instead.
+        clientId: "public-guest",
+        professionalId,
+        startsAt: input.startsAt,
+        title: input.contact.name,
+        notes: [input.contact.phone, input.contact.email, input.contact.notes].filter(Boolean).join(" \xB7 ") || void 0,
+        services: [
+          {
+            serviceId: service.id,
+            name: service.name,
+            durationMinutes: service.durationMinutes,
+            price: service.price,
+            assigneeId: professionalId
+          }
+        ]
+      });
+      const endsAt = booking.endsAt ?? new Date(new Date(input.startsAt).getTime() + service.durationMinutes * 6e4).toISOString();
+      return { bookingId: booking.id, startsAt: booking.startsAt, endsAt };
+    }
+  };
+}
+function getClient() {
+  const client = core.getSupabaseClientOptional();
+  if (!client) throw new Error("[plugin-agenda/public] Supabase client not initialized");
+  return client;
+}
+function toPhoneDigits(phone) {
+  return (phone ?? "").replace(/\D/g, "");
+}
+function createSupabasePublicBookingProvider(options) {
+  const { tenantId } = options;
+  return {
+    async getServices() {
+      const { data, error } = await getClient().from("v_public_services").select("id, name, description, price, currency, duration_minutes, sort_order").eq("tenant_id", tenantId).order("sort_order", { ascending: true });
+      if (error) throw new Error(`[plugin-agenda/public] getServices: ${error.message}`);
+      return (data ?? []).map((row) => ({
+        id: String(row.id),
+        name: String(row.name),
+        description: row.description ?? void 0,
+        price: Number(row.price ?? 0),
+        durationMinutes: Number(row.duration_minutes ?? 30)
+      }));
+    },
+    async getAvailableSlots(query) {
+      const { data, error } = await getClient().rpc("get_available_slots", {
+        p_tenant_id: tenantId,
+        p_assignee_id: query.assigneeId,
+        p_date: query.date,
+        p_duration_minutes: query.durationMinutes,
+        p_slot_interval: query.slotInterval
+      });
+      if (error) throw new Error(`[plugin-agenda/public] getAvailableSlots: ${error.message}`);
+      return (data ?? []).map((row) => ({
+        start: row.slot_start,
+        end: row.slot_end
+      }));
+    },
+    async createBooking(input) {
+      const phone = toPhoneDigits(input.contact.phone);
+      const { data, error } = await getClient().rpc("create_public_booking", {
+        p_tenant_id: tenantId,
+        p_service_id: input.serviceId,
+        p_starts_at: input.startsAt,
+        p_name: input.contact.name.trim(),
+        p_phone: phone,
+        p_email: input.contact.email?.trim() || null,
+        p_notes: input.contact.notes?.trim() || null
+      });
+      if (error) throw new Error(`[plugin-agenda/public] createBooking: ${error.message}`);
+      const row = Array.isArray(data) ? data[0] : data;
+      if (!row) throw new Error("[plugin-agenda/public] createBooking: empty RPC response");
+      return { bookingId: row.booking_id, startsAt: row.starts_at, endsAt: row.ends_at };
+    }
+  };
+}
 var PublicBookingContext = react.createContext(null);
-function BookingProvider({ value, children }) {
+function BookingProvider({ base, staticServices, children }) {
+  const [fetched, setFetched] = react.useState(null);
+  const [loading, setLoading] = react.useState(staticServices === null);
+  react.useEffect(() => {
+    if (staticServices !== null) return;
+    let active = true;
+    setLoading(true);
+    base.provider.getServices().then((result) => {
+      if (active) setFetched(result);
+    }).catch((err) => {
+      console.error("[plugin-agenda/public] failed to load services:", err);
+      if (active) setFetched([]);
+    }).finally(() => {
+      if (active) setLoading(false);
+    });
+    return () => {
+      active = false;
+    };
+  }, [base.provider, staticServices]);
+  const value = react.useMemo(
+    () => ({ ...base, services: staticServices ?? fetched ?? [], servicesLoading: loading }),
+    [base, staticServices, fetched, loading]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(PublicBookingContext.Provider, { value, children });
 }
 function useBooking() {
@@ -21,6 +139,10 @@ function useBooking() {
 function useServices() {
   return useBooking().services;
 }
+function usePublicServices() {
+  const { services, servicesLoading } = useBooking();
+  return { services, loading: servicesLoading };
+}
 function useAvailableSlots(params) {
   const { provider, professionalId, services, window: window2 } = useBooking();
   const [slots, setSlots] = react.useState([]);
@@ -53,36 +175,17 @@ function useAvailableSlots(params) {
   return { slots, loading, error };
 }
 function useCreateBooking() {
-  const { provider, professionalId, services } = useBooking();
+  const { provider } = useBooking();
   const [submitting, setSubmitting] = react.useState(false);
   const [error, setError] = react.useState(null);
   const [done, setDone] = react.useState(false);
   async function submit(input) {
-    const service = services.find((s) => s.id === input.serviceId);
-    if (!service) throw new Error("Servi\xE7o inv\xE1lido");
     setSubmitting(true);
     setError(null);
     try {
-      await provider.createBooking({
-        kind: "appointment",
-        // POC: the customer is captured as the booking title; a real flow would
-        // upsert a client/person record and pass its id here.
-        clientId: "public-guest",
-        professionalId,
-        startsAt: input.startsAt,
-        title: input.contact.name,
-        notes: [input.contact.phone, input.contact.email, input.contact.notes].filter(Boolean).join(" \xB7 ") || void 0,
-        services: [
-          {
-            serviceId: service.id,
-            name: service.name,
-            durationMinutes: service.durationMinutes,
-            price: service.price,
-            assigneeId: professionalId
-          }
-        ]
-      });
+      const result = await provider.createBooking(input);
       setDone(true);
+      return result;
     } catch (err) {
       const e = err instanceof Error ? err : new Error(String(err));
       setError(e);
@@ -131,7 +234,368 @@ function formatSlotRange(startIso, durationMin, fmt) {
   const end = new Date(start.getTime() + durationMin * 6e4);
   return `${fmt.dateShort.format(start)} \u2013 ${fmt.time.format(start)} at\xE9 ${fmt.time.format(end)} (${durationMin}min)`;
 }
-var PIX_PAYLOAD = "00020126840014br.gov.bcb.pix2562qrcode.hempdent.com.br/pix/v2/9d8f7a6b-consulta-canabica5204000053039865802BR5913HEMPDENT6009SAO PAULO62070503***6304AB12";
+function OverviewStep({
+  services,
+  servicesLoading,
+  businessHours,
+  professionalName,
+  labels,
+  brand,
+  fmt,
+  components: C,
+  onStartBooking
+}) {
+  const openDays = new Set(businessHours.daysOfWeek);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_18rem]", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "rounded-2xl border border-border bg-card p-6 shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 font-heading text-lg font-bold text-foreground", children: labels.servicesHeading }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: servicesLoading ? Array.from({ length: 2 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-24 animate-pulse rounded-2xl bg-muted" }, i)) : services.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          C.ServiceCard,
+          {
+            service: s,
+            featured: i === 0,
+            onSelect: () => onStartBooking(s.id),
+            fmt,
+            brand
+          },
+          s.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "rounded-2xl border border-border bg-card p-6 shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-lg font-bold text-foreground", children: labels.aboutHeading }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-3 mb-2 flex items-center gap-1.5 text-sm font-medium text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4" }),
+          " ",
+          labels.openingHoursHeading
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-border border-l-2 border-primary/20 pl-4", children: WEEK_ORDER.map((day) => {
+          const open = openDays.has(day);
+          return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between py-2 text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: DAY_NAMES[day] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: open ? "tabular-nums text-foreground" : "text-muted-foreground", children: open ? `${businessHours.start} \u2013 ${businessHours.end}` : labels.closedLabel })
+          ] }, day);
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      C.SidebarExtras,
+      {
+        professionalName,
+        brand,
+        labels,
+        onStartBooking: () => onStartBooking()
+      }
+    ) })
+  ] });
+}
+function DateTimeStep({
+  labels,
+  fmt,
+  week,
+  weekOffset,
+  maxWeekOffset,
+  onWeekOffset,
+  businessHours,
+  date,
+  onSelectDate,
+  slots,
+  slotsLoading,
+  slotStart,
+  onSelectSlot,
+  onContinue
+}) {
+  const openDays = new Set(businessHours.daysOfWeek);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-xl font-bold text-foreground", children: labels.dateStep }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5" }),
+        " ",
+        labels.timezoneNote
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold capitalize text-foreground", children: fmt.month.format(week[0].date) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: weekOffset === 0,
+            onClick: () => onWeekOffset((w) => Math.max(0, w - 1)),
+            className: "flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "aria-label": labels.prevWeek,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            disabled: weekOffset >= maxWeekOffset,
+            onClick: () => onWeekOffset((w) => Math.min(maxWeekOffset, w + 1)),
+            className: "flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "aria-label": labels.nextWeek,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 grid grid-cols-7 gap-1.5", children: week.map((d) => {
+      const selected = date === d.iso;
+      const closed = !openDays.has(d.date.getDay());
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: closed,
+          onClick: () => onSelectDate(d.iso),
+          className: [
+            "flex flex-col items-center gap-0.5 rounded-xl border py-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            closed ? "cursor-not-allowed border-transparent text-muted-foreground/40" : selected ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:border-primary/60 hover:bg-accent/40"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium capitalize opacity-80", children: fmt.weekday.format(d.date).replace(".", "") }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold tabular-nums", children: fmt.dayNum.format(d.date) })
+          ]
+        },
+        d.iso
+      );
+    }) }),
+    date ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold text-foreground", children: labels.slotsHeading }),
+      slotsLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-4", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 animate-pulse rounded-lg bg-muted" }, i)) }) : slots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground", children: labels.noSlots }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-4", children: slots.map((s) => {
+        const selected = slotStart === s.start;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onSelectSlot(s.start),
+            className: [
+              "rounded-lg border py-2.5 text-sm font-semibold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              selected ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:border-primary/60 hover:bg-accent/40"
+            ].join(" "),
+            children: fmt.time.format(new Date(s.start))
+          },
+          s.start
+        );
+      }) })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        disabled: !slotStart,
+        onClick: onContinue,
+        className: "mt-6 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: labels.continueCta
+      }
+    )
+  ] });
+}
+function ContactStep({
+  labels,
+  contact,
+  onContactChange,
+  contactStep,
+  country,
+  onCountryChange,
+  code,
+  onCodeChange,
+  codeError,
+  onSendCode,
+  onConfirmCode,
+  onBackToPhone,
+  onSubmitDetails,
+  payment,
+  submitting,
+  error
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-xl font-bold text-foreground", children: labels.contactStep }),
+    contactStep === "phone" ? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => {
+      e.preventDefault();
+      onSendCode();
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.contactIntro }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "bk-phone", className: "mb-1 block text-sm font-medium text-foreground", children: labels.phoneLabel }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                "aria-label": "Pa\xEDs",
+                value: country.iso2,
+                onChange: (e) => onCountryChange(e.target.value),
+                className: "h-full appearance-none rounded-l-xl border border-r-0 border-border bg-muted py-3 pl-3 pr-8 text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: core.COUNTRIES.map((c) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: c.iso2, children: [
+                  c.flag,
+                  " ",
+                  c.dial
+                ] }, c.iso2))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "bk-phone",
+              type: "tel",
+              autoComplete: "tel",
+              inputMode: "tel",
+              value: contact.phone,
+              onChange: (e) => onContactChange({ ...contact, phone: core.maskPhone(e.target.value, country.mask) }),
+              className: "w-full rounded-r-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring",
+              placeholder: `Ex.: ${core.maskPhone("11987654321", country.mask)}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: labels.phoneHint })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: core.unmaskPhone(contact.phone).length < 8,
+          className: "mt-5 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: labels.sendCodeCta
+        }
+      )
+    ] }) : null,
+    contactStep === "details" ? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => {
+      e.preventDefault();
+      onSubmitDetails();
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.contactIntro }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between rounded-xl border border-border bg-muted/40 px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm text-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "h-4 w-4 text-primary" }),
+          " ",
+          labels.phoneVerified,
+          " \xB7 ",
+          country.flag,
+          " ",
+          country.dial,
+          " ",
+          contact.phone
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onBackToPhone,
+            className: "rounded text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: labels.changePhone
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "bk-name", className: "mb-1 block text-sm font-medium text-foreground", children: labels.nameLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "bk-name",
+              type: "text",
+              autoComplete: "name",
+              value: contact.name,
+              onChange: (e) => onContactChange({ ...contact, name: e.target.value }),
+              className: "w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring",
+              placeholder: labels.namePlaceholder
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "bk-email", className: "mb-1 block text-sm font-medium text-foreground", children: labels.emailLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "bk-email",
+              type: "email",
+              autoComplete: "email",
+              inputMode: "email",
+              value: contact.email,
+              onChange: (e) => onContactChange({ ...contact, email: e.target.value }),
+              className: "w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring",
+              placeholder: labels.emailPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: labels.emailHint })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "bk-notes", className: "mb-1 block text-sm font-medium text-foreground", children: labels.notesLabel }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              id: "bk-notes",
+              rows: 3,
+              value: contact.notes,
+              onChange: (e) => onContactChange({ ...contact, notes: e.target.value }),
+              className: "w-full resize-none rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring",
+              placeholder: labels.notesPlaceholder
+            }
+          )
+        ] })
+      ] }),
+      error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-3 text-sm text-destructive", children: labels.submitError }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "submit",
+          disabled: !contact.name.trim() || submitting,
+          className: "mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: [
+            submitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }),
+            payment ? labels.saveAndContinueCta : labels.confirmCta
+          ]
+        }
+      ),
+      !payment ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-3 flex items-center justify-center gap-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-3.5 w-3.5" }),
+        " ",
+        labels.noChargeNote
+      ] }) : null
+    ] }) : null,
+    contactStep === "code" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-foreground/40 p-4", role: "dialog", "aria-modal": "true", "aria-label": labels.codeTitle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-heading text-lg font-bold text-foreground", children: labels.codeTitle }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.codeBody }),
+      /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => {
+        e.preventDefault();
+        onConfirmCode();
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            inputMode: "numeric",
+            value: code,
+            autoFocus: true,
+            onChange: (e) => onCodeChange(e.target.value),
+            className: "mt-4 w-full rounded-xl border border-border bg-background px-4 py-3 text-center text-lg tracking-[0.4em] text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring placeholder:text-sm placeholder:tracking-normal",
+            placeholder: "Digite o c\xF3digo"
+          }
+        ),
+        codeError ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-2 text-sm text-destructive", children: labels.codeInvalid }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            className: "mt-4 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: labels.codeConfirmCta
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.codeResendHint }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onBackToPhone, className: "font-medium text-primary hover:underline", children: labels.back })
+      ] })
+    ] }) }) : null
+  ] });
+}
+var PIX_PAYLOAD = "00020126840014br.gov.bcb.pix2562qrcode.fayz.ai/pix/v2/9d8f7a6b-agendamento5204000053039865802BR5904FAYZ6009SAO PAULO62070503***6304AB12";
 function QrPlaceholder({ data }) {
   const size = 25;
   let seed = 0;
@@ -144,9 +608,9 @@ function QrPlaceholder({ data }) {
   for (let y = 0; y < size; y++) {
     for (let x = 0; x < size; x++) {
       if (isFinder(x, y)) {
-        const local = (bx, by) => ({ lx: x - bx, ly: y - by });
         const corner = x < 7 && y < 7 ? { bx: 0, by: 0 } : x >= size - 7 && y < 7 ? { bx: size - 7, by: 0 } : { bx: 0, by: size - 7 };
-        const { lx, ly } = local(corner.bx, corner.by);
+        const lx = x - corner.bx;
+        const ly = y - corner.by;
         const outer = lx === 0 || lx === 6 || ly === 0 || ly === 6;
         const inner = lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4;
         if (outer || inner) cells.push({ x, y });
@@ -160,84 +624,197 @@ function QrPlaceholder({ data }) {
     cells.map((c, i) => /* @__PURE__ */ jsxRuntime.jsx("rect", { x: c.x, y: c.y, width: 1, height: 1, fill: "currentColor", className: "text-foreground" }, i))
   ] });
 }
-function BrandHeader() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5 flex items-center gap-3 rounded-2xl border border-border bg-card px-5 py-4 shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-11 w-11 items-center justify-center rounded-xl bg-primary text-lg font-bold text-primary-foreground", children: "H" }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-heading text-base font-bold text-foreground", children: "HempDent \xB7 Consulta Can\xE1bica" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "h-3.5 w-3.5 text-primary" }),
-        " Agendamento online seguro \xB7 CRO-SP 166513"
-      ] })
-    ] })
-  ] });
-}
-function ServiceRow({
+function PaymentStep({
   service,
-  featured,
-  onSelect,
-  fmt
+  payment,
+  paymentStep,
+  charge,
+  busy,
+  error,
+  copied,
+  fmt,
+  onPayWithPix,
+  onCopy,
+  onSimulatePaid
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      onClick: onSelect,
-      className: "group flex w-full items-center gap-4 rounded-2xl border border-border p-4 text-left transition-colors hover:border-primary hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "h-5 w-5" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: service.name }),
-            featured ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-accent px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary", children: "Mais procurado" }) : null
+  const feePct = payment.reservationFeePercent;
+  const fee = Math.round(service.price * feePct) / 100;
+  const remaining = Math.round((service.price - fee) * 100) / 100;
+  if (paymentStep === "choose") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between font-semibold text-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: service.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: fmt.price.format(service.price) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" }) }),
+              "Taxa de reserva ",
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: [
+                feePct,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: fmt.price.format(fee) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3 w-3" }),
-            " ",
-            service.durationMinutes,
-            " min \xB7 Online"
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 rounded border border-border" }),
+              " Valor restante"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: remaining <= 0 ? "Gr\xE1tis" : fmt.price.format(remaining) })
           ] }),
-          service.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-sm text-muted-foreground", children: service.description }) : null
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-1 text-sm font-medium text-primary hover:underline", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
+            " Adicionar cupom"
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-right", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-semibold tabular-nums text-primary", children: fmt.price.format(service.price) }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto mt-1 h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-0.5" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between border-t border-dashed border-border pt-3 font-semibold text-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Valor total" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: fmt.price.format(service.price) })
         ] })
-      ]
-    }
-  );
-}
-function StepRail({
-  n,
-  label,
-  state,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative pl-11", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute left-[15px] top-8 bottom-[-18px] w-px bg-border last:hidden" }),
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-lg font-bold text-foreground", children: "Escolha como pagar" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "h-3.5 w-3.5 text-primary" }),
+          " Pagamento seguro"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 rounded-2xl border-2 border-primary bg-accent/20 p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 font-semibold text-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) }),
+          "Pix"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3", children: [
+          { icon: lucideReact.Check, t: 'Finalize o agendamento clicando em "Pagar com Pix".' },
+          { icon: lucideReact.QrCode, t: "Mostraremos um QR Code e o Pix copia-e-cola." },
+          { icon: lucideReact.CalendarCheck, t: "Ap\xF3s o pagamento, seu agendamento \xE9 reservado." }
+        ].map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-2 flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(s.icon, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-foreground", children: [
+            i + 1,
+            "."
+          ] }),
+          " ",
+          s.t
+        ] }, i)) })
+      ] }),
+      error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-3 text-sm text-destructive", children: "N\xE3o foi poss\xEDvel iniciar o pagamento. Tente novamente." }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: () => onPayWithPix(fee),
+          className: "mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: [
+            busy ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }),
+            "Pagar ",
+            fmt.price.format(fee),
+            " com Pix"
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-amber-300/60 bg-amber-50 p-4 dark:border-amber-400/30 dark:bg-amber-950/30", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
+        " Realize o pagamento para finalizar"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Este c\xF3digo Pix \xE9 v\xE1lido por somente 5 minutos. N\xE3o feche esta p\xE1gina at\xE9 receber a confirma\xE7\xE3o do pagamento." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-6 font-heading text-lg font-bold text-foreground", children: "Escaneie ou copie este c\xF3digo para pagar" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "mt-2 space-y-1 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "1. Acesse o app do seu banco, pagamentos ou Internet Banking." }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "2. Escolha pagar via Pix." }),
+      /* @__PURE__ */ jsxRuntime.jsx("li", { children: "3. Escaneie o QR Code ou use o Pix copia-e-cola:" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 w-fit rounded-xl border border-border bg-white p-3", children: /* @__PURE__ */ jsxRuntime.jsx(QrPlaceholder, { data: charge?.pixQrCode ?? PIX_PAYLOAD }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex max-w-md items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "flex-1 truncate rounded-lg border border-border bg-muted px-3 py-2 text-xs text-muted-foreground", children: charge?.pixCopyPaste ?? PIX_PAYLOAD }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onCopy,
+          className: "inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-foreground px-3 py-2 text-xs font-medium text-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          children: [
+            copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" }),
+            " ",
+            copied ? "Copiado" : "Copiar"
+          ]
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+      "button",
       {
-        className: [
-          "absolute left-0 top-0 flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-colors",
-          state === "done" ? "bg-primary text-primary-foreground" : state === "active" ? "bg-accent text-primary ring-2 ring-primary" : "bg-muted text-muted-foreground"
-        ].join(" "),
-        children: state === "done" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) : n
+        type: "button",
+        onClick: onSimulatePaid,
+        className: "mt-6 w-full rounded-xl border border-primary py-3 font-semibold text-primary transition-colors hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: "J\xE1 paguei \u2014 confirmar (simula\xE7\xE3o)"
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: `pt-1 text-sm font-semibold ${state === "todo" ? "text-muted-foreground" : "text-foreground"}`, children: label }),
-    children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children }) : null
+    )
+  ] });
+}
+function SummaryRail({
+  title,
+  railState,
+  service,
+  professionalName,
+  slotStart,
+  contactSummary,
+  payment,
+  paymentReached,
+  labels,
+  fmt,
+  components: C,
+  serviceMeta
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 rounded-2xl border border-border bg-card p-5 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 font-heading text-sm font-bold uppercase tracking-wide text-muted-foreground", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(C.StepRailItem, { n: 1, label: labels.railService, state: railState.service, children: service ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: service.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-0.5 flex items-center justify-between text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            serviceMeta ? `${serviceMeta} \xB7 ` : "",
+            service.durationMinutes,
+            " min"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold tabular-nums text-primary", children: fmt.price.format(service.price) })
+        ] })
+      ] }) : null }),
+      /* @__PURE__ */ jsxRuntime.jsx(C.StepRailItem, { n: 2, label: labels.railProfessional, state: railState.professional, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground", children: professionalName.charAt(0) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: professionalName })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(C.StepRailItem, { n: 3, label: labels.railDatetime, state: railState.datetime, children: slotStart && service ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm tabular-nums text-foreground", children: formatSlotRange(slotStart, service.durationMinutes, fmt) }) : null }),
+      /* @__PURE__ */ jsxRuntime.jsx(C.StepRailItem, { n: 4, label: labels.railContact, state: railState.contact, children: contactSummary ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-foreground", children: contactSummary }) : null }),
+      payment ? /* @__PURE__ */ jsxRuntime.jsx(C.StepRailItem, { n: 5, label: labels.railPayment, state: railState.payment, children: paymentReached ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-sm text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-3.5 w-3.5 text-primary" }),
+        " Pix \xE0 vista"
+      ] }) : null }) : null
+    ] })
   ] });
 }
 function BookingWidget() {
   const {
     services,
+    servicesLoading,
     professionalName,
     businessHours,
     payment,
     paymentProvider,
     onIdentityVerified,
     labels,
+    brand,
+    components: C,
     window: bookingWindow,
     locale,
     currency
@@ -265,6 +842,12 @@ function BookingWidget() {
   const [charge, setCharge] = react.useState(null);
   const [charging, setCharging] = react.useState(false);
   const pollRef = react.useRef(null);
+  react.useEffect(() => {
+    if (preselected && step === "overview") {
+      setServiceId(preselected);
+      setStep("datetime");
+    }
+  }, [preselected]);
   react.useEffect(() => {
     if (!(step === "payment" && paymentStep === "pix" && charge && paymentProvider)) return;
     let active = true;
@@ -298,7 +881,9 @@ function BookingWidget() {
   const bookableSlots = slots.filter((s) => new Date(s.start).getTime() >= minTime);
   const service = services.find((s) => s.id === serviceId) ?? null;
   const maxWeekOffset = Math.floor(bookingWindow.maxAdvanceDays / 7);
-  const openDays = new Set(businessHours.daysOfWeek);
+  function contactForSubmit() {
+    return { ...contact, phone: `${country.dial} ${contact.phone}` };
+  }
   function startBooking(id) {
     setServiceId(id ?? serviceId ?? services[0]?.id ?? null);
     setDate(todayIso);
@@ -308,7 +893,7 @@ function BookingWidget() {
   async function handleConfirm() {
     if (!serviceId || !slotStart || !contact.name.trim()) return;
     try {
-      await submit({ serviceId, startsAt: slotStart, contact });
+      await submit({ serviceId, startsAt: slotStart, contact: contactForSubmit() });
       setStep("success");
     } catch {
     }
@@ -343,17 +928,17 @@ function BookingWidget() {
       setStep("payment");
     } else void handleConfirm();
   }
-  async function payWithPix(fee, svcId, svcName) {
-    if (charging) return;
+  async function payWithPix(fee) {
+    if (charging || !service || !slotStart) return;
     setCharging(true);
     try {
-      await submit({ serviceId: svcId, startsAt: slotStart, contact });
+      await submit({ serviceId: service.id, startsAt: slotStart, contact: contactForSubmit() });
       if (paymentProvider) {
         const c = await paymentProvider.createCharge({
           amount: fee,
           currency,
           method: "pix",
-          description: svcName,
+          description: service.name,
           customer: { name: contact.name, email: contact.email || void 0, phone: contact.phone || void 0 }
         });
         setCharge(c);
@@ -364,61 +949,32 @@ function BookingWidget() {
       setCharging(false);
     }
   }
+  function copyPixPayload() {
+    const payload = charge?.pixCopyPaste ?? PIX_PAYLOAD;
+    try {
+      void navigator.clipboard?.writeText(payload);
+      setCopied(true);
+    } catch {
+      setCopied(true);
+    }
+  }
   if (step === "overview") {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-4xl", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(BrandHeader, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_18rem]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "rounded-2xl border border-border bg-card p-6 shadow-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-4 font-heading text-lg font-bold text-foreground", children: "Servi\xE7os" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: services.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(ServiceRow, { service: s, featured: i === 0, onSelect: () => startBooking(s.id), fmt }, s.id)) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "rounded-2xl border border-border bg-card p-6 shadow-sm", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-lg font-bold text-foreground", children: "Sobre" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-3 mb-2 flex items-center gap-1.5 text-sm font-medium text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-4 w-4" }),
-              " Hor\xE1rio de funcionamento"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-border border-l-2 border-primary/20 pl-4", children: WEEK_ORDER.map((day) => {
-              const open = openDays.has(day);
-              return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center justify-between py-2 text-sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: DAY_NAMES[day] }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: open ? "tabular-nums text-foreground" : "text-muted-foreground", children: open ? `${businessHours.start} \u2013 ${businessHours.end}` : "Fechado" })
-              ] }, day);
-            }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "lg:sticky lg:top-24 lg:self-start", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card p-5 shadow-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => startBooking(),
-              className: "w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              children: "Agendar agora"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 space-y-2 border-t border-border pt-4 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { className: "h-3.5 w-3.5 text-primary" }),
-              " Consulta 100% online"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-3.5 w-3.5 text-primary" }),
-              " Atende todo o Brasil"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-3.5 w-3.5 text-primary" }),
-              " Aceitamos Pix"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-3.5 w-3.5 text-primary" }),
-              " ",
-              professionalName
-            ] })
-          ] })
-        ] }) })
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx(C.BrandHeader, { brand }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        OverviewStep,
+        {
+          services,
+          servicesLoading,
+          businessHours,
+          professionalName,
+          labels,
+          brand,
+          fmt,
+          components: C,
+          onStartBooking: startBooking
+        }
+      )
     ] });
   }
   const railState = {
@@ -428,9 +984,10 @@ function BookingWidget() {
     contact: step === "payment" || step === "success" ? "done" : step === "contact" ? "active" : "todo",
     payment: step === "success" ? "done" : step === "payment" ? "active" : "todo"
   };
-  const railTitle = step === "payment" && paymentStep === "pix" ? "Aguardando pagamento" : "Passos para agendar";
+  const railTitle = step === "payment" && paymentStep === "pix" ? labels.railWaitingPayment : labels.railTitle;
+  const contactSummary = (contact.name || contact.phone) && (step === "payment" || step === "success" || contactStep === "details") ? `${contact.name || "Contato"}${contact.phone ? ` \xB7 ${country.dial} ${contact.phone}` : ""}` : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-4xl", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(BrandHeader, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(C.BrandHeader, { brand }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_18rem]", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card p-6 md:p-7 shadow-sm", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-5 flex items-center gap-1.5 lg:hidden", children: ["datetime", "contact"].map((s) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 flex-1 rounded-full ${railState[s] !== "todo" ? "bg-primary" : "bg-muted"}` }, s)) }),
@@ -443,470 +1000,226 @@ function BookingWidget() {
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }),
               " ",
-              step === "datetime" ? "Servi\xE7os" : "Voltar"
+              step === "datetime" ? labels.backToServices : labels.back
             ]
           }
         ) : null,
-        step === "datetime" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-xl font-bold text-foreground", children: labels.dateStep }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3.5 w-3.5" }),
-              " Fuso: Hor\xE1rio de Bras\xEDlia"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold capitalize text-foreground", children: fmt.month.format(week[0].date) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  disabled: weekOffset === 0,
-                  onClick: () => setWeekOffset((w) => Math.max(0, w - 1)),
-                  className: "flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  "aria-label": "Semana anterior",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  disabled: weekOffset >= maxWeekOffset,
-                  onClick: () => setWeekOffset((w) => Math.min(maxWeekOffset, w + 1)),
-                  className: "flex h-9 w-9 items-center justify-center rounded-lg border border-border text-foreground transition-colors hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  "aria-label": "Pr\xF3xima semana",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
-                }
-              )
-            ] })
+        step === "datetime" ? /* @__PURE__ */ jsxRuntime.jsx(
+          DateTimeStep,
+          {
+            labels,
+            fmt,
+            week,
+            weekOffset,
+            maxWeekOffset,
+            onWeekOffset: setWeekOffset,
+            businessHours,
+            date,
+            onSelectDate: (iso) => {
+              setDate(iso);
+              setSlotStart(null);
+            },
+            slots: bookableSlots,
+            slotsLoading,
+            slotStart,
+            onSelectSlot: setSlotStart,
+            onContinue: () => setStep("contact")
+          }
+        ) : null,
+        step === "contact" ? /* @__PURE__ */ jsxRuntime.jsx(
+          ContactStep,
+          {
+            labels,
+            contact,
+            onContactChange: setContact,
+            contactStep,
+            country,
+            onCountryChange: (iso2) => {
+              const c = core.getCountry(iso2);
+              setCountryIso(c.iso2);
+              setContact((prev) => ({ ...prev, phone: core.maskPhone(core.unmaskPhone(prev.phone), c.mask) }));
+            },
+            code,
+            onCodeChange: (v) => {
+              setCode(v);
+              setCodeError(false);
+            },
+            codeError,
+            onSendCode: sendCode,
+            onConfirmCode: confirmCode,
+            onBackToPhone: () => setContactStep("phone"),
+            onSubmitDetails: submitDetails,
+            payment,
+            submitting,
+            error
+          }
+        ) : null,
+        step === "payment" && service && payment ? /* @__PURE__ */ jsxRuntime.jsx(
+          PaymentStep,
+          {
+            service,
+            payment,
+            paymentStep,
+            charge,
+            busy: submitting || charging,
+            error,
+            copied,
+            fmt,
+            onPayWithPix: (fee) => void payWithPix(fee),
+            onCopy: copyPixPayload,
+            onSimulatePaid: () => setStep("success")
+          }
+        ) : null,
+        step === "success" ? /* @__PURE__ */ jsxRuntime.jsx(
+          C.SuccessPanel,
+          {
+            service,
+            slotStart,
+            professionalName,
+            labels,
+            fmt
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsx(
+        SummaryRail,
+        {
+          title: railTitle,
+          railState,
+          service,
+          professionalName,
+          slotStart,
+          contactSummary,
+          payment,
+          paymentReached: step === "payment" || step === "success",
+          labels,
+          fmt,
+          components: C,
+          serviceMeta: brand.serviceMeta
+        }
+      ) })
+    ] })
+  ] });
+}
+function DefaultBrandHeader({ brand }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-5 flex items-center gap-3 rounded-2xl border border-border bg-card px-5 py-4 shadow-sm", children: [
+    brand.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: brand.logoUrl, alt: brand.name, className: "h-11 w-11 rounded-xl object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-11 w-11 items-center justify-center rounded-xl bg-primary text-lg font-bold text-primary-foreground", children: brand.initials }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-heading text-base font-bold text-foreground", children: brand.name }),
+      brand.tagline ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "h-3.5 w-3.5 text-primary" }),
+        " ",
+        brand.tagline
+      ] }) : null
+    ] })
+  ] });
+}
+function DefaultServiceCard({ service, featured, onSelect, fmt, brand }) {
+  const Icon = brand.serviceIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onSelect,
+      className: "group flex w-full items-center gap-4 rounded-2xl border border-border p-4 text-left transition-colors hover:border-primary hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-accent text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-5 w-5" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: service.name }),
+            featured && brand.featuredBadge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-accent px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary", children: brand.featuredBadge }) : null
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 grid grid-cols-7 gap-1.5", children: week.map((d) => {
-            const selected = date === d.iso;
-            const closed = !openDays.has(d.date.getDay());
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                disabled: closed,
-                onClick: () => {
-                  setDate(d.iso);
-                  setSlotStart(null);
-                },
-                className: [
-                  "flex flex-col items-center gap-0.5 rounded-xl border py-2.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  closed ? "cursor-not-allowed border-transparent text-muted-foreground/40" : selected ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:border-primary/60 hover:bg-accent/40"
-                ].join(" "),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium capitalize opacity-80", children: fmt.weekday.format(d.date).replace(".", "") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold tabular-nums", children: fmt.dayNum.format(d.date) })
-                ]
-              },
-              d.iso
-            );
-          }) }),
-          date ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold text-foreground", children: "Hor\xE1rios dispon\xEDveis" }),
-            slotsLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-4", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 animate-pulse rounded-lg bg-muted" }, i)) }) : bookableSlots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-dashed border-border p-6 text-center text-sm text-muted-foreground", children: "Nenhum hor\xE1rio dispon\xEDvel neste dia. Tente outra data." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2 sm:grid-cols-4", children: bookableSlots.map((s) => {
-              const selected = slotStart === s.start;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setSlotStart(s.start),
-                  className: [
-                    "rounded-lg border py-2.5 text-sm font-semibold tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    selected ? "border-primary bg-primary text-primary-foreground" : "border-border text-foreground hover:border-primary/60 hover:bg-accent/40"
-                  ].join(" "),
-                  children: fmt.time.format(new Date(s.start))
-                },
-                s.start
-              );
-            }) })
-          ] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              disabled: !slotStart,
-              onClick: () => setStep("contact"),
-              className: "mt-6 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              children: "Continuar"
-            }
-          )
-        ] }) : null,
-        step === "contact" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-xl font-bold text-foreground", children: labels.contactStep }),
-          contactStep === "phone" ? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => {
-            e.preventDefault();
-            sendCode();
-          }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Preencha as informa\xE7\xF5es abaixo para que seu agendamento seja identificado." }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "bk-phone", className: "mb-1 block text-sm font-medium text-foreground", children: "Celular" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "select",
-                    {
-                      "aria-label": "Pa\xEDs",
-                      value: countryIso,
-                      onChange: (e) => {
-                        const c = core.getCountry(e.target.value);
-                        setCountryIso(c.iso2);
-                        setContact({ ...contact, phone: core.maskPhone(core.unmaskPhone(contact.phone), c.mask) });
-                      },
-                      className: "h-full appearance-none rounded-l-xl border border-r-0 border-border bg-muted py-3 pl-3 pr-8 text-sm font-medium text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                      children: core.COUNTRIES.map((c) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: c.iso2, children: [
-                        c.flag,
-                        " ",
-                        c.dial
-                      ] }, c.iso2))
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    id: "bk-phone",
-                    type: "tel",
-                    autoComplete: "tel",
-                    inputMode: "tel",
-                    value: contact.phone,
-                    onChange: (e) => setContact({ ...contact, phone: core.maskPhone(e.target.value, country.mask) }),
-                    className: "w-full rounded-r-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring",
-                    placeholder: `Ex.: ${core.maskPhone("11987654321", country.mask)}`
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: "Enviaremos um c\xF3digo para confirmar que o n\xFAmero de telefone \xE9 seu. Usaremos este n\xFAmero para associar as suas informa\xE7\xF5es \xE0 sua conta." })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "submit",
-                disabled: core.unmaskPhone(contact.phone).length < 8,
-                className: "mt-5 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                children: "Enviar c\xF3digo via WhatsApp"
-              }
-            )
-          ] }) : null,
-          contactStep === "details" ? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => {
-            e.preventDefault();
-            submitDetails();
-          }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Preencha as informa\xE7\xF5es abaixo para que seu agendamento seja identificado." }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between rounded-xl border border-border bg-muted/40 px-4 py-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2 text-sm text-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "h-4 w-4 text-primary" }),
-                " Celular verificado \xB7 ",
-                country.flag,
-                " ",
-                country.dial,
-                " ",
-                contact.phone
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setContactStep("phone"),
-                  className: "rounded text-sm font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  children: "Trocar telefone"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 space-y-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "bk-name", className: "mb-1 block text-sm font-medium text-foreground", children: "Nome completo *" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    id: "bk-name",
-                    type: "text",
-                    autoComplete: "name",
-                    value: contact.name,
-                    onChange: (e) => setContact({ ...contact, name: e.target.value }),
-                    className: "w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring",
-                    placeholder: "Seu nome"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "bk-email", className: "mb-1 block text-sm font-medium text-foreground", children: "E-mail" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    id: "bk-email",
-                    type: "email",
-                    autoComplete: "email",
-                    inputMode: "email",
-                    value: contact.email,
-                    onChange: (e) => setContact({ ...contact, email: e.target.value }),
-                    className: "w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring",
-                    placeholder: "voce@email.com"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Enviaremos uma confirma\xE7\xE3o e um lembrete antes do agendamento." })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "bk-notes", className: "mb-1 block text-sm font-medium text-foreground", children: "Observa\xE7\xE3o" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "textarea",
-                  {
-                    id: "bk-notes",
-                    rows: 3,
-                    value: contact.notes,
-                    onChange: (e) => setContact({ ...contact, notes: e.target.value }),
-                    className: "w-full resize-none rounded-xl border border-border bg-background px-4 py-3 text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring",
-                    placeholder: "Use esse espa\xE7o para deixar uma observa\xE7\xE3o sobre este agendamento"
-                  }
-                )
-              ] })
-            ] }),
-            error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-3 text-sm text-destructive", children: "N\xE3o foi poss\xEDvel concluir o agendamento. Tente novamente." }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "submit",
-                disabled: !contact.name.trim() || submitting,
-                className: "mt-5 flex w-full items-center justify-center gap-2 rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                children: [
-                  submitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }),
-                  payment ? "Salvar e continuar" : labels.confirmCta
-                ]
-              }
-            ),
-            !payment ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-3 flex items-center justify-center gap-1.5 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-3.5 w-3.5" }),
-              " Pagamento via Pix \xB7 Sem cobran\xE7a agora"
-            ] }) : null
-          ] }) : null
-        ] }) : null,
-        step === "contact" && contactStep === "code" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-foreground/40 p-4", role: "dialog", "aria-modal": "true", "aria-label": "Verifica\xE7\xE3o de c\xF3digo", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-md rounded-2xl border border-border bg-card p-6 shadow-xl", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-heading text-lg font-bold text-foreground", children: "Insira o c\xF3digo" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Enviamos um c\xF3digo via WhatsApp para voc\xEA confirmar seu n\xFAmero." }),
-          /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: (e) => {
-            e.preventDefault();
-            confirmCode();
-          }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                inputMode: "numeric",
-                value: code,
-                autoFocus: true,
-                onChange: (e) => {
-                  setCode(e.target.value);
-                  setCodeError(false);
-                },
-                className: "mt-4 w-full rounded-xl border border-border bg-background px-4 py-3 text-center text-lg tracking-[0.4em] text-foreground outline-none transition-colors focus:border-primary focus-visible:ring-2 focus-visible:ring-ring placeholder:text-sm placeholder:tracking-normal",
-                placeholder: "Digite o c\xF3digo"
-              }
-            ),
-            codeError ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-2 text-sm text-destructive", children: "C\xF3digo inv\xE1lido. Para testar, use 0000." }) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "submit",
-                className: "mt-4 w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                children: "Confirmar"
-              }
-            )
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-3 w-3" }),
+            " ",
+            service.durationMinutes,
+            " min",
+            brand.serviceMeta ? ` \xB7 ${brand.serviceMeta}` : ""
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Reenviar c\xF3digo via WhatsApp em 28 segundos." }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setContactStep("phone"), className: "font-medium text-primary hover:underline", children: "Voltar" })
-          ] })
-        ] }) }) : null,
-        step === "payment" && service ? (() => {
-          const feePct = payment?.reservationFeePercent ?? 100;
-          const fee = Math.round(service.price * feePct) / 100;
-          const remaining = Math.round((service.price - fee) * 100) / 100;
-          return /* @__PURE__ */ jsxRuntime.jsx("div", { children: paymentStep === "choose" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border p-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between font-semibold text-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: service.name }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: fmt.price.format(service.price) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2 text-sm", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-foreground", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 items-center justify-center rounded bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3 w-3" }) }),
-                    "Taxa de reserva ",
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground", children: [
-                      feePct,
-                      "%"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: fmt.price.format(fee) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-muted-foreground", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 rounded border border-border" }),
-                    " Valor restante"
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: remaining <= 0 ? "Gr\xE1tis" : fmt.price.format(remaining) })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex items-center gap-1 text-sm font-medium text-primary hover:underline", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3.5 w-3.5" }),
-                  " Adicionar cupom"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between border-t border-dashed border-border pt-3 font-semibold text-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Valor total" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: fmt.price.format(service.price) })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6 flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-lg font-bold text-foreground", children: "Escolha como pagar" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldCheck, { className: "h-3.5 w-3.5 text-primary" }),
-                " Pagamento seguro"
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 rounded-2xl border-2 border-primary bg-accent/20 p-4", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 font-semibold text-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) }),
-                "Pix"
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 grid grid-cols-1 gap-4 sm:grid-cols-3", children: [
-                { icon: lucideReact.Check, t: 'Finalize o agendamento clicando em "Pagar com Pix".' },
-                { icon: lucideReact.QrCode, t: "Mostraremos um QR Code e o Pix copia-e-cola." },
-                { icon: lucideReact.CalendarCheck, t: "Ap\xF3s o pagamento, seu agendamento \xE9 reservado." }
-              ].map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-2 flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(s.icon, { className: "h-4 w-4" }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-foreground", children: [
-                  i + 1,
-                  "."
-                ] }),
-                " ",
-                s.t
-              ] }, i)) })
-            ] }),
-            error ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "mt-3 text-sm text-destructive", children: "N\xE3o foi poss\xEDvel iniciar o pagamento. Tente novamente." }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                disabled: submitting || charging,
-                onClick: () => void payWithPix(fee, service.id, service.name),
-                className: "mt-6 flex w-full items-center justify-center gap-2 rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                children: [
-                  submitting || charging ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4" }),
-                  "Pagar ",
-                  fmt.price.format(fee),
-                  " com Pix"
-                ]
-              }
-            )
-          ] }) : (
-            /* Pix QR — aguardando pagamento */
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-amber-300/60 bg-amber-50 p-4 dark:border-amber-400/30 dark:bg-amber-950/30", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-primary" }),
-                  " Realize o pagamento para finalizar"
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "Este c\xF3digo Pix \xE9 v\xE1lido por somente 5 minutos. N\xE3o feche esta p\xE1gina at\xE9 receber a confirma\xE7\xE3o do pagamento." })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-6 font-heading text-lg font-bold text-foreground", children: "Escaneie ou copie este c\xF3digo para pagar" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "mt-2 space-y-1 text-sm text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("li", { children: "1. Acesse o app do seu banco, pagamentos ou Internet Banking." }),
-                /* @__PURE__ */ jsxRuntime.jsx("li", { children: "2. Escolha pagar via Pix." }),
-                /* @__PURE__ */ jsxRuntime.jsx("li", { children: "3. Escaneie o QR Code ou use o Pix copia-e-cola:" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 w-fit rounded-xl border border-border bg-white p-3", children: /* @__PURE__ */ jsxRuntime.jsx(QrPlaceholder, { data: charge?.pixQrCode ?? PIX_PAYLOAD }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex max-w-md items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("code", { className: "flex-1 truncate rounded-lg border border-border bg-muted px-3 py-2 text-xs text-muted-foreground", children: charge?.pixCopyPaste ?? PIX_PAYLOAD }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      const payload = charge?.pixCopyPaste ?? PIX_PAYLOAD;
-                      try {
-                        void navigator.clipboard?.writeText(payload);
-                        setCopied(true);
-                      } catch {
-                        setCopied(true);
-                      }
-                    },
-                    className: "inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-foreground px-3 py-2 text-xs font-medium text-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    children: [
-                      copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "h-3.5 w-3.5" }),
-                      " ",
-                      copied ? "Copiado" : "Copiar"
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setStep("success"),
-                  className: "mt-6 w-full rounded-xl border border-primary py-3 font-semibold text-primary transition-colors hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  children: "J\xE1 paguei \u2014 confirmar (simula\xE7\xE3o)"
-                }
-              )
-            ] })
-          ) });
-        })() : null,
-        step === "success" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-8 text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-8 w-8" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-2xl font-bold text-foreground", children: labels.successTitle }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-2 max-w-sm text-muted-foreground", children: labels.successBody }),
-          service && slotStart ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto mt-6 max-w-sm rounded-2xl border border-border bg-muted/50 p-4 text-left", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-foreground", children: service.name }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 flex items-center gap-1.5 text-sm tabular-nums text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-4 w-4 text-primary" }),
-              " ",
-              formatSlotRange(slotStart, service.durationMinutes, fmt)
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 flex items-center gap-1.5 text-sm text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4 text-primary" }),
-              " ",
-              professionalName
-            ] })
-          ] }) : null
-        ] }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("aside", { className: "hidden lg:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-24 rounded-2xl border border-border bg-card p-5 shadow-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-5 font-heading text-sm font-bold uppercase tracking-wide text-muted-foreground", children: railTitle }),
-        /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "space-y-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(StepRail, { n: 1, label: "Servi\xE7o", state: railState.service, children: service ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border bg-background p-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: service.name }),
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-0.5 flex items-center justify-between text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                "Online \xB7 ",
-                service.durationMinutes,
-                " min"
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold tabular-nums text-primary", children: fmt.price.format(service.price) })
-            ] })
-          ] }) : null }),
-          /* @__PURE__ */ jsxRuntime.jsx(StepRail, { n: 2, label: "Profissional", state: railState.professional, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-full bg-primary text-xs font-semibold text-primary-foreground", children: professionalName.charAt(0) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground", children: professionalName })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(StepRail, { n: 3, label: "Data e hor\xE1rio", state: railState.datetime, children: slotStart && service ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm tabular-nums text-foreground", children: formatSlotRange(slotStart, service.durationMinutes, fmt) }) : null }),
-          /* @__PURE__ */ jsxRuntime.jsx(StepRail, { n: 4, label: "Informa\xE7\xF5es pessoais", state: railState.contact, children: (contact.name || contact.phone) && (step === "payment" || step === "success" || contactStep === "details") ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-foreground", children: [
-            contact.name || "Contato",
-            contact.phone ? ` \xB7 ${country.dial} ${contact.phone}` : ""
-          ] }) : null }),
-          payment ? /* @__PURE__ */ jsxRuntime.jsx(StepRail, { n: 5, label: "Pagamento", state: railState.payment, children: step === "payment" || step === "success" ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-1.5 text-sm text-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-3.5 w-3.5 text-primary" }),
-            " Pix \xE0 vista"
-          ] }) : null }) : null
+          service.description ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 block text-sm text-muted-foreground", children: service.description }) : null
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-right", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block font-semibold tabular-nums text-primary", children: fmt.price.format(service.price) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-auto mt-1 h-4 w-4 text-muted-foreground transition-transform group-hover:translate-x-0.5" })
         ] })
-      ] }) })
+      ]
+    }
+  );
+}
+function DefaultSidebarExtras({ professionalName, brand, onStartBooking, labels }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl border border-border bg-card p-5 shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onStartBooking,
+        className: "w-full rounded-xl bg-primary py-3 font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: labels.bookNowCta
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-5 space-y-2 border-t border-border pt-4 text-xs text-muted-foreground", children: [
+      brand.highlights.map((h, i) => {
+        const Icon = h.icon ?? lucideReact.User;
+        return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 text-primary" }),
+          " ",
+          h.text
+        ] }, i);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-3.5 w-3.5 text-primary" }),
+        " ",
+        professionalName
+      ] })
     ] })
   ] });
 }
+function DefaultStepRailItem({ n, label, state, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "relative pl-11", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "absolute left-[15px] top-8 bottom-[-18px] w-px bg-border last:hidden" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: [
+          "absolute left-0 top-0 flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-colors",
+          state === "done" ? "bg-primary text-primary-foreground" : state === "active" ? "bg-accent text-primary ring-2 ring-primary" : "bg-muted text-muted-foreground"
+        ].join(" "),
+        children: state === "done" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) : n
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: `pt-1 text-sm font-semibold ${state === "todo" ? "text-muted-foreground" : "text-foreground"}`, children: label }),
+    children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children }) : null
+  ] });
+}
+function DefaultSuccessPanel({ service, slotStart, professionalName, labels, fmt }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-8 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-8 w-8" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-heading text-2xl font-bold text-foreground", children: labels.successTitle }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mx-auto mt-2 max-w-sm text-muted-foreground", children: labels.successBody }),
+    service && slotStart ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto mt-6 max-w-sm rounded-2xl border border-border bg-muted/50 p-4 text-left", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-foreground", children: service.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 flex items-center gap-1.5 text-sm tabular-nums text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-4 w-4 text-primary" }),
+        " ",
+        formatSlotRange(slotStart, service.durationMinutes, fmt)
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-1 flex items-center gap-1.5 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-4 w-4 text-primary" }),
+        " ",
+        professionalName
+      ] })
+    ] }) : null
+  ] });
+}
+
+// src/public/components/defaults.ts
+var DEFAULT_BOOKING_COMPONENTS = {
+  BrandHeader: DefaultBrandHeader,
+  ServiceCard: DefaultServiceCard,
+  SidebarExtras: DefaultSidebarExtras,
+  StepRailItem: DefaultStepRailItem,
+  SuccessPanel: DefaultSuccessPanel
+};
 
 // src/public/createPublicBookingPlugin.ts
 var DEFAULT_LABELS = {
@@ -916,10 +1229,71 @@ var DEFAULT_LABELS = {
   contactStep: "Seus dados",
   confirmCta: "Confirmar agendamento",
   successTitle: "Agendamento confirmado!",
-  successBody: "Voc\xEA receber\xE1 os detalhes em breve. At\xE9 logo!"
+  successBody: "Voc\xEA receber\xE1 os detalhes em breve. At\xE9 logo!",
+  // overview
+  servicesHeading: "Servi\xE7os",
+  aboutHeading: "Sobre",
+  openingHoursHeading: "Hor\xE1rio de funcionamento",
+  closedLabel: "Fechado",
+  bookNowCta: "Agendar agora",
+  // datetime
+  timezoneNote: "Fuso: Hor\xE1rio de Bras\xEDlia",
+  slotsHeading: "Hor\xE1rios dispon\xEDveis",
+  noSlots: "Nenhum hor\xE1rio dispon\xEDvel neste dia. Tente outra data.",
+  continueCta: "Continuar",
+  backToServices: "Servi\xE7os",
+  back: "Voltar",
+  prevWeek: "Semana anterior",
+  nextWeek: "Pr\xF3xima semana",
+  // contact
+  contactIntro: "Preencha as informa\xE7\xF5es abaixo para que seu agendamento seja identificado.",
+  phoneLabel: "Celular",
+  phoneHint: "Enviaremos um c\xF3digo para confirmar que o n\xFAmero de telefone \xE9 seu. Usaremos este n\xFAmero para associar as suas informa\xE7\xF5es \xE0 sua conta.",
+  sendCodeCta: "Enviar c\xF3digo via WhatsApp",
+  codeTitle: "Insira o c\xF3digo",
+  codeBody: "Enviamos um c\xF3digo via WhatsApp para voc\xEA confirmar seu n\xFAmero.",
+  codeInvalid: "C\xF3digo inv\xE1lido. Para testar, use 0000.",
+  codeConfirmCta: "Confirmar",
+  codeResendHint: "Reenviar c\xF3digo via WhatsApp em 28 segundos.",
+  phoneVerified: "Celular verificado",
+  changePhone: "Trocar telefone",
+  nameLabel: "Nome completo *",
+  namePlaceholder: "Seu nome",
+  emailLabel: "E-mail",
+  emailPlaceholder: "voce@email.com",
+  emailHint: "Enviaremos uma confirma\xE7\xE3o e um lembrete antes do agendamento.",
+  notesLabel: "Observa\xE7\xE3o",
+  notesPlaceholder: "Use esse espa\xE7o para deixar uma observa\xE7\xE3o sobre este agendamento",
+  saveAndContinueCta: "Salvar e continuar",
+  submitError: "N\xE3o foi poss\xEDvel concluir o agendamento. Tente novamente.",
+  noChargeNote: "Pagamento via Pix \xB7 Sem cobran\xE7a agora",
+  // right rail
+  railTitle: "Passos para agendar",
+  railWaitingPayment: "Aguardando pagamento",
+  railService: "Servi\xE7o",
+  railProfessional: "Profissional",
+  railDatetime: "Data e hor\xE1rio",
+  railContact: "Informa\xE7\xF5es pessoais",
+  railPayment: "Pagamento"
 };
 var DEFAULT_WINDOW = { minAdvanceHours: 2, maxAdvanceDays: 21, slotInterval: 30 };
 var DEFAULT_HOURS = { daysOfWeek: [1, 2, 3, 4, 5, 6], start: "09:00", end: "18:00" };
+function resolveBrand(brand, labels) {
+  const name = brand?.name ?? labels.title;
+  return {
+    name,
+    initials: brand?.initials ?? name.charAt(0).toUpperCase(),
+    logoUrl: brand?.logoUrl,
+    tagline: brand?.tagline === void 0 ? "Agendamento online seguro" : brand.tagline,
+    serviceIcon: brand?.serviceIcon ?? lucideReact.Video,
+    serviceMeta: brand?.serviceMeta === void 0 ? "Online" : brand.serviceMeta,
+    featuredBadge: brand?.featuredBadge === void 0 ? "Mais procurado" : brand.featuredBadge,
+    highlights: brand?.highlights ?? [
+      { icon: lucideReact.CalendarCheck, text: "Confirma\xE7\xE3o imediata" },
+      { icon: lucideReact.ShieldCheck, text: "Agendamento seguro" }
+    ]
+  };
+}
 var scheduleId = 0;
 function buildSchedules(professionalId, hours) {
   return hours.daysOfWeek.map((day) => ({
@@ -938,19 +1312,23 @@ function buildSchedules(professionalId, hours) {
 }
 function createPublicBookingPlugin(options) {
   const basePath = options.basePath ?? "/agendar";
-  const professionalId = options.professional?.id ?? "dr-hiago";
+  const mockProfessionalId = options.professional?.id ?? "pro-1";
+  const professionalId = options.professional?.id ?? null;
   const professionalName = options.professional?.name ?? "Especialista";
   const window2 = { ...DEFAULT_WINDOW, ...options.window };
   const labels = { ...DEFAULT_LABELS, ...options.labels };
+  const brand = resolveBrand(options.brand, labels);
+  const components = { ...DEFAULT_BOOKING_COMPONENTS, ...options.components };
   const currency = options.currency ?? "BRL";
   const locale = options.locale ?? "pt-BR";
   const hours = options.workingHours ?? DEFAULT_HOURS;
+  const staticServices = options.services ?? null;
   const payment = options.payment?.enabled ? {
     reservationFeePercent: options.payment.reservationFeePercent ?? 100,
     method: options.payment.method ?? "pix"
   } : null;
   const professional = {
-    id: professionalId,
+    id: mockProfessionalId,
     name: professionalName,
     avatarUrl: null,
     locationId: null,
@@ -959,28 +1337,40 @@ function createPublicBookingPlugin(options) {
   };
   const mockSeed = options.seed ?? {
     professionals: [professional],
-    schedules: buildSchedules(professionalId, hours),
+    schedules: buildSchedules(mockProfessionalId, hours),
     bookings: []
   };
   const provider = options.dataProvider ?? core.createSafeDataProvider(
-    () => chunkGAJVIEXM_cjs.createSupabaseAgendaProvider(),
-    () => chunkGAJVIEXM_cjs.createMockAgendaProvider({ seed: mockSeed })
+    () => {
+      if (!options.tenantId) {
+        throw new Error(
+          "[plugin-agenda/public] `tenantId` is required when a Supabase client is configured (setGlobalSupabaseClient)."
+        );
+      }
+      return createSupabasePublicBookingProvider({ tenantId: options.tenantId });
+    },
+    () => createMockPublicBookingProvider({
+      seed: mockSeed,
+      services: staticServices ?? [],
+      professionalId: mockProfessionalId
+    })
   );
-  const value = {
+  const base = {
     provider,
     professionalId,
     professionalName,
-    services: options.services,
     businessHours: hours,
     payment,
     paymentProvider: options.paymentProvider ?? null,
     onIdentityVerified: options.onIdentityVerified ?? null,
     window: window2,
     labels,
+    brand,
+    components,
     currency,
     locale
   };
-  const Provider = ({ children }) => react.createElement(BookingProvider, { value, children });
+  const Provider = ({ children }) => react.createElement(BookingProvider, { base, staticServices, children });
   Provider.displayName = "PublicBookingProvider";
   const BookingScreen = () => react.createElement(
     "section",
@@ -996,7 +1386,7 @@ function createPublicBookingPlugin(options) {
     id: "booking",
     name: "Agendamento",
     icon: "CalendarCheck",
-    version: "0.1.0",
+    version: "0.3.0",
     scope: options.scope ?? "universal",
     verticalId: options.verticalId,
     scaffolds: ["website", "landing_page"],
@@ -1011,10 +1401,23 @@ function createPublicBookingPlugin(options) {
 
 exports.BookingProvider = BookingProvider;
 exports.BookingWidget = BookingWidget;
+exports.DAY_NAMES = DAY_NAMES;
+exports.DEFAULT_BOOKING_COMPONENTS = DEFAULT_BOOKING_COMPONENTS;
+exports.DefaultBrandHeader = DefaultBrandHeader;
+exports.DefaultServiceCard = DefaultServiceCard;
+exports.DefaultSidebarExtras = DefaultSidebarExtras;
+exports.DefaultStepRailItem = DefaultStepRailItem;
+exports.DefaultSuccessPanel = DefaultSuccessPanel;
+exports.WEEK_ORDER = WEEK_ORDER;
+exports.createMockPublicBookingProvider = createMockPublicBookingProvider;
 exports.createPublicBookingPlugin = createPublicBookingPlugin;
+exports.createSupabasePublicBookingProvider = createSupabasePublicBookingProvider;
+exports.formatSlotRange = formatSlotRange;
 exports.useAvailableSlots = useAvailableSlots;
 exports.useBooking = useBooking;
 exports.useCreateBooking = useCreateBooking;
+exports.useFormatters = useFormatters;
+exports.usePublicServices = usePublicServices;
 exports.useServices = useServices;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map