{/* ── Sticky filter bar ── */}

{/* Row 1 — special + brands */}

{/* All Bikes */} {/* Sale Bikes */}

{/* Brand chips */} {ALL_BRANDS.map(br => { const active = brand === br && !saleOnly; const count = allProducts.filter(b => (b.brand || b.vendor || '') === br).length; return ( ); })}

{liveLoading ? "Loading live inventory…" : liveProducts ? `${filtered.length} bikes · Live from Lightspeed` : saleOnly ? "Coming soon" : filtered.length + " bikes"}

{/* Row 2 — types + sort */}

{TYPES.map(t => ( ))}

{/* ── Grid ── */}

{saleOnly ? (

Sale bikes coming soon.

Check back regularly or sign up for our newsletter to be notified of sales and clearance bikes.

) : filtered.length === 0 ? (

No bikes found.

We may be getting new {brand !== "All" ? brand : ""} stock in soon — check back or contact us.

) : (

{filtered.map((b, i) => )}

)}

); }; const BikeCardLarge = ({ b, idx }) => { const [adding, setAdding] = React.useState(false); const [added, setAdded] = React.useState(false); const name = b.name || b.title || ""; const brand = b.brand || b.vendor || ""; const img = b.img || b.image || null; const price = b.price || 0; const handleAdd = async (e) => { e.preventDefault(); e.stopPropagation(); setAdding(true); try { await window.clAddToCart(b.handle, name, price, img); setAdded(true); setTimeout(() => setAdded(false), 2000); } catch(err) { console.warn(err); } setAdding(false); }; const goToBike = () => window.cl.go("bike", { bike: b }); return (

{/* Image */}

{img ? (

{ e.target.style.display='none'; }} /> ) : (

{brand.toUpperCase()} · {b.type}

)} {b.badge && (

{b.badge}

)}

e.currentTarget.style.background='rgba(0,0,0,0.04)'} onMouseLeave={e => e.currentTarget.style.background='rgba(0,0,0,0)'}>

{/* Info */}

{brand} · {b.type}

{name}

${price.toLocaleString()}

{/* Actions */}

e.stopPropagation()}>

); }; // SubHero const SubHero = ({ eyebrow, title, italic }) => (

B&W / HERO

{eyebrow}

{title}

{italic &&

{italic}

}

); // SERVICES PAGE const ServicesPage = () => { const services = [ { n: "01", name: "Basic Tune-Up", price: 89, desc: "Adjustments, lube, safety check. Same-day turnaround.", time: "SAME DAY" }, { n: "02", name: "Drivetrain Service", price: 145, desc: "Cassette, chain, derailleurs cleaned, tuned, lubed.", time: "1–2 DAYS" }, { n: "03", name: "Full Overhaul", price: 425, desc: "Complete teardown, clean, regrease, rebuild.", time: "3–5 DAYS" }, { n: "04", name: "Brake Service (Hydraulic)", price: 95, desc: "Bleed, pad replacement, rotor true. Per wheel.", time: "SAME DAY" }, { n: "05", name: "Suspension Service", price: 220, desc: "Lower-leg or full damper service. Fork or shock.", time: "1 WEEK" }, { n: "06", name: "Wheel True & Tension", price: 65, desc: "Hand-trued, tensioned, dished. Per wheel.", time: "SAME DAY" }, { n: "07", name: "Tubeless Setup", price: 55, desc: "Per wheel. Includes valves and sealant.", time: "SAME DAY" }, { n: "08", name: "Custom Build", price: 450, desc: "From frame up. Quoted on consult.", time: "1–2 WEEKS" }, { n: "09", name: "Pre-Season Inspection", price: 75, desc: "29-point check. Free if booked with tune-up.", time: "30 MIN" }, { n: "10", name: "Post-Crash Inspection", price: 95, desc: "Frame, fork, wheels, components. Insurance docs.", time: "SAME DAY" }, { n: "11", name: "Electronic Shifting Setup", price: 120, desc: "Di2 / AXS programming, calibration, firmware.", time: "1–2 DAYS" }, ]; return (

Service Menu / Pricing

{services.map((s, i) => (

{s.n}

{s.name}

{s.desc}

{s.time}

${s.price}

))}

FITTING STUDIO / 4:5

Bike Fitting / N°02

Ride better.
Feel better.

Four levels, all done in our dedicated studio with motion-capture analysis and a master fitter who's spent fifteen years on bikes.

{[ { name: "Position Check", dur: "45 min", price: 80 }, { name: "Road / Gravel Fit", dur: "2 hours", price: 220 }, { name: "Mountain Bike Fit", dur: "2 hours", price: 220 }, { name: "Full Body + Video", dur: "3 hours", price: 380 }, ].map((f, i) => (

{f.name}

{f.dur}

${f.price}

))}

Storage / N°03

Winter storage.
Spring ready.

{[ { n: "01", t: "Drop off", d: "Anytime in October. We log the condition, take photos, tag it." }, { n: "02", t: "Stored safe", d: "Climate-controlled, locked, monthly battery checks for e-bikes." }, { n: "03", t: "Spring service", d: "Tuned, inspected, ready to roll the day you call to pick up." }, ].map((s, i) => (

{s.n}

{s.t}

{s.d}

))}

Turnaround Basic Tune · Same Day Full Overhaul · 3–5 Days Custom Build · 1–2 Weeks Suspension · 1 Week

); }; // BOOK PAGE const BookPage = () => { const [type, setType] = React.useState("service"); const [step, setStep] = React.useState(1); const [data, setData] = React.useState({}); const types = [ { id: "service", glyph: "⊞", title: "Service", desc: "Tune-ups, repairs, overhauls" }, { id: "fitting", glyph: "⊟", title: "Fitting", desc: "Bike fit & position analysis" }, { id: "demo", glyph: "⊕", title: "Demo", desc: "Test ride any bike in our fleet" }, { id: "storage", glyph: "⊠", title: "Storage", desc: "Winter storage program" }, ]; const update = (k, v) => setData({ ...data, [k]: v }); const next = () => setStep(s => Math.min(s + 1, 5)); const back = () => setStep(s => Math.max(s - 1, 1)); return (

Step 1 · Choose your visit

{types.map(t => ( ))}

{/* Progress */}

{[1,2,3,4,5].map(s => (

))}

Step {step} of 5

{step === 1 && (

What service?

{["Basic Tune-Up", "Full Overhaul", "Drivetrain", "Brake Service", "Suspension", "Wheel True", "Tubeless Setup", "Custom Build"].map(s => ( ))}

)} {step === 2 && (

Pick a date.

{ update("date", d); next(); }} />

)} {step === 3 && (

Your bike.

update("bikeBrand",v)} /> update("bikeModel",v)} /> update("bikeYear",v)} /> update("bikeSize",v)} />

update("issue",v)} />

)} {step === 4 && (

Your details.

First name

update("firstName",e.target.value)} style={{ width:"100%", padding:"12px 0", border:"none", borderBottom:"1px solid var(--hairline)", fontSize:16, fontFamily:"var(--body)", background:"transparent", outline:"none" }} />

Last name

update("lastName",e.target.value)} style={{ width:"100%", padding:"12px 0", border:"none", borderBottom:"1px solid var(--hairline)", fontSize:16, fontFamily:"var(--body)", background:"transparent", outline:"none" }} />

update("email",e.target.value)} style={{ width:"100%", padding:"12px 0", border:"none", borderBottom:"1px solid var(--hairline)", fontSize:16, fontFamily:"var(--body)", background:"transparent", outline:"none" }} />

Phone

update("phone",e.target.value)} style={{ width:"100%", padding:"12px 0", border:"none", borderBottom:"1px solid var(--hairline)", fontSize:16, fontFamily:"var(--body)", background:"transparent", outline:"none" }} />

)} {step === 5 && (

Request Sent ✓

We'll be in touch within 24 hours to confirm your slot.

Your booking request has been sent to bikes@chainline.ca. You'll receive a confirmation call or email to lock in your appointment time.

Questions? Call us at (250) 860-1968 — Mon–Sat 10am–6pm.

)}

{[ { n: "01", t: "Book Online", d: "Pick a service, time, and tell us about your bike." }, { n: "02", t: "Drop Off", d: "Stop by the shop. We tag the bike, log the work order." }, { n: "03", t: "We Call", d: "When it's ready. Pickup any time the shop is open." }, ].map((s, i) => (

0 ? 32 : 0 }}>

{s.n}

{s.t}

{s.d}

))}

); }; const Field = ({ label, placeholder, textarea, value, onChange }) => (

{label}

{textarea ? (

onChange && onChange(e.target.value)}
        style={{ width: "100%", padding: "12px 0", border: "none", borderBottom: "1px solid var(--hairline)", outline: "none", fontFamily: "var(--body)", fontSize: 16, resize: "vertical", background: "transparent" }} />
    ) : (
      <input placeholder={placeholder} value={value||""} onChange={e => onChange && onChange(e.target.value)}
        style={{ width: "100%", padding: "12px 0", border: "none", borderBottom: "1px solid var(--hairline)", outline: "none", fontFamily: "var(--body)", fontSize: 16, background: "transparent" }} />
    )}
  </label>
);

// ABOUT
const AboutPage = () => (
  <div className="page-fade" data-screen-label="P05 About">
    <SubHero eyebrow="About  /  N°01" title="We're ChainLine." italic="Kelowna's bike shop. Since 2009." />
    <section className="section section-pad bg-paper">
      <div className="container-narrow">
        <blockquote className="reveal serif-italic" style={{ fontSize: "clamp(36px, 5vw, 72px)", lineHeight: 1.15, margin: 0, textAlign: "center", padding: "40px 0", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
          "We sell bikes we believe in,<br/>to riders we respect."
        </blockquote>
        <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
          <div className="reveal">
            <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--gray-600)" }}>
              <span className="serif-italic" style={{ fontSize: 64, float: "left", lineHeight: 0.8, paddingRight: 12, paddingTop: 8 }}>I</span>n the autumn of 2009, two friends with an unreasonable number of bikes between them rented a 900-square-foot space on Highway 97 and called it ChainLine. The idea was simple: build the kind of shop they'd want to walk into. Honest advice. Brands they ride. Mechanics who care.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--gray-600)", marginTop: 20 }}>
              Fifteen years on, we've moved twice, doubled the floor, tripled the staff, and held the line on the part that mattered. We still ride every brand we sell. We still answer our own phone. We still believe Kelowna deserves a better bike shop.
            </p>
          </div>
          <div className="reveal reveal-d-2 ph ph-light ph-corners" style={{ aspectRatio: "4/5" }}><span className="ph-label">FOUNDERS  /  SHOP DAY ONE  /  4:5</span></div>
        </div>
      </div>
    </section>

<section className="section section-pad bg-white">
      <div className="container-wide">
        <div className="reveal section-label">Timeline</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
          {[
            ["2009", "Founded in Kelowna"],
            ["2011", "First Transition dealer in BC interior"],
            ["2014", "Expanded service department"],
            ["2017", "Moved to current location"],
            ["2020", "Launched online store"],
            ["2024", "15 years of local riding"],
          ].map(([y, t], i) => (
            <div key={y} style={{ padding: "40px 24px 40px 0", borderRight: i < 5 ? "1px solid var(--hairline)" : "none" }}>
              <div style={{ fontFamily: "var(--display)", fontSize: 36, fontWeight: 500, marginBottom: 12, letterSpacing: "-.02em" }}>{y}</div>
              <div className="eyebrow" style={{ lineHeight: 1.5 }}>{t}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

<section className="section section-pad bg-paper" data-screen-label="P05 Team">
      <div className="container-wide">
        <div className="reveal section-label">Meet the Team</div>
        <h2 className="display-xl reveal" style={{ marginBottom: 64 }}>The people<br/><span className="serif-italic">behind the bench.</span></h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
          {[
            { name: "Mara K.", role: "Co-founder / Buyer", trail: "Knox Antenna", bike: "Moots Routt YBB" },
            { name: "Devon J.", role: "Co-founder / Master Tech", trail: "Black Mountain", bike: "Transition Patrol" },
            { name: "Priya S.", role: "Lead Fitter", trail: "Crawford", bike: "Bianchi Specialissima" },
            { name: "Tomás R.", role: "Wheelbuilder", trail: "Smith Creek", bike: "Surly Midnight Special" },
            { name: "Hannah L.", role: "Service Manager", trail: "Bear Creek", bike: "Marin Rift Zone" },
            { name: "Ben O.", role: "Sales Lead", trail: "Myra", bike: "Salsa Cutthroat" },
            { name: "Jen W.", role: "Apparel Buyer", trail: "Mission Creek", bike: "Pivot Switchblade" },
            { name: "Cole P.", role: "Apprentice Tech", trail: "Rose Valley", bike: "Marin Headlands" },
          ].map((p, i) => (
            <div key={i} className={"reveal reveal-d-" + (i % 4 + 1)}>
              <div className="ph ph-light ph-corners" style={{ aspectRatio: "4/5", marginBottom: 16 }}><span className="ph-label">PORTRAIT  /  B&W</span></div>
              <div className="display-s" style={{ marginBottom: 4 }}>{p.name}</div>
              <div className="eyebrow" style={{ marginBottom: 8 }}>{p.role}</div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--gray-500)", lineHeight: 1.7 }}>
                Trail · {p.trail}<br/>Ride · {p.bike}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

<section className="section section-pad bg-black" data-screen-label="P05 Values">
      <div className="container-wide">
        <div className="reveal section-label" style={{ color: "var(--gray-300)" }}>Values</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--hairline-light)" }}>
          {[
            ["01", "Local First", "We hire local. We sponsor local. We ride what's out the back door."],
            ["02", "Honest Advice", "We'll tell you the bike you want isn't the bike you need. Or vice versa."],
            ["03", "Ride What We Sell", "Every brand on the floor is one of us is racing, commuting, or both."],
          ].map(([n, t, d], i) => (
            <div key={n} className={"reveal reveal-d-" + (i + 1)} style={{ padding: "48px 32px 48px 0", borderRight: i < 2 ? "1px solid var(--hairline-light)" : "none", paddingLeft: i > 0 ? 32 : 0 }}>
              <div className="eyebrow eyebrow-light" style={{ marginBottom: 24 }}>{n}</div>
              <div className="display-m" style={{ marginBottom: 16 }}>{t}</div>
              <p style={{ color: "var(--gray-300)", fontSize: 15, lineHeight: 1.6 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  </div>
);

// GROUP RIDES PAGE
const RidesPage = () => {
  const [tab, setTab] = React.useState("All");
  const tabs = ["All", "Road", "Gravel", "Mountain", "Social", "E-Bike"];
  const rides = [
    { date: "MON 28 APR 6:00PM", cal: "20260428T180000/20260428T200000", name: "Knox Mountain Monday", type: "Mountain", meta: "22km · 650m gain", level: "Intermediate", spots: "8 of 12 spots", loc: "Knox Mountain Park, Kelowna, BC" },
    { date: "WED 30 APR 12:15PM", cal: "20260430T121500/20260430T141500", name: "Lunch Loop", type: "Road", meta: "35km · Flat", level: "All abilities", spots: "Open", loc: "Mission Creek Regional Park, Kelowna, BC" },
    { date: "THU 01 MAY 6:00PM", cal: "20260501T180000/20260501T200000", name: "Women's Ride", type: "Social", meta: "20km · Easy", level: "Easy", spots: "Open", loc: "ChainLine Cycle, 1139 Ellis St, Kelowna" },
    { date: "SAT 03 MAY 8:00AM", cal: "20260503T080000/20260503T140000", name: "Gravel Sundays", type: "Gravel", meta: "75km · Backcountry", level: "Advanced", spots: "4 of 10 spots", loc: "ChainLine Cycle, 1139 Ellis St, Kelowna" },
    { date: "SUN 04 MAY 9:00AM", cal: "20260504T090000/20260504T120000", name: "Social Saturday", type: "Social", meta: "30km · Cafe stop", level: "Easy", spots: "Open", loc: "ChainLine Cycle, 1139 Ellis St, Kelowna" },
    { date: "MON 05 MAY 6:00PM", cal: "20260505T180000/20260505T200000", name: "Knox Mountain Monday", type: "Mountain", meta: "22km · 650m gain", level: "Intermediate", spots: "Open", loc: "Knox Mountain Park, Kelowna, BC" },
  ];
  const filtered = tab === "All" ? rides : rides.filter(r => r.type === tab);
  return (
    <div className="page-fade" data-screen-label="P06 Rides">
      <SubHero eyebrow="Community  /  N°01" title="Ride together." italic="All levels, all disciplines." />
      <section className="section section-pad bg-white">
        <div className="container-wide">
          <div className="reveal" style={{ display: "flex", gap: 4, marginBottom: 48, flexWrap: "wrap" }}>
            {tabs.map(t => (
              <button key={t} onClick={() => setTab(t)} data-cursor="link" style={{ padding: "10px 18px", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", border: "1px solid " + (tab === t ? "var(--black)" : "var(--hairline)"), background: tab === t ? "var(--black)" : "transparent", color: tab === t ? "var(--white)" : "var(--black)" }}>{t}</button>
            ))}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {filtered.map((r, i) => (
              <div key={i} className={"reveal reveal-d-" + (i % 3 + 1)} style={{ padding: 32, border: "1px solid var(--hairline)", display: "flex", flexDirection: "column", gap: 16, minHeight: 280 }}>
                <div className="eyebrow">{r.date}</div>
                <div className="display-m">{r.name}</div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gray-500)" }}>
                  {r.type} · {r.meta}
                </div>
                <div style={{ flex: 1 }} />
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="pill">{r.level}</span>
                  <span className="eyebrow">{r.spots}</span>
                </div>
                <button className="btn btn-outline" data-cursor="link" style={{ marginTop: 8 }} onClick={() => {
                  const url = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent("ChainLine Cycle · "+r.name)}&dates=${r.cal}&details=${encodeURIComponent("ChainLine Cycle group ride. "+r.meta+"\n\nQuestions? bikes@chainline.ca · (250) 860-1968")}&location=${encodeURIComponent(r.loc)}`;
                  window.open(url, "_blank");
                }}>Add to Calendar <ArrowRight /></button>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section section-pad bg-black">
        <div className="container-wide">
          <div className="reveal section-label" style={{ color: "var(--gray-300)" }}>Ride Series</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 0, borderTop: "1px solid var(--hairline-light)" }}>
            {[
              ["Monday Night Shred", "Knox Mountain  ·  Weekly", "MTB"],
              ["Gravel Sundays", "Okanagan backcountry  ·  Bi-weekly", "Gravel"],
              ["Lunch Loop", "Mission Creek loop  ·  Fridays 12:15", "Road"],
              ["Social Saturday", "Easy pace, cafe stop  ·  Monthly", "Social"],
              ["Women's Ride", "All abilities  ·  Monthly", "Social"],
            ].map(([n, m, t], i) => (
              <a key={i} href="#" data-cursor="link" className="reveal page-wide-row" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr 200px 80px", gap: 32, padding: "40px 0", borderBottom: "1px solid var(--hairline-light)", alignItems: "center" }}>
                <div className="display-m">{n}</div>
                <div style={{ color: "var(--gray-300)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase" }}>{m}</div>
                <span className="pill">{t}</span>
                <ArrowRight />
              </a>
            ))}
          </div>
        </div>
      </section>
      <section className="section section-pad bg-paper">
        <div className="container-wide">
          <div className="reveal section-label">Ride Photos</div>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gridTemplateRows: "200px 200px", gap: 16 }}>
            <div className="reveal ph ph-corners" style={{ gridRow: "span 2" }}><span className="ph-label">PHOTO 01  /  HERO</span></div>
            <div className="reveal reveal-d-2 ph ph-corners"><span className="ph-label">PHOTO 02</span></div>
            <div className="reveal reveal-d-3 ph ph-corners"><span className="ph-label">PHOTO 03</span></div>
            <div className="reveal reveal-d-2 ph ph-corners"><span className="ph-label">PHOTO 04</span></div>
            <div className="reveal reveal-d-3 ph ph-corners"><span className="ph-label">PHOTO 05</span></div>
          </div>
        </div>
      </section>
    </div>
  );
};

// TRAILS PAGE
const TrailsPage = () => {
  const trails = [
    { name: "Knox Mountain Park", dots: 3, km: "18", gain: "520", type: "MTB · Singletrack", season: "Spring–Fall", note: "The best urban trail system in the Okanagan. Don't miss Antenna.", tf: "https://www.trailforks.com/region/knox-mountain-park/", komoot: "https://www.komoot.com/guide/3437" },
    { name: "Bear Creek Provincial Park", dots: 2, km: "14", gain: "380", type: "MTB · Mixed", season: "Year-round", note: "Family-friendly with options to push deeper if you want.", tf: "https://www.trailforks.com/region/bear-creek-provincial-park/", komoot: "https://www.komoot.com/guide/3437" },
    { name: "Okanagan Mountain Park", dots: 5, km: "42", gain: "1,200", type: "MTB · Hike", season: "Summer", note: "Big day. Bring food, bring tools, bring a friend.", tf: "https://www.trailforks.com/region/okanagan-mountain-park/", komoot: "https://www.komoot.com/guide/3437" },
    { name: "Myra Canyon Trestles", dots: 1, km: "24", gain: "180", type: "Rail Trail", season: "Spring–Fall", note: "Wooden trestles, lake views, easy day.", tf: "https://www.trailforks.com/region/kelowna/", komoot: "https://www.komoot.com/guide/3437" },
    { name: "McDougall Rim", dots: 3, km: "22", gain: "640", type: "Hike · Gravel", season: "Spring–Fall", note: "Best sunrise loop in the valley.", tf: "https://www.trailforks.com/region/kelowna/", komoot: "https://www.komoot.com/guide/3437" },
    { name: "Rose Valley", dots: 2, km: "16", gain: "320", type: "MTB", season: "Year-round", note: "A bit of everything. Good for shaking down a new bike.", tf: "https://www.trailforks.com/region/rose-valley-regional-park/", komoot: "https://www.komoot.com/guide/3437" },
    { name: "Black Mountain", dots: 5, km: "32", gain: "920", type: "MTB · Advanced", season: "Summer–Fall", note: "If you have to ask, it isn't for you.", tf: "https://www.trailforks.com/region/black-mountain/", komoot: "https://www.komoot.com/guide/3437" },
    { name: "Kelowna Bike Park", dots: 4, km: "—", gain: "—", type: "Skills Park", season: "May–Oct", note: "All levels, all features. Free, every day.", tf: "https://www.trailforks.com/region/kelowna-bike-park/", komoot: "https://www.komoot.com/guide/3437" },
  ];
  const Dots = ({ n }) => <span className="pill-dots">{[1,2,3,4,5].map(i => <i key={i} className={i <= n ? "on" : ""} />)}</span>;
  return (
    <div className="page-fade" data-screen-label="P07 Trails">
      <SubHero eyebrow="Field Notes  /  N°01" title="Know your backyard." italic="Curated by riders." />
      <section className="section section-pad bg-white">
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {trails.map((t, i) => (
              <div key={i} className={"reveal reveal-d-" + (i % 3 + 1)}>
                <div className="ph ph-corners" style={{ aspectRatio: "4/3", marginBottom: 20 }}>
                  <span className="ph-label">TRAIL  /  {t.name.toUpperCase()}</span>
                </div>
                <div className="display-s" style={{ marginBottom: 12 }}>{t.name}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
                  <Dots n={t.dots} />
                  <span className="eyebrow">{t.dots <= 2 ? "Beginner" : t.dots <= 3 ? "Intermediate" : "Advanced"}</span>
                </div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gray-500)", marginBottom: 12 }}>
                  {t.km} km · {t.gain} m · {t.type} · {t.season}
                </div>
                <p className="serif-italic" style={{ fontSize: 16, lineHeight: 1.5, color: "var(--gray-600)", marginBottom: 16 }}>"{t.note}"</p>
                <a href={t.tf} target="_blank" rel="noopener" data-cursor="link"
                  style={{ fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--gray-500)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                  View on Trailforks →
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section section-pad bg-black">
        <div className="container-wide">
          <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 16 }}>
            <div>
              <div className="section-label" style={{ color: "var(--gray-300)" }}>Current Conditions</div>
              <h3 className="display-l">Updated by<br/><span className="serif-italic">our trail crew.</span></h3>
            </div>
            <div className="eyebrow eyebrow-light">Last sync · 2 hrs ago</div>
          </div>
          <div style={{ borderTop: "1px solid var(--hairline-light)" }}>
            {[
              ["Knox Mountain", "Open", "Apr 26"],
              ["Bear Creek", "Open · Tacky", "Apr 26"],
              ["Black Mountain", "Open · Dry", "Apr 25"],
              ["Smith Creek", "Muddy", "Apr 24"],
              ["Crawford", "Closed · Bear activity", "Apr 22"],
            ].map(([n, s, d], i) => (
              <div key={n} className="reveal" style={{ display: "grid", gridTemplateColumns: "2fr 2fr 1fr", padding: "20px 0", borderBottom: "1px solid var(--hairline-light)", alignItems: "center" }}>
                <div className="display-s">{n}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", background: s.startsWith("Closed") ? "var(--gray-300)" : s.includes("Muddy") ? "var(--gray-400)" : "var(--white)" }} />
                  <span className="eyebrow eyebrow-light">{s}</span>
                </div>
                <div className="eyebrow eyebrow-light" style={{ textAlign: "right" }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section section-pad-sm bg-paper" style={{ padding: "60px 0" }}>
        <div className="container-wide">
          <div className="reveal" style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
            <a href="https://www.trailforks.com/region/kelowna/" target="_blank" rel="noopener" className="btn btn-outline" data-cursor="link">View on Trailforks <ArrowRight /></a>
            <a href="https://www.komoot.com/guide/3437" target="_blank" rel="noopener" className="btn btn-outline" data-cursor="link">View on Komoot <ArrowRight /></a>
            <a href="https://www.strava.com/segments/explore#4.32/49.888/-119.496" target="_blank" rel="noopener" className="btn btn-outline" data-cursor="link">View on Strava <ArrowRight /></a>
          </div>
        </div>
      </section>
    </div>
  );
};

// CONTACT
const ContactPage = () => (
  <div className="page-fade" data-screen-label="P08 Contact">
    <section className="page-contact-grid" style={{ paddingTop: 120, minHeight: "100vh", display: "grid", gridTemplateColumns: "1fr 1fr" }}>
      <div className="ph ph-corners" style={{ minHeight: 600, position: "relative" }}>
        <span className="ph-label">STOREFRONT  /  B&W</span>
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent, rgba(10,10,10,0.6))" }} />
        <div style={{ position: "absolute", left: 48, right: 48, bottom: 48, color: "var(--white)" }}>
          <h1 className="display-xl" style={{ marginBottom: 32 }}>Come<br/><span className="serif-italic">find us.</span></h1>
          <div style={{ borderTop: "1px solid var(--hairline-light)", paddingTop: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gray-300)" }}>
            <div><div className="eyebrow eyebrow-light" style={{ marginBottom: 6 }}>Address</div><a href="https://maps.google.com/?q=1139+Ellis+St+Kelowna+BC+V1Y+1Z5" target="_blank" rel="noopener" style={{ color: "inherit" }}>1139 Ellis St<br/>Kelowna, BC V1Y 1Z5</a></div>
            <div><div className="eyebrow eyebrow-light" style={{ marginBottom: 6 }}>Hours</div>Mon–Sat  10–6<br/>Sun  11–5</div>
            <div><div className="eyebrow eyebrow-light" style={{ marginBottom: 6 }}>Phone</div>(250) 860-1968</div>
            <div><div className="eyebrow eyebrow-light" style={{ marginBottom: 6 }}>Email</div>bikes@chainline.ca</div>
          </div>
        </div>
      </div>
      <div style={{ padding: "80px 64px", display: "flex", flexDirection: "column", justifyContent: "center", background: "var(--white)" }}>
        <div className="eyebrow" style={{ marginBottom: 16 }}>Get in touch</div>
        <h2 className="display-l" style={{ marginBottom: 40 }}>Send us<br/><span className="serif-italic">a message.</span></h2>
        <div style={{ display: "grid", gap: 24 }}>
          <Field label="Name" />
          <Field label="Email" />
          <label>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Subject</div>
            <select style={{ width: "100%", padding: "12px 0", border: "none", borderBottom: "1px solid var(--hairline)", outline: "none", fontFamily: "var(--body)", fontSize: 16, background: "transparent" }}>
              <option>General Inquiry</option><option>Service Question</option><option>Product Question</option><option>Group Rides</option><option>Press</option><option>Other</option>
            </select>
          </label>
          <Field label="Message" textarea />
          <button className="btn" data-cursor="link" style={{ alignSelf: "flex-start", marginTop: 16 }}>Send Message <ArrowRight /></button>
        </div>
      </div>
    </section>
    <section className="bg-black" style={{ height: 400, position: "relative" }}>
      <div className="ph" style={{ position: "absolute", inset: 0 }}>
        <span className="ph-label">MAP  /  DARK SATELLITE STYLE  /  STORE PIN</span>
      </div>
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
        <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--white)", display: "grid", placeItems: "center", boxShadow: "0 0 0 8px rgba(255,255,255,0.15)" }}>
          <ChainLogo size={24} color="#0a0a0a" />
        </div>
      </div>
    </section>
    <section className="section section-pad-sm bg-paper" style={{ padding: "60px 0" }}>
      <div className="container-wide">
        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {[
            { t: "Call Us", v: "(250) 860-1968", href: "tel:2508601968" },
            { t: "Book a Service", v: "Online booking", route: "book" },
            { t: "Get Directions", v: "Open in Maps", href: "https://maps.google.com/?q=1139+Ellis+St+Kelowna+BC" },
          ].map((a, i) => (
            <button key={i} className="btn btn-outline" data-cursor="link" style={{ padding: "32px", justifyContent: "space-between", flexDirection: "column", alignItems: "flex-start", gap: 16, height: "auto" }}
              onClick={() => a.route ? window.cl.go(a.route) : window.open(a.href)}>
              <span className="eyebrow">{a.t}</span>
              <span style={{ display: "flex", justifyContent: "space-between", width: "100%", alignItems: "center", fontSize: 18, fontFamily: "var(--display)", textTransform: "uppercase", letterSpacing: "-.005em" }}>
                {a.v} <ArrowRight />
              </span>
            </button>
          ))}
        </div>
      </div>
    </section>
  </div>
);

// GIFT CARDS
const GiftCardsPage = () => (
  <div className="page-fade">
    <SubHero eyebrow="Gift Cards  /  N°01" title="The perfect gift." italic="For every rider." />
    <section className="section section-pad bg-white">
      <div className="container-narrow" style={{ textAlign:"center" }}>
        <p style={{ fontSize:16, color:"var(--gray-500)", lineHeight:1.75, marginBottom:56, maxWidth:560, margin:"0 auto 56px" }}>
          Not sure what to get the rider in your life? A ChainLine gift card works on bikes, parts, accessories, and services. Good for anything in the store.
        </p>
        <div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:16, marginBottom:56 }}>
          {[50,100,150,200,300,500].map(v => (
            <button key={v} className="btn btn-outline" data-cursor="link"
              style={{ flexDirection:"column", alignItems:"flex-start", padding:32, gap:8, height:"auto" }}
              onClick={() => window.open("https://4nie4h-ek.myshopify.com/products/gift-card")}>
              <span style={{ fontFamily:"var(--display)", fontSize:32, fontWeight:500 }}>${v}</span>
              <span className="eyebrow">Gift Card</span>
            </button>
          ))}
        </div>
        <button className="btn" data-cursor="link"
          onClick={() => window.open("https://4nie4h-ek.myshopify.com/products/gift-card")}>
          Buy a Gift Card <ArrowRight />
        </button>
        <p style={{ marginTop:24, fontFamily:"var(--mono)", fontSize:11, letterSpacing:".12em", textTransform:"uppercase", color:"var(--gray-400)" }}>
          Custom amounts available in-store  ·  No expiry  ·  bikes@chainline.ca
        </p>
      </div>
    </section>
    <Newsletter />
  </div>
);

// PARTS & ACCESSORIES PAGE — Live Lightspeed inventory
const PartsPage = () => {
  const [activeDept, setActiveDept] = React.useState(null);
  const [deptItems,  setDeptItems]  = React.useState([]);
  const [loading,    setLoading]    = React.useState(false);
  const [search,     setSearch]     = React.useState('');
  const [searchRes,  setSearchRes]  = React.useState(null);
  const [depts,      setDepts]      = React.useState([]);

React.useEffect(() => {
    const load = () => {
      if (window.CL_LS && window.CL_LS.departments && window.CL_LS.departments.length > 0) {
        const exclude = ['labour','food','shop use','consignments','bikes comfort','bikes road','bikes mountain','bike bmx','bike cruiser','bike cross','bikes fat','bikes junior','bike frame','frames','build kit','group'];
        const filtered = window.CL_LS.departments
          .filter(d => !exclude.some(ex => d.name.toLowerCase().includes(ex)))
          .sort((a, b) => a.name.localeCompare(b.name));
        setDepts(filtered);
      }
    };
    load();
    window.addEventListener('lightspeed:ready', load);
    return () => window.removeEventListener('lightspeed:ready', load);
  }, []);

const doSearch = (q) => {
    setSearch(q);
    if (q.length < 2) { setSearchRes(null); return; }
    const results = (window.lightspeedSearch && window.lightspeedSearch(q)) || [];
    setSearchRes(results.slice(0, 48));
  };

const fallback = ['Brake pads','Cassette','Chains','Tubes','Tires 700C','Tires 29"','Tires 26"','Wheels','Shifters MTB','Derailleur Rear','Derailleur Front','Cranks','Bottom Brackets','Headsets','Handlebar','Stem','Saddles','Seat post','Grips','Bar tape','Forks','Rear Shock','Brake Lever U','Brake parts','Pumps','Lube','Tools','Locks','Lights','Computers','Bags','Packs','Helmet','Gloves','Clothing','Socks','Shoes Mountain','Shoes Road','Spokes','Rims','Hubs','Cables','Fenders','Tire Sealant'].map(n => ({ name: n, count: null }));
  const displayDepts = depts.length > 0 ? depts : fallback;

return (
    <div className="page-fade">
      <SubHero eyebrow="Parts & Accessories  /  N°02" title="Gear up." italic="Everything you need." />
      <section style={{ padding:"60px 0 100px", background:"var(--white)" }}>
        <div className="container-wide">

{/* Search */}
          <div className="reveal" style={{ marginBottom:48 }}>
            <div style={{ display:"flex", borderBottom:"2px solid var(--black)", maxWidth:560 }}>
              <input type="text" placeholder="Search parts — cassettes, brake pads, chains..."
                value={search} onChange={e => doSearch(e.target.value)}
                style={{ flex:1, padding:"14px 0", border:"none", outline:"none", fontFamily:"var(--body)", fontSize:16, background:"transparent" }} />
              {search && <button onClick={() => { setSearch(''); setSearchRes(null); }}
                style={{ fontFamily:"var(--mono)", fontSize:11, color:"var(--gray-400)", letterSpacing:".1em" }}>CLEAR</button>}
            </div>
            {searchRes && (
              <div style={{ marginTop:16 }}>
                <p className="eyebrow" style={{ marginBottom:16 }}>{searchRes.length} results for “{search}”</p>
                <div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:8 }}>
                  {searchRes.map((item, i) => (
                    <div key={i} style={{ padding:"14px 16px", border:"1px solid var(--hairline)", display:"flex", justifyContent:"space-between", alignItems:"center", gap:8 }}>
                      <div style={{ flex:1 }}>
                        <div style={{ fontFamily:"var(--display)", fontSize:12, fontWeight:500, textTransform:"uppercase", letterSpacing:"-.005em", lineHeight:1.3 }}>{item.name}</div>
                        <div className="eyebrow" style={{ marginTop:3 }}>{item.department}</div>
                      </div>
                      <div style={{ display:"flex", alignItems:"center", gap:8, flexShrink:0 }}>
                        <div style={{ fontFamily:"var(--display)", fontSize:14, fontWeight:600 }}>{item.price > 0 ? `$${item.price.toFixed(2)}` : 'POA'}</div>
                        <button data-cursor="link"
                          onClick={() => window.location.href = `mailto:bikes@chainline.ca?subject=Part Enquiry: ${encodeURIComponent(item.name)}&body=Hi, I'd like to purchase:%0A%0AItem: ${encodeURIComponent(item.name)}%0ASKU: ${encodeURIComponent(item.sku||'N/A')}%0APrice: $${item.price.toFixed(2)}%0A%0APlease confirm availability and payment.%0A%0AThanks`}
                          style={{ padding:"6px 12px", background:"var(--black)", color:"var(--white)", fontFamily:"var(--mono)", fontSize:9, letterSpacing:".1em", textTransform:"uppercase", border:"none", cursor:"pointer" }}>
                          Buy →
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

{/* Dept accordion */}
          {!searchRes && (
            <>
              <div className="reveal section-label" style={{ marginBottom:24 }}>
                Browse by Department {depts.length > 0 && <span style={{ opacity:.45 }}>· Live from Lightspeed</span>}
              </div>
              <div style={{ borderTop:"1px solid var(--hairline)" }}>
                {displayDepts.map((dept, i) => (
                  <div key={i} className="reveal" style={{ borderBottom:"1px solid var(--hairline)" }}>
                    <button data-cursor="link" onClick={() => openDept(dept.name)}
                      style={{ width:"100%", display:"flex", justifyContent:"space-between", alignItems:"center", padding:"18px 0", cursor:"pointer" }}>
                      <div style={{ display:"flex", alignItems:"center", gap:16 }}>
                        <span style={{ fontFamily:"var(--display)", fontSize:"clamp(15px,1.8vw,20px)", fontWeight:500, textTransform:"uppercase", letterSpacing:"-.01em" }}>{dept.name}</span>
                        {dept.count && <span className="eyebrow">{dept.count} items</span>}
                      </div>
                      <span style={{ fontFamily:"var(--mono)", fontSize:18, color:"var(--gray-400)", transform: activeDept===dept.name ? "rotate(45deg)" : "none", transition:"transform .2s", display:"inline-block" }}>+</span>
                    </button>
                    {activeDept === dept.name && (
                      <div style={{ paddingBottom:20 }}>
                        {loading ? (
                          <p className="eyebrow" style={{ padding:"12px 0" }}>Loading {dept.name}…</p>
                        ) : deptItems.length === 0 ? (
                          <p style={{ fontSize:14, color:"var(--gray-500)" }}>No items currently listed — contact us for stock.</p>
                        ) : (
                          <>
                            <div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:6 }}>
                              {deptItems.slice(0,60).map((item, j) => (
                                <div key={j} style={{ padding:"12px 14px", background:"var(--paper)", display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:8, flexWrap:"wrap" }}>
                                  <div style={{ flex:1, minWidth:0 }}>
                                    <div style={{ fontFamily:"var(--display)", fontSize:11, fontWeight:500, textTransform:"uppercase", letterSpacing:"-.005em", lineHeight:1.3 }}>{item.name}</div>
                                    {item.sku && <div style={{ fontFamily:"var(--mono)", fontSize:9, color:"var(--gray-400)", marginTop:2 }}>SKU {item.sku}</div>}
                                  </div>
                                  <div style={{ display:"flex", alignItems:"center", gap:8, flexShrink:0 }}>
                                    <div style={{ fontFamily:"var(--display)", fontSize:13, fontWeight:600 }}>{item.price > 0 ? `$${item.price.toFixed(2)}` : ''}</div>
                                    <button data-cursor="link"
                                      onClick={() => window.location.href = `mailto:bikes@chainline.ca?subject=Part Enquiry: ${encodeURIComponent(item.name)}&body=Hi, I'd like to purchase the following:%0A%0AItem: ${encodeURIComponent(item.name)}%0ASKU: ${encodeURIComponent(item.sku||'N/A')}%0APrice: $${item.price.toFixed(2)}%0A%0APlease let me know availability and how to pay.%0A%0AThanks`}
                                      style={{ padding:"4px 10px", background:"var(--black)", color:"var(--white)", fontFamily:"var(--mono)", fontSize:9, letterSpacing:".1em", textTransform:"uppercase", border:"none", cursor:"pointer", whiteSpace:"nowrap" }}>
                                      Buy →
                                    </button>
                                  </div>
                                </div>
                              ))}
                            </div>
                            {deptItems.length > 60 && <p style={{ marginTop:10, fontSize:11, color:"var(--gray-400)", fontFamily:"var(--mono)", letterSpacing:".1em", textTransform:"uppercase" }}>Showing 60 of {deptItems.length} — visit or call for full list</p>}
                          </>
                        )}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </>
          )}

<div style={{ marginTop:48, padding:28, background:"var(--paper)", borderTop:"2px solid var(--black)" }}>
            <div className="eyebrow" style={{ marginBottom:10 }}>Can't find what you need?</div>
            <p style={{ fontSize:14, color:"var(--gray-600)", marginBottom:14 }}>We stock 7,000+ products. If it's not listed, we can order it.</p>
            <div style={{ display:"flex", gap:12, flexWrap:"wrap" }}>
              <a href="tel:2508601968" className="btn btn-outline-dark" data-cursor="link" style={{ fontSize:11 }}>Call (250) 860-1968</a>
              <button className="btn" data-cursor="link" onClick={() => window.cl.go("contact")} style={{ fontSize:11 }}>Contact Us <ArrowRight /></button>
            </div>
          </div>
        </div>
      </section>
      <Newsletter />
    </div>
  );
};

// CLASSIFIEDS PAGE
const ClassifiedsPage = () => {
  const DEMO_LISTINGS = [
    { title:"2022 Transition Sentinel – Large", price:4200, cond:"Excellent", cat:"Full Suspension MTB", posted:"2 days ago", desc:"One season of riding, immaculate condition. Fox suspension freshly serviced. Comes with extra rotor." },
    { title:"Shimano XT Groupset 12-Speed", price:550, cond:"Good", cat:"Drivetrain", posted:"5 days ago", desc:"Complete XT group, used one season. Minor cable wear, everything shifts perfectly." },
    { title:"Fox 36 Factory 160mm Fork", price:750, cond:"Good", cat:"Suspension", posted:"1 week ago", desc:"Fox Factory 36, 160mm travel, 15x110mm. Freshly serviced. Fits 2020–2023 standards." },
    { title:"Marin San Quentin 3 – Medium", price:1800, cond:"Like New", cat:"Hardtail MTB", posted:"1 week ago", desc:"Barely ridden, upgraded to full-sus. All original components, no damage." },
    { title:"Maxxis Assegai / DHR2 Set", price:120, cond:"Good", cat:"Tyres", posted:"2 weeks ago", desc:"One season, still 60% tread. Tubeless ready. 29x2.5 WT." },
    { title:"100% Forecast Helmet – Large", price:85, cond:"Excellent", cat:"Helmets", posted:"2 weeks ago", desc:"Worn 3 times, no damage. MIPS certified, 2023 model." },
  ];
  const [showForm, setShowForm] = React.useState(false);
  const [form, setForm] = React.useState({ title:'', price:'', cat:'', cond:'', desc:'', name:'', email:'', phone:'' });
  const [submitted, setSubmitted] = React.useState(false);
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    window.location.href = `mailto:bikes@chainline.ca?subject=Classifieds Listing: ${encodeURIComponent(form.title)}&body=${encodeURIComponent(
      `New classified listing submission:\n\nTitle: ${form.title}\nPrice: $${form.price}\nCategory: ${form.cat}\nCondition: ${form.cond}\n\nDescription:\n${form.desc}\n\nContact:\nName: ${form.name}\nEmail: ${form.email}\nPhone: ${form.phone}`
    )}`;
    setSubmitted(true);
    setShowForm(false);
  };
  const cats = ["Full Suspension MTB","Hardtail MTB","Gravel Bike","Road Bike","E-Bike","Kids Bike","Drivetrain","Brakes","Suspension","Wheels","Tyres","Helmets","Apparel","Tools","Other"];
  return (
    <div className="page-fade">
      <SubHero eyebrow="Community  /  N°02" title="Buy. Sell. Ride." italic="Kelowna's cycling classifieds." />
      <section style={{ padding:"60px 0 100px", background:"var(--white)" }}>
        <div className="container-wide">
          <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:48 }}>
            <div className="reveal section-label" style={{ marginBottom:0 }}>Current Listings  /  {DEMO_LISTINGS.length}</div>
            <button className="btn" data-cursor="link" onClick={() => setShowForm(!showForm)}>
              {showForm ? "Cancel" : "Post a Listing"} {showForm ? "" : <ArrowRight />}
            </button>
          </div>

{submitted && (
            <div style={{ padding:24, background:"var(--paper)", borderLeft:"3px solid var(--black)", marginBottom:40 }}>
              <p style={{ fontFamily:"var(--display)", fontWeight:600, textTransform:"uppercase" }}>Listing submitted!</p>
              <p style={{ fontSize:14, color:"var(--gray-500)", marginTop:8 }}>We'll review it and get it posted within 24 hours. Email bikes@chainline.ca with any questions.</p>
            </div>
          )}

{showForm && (
            <div className="reveal" style={{ padding:40, background:"var(--paper)", marginBottom:48, borderTop:"2px solid var(--black)" }}>
              <h3 className="display-m" style={{ marginBottom:32 }}>Post a Listing</h3>
              <form onSubmit={submit} style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:24 }}>
                {[["title","Listing Title (e.g. '2022 Trek Fuel EX 8')","col-span-2"],["price","Price (CAD)",""],["cat","Category","select"],["cond","Condition","select-cond"],["desc","Description — include size, year, condition, what's included","col-span-2 textarea"],["name","Your Name",""],["email","Email",""],["phone","Phone (optional)",""],].map(([k, label, cls]) => (
                  <div key={k} style={{ gridColumn: cls && cls.includes("col-span-2") ? "1/-1" : "auto" }}>
                    <div className="eyebrow" style={{ marginBottom:8 }}>{label}</div>
                    {cls === "select" ? (
                      <select value={form[k]} onChange={e => upd(k, e.target.value)} required
                        style={{ width:"100%", padding:"12px 0", border:"none", borderBottom:"1px solid var(--hairline)", fontFamily:"var(--body)", fontSize:16, background:"transparent", outline:"none" }}>
                        <option value="">Select category</option>
                        {cats.map(c => <option key={c}>{c}</option>)}
                      </select>
                    ) : cls === "select-cond" ? (
                      <select value={form[k]} onChange={e => upd(k, e.target.value)} required
                        style={{ width:"100%", padding:"12px 0", border:"none", borderBottom:"1px solid var(--hairline)", fontFamily:"var(--body)", fontSize:16, background:"transparent", outline:"none" }}>
                        <option value="">Select condition</option>
                        {["Like New","Excellent","Good","Fair"].map(c => <option key={c}>{c}</option>)}
                      </select>
                    ) : cls === "col-span-2 textarea" ? (
                      <textarea value={form[k]} onChange={e => upd(k, e.target.value)} required rows={4}
                        style={{ width:"100%", padding:"12px 0", border:"none", borderBottom:"1px solid var(--hairline)", fontFamily:"var(--body)", fontSize:16, background:"transparent", outline:"none", resize:"vertical" }} />
                    ) : (
                      <input type={k === "email" ? "email" : k === "price" ? "number" : "text"}
                        value={form[k]} onChange={e => upd(k, e.target.value)}
                        required={k !== "phone"}
                        style={{ width:"100%", padding:"12px 0", border:"none", borderBottom:"1px solid var(--hairline)", fontFamily:"var(--body)", fontSize:16, background:"transparent", outline:"none" }} />
                    )}
                  </div>
                ))}
                <div style={{ gridColumn:"1/-1", display:"flex", gap:16, alignItems:"center", marginTop:8 }}>
                  <button type="submit" className="btn" data-cursor="link">Submit Listing <ArrowRight /></button>
                  <p style={{ fontSize:12, color:"var(--gray-400)", lineHeight:1.5 }}>
                    ChainLine Cycle hosts this board as a community service. All sales are between private parties.
                  </p>
                </div>
              </form>
            </div>
          )}

<div style={{ display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:24 }}>
            {DEMO_LISTINGS.map((l, i) => (
              <div key={i} className={"reveal reveal-d-" + (i%3+1)} style={{ padding:28, border:"1px solid var(--hairline)", display:"flex", flexDirection:"column", gap:12 }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:8 }}>
                  <span className="pill" style={{ color:"var(--gray-500)" }}>{l.cat}</span>
                  <span className="eyebrow">{l.posted}</span>
                </div>
                <div className="display-s" style={{ lineHeight:1.2 }}>{l.title}</div>
                <p style={{ fontSize:13, color:"var(--gray-500)", lineHeight:1.55, flex:1 }}>{l.desc}</p>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
                  <span style={{ fontFamily:"var(--display)", fontSize:22, fontWeight:500 }}>${l.price.toLocaleString()}</span>
                  <span className="pill" style={{ color:"var(--gray-400)" }}>{l.cond}</span>
                </div>
                <button className="btn btn-outline" data-cursor="link"
                  onClick={() => window.location.href = `mailto:bikes@chainline.ca?subject=Classifieds Enquiry: ${encodeURIComponent(l.title)}&body=Hi, I'm interested in the listing: ${encodeURIComponent(l.title)} ($${l.price}). Please put me in touch with the seller.`}
                  style={{ width:"100%", justifyContent:"center" }}>
                  Enquire <ArrowRight />
                </button>
              </div>
            ))}
          </div>

<div style={{ marginTop:48, textAlign:"center" }}>
            <p style={{ fontFamily:"var(--mono)", fontSize:11, letterSpacing:".12em", textTransform:"uppercase", color:"var(--gray-400)" }}>
              ChainLine Cycle facilitates this board as a community service. All transactions are between private parties.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
};

// BIKES BY BRAND PAGE
const BrandPage = () => {
  const brands = [
    { name:"Marin", desc:"San Rafael, CA — Trail, Road, Gravel, City, Kids. California ride culture since 1986.", count: SHOP_BIKES.filter(b=>b.brand==="Marin").length },
    { name:"Transition", desc:"Bellingham, WA — High-performance trail and enduro bikes built by riders, for riders.", count: SHOP_BIKES.filter(b=>b.brand==="Transition").length },
    { name:"Surly", desc:"Minneapolis, MN — Steel bikes built to go anywhere. Gravel, touring, fatbike, adventure.", count: SHOP_BIKES.filter(b=>b.brand==="Surly").length },
    { name:"Salsa", desc:"Minneapolis, MN — Adventure bikes for the long haul. Gravel, touring, fatbike.", count: 0 },
    { name:"Pivot", desc:"Scottsdale, AZ — Carbon trail and enduro bikes with dw-link suspension.", count: SHOP_BIKES.filter(b=>b.brand==="Pivot").length },
    { name:"Bianchi", desc:"Milan, Italy — The oldest bicycle brand in the world. Road, gravel, and MTB.", count: 0 },
    { name:"Moots", desc:"Steamboat Springs, CO — Hand-welded titanium bikes. Made in America.", count: 0 },
    { name:"Knolly", desc:"North Vancouver, BC — No-compromise full-suspension mountain bikes engineered for Pacific Northwest trails.", count: 0 },
    { name:"Revel", desc:"Carbondale, CO — Obsessively engineered mountain bikes with CBF suspension for unmatched small-bump compliance.", count: 0 },
  ];
  return (
    <div className="page-fade">
      <SubHero eyebrow="Shop  /  Brands" title="Our brands." italic="Curated with care." />
      <section style={{ padding:"60px 0 100px", background:"var(--white)" }}>
        <div className="container-wide">
          <div style={{ borderTop:"1px solid var(--hairline)" }}>
            {brands.map((br, i) => (
              <div key={i} className="reveal page-wide-row" style={{ display:"grid", gridTemplateColumns:"240px 1fr 160px 120px", gap:32, padding:"40px 0", borderBottom:"1px solid var(--hairline)", alignItems:"center" }}>
                <div className="display-m">{br.name}</div>
                <p style={{ fontSize:14, color:"var(--gray-500)", lineHeight:1.6 }}>{br.desc}</p>
                <div className="eyebrow">{br.count > 0 ? `${br.count} bikes in stock` : "Coming soon"}</div>
                {br.count > 0
                  ? <button className="btn btn-outline" data-cursor="link" onClick={() => window.cl.go("shop", { brand: br.name })} style={{ justifyContent:"center", fontSize:11 }}>Shop {br.name} <ArrowRight /></button>
                  : <button className="btn btn-outline" data-cursor="link" onClick={() => window.cl.go("contact")} style={{ justifyContent:"center", fontSize:11 }}>Enquire <ArrowRight /></button>
                }
              </div>
            ))}
          </div>
        </div>
      </section>
      <Newsletter />
    </div>
  );
};

// TERMS OF SERVICE
const TermsPage = () => (
  <div className="page-fade">
    <SubHero eyebrow="Legal  /  Terms" title="Terms of Service." italic="Honest and straightforward." />
    <section className="section section-pad bg-white">
      <div className="container-narrow">
        {[
          ["1. Overview", "These Terms of Service govern your use of the ChainLine Cycle website and your purchase of products and services from ChainLine Cycle Inc. ('ChainLine', 'we', 'us', 'our'), located at 1139 Ellis St, Kelowna, BC V1Y 1Z5. By using our website or making a purchase, you agree to these terms."],
          ["2. Products & Pricing", "All prices are in Canadian dollars and include applicable taxes unless otherwise stated. We reserve the right to correct pricing errors and to discontinue products at any time. Product availability is subject to change without notice. We make every effort to display products accurately but cannot guarantee that your screen accurately reflects product colours."],
          ["3. Orders & Payment", "By placing an order, you warrant that you are legally capable of entering into binding contracts. We accept Visa, Mastercard, American Express, Apple Pay, and Shop Pay. Payment is processed at the time of order. We reserve the right to refuse or cancel any order for any reason, including suspected fraud."],
          ["4. Shipping & Pickup", "In-store pickup is available at 1139 Ellis St, Kelowna, BC. Shipping rates and timelines are displayed at checkout. Risk of loss and title for items purchased pass to you upon delivery to the carrier. ChainLine is not responsible for delays caused by the carrier."],
          ["5. Returns & Exchanges", "Unused items in original packaging may be returned within 30 days of purchase with a receipt for a full refund or exchange. Bikes must be returned in as-new condition and may be subject to a restocking fee. Sale items, special orders, and installed parts are final sale. Contact us at bikes@chainline.ca to initiate a return."],
          ["6. Warranty", "All bikes and components are covered by the respective manufacturer's warranty. ChainLine Cycle acts as an authorized warranty service centre for all brands we carry. Typical coverage: frame/fork 2–5 years (varies by brand), components 1 year. Warranty covers manufacturing defects and does not cover normal wear, crash damage, or modifications. Bring your bike in with proof of purchase and we'll handle the warranty claim on your behalf — no charge for warranty service."],
          ["7. Service Work", "Service bookings are confirmed via phone or email. We will contact you if the scope or cost of work changes from your original booking. Bikes left uncollected after 30 days of completion may incur storage fees. ChainLine is not responsible for pre-existing damage discovered during service."],
          ["8. Limitation of Liability", "ChainLine Cycle's liability is limited to the value of the products or services purchased. We are not liable for indirect, incidental, or consequential damages. Some jurisdictions do not allow limitations on implied warranties, so these limitations may not apply to you."],
          ["9. Governing Law", "These terms are governed by the laws of British Columbia, Canada. Any disputes shall be resolved in the courts of Kelowna, BC."],
          ["10. Contact", "Questions? Email bikes@chainline.ca or call (250) 860-1968. Mon–Fri 9:30–5:30, Sat 10–4."],
        ].map(([h, t]) => (
          <div key={h} style={{ marginBottom: 40 }}>
            <div className="display-s" style={{ marginBottom: 16 }}>{h}</div>
            <p style={{ fontSize: 15, lineHeight: 1.75, color: "var(--gray-600)" }}>{t}</p>
          </div>
        ))}
        <div style={{ marginTop: 48, padding: "20px 24px", background: "var(--paper)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gray-500)" }}>
          Last updated: April 2026  ·  ChainLine Cycle Inc.  ·  1139 Ellis St, Kelowna, BC V1Y 1Z5
        </div>
      </div>
    </section>
  </div>
);

// PRIVACY POLICY
const PrivacyPage = () => (
  <div className="page-fade">
    <SubHero eyebrow="Legal  /  Privacy" title="Privacy Policy." italic="We respect your data." />
    <section className="section section-pad bg-white">
      <div className="container-narrow">
        {[
          ["1. Information We Collect", "When you make a purchase or create an account, we collect your name, email address, phone number, mailing address, and payment information (processed securely by our payment provider — we do not store full card numbers). When you browse our website, we collect standard server logs including IP address, browser type, and pages visited. We may also collect information you provide when booking services or contacting us."],
          ["2. How We Use Your Information", "We use your information to process and fulfil orders, send order confirmations and shipping updates, respond to your inquiries, send our newsletter (only if you opt in), improve our website and services, and comply with legal obligations. We do not sell, rent, or trade your personal information to third parties."],
          ["3. Sharing Your Information", "We share your information only with trusted service providers who help us operate our business (payment processors, shipping carriers, email service providers). These parties are contractually obligated to keep your information confidential and use it only for the services they provide to us. We may disclose your information when required by law."],
          ["4. Cookies", "Our website uses cookies to remember your preferences, keep you signed in, and understand how visitors use our site. You can disable cookies in your browser settings, though some site features may not function properly. We do not use cookies to track you across third-party websites."],
          ["5. Email Communications", "If you subscribe to our newsletter, you can unsubscribe at any time via the link in any email we send. We do not spam. One email per fortnight, maximum."],
          ["6. Data Retention", "We retain your personal information for as long as necessary to fulfil the purposes outlined in this policy, or as required by law. You may request deletion of your account and personal data by contacting us at bikes@chainline.ca."],
          ["7. Security", "We take reasonable precautions to protect your information. All payment data is processed over encrypted SSL connections. No method of internet transmission is 100% secure — we cannot guarantee absolute security."],
          ["8. Your Rights", "Under PIPEDA (Personal Information Protection and Electronic Documents Act) and BC PIPA, you have the right to access the personal information we hold about you, request corrections, and withdraw consent for certain uses. Contact bikes@chainline.ca to exercise these rights."],
          ["9. Third-Party Links", "Our website may contain links to third-party websites. We are not responsible for the privacy practices of those sites."],
          ["10. Contact", "Privacy questions or requests: bikes@chainline.ca · (250) 860-1968 · 1139 Ellis St, Kelowna, BC V1Y 1Z5."],
        ].map(([h, t]) => (
          <div key={h} style={{ marginBottom: 40 }}>
            <div className="display-s" style={{ marginBottom: 16 }}>{h}</div>
            <p style={{ fontSize: 15, lineHeight: 1.75, color: "var(--gray-600)" }}>{t}</p>
          </div>
        ))}
        <div style={{ marginTop: 48, padding: "20px 24px", background: "var(--paper)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--gray-500)" }}>
          Last updated: April 2026  ·  ChainLine Cycle Inc.  ·  1139 Ellis St, Kelowna, BC V1Y 1Z5
        </div>
      </div>
    </section>
  </div>
);

Object.assign(window, { ShopPage, ServicesPage, BookPage, AboutPage, RidesPage, TrailsPage, ContactPage, GiftCardsPage, PartsPage, ClassifiedsPage, BrandPage, BikeCardLarge, SubHero, SHOP_BIKES, TermsPage, PrivacyPage });

{b.name || b.title}

{title}

Ride better.Feel better.

Winter storage.Spring ready.

What service?

Pick a date.

Your bike.

Your details.

Request Sent ✓

Ride better.
Feel better.

Winter storage.
Spring ready.