// ChainLine — Logo glyph (chainlink mark) const ChainLogo = ({ size = 22, color = "currentColor" }) => ( ); // Brand wordmark — uses the real ChainLine Cycle logo const Wordmark = () => ( { e.preventDefault(); window.cl.go("home"); }} className="nav-logo" data-cursor="link" aria-label="ChainLine Cycle — Home"> ChainLine Cycle ); // Announcement bar (rotating) const Announce = () => { const messages = [ "Free shipping over $150", "Book a service online — same-week slots open", "Now taking demo bookings for spring 2026", "Winter storage program — sign up before Nov 15", ]; const [i, setI] = React.useState(0); React.useEffect(() => { const t = setInterval(() => setI((x) => (x + 1) % messages.length), 4200); return () => clearInterval(t); }, []); return (
{messages.map((m, idx) => (
{m}
))}
); }; // Header / Nav const Header = ({ page, scrolled, onCart, cartCount, onMobile, onMega, megaOpen, onSearch }) => { const items = [ { id: "shop", label: "Shop", panel: "shop" }, { id: "services", label: "Services", panel: "services" }, { id: "explore", label: "Explore", panel: "explore" }, { id: "about", label: "About", panel: null, route: "about" }, ]; const closeTimer = React.useRef(null); const openMega = (p) => { if (closeTimer.current) clearTimeout(closeTimer.current); onMega(p); }; const scheduleClose = () => { if (closeTimer.current) clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => onMega(null), 180); }; return (
); }; const SearchIcon = () => ( ); const ArrowRight = ({ size = 12 }) => ( ); const MegaMenu = ({ open, onOpen, onClose }) => { const data = { shop: { cols: [ { h: "Bikes", items: ["All Bikes", "Mountain", "Road", "Gravel", "E-Bike", "Commuter", "Kids"] }, { h: "Parts & Accessories", items: ["Helmets & Protection", "Apparel", "Components", "Tools", "Bags & Racks", "Lights"] }, { h: "More", items: ["Sale", "Gift Cards", "Classifieds"], feature: { label: "FEATURED / THE LINEUP", title: "2026 Marin Rift Zone" } }, ], }, services: { cols: [ { h: "Book", items: ["Book a Service", "Book a Fitting", "Book a Demo", "Book Storage"] }, { h: "Service Menu", items: ["Tune-Ups", "Drivetrain", "Suspension", "Wheels & Tubeless", "Custom Builds"] }, { h: "Programs", items: ["Bike Fitting", "Storage", "Demo Fleet", "Warranty"], feature: { label: "AVAILABILITY / THIS WEEK", title: "12 service slots open" } }, ], }, explore: { cols: [ { h: "Community", items: ["Group Rides", "Strava Club", "Skill Clinics", "Events"] }, { h: "Trails", items: ["Knox Mountain", "Bear Creek", "Myra Canyon", "Kelowna Bike Park"] }, { h: "Stories", items: ["Journal", "Trail Conditions", "Classifieds"], feature: { label: "FIELD NOTES / APRIL 2026", title: "First Light on Knox" } }, ], }, }; // map a label to a route + optional filter intent const routeFor = (label) => { const l = label.toLowerCase(); // Shop sub-categories with type filter if (l === "all bikes" || l === "bikes") return ["shop", { type: "All" }]; if (l === "mountain") return ["shop", { type: "Mountain" }]; if (l === "road") return ["shop", { type: "Road" }]; if (l === "gravel") return ["shop", { type: "Gravel" }]; if (l === "e-bike" || l === "ebike") return ["shop", { type: "E-Bike" }]; if (l === "commuter") return ["shop", { type: "Commuter" }]; if (l === "kids") return ["shop", { type: "Kids" }]; // Brand filters in mega if (["marin", "transition", "surly", "salsa", "pivot", "bianchi", "moots"].includes(l)) return ["brands", null]; // Parts / accessories — generic shop view if (l.includes("gift")) return ["giftcards", null]; if (l.includes("classified")) return ["classifieds", null]; if (l.includes("sale")) return ["shop", null]; if (l.includes("helmet") || l.includes("apparel") || l.includes("component") || l.includes("tool") || l.includes("bag") || l.includes("light")) return ["parts", null]; // Services / book if (l.startsWith("book")) return ["book", null]; if (l.includes("tune") || l.includes("drivetrain") || l.includes("suspension") || l.includes("wheel") || l.includes("custom") || l.includes("warranty") || l.includes("fit") || l.includes("storage") || l.includes("demo")) return ["services", null]; // Explore if (l.includes("ride") || l.includes("strava") || l.includes("clinic") || l.includes("event")) return ["rides", null]; if (l.includes("trail") || l.includes("knox") || l.includes("bear") || l.includes("myra") || l.includes("park") || l.includes("condition")) return ["trails", null]; if (l.includes("journal") || l.includes("stories") || l.includes("note")) return ["home", null]; return ["home", null]; }; const handleClick = (e, label) => { e.preventDefault(); onClose(); const [route, intent] = routeFor(label); window.cl.go(route, intent); }; const d = open && data[open]; return (
onOpen(open)} onMouseLeave={onClose}> {d && (
{d.cols.slice(0, 2).map((c, i) => (

{c.h}

))}

{d.cols[2].h}

handleClick(e, d.cols[2].feature.title)} className="mega-feature ph ph-corners" style={{ aspectRatio: "16/8", display: "flex", alignItems: "flex-end", padding: 24, textDecoration: "none" }}>
{d.cols[2].feature.label}
{d.cols[2].feature.title}
PHOTO / 16x8
)}
); }; // Mobile nav const MobileNav = ({ open, onClose }) => (
ChainLine Cycle
{[ { label: "Shop", route: "shop" }, { label: "Parts & Accessories", route: "parts" }, { label: "Our Brands", route: "brands" }, { label: "Services", route: "services" }, { label: "Book Online", route: "book" }, { label: "Group Rides", route: "rides" }, { label: "Trails", route: "trails" }, { label: "Classifieds", route: "classifieds" }, { label: "About", route: "about" }, { label: "Contact", route: "contact" }, ].map((l) => ( { e.preventDefault(); onClose(); window.cl.go(l.route); }}>{l.label} ))}
MON–SAT 10–6 IG · STRAVA · FB
); // Sticky Book button (after hero) const StickyCTA = ({ show }) => (
); // Cart drawer const CartDrawer = ({ open, onClose, items, onRemove }) => { const subtotal = items.reduce((s, i) => s + (i.price || 0) * (i.qty || 1), 0); return ( <>
); }; // Footer const Footer = () => ( ); // Reveal hook — IntersectionObserver wrapper const useReveal = () => { React.useEffect(() => { const els = document.querySelectorAll(".reveal:not(.in)"); const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12 }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }); }; // Split text on load const SplitText = ({ children, delay = 0, go = true, className = "" }) => { const chars = String(children).split(""); return ( {chars.map((c, i) => ( {c === " " ? "\u00A0" : c} ))} ); }; // Counter const Counter = ({ to, suffix = "", prefix = "", duration = 1600 }) => { const ref = React.useRef(null); const [val, setVal] = React.useState(0); const started = React.useRef(false); React.useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting && !started.current) { started.current = true; const start = performance.now(); const tick = (now) => { const t = Math.min((now - start) / duration, 1); const eased = 1 - Math.pow(1 - t, 3); setVal(Math.floor(eased * to)); if (t < 1) requestAnimationFrame(tick); else setVal(to); }; requestAnimationFrame(tick); } }); }, { threshold: 0.5 }); if (ref.current) io.observe(ref.current); return () => io.disconnect(); }, [to, duration]); return {prefix}{val.toLocaleString()}{suffix}; }; // Brand marquee const BrandMarquee = ({ fast }) => { const brands = ["MARIN", "TRANSITION", "SURLY", "SALSA", "PIVOT", "BIANCHI", "MOOTS", "KNOLLY", "REVEL"]; const renderRow = (k) => (
{brands.map((b, i) => ( {b} ))}
); return (
{renderRow(0)} {renderRow(1)}
); }; // Chat widget const ChatWidget = () => { const [open, setOpen] = React.useState(false); const [msgs, setMsgs] = React.useState([ { role: "bot", text: "Hey! I'm the ChainLine assistant. Ask me about bikes, services, hours, or anything shop-related." } ]); const [input, setInput] = React.useState(""); const bottomRef = React.useRef(null); React.useEffect(() => { if (bottomRef.current) bottomRef.current.scrollIntoView({ behavior: "smooth" }); }, [msgs, open]); const respond = (q) => { const l = q.toLowerCase(); if (/hour|open|clos|when/.test(l)) return "Mon 10–5 · Tue–Fri 9:30–5:30 · Sat 10–4 · Sun closed."; if (/address|where|location|find us|directions/.test(l)) return "We're at 1139 Ellis St, Kelowna, BC V1Y 1Z5 — downtown Kelowna. Click 'Get Directions' on our Contact page."; if (/phone|call/.test(l)) return "Call us at (250) 860-1968 — we answer our own phone!"; if (/email/.test(l)) return "Reach us at bikes@chainline.ca. We reply same day."; if (/book|appoint|schedule/.test(l)) return "You can book a service, fitting, demo, or storage online — just head to the Book page! Or call (250) 860-1968."; if (/tune|service|repair|mechanic|overhaul/.test(l)) return "We do everything from basic tune-ups ($89) to full overhauls ($425). Same-day turnaround for most tune-ups. Book online!"; if (/fit|fitting|sizing|position/.test(l)) return "We offer professional bike fitting: Position Check $80, Road/Gravel Fit $220, MTB Fit $220, Full Body + Video $380."; if (/demo|test ride/.test(l)) return "We have a 12-bike demo fleet you can take out on the trails. Book a demo ride on the Book page!"; if (/storage|winter|store my/.test(l)) return "Our winter storage program runs Oct–spring. Climate-controlled, locked, monthly battery checks for e-bikes. Book it online."; if (/warranty|defect|broken|recall/.test(l)) return "All bikes carry full manufacturer warranties — typically lifetime or 5-year frame, 1–2 year components. Bring it in and we'll handle it."; if (/brand|carry|stock|marin|transition|surly|salsa|pivot|bianchi|moots|knolly|revel/.test(l)) return "We carry Marin, Transition, Surly, Salsa, Pivot, Bianchi, Moots, Knolly, and Revel. Browse the Shop page for current inventory."; if (/price|cost|how much/.test(l)) return "Bikes start around $430 and go up to $13,000+. Services from $55. What are you looking for?"; if (/ride|group ride|strava/.test(l)) return "We run group rides every week — MTB, road, gravel, social. Check the Group Rides page for the full schedule!"; if (/trail|knox|bear creek|black mountain/.test(l)) return "We've got a trail guide for Knox Mountain, Bear Creek, Black Mountain, Myra Canyon, and more. Hit the Trails page!"; if (/gift card|gift/.test(l)) return "Gift cards are available in-store and online — from $50 to $500. No expiry, good on anything we sell."; if (/hi|hey|hello|howdy|sup/.test(l)) return "Hey! What can I help you with today?"; if (/thank/.test(l)) return "You're welcome! Anything else I can help with?"; return "Great question! For anything I can't answer here, call us at (250) 860-1968 or email bikes@chainline.ca — happy to help."; }; const send = () => { const text = input.trim(); if (!text) return; const reply = respond(text); setMsgs(m => [...m, { role: "user", text }, { role: "bot", text: reply }]); setInput(""); }; return ( <> {open && (
ChainLine
Usually replies instantly
Online
{msgs.map((m, i) => (
{m.text}
))}
setInput(e.target.value)} onKeyDown={e => e.key === "Enter" && send()} placeholder="Ask anything..." style={{ flex: 1, border: "none", outline: "none", fontFamily: "var(--body)", fontSize: 13, background: "transparent", padding: "4px 0" }} />
)} ); }; // Search modal const SearchModal = ({ onClose }) => { const [q, setQ] = React.useState(""); const inputRef = React.useRef(null); React.useEffect(() => { inputRef.current && inputRef.current.focus(); }, []); const allBikes = (window.SHOP_BIKES || []); const results = q.length < 2 ? [] : allBikes.filter(b => { const s = (b.name + " " + b.brand + " " + (b.vendor||"") + " " + b.type + " " + (b.tags||"")).toLowerCase(); return s.includes(q.toLowerCase()); }).slice(0, 8); React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); return (
e.stopPropagation()} style={{ position: "absolute", top: 0, left: 0, right: 0, background: "var(--white)", padding: "32px 40px 24px", boxShadow: "0 8px 48px rgba(0,0,0,0.2)" }}>
setQ(e.target.value)} placeholder="Search bikes, brands, types..." style={{ flex: 1, border: "none", outline: "none", fontSize: 22, fontFamily: "var(--display)", fontWeight: 500, textTransform: "uppercase", letterSpacing: "-.01em", background: "transparent" }} />
{q.length >= 2 && results.length === 0 && (
No results for "{q}"
)} {results.length > 0 && (
{results.map((b, i) => ( ))}
)} {q.length < 2 && (
{["Mountain", "Gravel", "E-Bike", "Commuter", "Marin", "Transition", "Surly", "Knolly"].map(tag => ( ))}
)}
); }; Object.assign(window, { ChainLogo, Wordmark, Header, MobileNav, MegaMenu, StickyCTA, CartDrawer, Footer, useReveal, SplitText, Counter, BrandMarquee, ArrowRight, SearchIcon, Announce, ChatWidget, SearchModal });