// =========================================================================== // App shell: TopNav, Footer, router, theme + tweaks, modal/lightbox state. // =========================================================================== (function () { const { useState, useEffect, useCallback } = React; const DS = window.DinaSFineArtsDesignSystem_85612a; const { Button } = DS; const { Icons, Logo, ArtworkLightbox, InquiryModal } = window; const { Sections, Pages } = window; const D = window.DINA; const NAV = [ ["home", "Home"], ["gallery", "Gallery"], ["pottery", "Pottery"], ["about", "About"], ["contact", "Contact"], ]; // accent emphasis presets (tweakable) const ACCENTS = { clay: "var(--clay)", teal: "var(--teal)", ochre: "var(--ochre)", plum: "var(--plum)", rose: "var(--rose)", }; // ------------------------------------------------------------- NAV -------- function TopNav({ view, go, theme, toggleTheme }) { const [menu, setMenu] = useState(false); const [solid, setSolid] = useState(false); useEffect(() => { const f = () => setSolid(window.scrollY > 8); f(); window.addEventListener("scroll", f, { passive: true }); return () => window.removeEventListener("scroll", f); }, []); const navTo = (v) => { setMenu(false); go(v); }; return React.createElement(React.Fragment, null, [ React.createElement("nav", { key: "nav", className: "nav", style: solid ? {} : { borderColor: "transparent", background: "transparent" } }, React.createElement("div", { className: "nav__inner wrap-wide" }, [ React.createElement(Logo, { key: "logo", size: 30, onClick: () => navTo("home") }), React.createElement("div", { key: "links", className: "nav__links" }, NAV.map(([v, l]) => React.createElement("button", { key: v, className: "nav__link" + (view === v || (v === "gallery" && view === "pottery") ? "" : ""), onClick: () => navTo(v), }, l)).map((el, i) => React.cloneElement(el, { className: "nav__link" + (view === NAV[i][0] ? " active" : "") })), ), React.createElement("div", { key: "right", className: "nav__right" }, [ React.createElement("button", { key: "th", className: "theme-toggle", onClick: toggleTheme, "aria-label": "Toggle dark mode" }, React.createElement(theme === "dark" ? Icons.sun : Icons.moon, { size: 18 })), React.createElement("span", { key: "inq", className: "nav__signin" }, React.createElement(Button, { size: "sm", onClick: () => navTo("contact") }, "Inquire")), React.createElement("button", { key: "burger", className: "nav__burger", onClick: () => setMenu((m) => !m), "aria-label": "Menu" }, React.createElement(menu ? Icons.close : Icons.menu, { size: 22 })), ]), ])), React.createElement("div", { key: "mob", className: "mobile-menu" + (menu ? " open" : "") }, [...NAV.map(([v, l]) => React.createElement("button", { key: v, onClick: () => navTo(v) }, l)), React.createElement(Button, { key: "cta", size: "lg", style: { marginTop: "12px" }, onClick: () => navTo("contact") }, "Inquire")]), ]); } // ------------------------------------------------------------ FOOTER ------ function Footer({ go, onCommission }) { return React.createElement("footer", { style: { background: "var(--surface-soft)", borderTop: "1px solid var(--hairline)", marginTop: "0" } }, [ React.createElement("div", { key: "cta", className: "wrap", style: { paddingTop: "72px", paddingBottom: "56px", textAlign: "center", borderBottom: "1px solid var(--hairline)" } }, [ React.createElement("p", { key: "e", className: "eyebrow" }, "Find the piece that belongs in your home"), React.createElement("h2", { key: "h", className: "display", style: { fontSize: "clamp(32px,4vw,var(--fs-display-lg))", maxWidth: "18ch", margin: "0 auto" } }, "Let\u2019s find, or make, the right one."), React.createElement("div", { key: "b", style: { display: "flex", gap: "12px", justifyContent: "center", marginTop: "26px", flexWrap: "wrap" } }, [ React.createElement(Button, { key: "g", size: "lg", onClick: () => go("gallery") }, "Explore the work"), React.createElement(Button, { key: "c", size: "lg", variant: "secondary", onClick: onCommission }, "Commission a piece"), ]), ]), React.createElement("div", { key: "cols", className: "wrap rgrid-foot", style: { paddingTop: "48px", paddingBottom: "48px", display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: "32px" } }, [ React.createElement("div", { key: "brand" }, [ React.createElement(Logo, { key: "l", size: 30 }), React.createElement("p", { key: "p", style: { color: "var(--muted)", marginTop: "16px", maxWidth: "30ch", lineHeight: 1.55, fontSize: "var(--fs-body-sm)" } }, "Original paintings and hand-thrown pottery from the studio of Dina Mohamed. Made by hand, made to be lived with."), ]), ...[["Explore", [["Gallery", () => go("gallery")], ["Paintings", () => go("gallery", "Paintings")], ["Pottery", () => go("gallery", "Pottery")]]], ["Studio", [["About Dina", () => go("about")], ["Commissions", onCommission], ["Contact", () => go("contact")]]], ["Connect", [[D.contact.instagram, () => window.open(window.igUrl(D.contact.instagram), "_blank", "noopener")], ["Email the studio", () => go("contact")]]]].map(([title, links], i) => React.createElement("div", { key: i }, [ React.createElement("div", { key: "t", style: { fontSize: "12px", letterSpacing: "1.4px", textTransform: "uppercase", color: "var(--muted-soft)", fontWeight: 600, marginBottom: "16px" } }, title), React.createElement("ul", { key: "u", style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "11px" } }, links.map(([lbl, fn], j) => React.createElement("li", { key: j }, React.createElement("button", { onClick: fn, className: "nav__link", style: { color: "var(--muted)", fontSize: "var(--fs-body-sm)" } }, lbl)))), ])), ]), React.createElement("div", { key: "horizon", style: { height: "4px", background: "linear-gradient(90deg, var(--clay), var(--ochre), var(--sage), var(--teal), var(--plum))" } }), React.createElement("div", { key: "fine", className: "wrap", style: { paddingTop: "24px", paddingBottom: "32px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: "10px", alignItems: "center" } }, [ React.createElement("span", { key: "c", style: { fontSize: "13px", color: "var(--muted-soft)" } }, "\u00a9 " + new Date().getFullYear() + " " + D.brand + ". All works \u00a9 Dina Mohamed."), React.createElement("span", { key: "m", style: { fontSize: "13px", color: "var(--muted-soft)", display: "inline-flex", alignItems: "center", gap: "8px" } }, [ "Made by hand \u00b7 one of one", React.createElement("a", { key: "studio", href: "studio-7k9m2x.html", "aria-label": "Studio", title: "Studio", style: { color: "var(--muted-soft)", opacity: 0.55, textDecoration: "none", fontSize: "13px", paddingLeft: "4px" }, }, "\u00b7"), ]), ]), ]); } // -------------------------------------------------------------- APP ------- function App() { const [t, setTweak] = window.useTweaks(window.TWEAK_DEFAULTS); const [view, setView] = useState("home"); const [activeNav, setActiveNav] = useState("home"); const [galleryFilter, setGalleryFilter] = useState(null); const [lightbox, setLightbox] = useState(null); const [inquiry, setInquiry] = useState(undefined); // undefined=closed, null=commission, art=piece // theme const [theme, setTheme] = useState(() => localStorage.getItem("dina-theme") || (t.dark ? "dark" : "light")); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("dina-theme", theme); }, [theme]); // tweak->theme sync useEffect(() => { setTheme(t.dark ? "dark" : "light"); }, [t.dark]); // accent emphasis useEffect(() => { document.documentElement.style.setProperty("--accent", ACCENTS[t.accent] || ACCENTS.clay); }, [t.accent]); // motion useEffect(() => { document.documentElement.classList.toggle("motion-off", !t.motion); }, [t.motion]); const go = useCallback((v, filter) => { if (v === "commission") { setInquiry(null); return; } const target = v === "pottery" ? "gallery" : v; if (v === "gallery" || v === "pottery") setGalleryFilter(v === "pottery" ? "Pottery" : (filter || "All work")); setActiveNav(v === "pottery" ? "pottery" : (v === "gallery" && filter === "Pottery" ? "pottery" : target)); setView(target); window.scrollTo({ top: 0, behavior: window.prefersReduced && window.prefersReduced() ? "auto" : "smooth" }); }, []); const openLightbox = useCallback((art) => setLightbox(art), []); const openInquiry = useCallback((art) => setInquiry(art), []); const onCommission = useCallback(() => setInquiry(null), []); const toggleTheme = () => setTheme((p) => (p === "dark" ? "light" : "dark")); let page; if (view === "home") { page = React.createElement(React.Fragment, null, [ React.createElement(Sections.Hero, { key: "hero", layout: t.hero, onOpen: openLightbox, go }), React.createElement(Sections.FeaturedWork, { key: "feat", onOpen: openLightbox, onInquire: openInquiry, go }), React.createElement(Sections.Collections, { key: "coll", go }), React.createElement(Sections.CommissionBand, { key: "comm", onCommission }), React.createElement(Sections.PotteryStrip, { key: "pot", onOpen: openLightbox, onInquire: openInquiry, go }), React.createElement(Sections.AboutTeaser, { key: "about", go }), ]); } else if (view === "gallery") { page = React.createElement(Pages.Gallery, { key: "g" + (galleryFilter || ""), initialFilter: galleryFilter, onOpen: openLightbox, onInquire: openInquiry }); } else if (view === "about") { page = React.createElement(Pages.About, { go, onCommission }); } else if (view === "contact") { page = React.createElement(Pages.Contact, null); } return React.createElement(React.Fragment, null, [ React.createElement(TopNav, { key: "nav", view: activeNav, go, theme, toggleTheme }), React.createElement("main", { key: "main", id: "top" }, page), React.createElement(Footer, { key: "foot", go, onCommission }), lightbox ? React.createElement(ArtworkLightbox, { key: "lb", art: lightbox, list: D.artworks, onClose: () => setLightbox(null), onNavigate: setLightbox, onInquire: (a) => { setLightbox(null); setInquiry(a); }, }) : null, inquiry !== undefined ? React.createElement(InquiryModal, { key: "iq", art: inquiry, onClose: () => setInquiry(undefined) }) : null, // ---- Tweaks panel ---- React.createElement(window.TweaksPanel, { key: "tw" }, [ React.createElement(window.TweakSection, { key: "s1", label: "Hero layout" }), React.createElement(window.TweakRadio, { key: "hero", label: "Style", value: t.hero, options: ["split", "centered", "fullbleed"], onChange: (v) => { setTweak("hero", v); if (view !== "home") go("home"); }, }), React.createElement(window.TweakSection, { key: "s2", label: "Colour emphasis" }), React.createElement(window.TweakColor, { key: "accent", label: "Dominant accent", value: ACCENTS[t.accent], options: ["#bd6243", "#1f3a34", "#d39a36", "#8a7aa0", "#cf8c84"], onChange: (hex) => { const map = { "#bd6243": "clay", "#1f3a34": "teal", "#d39a36": "ochre", "#8a7aa0": "plum", "#cf8c84": "rose" }; setTweak("accent", map[hex] || "clay"); }, }), React.createElement(window.TweakSection, { key: "s3", label: "Theme & motion" }), React.createElement(window.TweakToggle, { key: "dark", label: "Dark mode", value: theme === "dark", onChange: (v) => setTheme(v ? "dark" : "light") }), React.createElement(window.TweakToggle, { key: "motion", label: "Animations", value: t.motion, onChange: (v) => setTweak("motion", v) }), ]), ]); } window.DinaApp = App; })();