@mohasinac/appkit 2.1.3 → 2.2.0

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,14 @@
+"use client";
+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", children: [_jsx("div", { className: `h-8 ${skeleton.base} mb-8 max-w-xs mx-auto` }), _jsx("div", { className: "flex gap-6 overflow-hidden", 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", children: [_jsxs("div", { className: "text-center mb-10", 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: { base: 1, sm: 2, md: 3, lg: 3, "2xl": 4 }, gap: 24, autoScroll: true, autoScrollInterval: 4500, pauseOnHover: true, snapToItems: true, showArrows: true, keyExtractor: keyExtractor }), viewMoreHref && (_jsx("div", { className: "text-center mt-8", children: _jsx(TextLink, { href: viewMoreHref, className: "text-sm font-medium text-primary hover:text-primary/80", children: viewMoreLabel }) }))] }) }));
+}

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

@@ -0,0 +1,26 @@
+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;
+    onTabChange: (tab: string) => void;
+    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", children: [_jsxs("div", { className: "text-center mb-8", 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", children: renderTabs() }), _jsxs("div", { className: `${spacing.stack} max-w-5xl mx-auto`, 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"}`, 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"}`, children: _jsx("div", { className: "p-6 pt-0", 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", 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/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, Grid, Heading, Section, Span, Text } 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(Grid, { gap: "lg", className: "mx-auto max-w-7xl grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-4", children: items.map((item, i) => (_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}`))) })] }));
+}

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;

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

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { Button, Div, Heading, Row, Span } from "../../../ui";
+export function HeroBanner({ banners, autoplayMs = 5000 }) {
+    const [current, setCurrent] = useState(0);
+    const [animating, setAnimating] = useState(false);
+    const goTo = useCallback((idx) => {
+        if (animating)
+            return;
+        setAnimating(true);
+        setCurrent(idx);
+        setTimeout(() => setAnimating(false), 600);
+    }, [animating]);
+    const next = useCallback(() => {
+        goTo((current + 1) % banners.length);
+    }, [current, banners.length, goTo]);
+    const prev = useCallback(() => {
+        goTo((current - 1 + banners.length) % banners.length);
+    }, [current, banners.length, goTo]);
+    useEffect(() => {
+        if (banners.length <= 1)
+            return;
+        const id = setInterval(next, autoplayMs);
+        return () => clearInterval(id);
+    }, [next, banners.length, autoplayMs]);
+    if (banners.length === 0)
+        return null;
+    const banner = banners[current];
+    return (_jsxs(Div, { className: "relative overflow-hidden", style: {
+            minHeight: "100svh",
+            background: banner.backgroundColor ?? "var(--dark-section-deep)",
+        }, children: [banners.map((b, i) => (_jsx(Div, { className: "absolute inset-0 transition-opacity duration-700", style: { opacity: i === current ? 1 : 0, zIndex: 1 }, children: b.backgroundImage && (_jsx(Image, { src: b.backgroundImage, alt: b.title, fill: true, className: "object-cover object-center", priority: i === 0, sizes: "100vw" })) }, b.id))), _jsx(Div, { className: "absolute inset-0", style: {
+                    background: "linear-gradient(110deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.18) 100%)",
+                    zIndex: 2,
+                } }), _jsx(Div, { className: "absolute inset-0", style: {
+                    background: "linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 30%, rgba(0,0,0,0.55) 100%)",
+                    zIndex: 3,
+                } }), _jsxs(Div, { className: "relative flex flex-col justify-end px-5 pb-16 sm:px-12 sm:pb-24 lg:px-20", style: {
+                    minHeight: "100svh",
+                    zIndex: 10,
+                    paddingTop: "var(--header-height, 4rem)",
+                }, children: [banner.subtitle && (_jsx(Div, { className: "mb-3", children: _jsx(Span, { className: "inline-block px-3 py-1 text-xs font-black uppercase tracking-[0.18em]", style: {
+                                background: "var(--color-red)",
+                                color: "#FFFFFF",
+                                fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                letterSpacing: "0.16em",
+                            }, children: banner.subtitle }) })), _jsx(Heading, { level: 2, className: "mb-5 max-w-xl leading-none", style: {
+                            fontFamily: "var(--font-bangers, Bangers, cursive)",
+                            fontSize: "clamp(3rem, 9vw, 6.5rem)",
+                            letterSpacing: "0.04em",
+                            color: banner.textColor ?? "#FFFFFF",
+                            textShadow: "0 4px 32px rgba(0,0,0,0.5)",
+                        }, children: banner.title }), banner.ctaLabel && banner.ctaUrl && (_jsx(Row, { wrap: true, gap: "md", children: _jsxs(Link, { href: banner.ctaUrl, className: "inline-flex items-center gap-2 sm:gap-3 px-5 py-3 sm:px-8 sm:py-3.5 font-black uppercase transition-all hover:-translate-y-0.5", style: {
+                                fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                letterSpacing: "0.1em",
+                                fontSize: "clamp(0.85rem, 2.5vw, 1.1rem)",
+                                background: "var(--color-yellow)",
+                                color: "#1A1A1A",
+                                boxShadow: "0 4px 24px rgba(255,229,0,0.35)",
+                            }, children: [banner.ctaLabel, _jsx(Span, { "aria-hidden": "true", className: "text-lg sm:text-xl leading-none", children: "\u2192" })] }) }))] }), banners.length > 1 && (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: prev, "aria-label": "Previous slide", variant: "ghost", size: "sm", className: "absolute left-3 sm:left-6 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full transition-all hover:scale-105", style: {
+                            zIndex: 15,
+                            width: 40,
+                            height: 40,
+                            background: "rgba(255,255,255,0.12)",
+                            border: "1px solid rgba(255,255,255,0.2)",
+                            color: "#ffffff",
+                            backdropFilter: "blur(6px)",
+                        }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { onClick: next, "aria-label": "Next slide", variant: "ghost", size: "sm", className: "absolute right-3 sm:right-6 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full transition-all hover:scale-105", style: {
+                            zIndex: 15,
+                            width: 40,
+                            height: 40,
+                            background: "rgba(255,255,255,0.12)",
+                            border: "1px solid rgba(255,255,255,0.2)",
+                            color: "#ffffff",
+                            backdropFilter: "blur(6px)",
+                        }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] })), banners.length > 1 && (_jsxs(Row, { className: "absolute bottom-8 right-6 sm:right-12 gap-3", style: { zIndex: 15 }, children: [_jsxs(Span, { className: "text-xs font-black tabular-nums", style: {
+                            color: "rgba(255,255,255,0.6)",
+                            fontFamily: "var(--font-bangers, Bangers, cursive)",
+                            letterSpacing: "0.1em",
+                        }, children: [String(current + 1).padStart(2, "0"), " /", " ", String(banners.length).padStart(2, "0")] }), _jsx(Div, { className: "flex gap-1.5", children: banners.map((_, i) => (_jsx(Button, { onClick: () => goTo(i), "aria-label": `Go to slide ${i + 1}`, variant: "ghost", size: "sm", className: "transition-all", style: {
+                                height: 3,
+                                width: i === current ? 28 : 10,
+                                borderRadius: 2,
+                                background: i === current
+                                    ? "var(--color-yellow)"
+                                    : "rgba(255,255,255,0.35)",
+                            } }, i))) })] })), _jsx(Div, { className: "absolute bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1", style: { zIndex: 15, opacity: 0.5 }, "aria-hidden": "true", children: _jsx(Div, { className: "h-8 w-px", style: {
+                        background: "linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8))",
+                    } }) })] }));
+}

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

@@ -0,0 +1,12 @@
+import "client-only";
+import type { CarouselSlide } from "../types/index";
+export interface HeroCarouselProps {
+    initialSlides?: CarouselSlide[];
+    /**
+     * Navigate to an internal path.
+     * Pass `useRouter().push` from your locale-aware router (e.g. `@/i18n/navigation`).
+     * Falls back to `window.location.href` assignment when omitted.
+     */
+    push?: (href: string) => void;
+}
+export declare function HeroCarousel({ initialSlides, push }?: HeroCarouselProps): import("react/jsx-runtime").JSX.Element | null;