4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T24fe,"use client"; import { useId, useState, type ComponentProps, type CSSProperties } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; type Action = { label: string; href: string }; export type CtaSlot = { id: string; /** Short day label, e.g. "Tue 13 Oct". */ day: string; /** Time label, e.g. "10:30". */ time: string; }; export type CtaSplitPhotoProps = { eyebrow?: string; title?: string; description?: string; /** Up to three or four short, concrete reasons. Rendered as a numbered list. */ reasons?: string[]; image?: { src: string; alt: string; caption?: string }; /** Which side the photograph sits on from the `lg` breakpoint. */ photoSide?: "left" | "right"; /** The primary action. When a slot is selected, its label reads "Book , ". */ primaryAction?: Action; secondaryAction?: Action; /** Optional bookable times. Pass an empty array to hide the list. */ slots?: CtaSlot[]; slot?: string; defaultSlot?: string; onSlotChange?: (slotId: string) => void; timezoneNote?: string; /** Background of the offer panel. Defaults to a pale blue tint. */ surface?: string; /** Text colour on the offer panel. Must pass contrast against `surface`. */ surfaceForeground?: string; /** Second ink for numbers, selected slot and primary button. Defaults to Devsloka blue. */ accent?: string; /** Text colour on `accent`. */ accentForeground?: string; } & ComponentProps<"section">; const DEFAULTS = { eyebrow: "Wickham · Software for small holiday lets", title: "Talk to someone who has cleaned a room between guests.", description: "Book a 20-minute walkthrough with Ana or Tomás. Both ran guesthouses before joining Wickham. Bring your current calendar and we will import it while you watch.", reasons: [ "One calendar for Airbnb, Booking and your own site, synced every 5 minutes.", "Cleaning rotas that text your cleaner the moment a checkout is confirmed.", "Tourist tax and invoices filed per property, ready for your accountant in April.", ], image: { src: "https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?w=1200&q=80", alt: "A cosy living room interior with a sofa, cushions and soft daylight", caption: "Casa Ribeira, Porto. Four rooms, run on Wickham since 2024.", }, primaryAction: { label: "Book a walkthrough", href: "#" }, secondaryAction: { label: "Watch the 6-minute tour", href: "#" }, slots: [ { id: "tue-1030", day: "Tue 13 Oct", time: "10:30" }, { id: "tue-1600", day: "Tue 13 Oct", time: "16:00" }, { id: "wed-0930", day: "Wed 14 Oct", time: "09:30" }, { id: "thu-1400", day: "Thu 15 Oct", time: "14:00" }, ], timezoneNote: "Times in Lisbon (WEST). Calls run on Google Meet or phone.", surface: "#E8F0FF", surfaceForeground: "#0A0A0A", accent: "#0A6EFF", accentForeground: "#FFFFFF", }; const pad = (n: number) => String(n).padStart(2, "0"); export function CtaSplitPhoto({ eyebrow = DEFAULTS.eyebrow, title = DEFAULTS.title, description = DEFAULTS.description, reasons = DEFAULTS.reasons, image = DEFAULTS.image, photoSide = "left", primaryAction = DEFAULTS.primaryAction, secondaryAction = DEFAULTS.secondaryAction, slots = DEFAULTS.slots, slot, defaultSlot, onSlotChange, timezoneNote = DEFAULTS.timezoneNote, surface = DEFAULTS.surface, surfaceForeground = DEFAULTS.surfaceForeground, accent = DEFAULTS.accent, accentForeground = DEFAULTS.accentForeground, className, style, ...props }: CtaSplitPhotoProps) { const headingId = useId(); const slotsLabelId = useId(); const [uncontrolledSlot, setUncontrolledSlot] = useState(defaultSlot); const currentSlotId = slot ?? uncontrolledSlot; const currentSlot = slots.find((s) => s.id === currentSlotId); const selectSlot = (id: string) => { if (slot === undefined) setUncontrolledSlot(id); onSlotChange?.(id); }; const primaryHref = currentSlot ? `${primaryAction.href}${primaryAction.href.includes("?") ? "&" : "?"}slot=${encodeURIComponent(currentSlot.id)}` : primaryAction.href; return (

{eyebrow}

{title}

{description}

{reasons.length > 0 && (

{pad(i + 1)} {reason}

)} {slots.length > 0 && (

Next available

{slots.map((s) => { const selected = s.id === currentSlotId; return ( ); })}

{timezoneNote &&

{timezoneNote}

}

)}

{secondaryAction.label}

{currentSlot ? `Selected ${currentSlot.day} at ${currentSlot.time}.` : ""}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4f",null,{"namespace":"@devsloka","registryDependencies":["button"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/cta/cta-split-photo.tsx","content":"$51","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]