@mohasinac/appkit 2.2.0 → 2.3.0

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

@@ -1,309 +0,0 @@
-"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

@@ -1,13 +0,0 @@
-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

@@ -1,14 +0,0 @@
-"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

@@ -1,26 +0,0 @@
-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

@@ -1,20 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-/** 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

@@ -1,18 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,93 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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;