// Store page: Chambliss branded apparel (tees, hoodie, caps) and jobsite gear. // Called "Merch" until the client renamed it; the route is /store and /merch // still resolves here so old links and bookmarks keep working (components.jsx). // // Deliberately NOT a full store yet: "Add to cart" collects items in local // state and the checkout button is a placeholder. When the client is ready to // sell for real, point it at a store by setting window.CHAMBLISS_SHOP_URL (e.g. // a Shopify storefront / cart-permalink) in index.html, same override pattern // the FabTrk embeds use. handleCheckout() then opens it instead of showing the // "coming soon" note; that's the only wiring change needed. const CHECKOUT_URL = (typeof window !== 'undefined' && window.CHAMBLISS_SHOP_URL) || null; // Where the print artwork comes from. Uses the real Chambliss logo; on dark // garments it's knocked out to white via CSS filter (see .store-print-img--knock // in styles.css), on light garments it stays the original steel-blue. const STORE_LOGO = 'assets/img/logo.png'; // Garment palette. `knock: true` → print the logo in white (dark fabrics); // `knock: false` → keep the original blue logo (light fabrics). const STORE_COLORS = { Charcoal: { hex: '#2c2c2e', knock: true }, Black: { hex: '#111113', knock: true }, Steel: { hex: '#868d95', knock: true }, Navy: { hex: '#1b2a3d', knock: true }, Forest: { hex: '#263d31', knock: true }, 'Safety Orange': { hex: '#e15d1c', knock: true }, Sand: { hex: '#d9cfba', knock: false }, White: { hex: '#f1f0ec', knock: false }, // Gear, not apparel: the carbon weave reads near-black with a warm sheen. Carbon: { hex: '#131315', knock: true }, }; const SHIRT_SIZES = ['S', 'M', 'L', 'XL', 'XXL']; // Products carrying a `photo` show real product photography on a studio-white // stage; the rest show the logo on the selected colourway. const PRODUCTS = [ { id: 'tee-pocket', shape: 'shirt', print: 'left', name: 'Pocket Tee', price: 28, blurb: 'Clean left-chest logo. The everyday, wear-it-anywhere option.', colors: ['Black', 'Navy', 'Sand'], sizes: SHIRT_SIZES }, { id: 'tee-classic', shape: 'shirt', print: 'center', name: 'Steel Buildings Tee', price: 30, blurb: 'Heavyweight cotton with the full Chambliss mark across the chest. The classic.', colors: ['White', 'Steel', 'Forest'], sizes: SHIRT_SIZES }, { id: 'hoodie', shape: 'hoodie', print: 'center', name: 'Jobsite Hoodie', price: 54, blurb: 'Midweight fleece pullover for cold mornings on site. Front pocket.', colors: ['Charcoal', 'Black', 'Forest'], sizes: SHIRT_SIZES }, { id: 'cap-structured', shape: 'cap', print: 'center', name: 'Structured Cap', price: 26, blurb: 'Six-panel structured cap with an embroidered front logo.', colors: ['Black', 'Steel', 'Sand'], sizes: ['One size'] }, { id: 'cap-trucker', shape: 'cap', print: 'center', name: 'Trucker Cap', price: 26, blurb: 'Foam-front trucker, mesh back, snapback fit. Summer standard.', colors: ['Black', 'Safety Orange', 'White'], sizes: ['One size'] }, { id: 'hardhat-carbon', shape: 'hardhat', print: 'plate', name: 'Carbon Fiber Full-Brim Hard Hat', price: 115, blurb: 'Glossy carbon-weave shell with a full 360° brim and a brushed steel ' + 'US flag plate. Ratchet suspension, and light enough to forget you have it on.', // TODO(client): confirm the ANSI class + price against the actual SKU before // this goes live. Carbon shells are conductive, so they are Class C, never // Class E. Do not promote it as electrical-rated. spec: 'ANSI Z89.1 · TYPE I · CLASS C', colors: ['Carbon'], sizes: ['One size'], photo: 'assets/img/store/hardhat-carbon-full-brim.jpg' }, ]; // ── Product visual ───────────────────────────────────────────────────── // Apparel shows the Chambliss logo on the selected colourway (knocked white on // dark fabrics, kept steel-blue on light ones) rather than a drawn garment. // Gear with real product photography shows the photo instead. const StoreMockup = ({ product, colorName }) => { const c = STORE_COLORS[colorName] || STORE_COLORS.Charcoal; const showPhoto = !!product.photo; // Apparel sits on its own colourway. Photography gets a white stage, because // the shots are on a white studio backdrop and would otherwise show their own // rectangle floating on the card. const stage = showPhoto ? '#ffffff' : c.hex; // Adapt the corner label to the stage so it stays legible. const label = (!showPhoto && c.knock) ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.5)'; return (
{showPhoto ? ( {`${product.name}, ) : ( {`Chambliss )} {colorName.toUpperCase()}
); }; // ── Product card ─────────────────────────────────────────────────────── const money = (n) => '$' + n; const ProductCard = ({ product, onAdd }) => { const [colorName, setColorName] = React.useState(product.colors[0]); const oneSize = product.sizes.length === 1; const [size, setSize] = React.useState(oneSize ? product.sizes[0] : null); const [needSize, setNeedSize] = React.useState(false); const [added, setAdded] = React.useState(false); const add = () => { if (!oneSize && !size) { setNeedSize(true); return; } setNeedSize(false); onAdd({ id: product.id, name: product.name, price: product.price, color: colorName, size: size || 'One size', }); setAdded(true); if (typeof window !== 'undefined') window.setTimeout(() => setAdded(false), 1400); }; return (

{product.name}

{money(product.price)}

{product.blurb}

{/* Safety rating / spec line, gear only */} {product.spec && ( {product.spec} )} {/* Colour swatches */}
COLOR · {colorName}
{product.colors.map((cn) => (
{/* Sizes */}
{oneSize ? 'FIT' : (needSize ? 'PICK A SIZE' : 'SIZE')} {oneSize ? ( One size · adjustable ) : (
{product.sizes.map((s) => ( ))}
)}
); }; // ── Cart (local only, no live checkout yet) ─────────────────────────── const StoreCart = ({ items, open, setOpen, remove, subtotal }) => { const [notice, setNotice] = React.useState(false); const count = items.reduce((n, i) => n + i.qty, 0); const checkout = () => { if (CHECKOUT_URL) { window.open(CHECKOUT_URL, '_blank', 'noopener'); return; } setNotice(true); }; return ( <> {/* Floating toggle */} {open &&
setOpen(false)} />} ); }; // ── Page ─────────────────────────────────────────────────────────────── const StoreHero = () => (

Chambliss Steel Buildings
store.

); const Store = ({ setRoute }) => { const [items, setItems] = React.useState([]); const [open, setOpen] = React.useState(false); const add = (item) => { const key = `${item.id}|${item.color}|${item.size}`; setItems((prev) => { const found = prev.find((l) => l.key === key); if (found) return prev.map((l) => (l.key === key ? { ...l, qty: l.qty + 1 } : l)); return [...prev, { ...item, key, qty: 1 }]; }); setOpen(true); // surface the cart so the add is visible }; const remove = (key) => setItems((prev) => prev.filter((l) => l.key !== key)); const subtotal = items.reduce((n, i) => n + i.price * i.qty, 0); return (
{PRODUCTS.map((p) => ( ))}
{/* Cross-sell back to the core business */}

Here for a building, not a t-shirt?
Let’s talk steel.

); }; Object.assign(window, { Store });