// =========================================================================== // Shared UI: custom Logo (line-art vessel), ArtCard, ArtworkLightbox, // InquiryModal, SectionHead. Composes the design-system primitives. // =========================================================================== (function () { const { useState, useEffect } = React; const DS = window.DinaSFineArtsDesignSystem_85612a; const { Button, Badge, Input, Textarea, Select } = DS; const { Icons, Reveal } = window; // ---------- Logo: stacked "D / M" serif monogram + wordmark ---------- function Logo({ size = 34, stacked = true, onClick }) { const mark = React.createElement("svg", { width: size * 0.92, height: size * 1.16, viewBox: "0 0 40 46", fill: "none", "aria-hidden": "true", style: { flexShrink: 0, display: "block" }, }, [ React.createElement("text", { key: "d", x: 20, y: 14, textAnchor: "middle", dominantBaseline: "central", style: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontWeight: 600, fontSize: "21px", fill: "var(--ink)" }, }, "D"), React.createElement("line", { key: "r", x1: 9, y1: 24, x2: 31, y2: 24, stroke: "var(--accent)", strokeWidth: 1.8 }), React.createElement("text", { key: "m", x: 20, y: 34, textAnchor: "middle", dominantBaseline: "central", style: { fontFamily: "'Cormorant Garamond', Georgia, serif", fontWeight: 600, fontSize: "21px", fill: "var(--ink)" }, }, "M"), ]); const word = React.createElement("span", { style: { display: "inline-flex", flexDirection: "column", lineHeight: 1 }, }, [ React.createElement("span", { key: "n", style: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: size * 0.62, letterSpacing: "-0.8px", color: "var(--ink)", }, }, "Dina\u2019s"), React.createElement("span", { key: "f", style: { fontFamily: "var(--font-body)", fontWeight: 600, fontSize: size * 0.255, letterSpacing: "3px", textTransform: "uppercase", color: "var(--muted)", marginTop: "4px", }, }, "Fine Art"), ]); return React.createElement("span", { onClick, style: { display: "inline-flex", alignItems: "center", gap: "12px", cursor: onClick ? "pointer" : "default" }, }, stacked ? [React.cloneElement(mark, { key: "mark" }), React.cloneElement(word, { key: "word" })] : [React.cloneElement(mark, { key: "mark" })]); } // ---------- Section heading ---------- function SectionHead({ eyebrow, title, sub, action, onAction, align = "left", size = "var(--fs-display-md)" }) { return React.createElement("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: "20px", marginBottom: "var(--space-xl)", flexWrap: "wrap", flexDirection: align === "center" ? "column" : "row", textAlign: align, }, }, [ React.createElement("div", { key: "t", style: align === "center" ? { maxWidth: "640px" } : {} }, [ eyebrow ? React.createElement("p", { key: "e", className: "eyebrow" }, eyebrow) : null, React.createElement("h2", { key: "h", className: "display", style: { fontSize: size, letterSpacing: "-1px" } }, title), sub ? React.createElement("p", { key: "s", className: "lead", style: { marginTop: "14px", color: "var(--muted)" } }, sub) : null, ]), action ? React.createElement("button", { key: "a", className: "nav__link", onClick: onAction, style: { color: "var(--ink)", fontWeight: 600, whiteSpace: "nowrap" }, }, [action, " ", React.createElement(Icons.arrow, { key: "i", size: 16, style: { verticalAlign: "-2px", marginLeft: "4px" } })]) : null, ]); } // ---------- ArtCard ---------- function ArtCard({ art, mode = "uniform", onOpen, onInquire, delay = 0 }) { const sold = art.status === "sold"; const hoverImg = (art.hoverSwap && art.images && art.images.length > 1) ? art.images[1] : null; const ratio = mode === "masonry" ? art.ratio.replace("/", "/") : "4 / 5"; return React.createElement(Reveal, { variant: "scale", delay, style: { height: "100%" } }, React.createElement("article", { className: "artcard" + (sold ? " sold" : "") + (hoverImg ? " has-swap" : ""), onClick: () => onOpen(art), role: "button", tabIndex: 0, onKeyDown: (e) => { if (e.key === "Enter") onOpen(art); }, }, [ React.createElement("div", { key: "m", className: "artcard__media", style: { aspectRatio: mode === "masonry" ? art.ratio : "4 / 5" }, }, [ React.createElement("img", { key: "img", src: art.image, alt: art.title + " — " + art.medium, loading: "lazy" }), hoverImg ? React.createElement("img", { key: "img2", className: "artcard__hoverimg", src: hoverImg, alt: "", loading: "lazy" }) : null, React.createElement("div", { key: "b", className: "artcard__badge" }, React.createElement(Badge, { tone: sold ? "neutral" : (art.tags.includes("Sculpture") ? "ochre" : "sage") }, sold ? "Sold" : "Available")), React.createElement("span", { key: "v", className: "artcard__view" }, ["View piece", React.createElement(Icons.arrowUpRight, { key: "i", size: 14 })]), ]), React.createElement("div", { key: "body", className: "artcard__body" }, [ React.createElement("h3", { key: "t", className: "artcard__title" }, art.title), React.createElement("p", { key: "med", className: "artcard__meta" }, art.medium), React.createElement("p", { key: "d", className: "artcard__dims" }, art.dimensions + " · " + art.year), React.createElement("div", { key: "f", className: "artcard__foot" }, [ React.createElement("span", { key: "p", className: "artcard__price", style: sold ? { color: "var(--muted-soft)" } : {} }, art.price), React.createElement(Button, { key: "btn", size: "sm", variant: sold ? "secondary" : "primary", disabled: sold, onClick: (e) => { e.stopPropagation(); if (!sold) onInquire(art); }, }, sold ? "Sold" : "Inquire"), ]), ]), ])); } // ---------- Artwork detail lightbox ---------- function ArtworkLightbox({ art, list, onClose, onNavigate, onInquire }) { const [photoIdx, setPhotoIdx] = useState(0); useEffect(() => { setPhotoIdx(0); }, [art && art.id]); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowRight") step(1); if (e.key === "ArrowLeft") step(-1); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }); if (!art) return null; const photos = (art.images && art.images.length) ? art.images : [art.image]; const idx = list.findIndex((a) => a.id === art.id); const step = (d) => { const n = (idx + d + list.length) % list.length; onNavigate(list[n]); }; const sold = art.status === "sold"; const related = list.filter((a) => a.id !== art.id && a.category === art.category).slice(0, 3); return React.createElement("div", { className: "lightbox", role: "dialog", "aria-label": art.title }, [ React.createElement("div", { key: "img", className: "lightbox__img", onClick: onClose, style: { display: "flex", flexDirection: "column" } }, [ React.createElement("div", { key: "main", className: "lightbox__main", style: { flex: 1, minHeight: 0, width: "100%", display: "grid", placeItems: "center", position: "relative" } }, [ React.createElement("button", { key: "xm", className: "lb-close-mobile", "aria-label": "Close", onClick: (e) => { e.stopPropagation(); onClose(); } }, React.createElement(Icons.close, { size: 20 })), React.createElement("img", { key: "i", src: photos[photoIdx], alt: art.title, onClick: (e) => e.stopPropagation(), style: { maxWidth: "100%", maxHeight: photos.length > 1 ? "74vh" : "86vh", objectFit: "contain", borderRadius: "4px", boxShadow: "var(--shadow-lift)" } }), photos.length > 1 ? React.createElement("button", { key: "pp", className: "lb-photo-nav", style: { left: "10px" }, "aria-label": "Previous photo", onClick: (e) => { e.stopPropagation(); setPhotoIdx((photoIdx - 1 + photos.length) % photos.length); } }, React.createElement(Icons.chevronLeft, { size: 20 })) : null, photos.length > 1 ? React.createElement("button", { key: "nn", className: "lb-photo-nav", style: { right: "10px" }, "aria-label": "Next photo", onClick: (e) => { e.stopPropagation(); setPhotoIdx((photoIdx + 1) % photos.length); } }, React.createElement(Icons.chevronRight, { size: 20 })) : null, photos.length > 1 ? React.createElement("div", { key: "count", style: { position: "absolute", bottom: "10px", left: "50%", transform: "translateX(-50%)", background: "rgba(20,20,18,.6)", color: "#fff", fontSize: "12px", padding: "4px 10px", borderRadius: "999px", letterSpacing: "0.5px" } }, (photoIdx + 1) + " / " + photos.length) : null, ]), photos.length > 1 ? React.createElement("div", { key: "thumbs", onClick: (e) => e.stopPropagation(), style: { display: "flex", gap: "8px", justifyContent: "center", marginTop: "14px", flexWrap: "wrap" } }, photos.map((p, i) => React.createElement("button", { key: i, onClick: () => setPhotoIdx(i), "aria-label": "Photo " + (i + 1), style: { width: "56px", height: "56px", padding: 0, borderRadius: "8px", overflow: "hidden", cursor: "pointer", background: "none", border: i === photoIdx ? "2px solid var(--accent)" : "2px solid transparent", opacity: i === photoIdx ? 1 : 0.6, transition: "opacity .2s" }, }, React.createElement("img", { src: p, alt: "", style: { width: "100%", height: "100%", objectFit: "cover" } })))) : null, ]), React.createElement("div", { key: "panel", className: "lightbox__panel" }, [ React.createElement("div", { key: "top", style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "28px" } }, [ React.createElement("div", { key: "nav", style: { display: "flex", gap: "8px" } }, [ React.createElement("button", { key: "p", className: "theme-toggle", onClick: () => step(-1), "aria-label": "Previous" }, React.createElement(Icons.chevronLeft, { size: 18 })), React.createElement("button", { key: "n", className: "theme-toggle", onClick: () => step(1), "aria-label": "Next" }, React.createElement(Icons.chevronRight, { size: 18 })), ]), React.createElement("button", { key: "x", className: "theme-toggle", onClick: onClose, "aria-label": "Close" }, React.createElement(Icons.close, { size: 18 })), ]), React.createElement("p", { key: "eb", className: "eyebrow" }, art.category + (art.tags.includes("Sculpture") ? " · Sculpture" : "")), React.createElement("h2", { key: "t", className: "display", style: { fontSize: "var(--fs-display-md)" } }, art.title), React.createElement("p", { key: "blurb", className: "lead", style: { marginTop: "16px", color: "var(--body)" } }, art.blurb), React.createElement("dl", { key: "spec", style: { margin: "28px 0 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "18px 24px" } }, [["Medium", art.medium], ["Dimensions", art.dimensions], ["Year", String(art.year)], ["Status", sold ? "Sold" : "Available — one of one"]].map(([k, v], i) => React.createElement("div", { key: i }, [ React.createElement("dt", { key: "k", style: { fontSize: "var(--fs-caption-uc)", letterSpacing: "1.4px", textTransform: "uppercase", color: "var(--muted-soft)", fontWeight: 600, marginBottom: "6px" } }, k), React.createElement("dd", { key: "v", style: { margin: 0, fontSize: "var(--fs-body-md)", color: "var(--ink)", fontWeight: 500 } }, v), ]))), React.createElement("hr", { key: "hr", className: "divider", style: { margin: "28px 0" } }), React.createElement("div", { key: "buy", style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: "16px", flexWrap: "wrap" } }, [ React.createElement("span", { key: "p", style: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "var(--fs-display-sm)", color: "var(--ink)", letterSpacing: "-0.5px" } }, sold ? "Sold" : art.price), React.createElement(Button, { key: "b", size: "lg", disabled: sold, onClick: () => onInquire(art) }, sold ? "Join the waitlist" : "Inquire about this piece"), ]), related.length ? React.createElement("div", { key: "rel", style: { marginTop: "44px" } }, [ React.createElement("p", { key: "h", className: "eyebrow" }, "More from the studio"), React.createElement("div", { key: "g", style: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "12px" } }, related.map((r) => React.createElement("button", { key: r.id, onClick: () => onNavigate(r), style: { padding: 0, border: "none", background: "none", cursor: "pointer", borderRadius: "var(--radius-md)", overflow: "hidden", aspectRatio: "1/1" }, }, React.createElement("img", { src: r.image, alt: r.title, style: { width: "100%", height: "100%", objectFit: "cover" } })))), ]) : null, ]), ]); } // ---------- Inquiry modal ---------- function InquiryModal({ art, onClose }) { const [sent, setSent] = useState(false); const [busy, setBusy] = useState(false); const [err, setErr] = useState(""); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; document.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, []); const isCommission = !art; const title = isCommission ? "Start a commission" : "Inquire — " + art.title; return React.createElement("div", { className: "overlay", onClick: onClose }, React.createElement("div", { className: "modal", onClick: (e) => e.stopPropagation() }, sent ? React.createElement("div", { style: { textAlign: "center", padding: "20px 8px" } }, [ React.createElement("div", { key: "i", style: { width: 56, height: 56, borderRadius: "50%", background: "var(--accent)", color: "#fff", display: "grid", placeItems: "center", margin: "0 auto 20px" } }, React.createElement(Icons.check, { size: 26 })), React.createElement("h3", { key: "t", className: "display", style: { fontSize: "var(--fs-display-sm)" } }, "Thank you \u2014 message received"), React.createElement("p", { key: "p", className: "lead", style: { marginTop: "12px", color: "var(--muted)" } }, DINA.contact.note + " I\u2019ll be in touch within a day or two."), React.createElement("div", { key: "b", style: { marginTop: "24px" } }, React.createElement(Button, { onClick: onClose }, "Close")), ]) : React.createElement("form", { onSubmit: async (e) => { e.preventDefault(); if (busy) return; const fd = new FormData(e.target); const subject = isCommission ? "Commission inquiry — Dina's Fine Art" : ("Inquiry: \u201c" + (art ? art.title : "a piece") + "\u201d"); setBusy(true); setErr(""); try { await window.sendStudioForm({ subject: subject, from_name: fd.get("name") || "Studio website", name: fd.get("name"), email: fd.get("email"), piece: art ? (art.title + " — " + art.medium + ", " + art.dimensions + " (" + art.price + ")") : "Commission", budget: fd.get("budget"), message: fd.get("message"), }); setSent(true); } catch (ex) { setErr("Couldn\u2019t send that. Please email " + DINA.contact.email + " directly."); } finally { setBusy(false); } } }, [ React.createElement("div", { key: "head", style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "16px", marginBottom: "12px" } }, [ React.createElement("div", { key: "h", style: { paddingRight: "4px" } }, [ React.createElement("p", { key: "e", className: "eyebrow", style: { marginBottom: "8px" } }, isCommission ? "Commissions" : "Inquiry"), React.createElement("h3", { key: "t", className: "display", style: { fontSize: "var(--fs-title-lg)", lineHeight: 1.2 } }, title), ]), React.createElement("button", { key: "x", type: "button", className: "theme-toggle", onClick: onClose, "aria-label": "Close" }, React.createElement(Icons.close, { size: 18 })), ]), art ? React.createElement("p", { key: "ctx", className: "lead", style: { color: "var(--muted)", marginBottom: "8px" } }, art.medium + " · " + art.dimensions + " · " + art.price) : React.createElement("p", { key: "ctx", className: "lead", style: { color: "var(--muted)", marginBottom: "8px" } }, "Tell me your room, your light and your palette — I\u2019ll make something for it."), React.createElement("div", { key: "fields", style: { display: "flex", flexDirection: "column", gap: "16px", marginTop: "12px" } }, [ React.createElement(Input, { key: "n", name: "name", label: "Your name", placeholder: "First and last", required: true }), React.createElement(Input, { key: "e", name: "email", label: "Email", type: "email", placeholder: "you@example.com", required: true }), isCommission ? React.createElement(Select, { key: "b", name: "budget", label: "Rough budget", options: ["Under $500", "$500 – $1,500", "$1,500 – $3,000", "$3,000+", "Not sure yet"] }) : null, React.createElement(Textarea, { key: "m", name: "message", label: "Message", rows: 4, defaultValue: art ? "Hi Dina, I\u2019d love to know more about \u201C" + art.title + "\u201D." : "Hi Dina, I\u2019d love to talk about a commission." }), ]), React.createElement("div", { key: "submit", style: { marginTop: "22px", display: "flex", gap: "12px", flexWrap: "wrap", alignItems: "center" } }, [ React.createElement(Button, { key: "s", type: "submit", size: "lg" }, busy ? "Sending…" : "Send to the studio"), React.createElement(Button, { key: "c", type: "button", size: "lg", variant: "secondary", onClick: onClose }, "Cancel"), err ? React.createElement("p", { key: "err", style: { color: "var(--error)", fontSize: "var(--fs-body-sm)", margin: "4px 0 0", flexBasis: "100%" } }, err) : null, ]), ]))); } window.Logo = Logo; window.SectionHead = SectionHead; window.ArtCard = ArtCard; window.ArtworkLightbox = ArtworkLightbox; window.InquiryModal = InquiryModal; })();