// Shared components for Field & Fur // ─── Placeholder (striped SVG image stand-in) ────────────────────────── function Placeholder({ label, tone = 'cream', aspect = '1 / 1', round = false, style = {}, className = '', children }) { const tones = { cream: '', sage: 'sage', forest: 'forest', gold: 'gold' }; return (
{label} {children}
); } // ─── Logo + paw mark ─────────────────────────────────────────────────── function PawMark({ size = 26, color = 'var(--forest)', accent = 'var(--gold)' }) { return ( ); } function Logo({ size = 22, light = false }) { return (
Ever After Paw
); } // ─── Stars ───────────────────────────────────────────────────────────── function Stars({ value = 5, size = 14, showNumber = false, count = null }) { const full = Math.floor(value); const half = value - full >= 0.5; return ( {[0, 1, 2, 3, 4].map(i => { const fill = i < full ? 'var(--gold)' : (i === full && half ? 'url(#half)' : 'rgba(0,0,0,0.12)'); return ( ); })} {showNumber && ( {value.toFixed(1)} {count != null && · {count.toLocaleString()} reviews} )} ); } // ─── Announcement bar ────────────────────────────────────────────────── function AnnouncementBar() { return (
Free shipping on all Legacy Studio orders · Digital proofs within 24 hours
); } // ─── Header ──────────────────────────────────────────────────────────── function Header() { const { route, navigate, cart, openSearch, openMenu, openMiniCart } = React.useContext(AppCtx); const cartCount = cart.reduce((s, i) => s + i.qty, 0); const links = [ { id: 'home', label: 'Home' }, { id: 'legacy', label: 'Legacy Studio' }, { id: 'about', label: 'Our Story' }, { id: 'contact', label: 'Contact' }, ]; return (
navigate('home')} style={{ cursor: 'default' }}>
); } // ─── Footer ──────────────────────────────────────────────────────────── function Footer() { const { navigate } = React.useContext(AppCtx); const [email, setEmail] = React.useState(''); const [subscribed, setSubscribed] = React.useState(false); const socialLinks = { Instagram: 'https://www.instagram.com/', TikTok: 'https://www.tiktok.com/', Facebook: 'https://www.facebook.com/', Pinterest: 'https://www.pinterest.com/', YouTube: 'https://www.youtube.com/', }; return ( ); } function SocialIcon({ name }) { const s = { width: 16, height: 16, fill: 'none', stroke: '#d5d3c5', strokeWidth: 1.6 }; switch (name) { case 'Instagram': return ; case 'TikTok': return ; case 'Facebook': return ; case 'Pinterest': return ; case 'YouTube': return ; default: return null; } } // ─── Product card ────────────────────────────────────────────────────── function ProductCard({ product, onClick }) { return (
{product.category} {product.badge && {product.badge}}

{product.name}

${product.price.toFixed(2)}
{product.subPrice &&
${product.subPrice.toFixed(2)} subscribed
}
); } // ─── Section header ──────────────────────────────────────────────────── function SectionHeader({ eyebrow, title, lede, align = 'left', action }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{lede &&

{lede}

}
{action}
); } // ─── Trust strip ─────────────────────────────────────────────────────── function TrustStrip() { const items = [ { t: 'Made to Order', d: 'Every keepsake is built from your photos, your dog’s name, and your story.' }, { t: 'Designer-Crafted', d: 'A real designer works on every piece. No templates, no generators.' }, { t: 'Proof in 24 Hours', d: 'Your first digital proof arrives within 24 hours of placing your order.' }, ]; return (
{items.map(it => (

{it.t}

{it.d}

))}
); } function CheckLeaf() { return ( ); } // ─── Catalogue data ──────────────────────────────────────────────────── const UPSELLS = []; const PRODUCTS = []; // ─── Shared global state (cart, route) ──────────────────────────────── const AppCtx = React.createContext(null); Object.assign(window, { Placeholder, PawMark, Logo, Stars, AnnouncementBar, Header, Footer, ProductCard, SectionHeader, TrustStrip, CheckLeaf, SocialIcon, PRODUCTS, UPSELLS, AppCtx, });