const { useState, useEffect, useRef, useCallback, useMemo } = React; // ─── Router (hash-based) ───────────────────────────────────────────── const useHashRoute = () => { const [hash, setHash] = useState(() => window.location.hash.slice(1) || "/"); useEffect(() => { const on = () => { setHash(window.location.hash.slice(1) || "/"); window.scrollTo({ top: 0, behavior: "instant" }); }; window.addEventListener("hashchange", on); return () => window.removeEventListener("hashchange", on); }, []); return hash; }; const navigate = (path) => { window.location.hash = path; }; const Link = ({ to, children, className = "", ...rest }) => ( { // let modifier-clicks behave normally if (e.metaKey || e.ctrlKey || e.shiftKey) return; e.preventDefault(); if (window.location.hash === `#${to}`) { window.scrollTo({ top: 0, behavior: "smooth" }); } else { navigate(to); } }} className={className} {...rest} > {children} ); // ─── Wordmark ──────────────────────────────────────────────────────── const Wordmark = ({ className = "", color = "#2C3E50", small = false }) => ( Chris' Craft Custom Framing ); // ─── Eyebrow ───────────────────────────────────────────────────────── const Eyebrow = ({ children, className = "", as: As = "div" }) => ( {children} ); // ─── Button ────────────────────────────────────────────────────────── const Button = ({ children, variant = "primary", href, to, onClick, className = "", small = false, ...rest }) => { const base = `inline-flex items-center justify-center gap-2 font-sans font-medium transition-all duration-200 ${small ? "px-5 py-2.5 text-[13px]" : "px-7 py-3.5 text-[14px]"} tracking-[0.08em] uppercase`; const styles = { primary: "bg-navy text-bg hover:bg-navy-d", ghost: "border border-navy text-navy hover:bg-navy hover:text-bg", light: "border border-white/40 text-white hover:bg-white hover:text-navy", }[variant]; const cls = `${base} ${styles} ${className}`; if (to) return {children}; if (href) return {children}; return ; }; // ─── Utility bar ───────────────────────────────────────────────────── const UtilityBar = () => (
Dallas · Park Cities · Since {BIZ.established}
Park Cities · Since {BIZ.established}
{BIZ.phone} · Instagram
); // ─── Navbar ────────────────────────────────────────────────────────── const NAV_ITEMS = [ { to: "/our-craft", label: "Our Craft" }, { to: "/behind-the-frame", label: "Behind the Frame" }, { to: "/reviews", label: "Reviews" }, { to: "visualizer", label: "Visualizer", external: true }, { to: "/get-in-touch", label: "Visit" }, ]; const Navbar = () => { const route = useHashRoute(); const [scrolled, setScrolled] = useState(false); const [open, setOpen] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 8); on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, []); useEffect(() => { setOpen(false); }, [route]); return ( <>
{/* mobile drawer */}
{NAV_ITEMS.map((it) => ( {it.label} ))}
{BIZ.phone} Instagram
); }; // ─── Footer ────────────────────────────────────────────────────────── const Footer = () => ( ); // ─── Reveal-on-scroll wrapper ──────────────────────────────────────── const Reveal = ({ children, delay = 0, y = 18, className = "", as: As = "div" }) => { const ref = useRef(null); const [shown, setShown] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }); }, { threshold: 0.12 } ); io.observe(el); return () => io.disconnect(); }, []); return ( {children} ); }; // ─── Lightbox ──────────────────────────────────────────────────────── const Lightbox = ({ images, index, onClose, onPrev, onNext }) => { useEffect(() => { if (index == null) return; const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowLeft") onPrev(); if (e.key === "ArrowRight") onNext(); }; window.addEventListener("keydown", onKey); document.body.style.overflow = "hidden"; return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; }; }, [index, onClose, onPrev, onNext]); // Touch swipe const touchRef = useRef({ x: 0 }); if (index == null) return null; return (
e.stopPropagation()} onTouchStart={(e) => { touchRef.current.x = e.touches[0].clientX; }} onTouchEnd={(e) => { const dx = e.changedTouches[0].clientX - touchRef.current.x; if (dx > 40) onPrev(); else if (dx < -40) onNext(); }} >
{index + 1} / {images.length}
); }; const useLightbox = (images) => { const [idx, setIdx] = useState(null); const open = (i) => setIdx(i); const close = () => setIdx(null); const prev = () => setIdx((i) => (i - 1 + images.length) % images.length); const next = () => setIdx((i) => (i + 1) % images.length); const node = ; return { open, node }; }; // ─── Portfolio Grid (masonry-ish) ──────────────────────────────────── const PortfolioGrid = ({ images, onOpen, columns = 4, gap = "gap-3 md:gap-5" }) => { // distribute images into N columns to fake masonry const cols = useMemo(() => { const c = Array.from({ length: columns }, () => []); images.forEach((src, i) => c[i % columns].push({ src, idx: i })); return c; }, [images, columns]); return (
{cols.map((col, ci) => (
{col.map(({ src, idx }) => ( ))}
))}
); }; // ─── Quote / Pull quote ────────────────────────────────────────────── const PullQuote = ({ children, attribution }) => (
"{children}"
{attribution && (
— {attribution}
)}
); // ─── Testimonial card ──────────────────────────────────────────────── const TestimonialCard = ({ t, large = false }) => (
{[0,1,2,3,4].map((i) => ( ))}
"{t.quote}"
{t.name}
{t.source} · {t.role}
); // ─── Section header ────────────────────────────────────────────────── const PageHeader = ({ eyebrow, italicLead, rest, sub }) => (
{eyebrow}

{italicLead}{rest && {rest}}

{sub && (

{sub}

)}
); // ─── Consultation Form ─────────────────────────────────────────────── const ConsultationForm = ({ compact = false }) => { const [state, setState] = useState({ first: "", last: "", email: "", message: "" }); const [sent, setSent] = useState(false); const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => setSent(false), 4000); }; if (sent) { return (
Sent

Thanks — Maureen will be in touch.

We'll reach out within one business day to coordinate a time for your private consultation.

); } return (
{!compact && (