@mohasinac/appkit 2.3.0 → 2.3.2

package/dist/features/homepage/components/CharacterHotspotForm.js

@@ -0,0 +1,309 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import Image from "next/image";
+import { Button, Div, Heading, Input, Label, Li, Row, Span, Text, Textarea, Ul, } from "../../../ui";
+function randomId() {
+    return Math.random().toString(36).slice(2, 9);
+}
+export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSave, }) {
+    const [imageUrl, setImageUrl] = useState(initial?.imageUrl ?? "");
+    const [imageAlt, setImageAlt] = useState(initial?.imageAlt ?? "DC, Marvel and Anime characters");
+    const [active, setActive] = useState(initial?.active ?? true);
+    const [pins, setPins] = useState(initial?.pins ?? []);
+    const [step, setStep] = useState(initial?.imageUrl ? "review" : "image");
+    const [draftPos, setDraftPos] = useState(null);
+    const [draftName, setDraftName] = useState("");
+    const [draftUniverse, setDraftUniverse] = useState("");
+    const [draftDescription, setDraftDescription] = useState("");
+    const [draftHref, setDraftHref] = useState("");
+    const [draftBuyText, setDraftBuyText] = useState("Shop Now");
+    const [draftBadge, setDraftBadge] = useState("");
+    const [draftAccent, setDraftAccent] = useState("#E8001C");
+    const [uploading, setUploading] = useState(false);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+    const containerRef = useRef(null);
+    async function handleImageUpload(e) {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        setUploading(true);
+        setError(null);
+        try {
+            const url = await onUploadImage(file);
+            setImageUrl(url);
+        }
+        catch {
+            setError("Image upload failed.");
+        }
+        finally {
+            setUploading(false);
+        }
+    }
+    function handleImageClick(e) {
+        if (!containerRef.current)
+            return;
+        const rect = containerRef.current.getBoundingClientRect();
+        const xPct = Math.round(Math.max(1, Math.min(99, ((e.clientX - rect.left) / rect.width) * 100)) * 10) / 10;
+        const yPct = Math.round(Math.max(1, Math.min(99, ((e.clientY - rect.top) / rect.height) * 100)) * 10) / 10;
+        setDraftPos((prev) => ({ id: prev?.id ?? randomId(), xPct, yPct }));
+    }
+    function commitDraftPin() {
+        if (!draftPos)
+            return;
+        setPins((prev) => [
+            ...prev,
+            {
+                id: draftPos.id,
+                name: draftName,
+                universe: draftUniverse,
+                description: draftDescription,
+                href: draftHref,
+                xPct: draftPos.xPct,
+                yPct: draftPos.yPct,
+                accent: draftAccent,
+                badge: draftBadge,
+                buyText: draftBuyText,
+            },
+        ]);
+        setDraftPos(null);
+        setDraftName("");
+        setDraftUniverse("");
+        setDraftDescription("");
+        setDraftHref("");
+        setDraftBuyText("Shop Now");
+        setDraftBadge("");
+        setDraftAccent("#E8001C");
+    }
+    function deletePin(id) {
+        setPins((prev) => prev.filter((p) => p.id !== id));
+    }
+    async function handleSave() {
+        if (!imageUrl)
+            return;
+        setSaving(true);
+        setError(null);
+        setSuccess(false);
+        try {
+            await onSave({ imageUrl, imageAlt, active, pins });
+            await onAfterSave?.();
+            setSuccess(true);
+        }
+        catch {
+            setError("Save failed. Check your connection and try again.");
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    const STEPS = [
+        { key: "image", label: "Image" },
+        { key: "place", label: "Place Pin" },
+        { key: "details", label: "Pin Details" },
+        { key: "review", label: "Review & Save" },
+    ];
+    const stepIndex = STEPS.findIndex((s) => s.key === step);
+    return (_jsxs(Div, { className: "mx-auto max-w-3xl space-y-6", children: [error && (_jsx(Text, { className: "rounded border border-red-200 bg-red-50 px-4 py-2 text-sm font-bold text-red-600", children: error })), success && (_jsx(Text, { className: "rounded border border-green-200 bg-green-50 px-4 py-2 text-sm font-bold text-green-700", children: "Saved to database successfully!" })), _jsx(Div, { className: "flex items-start", children: STEPS.map((s, i) => (_jsxs(Div, { className: "flex flex-1 flex-col items-center", children: [_jsxs(Div, { className: "flex w-full items-center", children: [i > 0 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
+                                        background: i <= stepIndex
+                                            ? "var(--color-black)"
+                                            : "var(--border-ink)",
+                                    } })), _jsx(Div, { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-bold", style: {
+                                        background: i < stepIndex
+                                            ? "var(--color-black)"
+                                            : i === stepIndex
+                                                ? "var(--color-yellow)"
+                                                : "var(--surface-elevated)",
+                                        color: i < stepIndex
+                                            ? "var(--color-yellow)"
+                                            : "var(--color-black)",
+                                        border: i <= stepIndex
+                                            ? "2px solid var(--color-black)"
+                                            : "2px solid var(--border-ink)",
+                                    }, children: i < stepIndex ? "✓" : i + 1 }), i < STEPS.length - 1 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
+                                        background: i < stepIndex
+                                            ? "var(--color-black)"
+                                            : "var(--border-ink)",
+                                    } }))] }), _jsx(Span, { className: "mt-1 text-center text-[10px] font-medium", style: { color: "var(--color-muted)" }, children: s.label })] }, s.key))) }), step === "image" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                    borderColor: "var(--border-ink)",
+                    background: "var(--surface-elevated)",
+                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Upload Background Image" }), _jsx(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { className: "text-3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { className: "font-medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { className: "text-xs", style: { color: "var(--color-muted)" }, children: "JPG, PNG, WebP \u2014 wide landscape images work best" }), _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), imageUrl && (_jsxs(Div, { className: "space-y-1", children: [_jsx(Div, { className: "relative w-full overflow-hidden rounded-lg", style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: "text-xs font-medium text-green-700", children: "\u2713 Image uploaded" })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "DC, Marvel and Anime characters", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                    borderColor: "var(--border-ink)",
+                                    background: "var(--surface-elevated)",
+                                    color: "var(--color-black)",
+                                } })] }), _jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] }), _jsxs(Row, { justify: "end", gap: "sm", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [(initial?.pins?.length ?? 0) > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: {
+                                    background: "transparent",
+                                    color: "var(--color-black)",
+                                }, children: "Skip to Review" })), _jsx(Button, { type: "button", onClick: () => setStep("place"), disabled: !imageUrl || uploading, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
+                                    background: "var(--color-black)",
+                                    color: "var(--color-yellow)",
+                                }, children: "Next: Place Pins \u2192" })] })] })), step === "place" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                    borderColor: "var(--border-ink)",
+                    background: "var(--surface-elevated)",
+                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Place a Pin" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: [_jsx("strong", { children: "Click anywhere on the image" }), " to drop a pin, or enter exact coordinates below."] }), _jsxs(Div, { ref: containerRef, className: "relative w-full overflow-hidden rounded-lg", style: {
+                            paddingTop: "56.25%",
+                            cursor: "crosshair",
+                            background: "#111",
+                        }, onClick: handleImageClick, children: [_jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
+                                    left: `${pin.xPct}%`,
+                                    top: `${pin.yPct}%`,
+                                    transform: "translate(-50%, -50%)",
+                                    zIndex: 10,
+                                }, children: [_jsx(Div, { className: "flex items-center justify-center rounded-full text-xs font-bold text-white", style: {
+                                            width: 24,
+                                            height: 24,
+                                            background: pin.accent || "#E8001C",
+                                            border: "2px solid white",
+                                            boxShadow: "0 1px 4px rgba(0,0,0,0.5)",
+                                        }, children: "+" }), pin.name && (_jsx(Div, { className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-[9px] font-bold text-white", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
+                                    left: `${draftPos.xPct}%`,
+                                    top: `${draftPos.yPct}%`,
+                                    transform: "translate(-50%, -50%)",
+                                    zIndex: 20,
+                                }, children: [_jsx(Span, { className: "absolute animate-ping rounded-full", style: {
+                                            inset: -6,
+                                            background: "rgba(255,228,0,0.4)",
+                                            pointerEvents: "none",
+                                        } }), _jsx(Div, { className: "relative flex items-center justify-center rounded-full font-bold", style: {
+                                            width: 32,
+                                            height: 32,
+                                            background: "var(--color-yellow)",
+                                            border: "3px solid var(--color-black)",
+                                            boxShadow: "0 2px 8px rgba(0,0,0,0.55)",
+                                            color: "var(--color-black)",
+                                            fontSize: 18,
+                                        }, children: "\u2605" }), _jsx(Div, { className: "pointer-events-none absolute left-9 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-2 py-0.5 text-[10px] font-bold", style: {
+                                            background: "var(--color-black)",
+                                            color: "var(--color-yellow)",
+                                        }, children: "NEW PIN" })] }))] }), _jsx(Div, { className: "grid grid-cols-2 gap-3", children: [
+                            {
+                                label: "X Position (%)",
+                                field: "xPct",
+                                value: draftPos?.xPct ?? "",
+                                onChange: (v) => setDraftPos((prev) => ({
+                                    id: prev?.id ?? randomId(),
+                                    xPct: Math.max(1, Math.min(99, v)),
+                                    yPct: prev?.yPct ?? 50,
+                                })),
+                            },
+                            {
+                                label: "Y Position (%)",
+                                field: "yPct",
+                                value: draftPos?.yPct ?? "",
+                                onChange: (v) => setDraftPos((prev) => ({
+                                    id: prev?.id ?? randomId(),
+                                    xPct: prev?.xPct ?? 50,
+                                    yPct: Math.max(1, Math.min(99, v)),
+                                })),
+                            },
+                        ].map(({ label, field, value, onChange }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "number", min: 1, max: 99, step: 0.1, value: value, placeholder: "e.g. 42.5", onChange: (e) => {
+                                        const v = parseFloat(e.target.value);
+                                        if (!isNaN(v))
+                                            onChange(v);
+                                    }, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                        borderColor: "var(--border-ink)",
+                                        background: "var(--surface-elevated)",
+                                        color: "var(--color-black)",
+                                    } })] }, field))) }), pins.length > 0 && (_jsxs(Text, { className: "text-xs", style: { color: "var(--color-muted)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : "", " already placed on this image."] })), _jsxs(Row, { justify: "between", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("image"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [pins.length > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity", style: {
+                                            background: "var(--surface-warm)",
+                                            color: "var(--color-black)",
+                                            border: "2px solid var(--border-ink)",
+                                        }, children: "Done Adding Pins" })), _jsx(Button, { type: "button", onClick: () => setStep("details"), disabled: !draftPos, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
+                                            background: "var(--color-black)",
+                                            color: "var(--color-yellow)",
+                                        }, children: "Continue: Add Details \u2192" })] })] })] })), step === "details" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                    borderColor: "var(--border-ink)",
+                    background: "var(--surface-elevated)",
+                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Pin Details" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: ["Fill in the details for the pin at", " ", _jsxs("strong", { children: [draftPos?.xPct, "%, ", draftPos?.yPct, "%"] }), "."] }), _jsx(Div, { className: "grid grid-cols-2 gap-3", children: [
+                            {
+                                label: "Name *",
+                                value: draftName,
+                                onChange: setDraftName,
+                                placeholder: "SPIDER-MAN",
+                            },
+                            {
+                                label: "Universe / Category *",
+                                value: draftUniverse,
+                                onChange: setDraftUniverse,
+                                placeholder: "Marvel",
+                            },
+                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                        borderColor: "var(--border-ink)",
+                                        background: "var(--surface-elevated)",
+                                        color: "var(--color-black)",
+                                    } })] }, label))) }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Description *" }), _jsx(Textarea, { rows: 3, value: draftDescription, onChange: (e) => setDraftDescription(e.target.value), className: "resize-none rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                    borderColor: "var(--border-ink)",
+                                    background: "var(--surface-elevated)",
+                                    color: "var(--color-black)",
+                                }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Link (href) *" }), _jsx(Input, { type: "text", value: draftHref, onChange: (e) => setDraftHref(e.target.value), placeholder: "/franchise/marvel", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                    borderColor: "var(--border-ink)",
+                                    background: "var(--surface-elevated)",
+                                    color: "var(--color-black)",
+                                } })] }), _jsx(Div, { className: "grid grid-cols-2 gap-3", children: [
+                            {
+                                label: "Button Text *",
+                                value: draftBuyText,
+                                onChange: setDraftBuyText,
+                                placeholder: "Get Spider-Man Figures",
+                            },
+                            {
+                                label: "Badge Label",
+                                value: draftBadge,
+                                onChange: setDraftBadge,
+                                placeholder: "MARVEL",
+                            },
+                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                        borderColor: "var(--border-ink)",
+                                        background: "var(--surface-elevated)",
+                                        color: "var(--color-black)",
+                                    } })] }, label))) }), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: "#E8001C", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                            borderColor: "var(--border-ink)",
+                                            background: "var(--surface-elevated)",
+                                            color: "var(--color-black)",
+                                        } })] }), _jsx(Input, { type: "color", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), className: "mb-0.5 h-10 w-10 cursor-pointer rounded border-2", style: { borderColor: "var(--border-ink)" }, title: "Pick colour" })] }), _jsxs(Row, { justify: "between", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("place"), variant: "ghost", className: "px-4 py-2 text-sm font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [_jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
+                                            commitDraftPin();
+                                            setStep("review");
+                                        }, variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
+                                            background: "var(--surface-warm)",
+                                            color: "var(--color-black)",
+                                            border: "2px solid var(--border-ink)",
+                                        }, children: "Save Pin & Finish" }), _jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
+                                            commitDraftPin();
+                                            setStep("place");
+                                        }, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
+                                            background: "var(--color-black)",
+                                            color: "var(--color-yellow)",
+                                        }, children: "Save Pin & Add Another \u2192" })] })] })] })), step === "review" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                    borderColor: "var(--border-ink)",
+                    background: "var(--surface-elevated)",
+                }, children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Review & Save" }), _jsxs(Span, { className: "rounded-full px-3 py-1 text-sm font-bold", style: { background: "var(--surface-warm)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: "relative w-full overflow-hidden rounded-lg", style: { paddingTop: "56.25%", background: "#111" }, children: [_jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
+                                    left: `${pin.xPct}%`,
+                                    top: `${pin.yPct}%`,
+                                    transform: "translate(-50%, -50%)",
+                                    zIndex: 10,
+                                }, children: [_jsx(Div, { className: "flex items-center justify-center rounded-full text-xs font-bold text-white", style: {
+                                            width: 28,
+                                            height: 28,
+                                            background: pin.accent || "#E8001C",
+                                            border: "2px solid white",
+                                            boxShadow: "0 2px 6px rgba(0,0,0,0.55)",
+                                        }, children: "+" }), pin.name && (_jsx(Div, { className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-[9px] font-bold text-white", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (_jsx(Ul, { className: "divide-y rounded-lg border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (_jsx(Li, { className: "px-4 py-3", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white", style: { background: pin.accent || "#E8001C" }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate text-sm font-bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { className: "text-xs", style: { color: "var(--color-muted)" }, children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: "shrink-0 rounded p-1 text-xs text-red-500 hover:bg-red-50", title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { className: "rounded-lg border-2 border-dashed p-8 text-center text-sm", style: {
+                            borderColor: "var(--border-ink)",
+                            color: "var(--color-muted)",
+                        }, children: "No pins yet \u2014 add some using the button below." })), _jsxs("details", { className: "rounded-lg border p-3", style: { borderColor: "var(--border-ink)" }, children: [_jsx("summary", { className: "cursor-pointer text-sm font-medium", children: "Image Settings" }), _jsxs(Div, { className: "mt-3 space-y-3", children: [_jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 rounded border-2 border-dashed px-3 py-1.5 text-sm font-medium transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                                    borderColor: "var(--border-ink)",
+                                                    background: "var(--surface-elevated)",
+                                                    color: "var(--color-black)",
+                                                } })] }), _jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] })] })] }), _jsxs(Row, { justify: "between", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => {
+                                    setDraftPos(null);
+                                    setStep("place");
+                                }, variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity", style: {
+                                    background: "var(--surface-warm)",
+                                    color: "var(--color-black)",
+                                    border: "2px solid var(--border-ink)",
+                                }, children: "+ Add Another Pin" }), _jsx(Button, { type: "button", onClick: handleSave, disabled: !imageUrl || saving || pins.length === 0, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
+                                    background: "var(--color-black)",
+                                    color: "var(--color-yellow)",
+                                }, children: saving ? "Saving…" : "Save to Database" })] })] }))] }));
+}

package/dist/features/homepage/components/CustomerReviewsSection.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface CustomerReviewsSectionProps<T = unknown> {
+    title: string;
+    subtitle?: string;
+    items: T[];
+    renderItem: (item: T) => React.ReactNode;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    isLoading?: boolean;
+    keyExtractor?: (item: T) => string;
+    className?: string;
+}
+export declare function CustomerReviewsSection<T = unknown>({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel, isLoading, keyExtractor, className, }: CustomerReviewsSectionProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/CustomerReviewsSection.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Heading, HorizontalScroller, Section, Text, TextLink, } from "../../../ui";
+// --- Section -----------------------------------------------------------------
+export function CustomerReviewsSection({ title, subtitle, items, renderItem, viewMoreHref, viewMoreLabel = "See all reviews", isLoading = false, keyExtractor, className = "", }) {
+    const { themed, skeleton } = THEME_CONSTANTS;
+    if (isLoading) {
+        return (_jsx(Section, { className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto", "data-section": "customerreviewssection-div-315", children: [_jsx("div", { className: `h-8 ${skeleton.base} mb-8 max-w-xs mx-auto` }), _jsx("div", { className: "flex gap-6 overflow-hidden", "data-section": "customerreviewssection-div-316", children: [...Array(3)].map((_, i) => (_jsx("div", { className: `${skeleton.card} h-[clamp(180px,26vh,260px)] min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] flex-none` }, i))) })] }) }));
+    }
+    if (items.length === 0)
+        return null;
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4 md:px-8", "data-section": "customerreviewssection-div-317", children: [_jsxs("div", { className: "text-center mb-10", "data-section": "customerreviewssection-div-318", children: [_jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary}`, children: subtitle }))] }), _jsx(HorizontalScroller, { items: items, renderItem: (item) => renderItem(item), perView: THEME_CONSTANTS.carousel.perView.reviews, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "customerreviewssection-div-319", children: _jsx(TextLink, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
+}

package/dist/features/homepage/components/EventsSection.d.ts

@@ -0,0 +1,9 @@
+export interface EventsSectionProps {
+    title?: string;
+    description?: string;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    limit?: number;
+    className?: string;
+}
+export declare function EventsSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, }: EventsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/EventsSection.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useHomepageEvents } from "../hooks/useHomepageEvents";
+import { EventCard } from "../../events/components/EventCard";
+export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", }) {
+    const { data: items = [], isLoading } = useHomepageEvents(limit);
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Events & Offers", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: THEME_CONSTANTS.carousel.perView.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
+}

package/dist/features/homepage/components/FAQSection.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+export interface FAQTab {
+    value: string;
+    label: string;
+    icon?: string;
+}
+export interface FAQItem {
+    id: string;
+    question: string;
+    answer: string;
+}
+export interface FAQSectionProps {
+    title: string;
+    subtitle?: string;
+    tabs: FAQTab[];
+    activeTab: string;
+    items: FAQItem[];
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    hasMore?: boolean;
+    moreCount?: number;
+    renderTabs?: () => React.ReactNode;
+    className?: string;
+}
+export declare function FAQSection({ title, subtitle, items, viewMoreHref, viewMoreLabel, hasMore, moreCount, renderTabs, className, }: FAQSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FAQSection.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Button, Heading, Section, Span, Text, TextLink } from "../../../ui";
+import { ChevronDown } from "lucide-react";
+// --- Section -----------------------------------------------------------------
+export function FAQSection({ title, subtitle, items, viewMoreHref, viewMoreLabel = "View all →", hasMore = false, moreCount = 0, renderTabs, className = "", }) {
+    const { themed, spacing, flex } = THEME_CONSTANTS;
+    const [openFaqId, setOpenFaqId] = useState(null);
+    const toggleFaq = (faqId) => {
+        setOpenFaqId(openFaqId === faqId ? null : faqId);
+    };
+    return (_jsx(Section, { className: `p-8 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto", "data-section": "faqsection-div-320", children: [_jsxs("div", { className: "text-center mb-8", "data-section": "faqsection-div-321", children: [_jsx(Heading, { level: 2, variant: "none", className: "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent text-3xl md:text-4xl font-bold mb-3", children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary}`, children: subtitle }))] }), renderTabs && _jsx("div", { className: "mb-8 -mx-8", "data-section": "faqsection-div-322", children: renderTabs() }), _jsxs("div", { className: `${spacing.stack} max-w-5xl mx-auto`, "data-section": "faqsection-div-323", children: [items.length === 0 && (_jsx(Text, { className: `text-center py-8 ${themed.textSecondary}`, children: "No FAQs found." })), items.map((faq) => {
+                            const isOpen = openFaqId === faq.id;
+                            return (_jsxs("div", { className: `${themed.bgPrimary} rounded-2xl overflow-hidden transition-all border-l-4 ${isOpen
+                                    ? "border-primary bg-primary/5 dark:bg-primary/10"
+                                    : "border-transparent"}`, "data-section": "faqsection-div-324", children: [_jsxs(Button, { variant: "ghost", className: `w-full text-left p-6 ${flex.between} gap-4 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors`, onClick: () => toggleFaq(faq.id), "aria-expanded": isOpen, children: [_jsx(Span, { className: `text-base ${themed.textPrimary} font-medium flex-1`, children: faq.question }), _jsx(ChevronDown, { className: `w-5 h-5 flex-shrink-0 ${themed.textSecondary} transition-transform duration-300 ${isOpen ? "rotate-180" : ""}` })] }), _jsx("div", { className: `overflow-hidden transition-all duration-300 ease-out ${isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}`, "data-section": "faqsection-div-325", children: _jsx("div", { className: "p-6 pt-0", "data-section": "faqsection-div-326", children: _jsx(Text, { className: `text-base ${themed.textSecondary} rounded-md ${themed.bgTertiary} p-4`, children: faq.answer }) }) })] }, faq.id));
+                        })] }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", "data-section": "faqsection-div-327", children: _jsxs(TextLink, { href: viewMoreHref, className: "inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:text-primary-400 transition-colors", children: [viewMoreLabel, hasMore && moreCount > 0 && (_jsxs(Span, { className: "bg-primary dark:bg-primary/80 text-white text-xs px-2 py-0.5 rounded-full", children: ["+", moreCount] }))] }) }))] }) }));
+}

package/dist/features/homepage/components/FeaturedAuctionsSection.d.ts

@@ -0,0 +1,8 @@
+export interface FeaturedAuctionsSectionProps {
+    title?: string;
+    description?: string;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    className?: string;
+}
+export declare function FeaturedAuctionsSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedAuctionsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedAuctionsSection.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useFeaturedAuctions } from "../hooks/useFeaturedAuctions";
+import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
+export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", }) {
+    const { data: items = [], isLoading } = useFeaturedAuctions();
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Live Auctions", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
+}

package/dist/features/homepage/components/FeaturedPreOrdersSection.d.ts

@@ -0,0 +1,8 @@
+export interface FeaturedPreOrdersSectionProps {
+    title?: string;
+    description?: string;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    className?: string;
+}
+export declare function FeaturedPreOrdersSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedPreOrdersSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedPreOrdersSection.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useFeaturedPreOrders } from "../hooks/useFeaturedPreOrders";
+import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
+export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", }) {
+    const { data: items = [], isLoading } = useFeaturedPreOrders();
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Pre-Order Incoming", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
+}

package/dist/features/homepage/components/FeaturedProductsSection.d.ts

@@ -0,0 +1,8 @@
+export interface FeaturedProductsSectionProps {
+    title?: string;
+    description?: string;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    className?: string;
+}
+export declare function FeaturedProductsSection({ title, description, viewMoreHref, viewMoreLabel, className, }: FeaturedProductsSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedProductsSection.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SectionCarousel } from "./SectionCarousel";
+import { useFeaturedProducts } from "../hooks/useFeaturedProducts";
+import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
+import { ROUTES } from "../../../next";
+export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", }) {
+    const { data, isLoading } = useFeaturedProducts();
+    const items = data?.items ?? [];
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id) })), className: className }));
+}

package/dist/features/homepage/components/FeaturedResultsSection.d.ts

@@ -0,0 +1,17 @@
+/** Minimal result item used by the featured results section. */
+export interface FeaturedResultItem {
+    id?: string;
+    beforeImage: string;
+    afterImage: string;
+    caption?: string;
+    sortOrder?: number;
+}
+export interface FeaturedResultsSectionProps {
+    title: string;
+    subtitle?: string;
+    pillLabel?: string;
+    ornamentLabel?: string;
+    items: FeaturedResultItem[];
+    className?: string;
+}
+export declare function FeaturedResultsSection({ title, subtitle, pillLabel, ornamentLabel, items, className, }: FeaturedResultsSectionProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/features/homepage/components/FeaturedResultsSection.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { Div, Heading, Section, Span, Text, HorizontalScroller } from "../../../ui";
+import { BeforeAfterCard } from "./BeforeAfterCard";
+// --- Sectmon -----------------------------------------------------------------
+export function FeaturedResultsSection({ title, subtitle, pillLabel, ornamentLabel = "✶", items, className = "", }) {
+    const { flex } = THEME_CONSTANTS;
+    const pillCls = "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium uppercase tracking-[0.2em] text-primary-700 backdrop-blur-sm dark:text-primary-400";
+    if (!items.length)
+        return null;
+    return (_jsxs(Section, { className: `px-4 py-16 md:py-20 ${className}`, children: [_jsxs(Div, { className: "mb-12 text-center", children: [pillLabel && (_jsxs(Span, { className: pillCls, children: [_jsx(Span, { className: "inline-block h-1.5 w-1.5 rounded-full bg-primary-500", "aria-hidden": "true" }), pillLabel] })), _jsx(Heading, { level: 2, className: "mt-3 font-display text-4xl text-zinc-900 dark:text-white", children: title }), _jsxs(Div, { className: `mt-3 ${flex.center} gap-2 text-zinc-400 dark:text-zinc-500`, "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: ornamentLabel }), _jsx(Span, { className: "h-px w-6 bg-current" })] }), subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-md text-sm text-zinc-500 dark:text-zinc-400", children: subtitle }))] }), _jsx("div", { className: "mx-auto max-w-7xl", children: _jsx(HorizontalScroller, { items: items, renderItem: (item, i) => (_jsx("div", { className: "w-full sm:w-auto", children: _jsx(BeforeAfterCard, { item: {
+                                id: item.id ?? `result-${i}`,
+                                beforeImage: item.beforeImage,
+                                afterImage: item.afterImage,
+                                caption: item.caption ?? "",
+                                sortOrder: item.sortOrder ?? i,
+                            } }, item.id ?? `result-${i}`) })), keyExtractor: (item, i) => item.id ?? `result-${i}`, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 24, minItemWidth: 260, snapToItems: true, showArrows: true, showFadeEdges: true }) })] }));
+}

package/dist/features/homepage/components/FeaturedStoresSection.d.ts

@@ -0,0 +1,9 @@
+export interface FeaturedStoresSectionProps {
+    title?: string;
+    description?: string;
+    viewMoreHref?: string;
+    viewMoreLabel?: string;
+    limit?: number;
+    className?: string;
+}
+export declare function FeaturedStoresSection({ title, description, viewMoreHref, viewMoreLabel, limit, className, }: FeaturedStoresSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/homepage/components/FeaturedStoresSection.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { THEME_CONSTANTS } from "../../../tokens";
+import { SectionCarousel } from "./SectionCarousel";
+import { useFeaturedStores } from "../hooks/useFeaturedStores";
+import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCard";
+import { ROUTES } from "../../../next";
+export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", }) {
+    const { data: items = [], isLoading } = useFeaturedStores(limit);
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Top Stores", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
+}

package/dist/features/homepage/components/HeroBanner.d.ts

@@ -0,0 +1,7 @@
+import type { Banner } from "../types";
+export interface HeroBannerProps {
+    banners: Banner[];
+    /** Milliseconds between automatic slide advances. Default: 5000. */
+    autoplayMs?: number;
+}
+export declare function HeroBanner({ banners, autoplayMs }: HeroBannerProps): import("react/jsx-runtime").JSX.Element | null;