/* global React */ // Bike-Konfigurator — UI-Komponenten const { useState, useEffect, useMemo, useCallback, useRef } = React; const { fmtPrice, fmtNum, SLOT_LABELS, SLOT_TO_POOL, PRIMARY_SLOTS, SECONDARY_SLOTS, TERRAIN_OPTIONS, STYLE_OPTIONS, SKILL_OPTIONS } = window.BikeFmt; const Icon = window.BikeIcon; // ----- Brand registry ----- const BRAND_MAP = { "Shimano": { url: "https://www.shimano.com", logo: "https://logo.clearbit.com/shimano.com" }, "SRAM": { url: "https://www.sram.com", logo: "https://logo.clearbit.com/sram.com" }, "RockShox": { url: "https://www.sram.com/en/rockshox", logo: "https://logo.clearbit.com/sram.com" }, "Fox": { url: "https://www.ridefox.com", logo: "https://logo.clearbit.com/ridefox.com" }, "Maxxis": { url: "https://www.maxxis.com", logo: "https://logo.clearbit.com/maxxis.com" }, "Schwalbe": { url: "https://www.schwalbe.com", logo: "https://logo.clearbit.com/schwalbe.com" }, "Crankbrothers":{ url: "https://www.crankbrothers.com", logo: "https://logo.clearbit.com/crankbrothers.com" }, "OneUp": { url: "https://www.oneupcomponents.com", logo: "https://logo.clearbit.com/oneupcomponents.com" }, "Ergon": { url: "https://www.ergon-bike.com", logo: "https://logo.clearbit.com/ergon-bike.com" }, "BikeYoke": { url: "https://bikeyoke.de", logo: "https://logo.clearbit.com/bikeyoke.de" }, "Bosch": { url: "https://www.bosch-ebike.com", logo: "https://logo.clearbit.com/bosch-ebike.com" }, "DT Swiss": { url: "https://www.dtswiss.com", logo: "https://logo.clearbit.com/dtswiss.com" }, "Suntour": { url: "https://www.srsuntour-cycling.com", logo: "https://logo.clearbit.com/srsuntour-cycling.com" }, "ODI": { url: "https://www.odigrips.com", logo: "https://logo.clearbit.com/odigrips.com" }, "SQlab": { url: "https://www.sq-lab.com", logo: "https://logo.clearbit.com/sq-lab.com" }, "X-Fusion": { url: "https://www.xfusionshox.com", logo: "https://logo.clearbit.com/xfusionshox.com" }, "KS": { url: "https://www.kindshock.com", logo: "https://logo.clearbit.com/kindshock.com" }, "Magura": { url: "https://www.magura.com", logo: "https://logo.clearbit.com/magura.com" }, "TRP": { url: "https://www.trpcycling.com", logo: "https://logo.clearbit.com/trpcycling.com" }, "Enve": { url: "https://www.enve.com", logo: "https://logo.clearbit.com/enve.com" }, "Brand-X": { url: "https://www.chainreactioncycles.com", logo: "https://logo.clearbit.com/chainreactioncycles.com" }, }; const FALLBACK_MARKETPLACE_PARTNERS = [ { id: "bike_discount", name: "Bike-Discount", status: "pending", search_url_template: "https://www.bike-discount.de/de/search?sSearch={query_encoded}", tracking_url_template: "", priority: 10 }, { id: "bike24", name: "Bike24", status: "pending", search_url_template: "https://www.bike24.de/search?searchTerm={query_encoded}", tracking_url_template: "", priority: 20 }, { id: "mantel", name: "Mantel", status: "pending", search_url_template: "https://www.mantel.com/de/search?search={query_encoded}", tracking_url_template: "", priority: 50 } ]; function detectBrand(name) { for (const brand of Object.keys(BRAND_MAP)) { if (name && name.toLowerCase().includes(brand.toLowerCase())) return brand; } return null; } function getMarketplacePartners() { const registry = window.BikeAffiliatePartners; const partners = Array.isArray(registry?.partners) ? registry.partners : FALLBACK_MARKETPLACE_PARTNERS; const usable = partners .filter(p => p.status !== "disabled" && p.search_url_template) .sort((a, b) => (a.priority || 999) - (b.priority || 999)); return usable.length ? usable : FALLBACK_MARKETPLACE_PARTNERS; } function fillMarketplaceTemplate(template, item, partner, destinationUrl) { const rawQuery = item?.name || "mountainbike komponenten"; const encodedQuery = encodeURIComponent(rawQuery); const campaign = "component_offer"; const content = item?.id || "component"; return template .replaceAll("{query}", rawQuery) .replaceAll("{query_encoded}", encodedQuery) .replaceAll("{item_id}", content) .replaceAll("{partner_id}", partner.id || partner.name || "partner") .replaceAll("{campaign}", campaign) .replaceAll("{content}", content) .replaceAll("{destination_url}", destinationUrl) .replaceAll("{destination_url_encoded}", encodeURIComponent(destinationUrl)); } function appendMarketplaceParams(urlText, item, partner) { const url = new URL(urlText); const defaults = window.BikeAffiliatePartners?.tracking_defaults || {}; url.searchParams.set("utm_source", defaults.utm_source || "bikeforge"); url.searchParams.set("utm_medium", defaults.utm_medium || "marketplace"); url.searchParams.set("utm_campaign", defaults.utm_campaign || "component_offer"); url.searchParams.set("utm_content", item?.id || "component"); url.searchParams.set("partner", partner.id || partner.name || "partner"); return url.toString(); } function marketplaceUrlFor(item, partner = getMarketplacePartners()[0]) { const destination = fillMarketplaceTemplate(partner.search_url_template, item, partner, ""); const destinationWithParams = appendMarketplaceParams(destination, item, partner); if (partner.status === "active" && partner.tracking_url_template) { return fillMarketplaceTemplate(partner.tracking_url_template, item, partner, destinationWithParams); } return destinationWithParams; } function MarketplaceButton({ item, compact = false }) { if (!item) return null; return ( e.stopPropagation()} title={`${item.name} Angebote bei ${getMarketplacePartners()[0]?.name || "Partnern"} prüfen`} style={{ display: "inline-flex", alignItems: "center", gap: compact ? 4 : 7, background: compact ? "transparent" : "var(--accent-soft)", color: compact ? "var(--accent)" : "var(--ink)", border: compact ? "none" : "1px solid var(--accent)", padding: compact ? 0 : "6px 10px", textDecoration: "none", font: `700 ${compact ? 10 : 11}px/1 var(--font-sans)`, letterSpacing: "0.7px", textTransform: "uppercase", whiteSpace: "nowrap" }} > Angebote ); } function BrandBadge({ name, size = "sm" }) { const brand = detectBrand(name); if (!brand) return null; const { url, logo } = BRAND_MAP[brand]; const [imgOk, setImgOk] = useState(true); const isLarge = size === "lg"; return ( e.stopPropagation()} title={`${brand} Website`} style={{ display: "inline-flex", alignItems: "center", gap: isLarge ? 8 : 5, background: "rgba(255,255,255,0.06)", border: "1px solid var(--hairline)", padding: isLarge ? "6px 12px" : "3px 8px", textDecoration: "none", flexShrink: 0, }}> {imgOk && ( {brand} setImgOk(false)} style={{ height: isLarge ? 18 : 12, width: "auto", objectFit: "contain", filter: "brightness(0) invert(1)" }} /> )} {imgOk ? "" : brand} ); } // ----- Brand Ticker ----- const TICKER_BRANDS = Object.entries(BRAND_MAP).map(([name, { url, logo }]) => ({ name, url, logo })); function BrandTicker() { // Inject keyframes once useEffect(() => { if (document.getElementById("bf-ticker-style")) return; const s = document.createElement("style"); s.id = "bf-ticker-style"; s.textContent = ` @keyframes bf-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .bf-ticker-track { animation: bf-marquee 28s linear infinite; } .bf-ticker-track:hover { animation-play-state: paused; } `; document.head.appendChild(s); }, []); const items = [...TICKER_BRANDS, ...TICKER_BRANDS]; // seamless loop return (
{/* fade edges */}
{items.map(({ name, url, logo }, i) => ( {name} e.target.style.opacity = "1"} onMouseLeave={e => e.target.style.opacity = "0.55"} onError={e => { e.target.style.display = "none"; e.target.nextSibling.style.display = "block"; }} /> {name} ))}
); } // ----- Top Nav ----- function TopNav({ onOpenGarage, savedCount, onReset, user, onLogout, plan, onUpgrade, onOpenExistingBike }) { return (
BIKEFORGE
{user && ( {user.name} )} {plan === "pro" ? ( PRO ) : ( )} {onLogout && ( )} Legal
); } const EXISTING_BIKE_FIELDS = [ { key: "fork", label: "Gabel", placeholder: "Fox 36 Performance" }, { key: "shock", label: "Dämpfer", placeholder: "Fox Float X" }, { key: "brakes", label: "Bremsen", placeholder: "SRAM Code R" }, { key: "drivetrain", label: "Antrieb", placeholder: "SRAM GX Eagle" }, { key: "wheels", label: "Laufräder", placeholder: "DT Swiss EX1700" }, { key: "tires", label: "Reifen", placeholder: "Maxxis Minion DHF" }, { key: "dropper", label: "Dropper", placeholder: "OneUp V2 150" }, { key: "cockpit", label: "Cockpit", placeholder: "Race Face Turbine" }, { key: "grips", label: "Griffe", placeholder: "ODI Elite Pro" }, { key: "saddle", label: "Sattel", placeholder: "Ergon SM Pro" }, { key: "chain", label: "Kette", placeholder: "SRAM GX Eagle Chain" }, { key: "pedals", label: "Pedale", placeholder: "Crankbrothers Stamp" } ]; const PHOTO_HINTS_BY_SLOT = { fork: "Gabel-Decals und linke/rechte Seite freier sichtbar fotografieren.", shock: "Daempferbereich im Rahmendreieck heller aufnehmen.", brakes: "Bremssattel und Bremshebel naeher sichtbar machen.", drivetrain: "Rechte Seite mit Schaltwerk, Kassette und Kurbel fotografieren.", wheels: "Naben und Felgenprofil seitlich klar sichtbar lassen.", tires: "Reifenflanke lesbar aufnehmen.", dropper: "Sattelstuetze und Remote-Hebel heller zeigen.", cockpit: "Lenker, Vorbau und Hebel nicht vom Rahmen verdecken lassen.", grips: "Lenkerenden und Griffe naeher sichtbar machen.", saddle: "Sattel seitlich und von oben nicht verdecken.", chain: "Kette und Kassette auf der Antriebsseite sichtbar machen.", pedals: "Pedale seitlich freistellen, nicht vom Kurbelarm verdecken lassen." }; function confidenceLevel(value) { const confidence = Math.max(0, Math.min(1, Number(value || 0))); if (confidence >= 0.75) return "ok"; if (confidence >= 0.45) return "check"; return "low"; } function confidenceHintFor(field, confidence) { const percent = Math.round(Math.max(0, Math.min(1, Number(confidence || 0))) * 100); const base = PHOTO_HINTS_BY_SLOT[field.key] || "Komponente manuell pruefen."; return `${field.label}: ${percent}% - ${base}`; } function ExistingBikeModal({ profile, onApply, onClose }) { const [preview, setPreview] = useState(null); const [modelName, setModelName] = useState(""); const [terrain, setTerrain] = useState(profile.terrain || "trail"); const [bikeType, setBikeType] = useState(profile.bike_type || "analog"); const [components, setComponents] = useState({}); const [componentActions, setComponentActions] = useState({}); const [componentConfidence, setComponentConfidence] = useState({}); const [analyzing, setAnalyzing] = useState(false); const [detailAnalyzingSlot, setDetailAnalyzingSlot] = useState(null); const [detailMessage, setDetailMessage] = useState(null); const [analysisError, setAnalysisError] = useState(null); const [analysisMeta, setAnalysisMeta] = useState(null); const setComponent = (key, value) => { setComponents(prev => ({ ...prev, [key]: value })); if (String(value || "").trim()) { setComponentActions(prev => ({ ...prev, [key]: prev[key] || "keep" })); } else { setComponentConfidence(prev => { const next = { ...prev }; delete next[key]; return next; }); } }; const applyVisionAnalysis = (payload = {}) => { const analysis = payload.analysis || {}; if (analysis.bike_model_name) setModelName(analysis.bike_model_name); if (analysis.frame_category) setTerrain(analysis.frame_category); setBikeType(analysis.is_ebike ? "ebike" : "analog"); const recognized = Object.entries(analysis.components || {}) .map(([key, value]) => [key, String(value || "").trim()]) .filter(([, value]) => value); if (recognized.length) { setComponents(prev => ({ ...prev, ...Object.fromEntries(recognized) })); setComponentActions(prev => ({ ...prev, ...Object.fromEntries(recognized.map(([key]) => [key, prev[key] || "keep"])) })); setComponentConfidence(prev => ({ ...prev, ...Object.fromEntries( recognized.map(([key]) => [key, Math.max(0, Math.min(1, Number(analysis.component_confidence?.[key] || 0)))]) ) })); } setAnalysisMeta({ provider: payload.provider || "vision", model: payload.model || "", confidence: Number(analysis.confidence || 0), observations: Array.isArray(analysis.observations) ? analysis.observations.filter(Boolean) : [] }); }; const applyDetailAnalysis = (slot, payload = {}) => { const analysis = payload.analysis || {}; const value = String(analysis.components?.[slot] || "").trim(); const confidence = Math.max(0, Math.min(1, Number(analysis.component_confidence?.[slot] || 0))); const field = EXISTING_BIKE_FIELDS.find(item => item.key === slot); if (!value) { setDetailMessage({ kind: "warn", text: `${field?.label || slot}: Detailfoto konnte kein eindeutiges Teil erkennen. Feld bitte manuell pruefen.` }); setComponentConfidence(prev => ({ ...prev, [slot]: confidence })); return; } setComponents(prev => ({ ...prev, [slot]: value })); setComponentActions(prev => ({ ...prev, [slot]: prev[slot] || "keep" })); setComponentConfidence(prev => ({ ...prev, [slot]: confidence })); setDetailMessage({ kind: confidence >= 0.75 ? "ok" : "warn", text: `${field?.label || slot}: Detailfoto erkannt - ${value} (${Math.round(confidence * 100)}%).` }); }; const analyzeImage = async (file) => { setAnalyzing(true); setAnalysisError(null); setDetailMessage(null); setAnalysisMeta(null); try { const body = new FormData(); body.append("image", file); const response = await fetch(`${window.BIKEFORGE_API_URL}/vision/analyze`, { method: "POST", body }); const payload = await response.json().catch(() => ({})); if (!response.ok) { throw new Error(payload.detail || payload.error || "Bildanalyse fehlgeschlagen."); } applyVisionAnalysis(payload); } catch (error) { setAnalysisError(error.message || "Bildanalyse fehlgeschlagen."); } finally { setAnalyzing(false); } }; const analyzeDetailImage = async (slot, file) => { setDetailAnalyzingSlot(slot); setAnalysisError(null); setDetailMessage(null); try { const body = new FormData(); body.append("image", file); body.append("slot", slot); const response = await fetch(`${window.BIKEFORGE_API_URL}/vision/analyze`, { method: "POST", body }); const payload = await response.json().catch(() => ({})); if (!response.ok) { throw new Error(payload.detail || payload.error || "Detailanalyse fehlgeschlagen."); } applyDetailAnalysis(slot, payload); } catch (error) { const field = EXISTING_BIKE_FIELDS.find(item => item.key === slot); setDetailMessage({ kind: "error", text: `${field?.label || slot}: ${error.message || "Detailanalyse fehlgeschlagen."}` }); } finally { setDetailAnalyzingSlot(null); } }; const handleFile = (event) => { const file = event.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setPreview(reader.result); reader.readAsDataURL(file); analyzeImage(file); event.target.value = ""; }; const handleDetailFile = (slot, event) => { const file = event.target.files?.[0]; if (!file) return; analyzeDetailImage(slot, file); event.target.value = ""; }; const apply = () => { onApply({ model_name: modelName.trim() || "Bestandsbike", terrain, is_ebike: bikeType === "ebike", bike_type: bikeType, style: profile.riding_style || "balanced", photo_preview: preview, components: Object.fromEntries( Object.entries(components) .map(([key, value]) => [key, String(value || "").trim()]) .filter(([, value]) => value) ), component_actions: Object.fromEntries( Object.entries(components) .map(([key, value]) => [key, String(value || "").trim()]) .filter(([, value]) => value) .map(([key]) => [key, componentActions[key] || "keep"]) ), component_confidence: Object.fromEntries( Object.entries(components) .map(([key, value]) => [key, String(value || "").trim()]) .filter(([, value]) => value) .map(([key]) => [key, Math.max(0, Math.min(1, Number(componentConfidence[key] || 0)))]) ) }); }; const confidenceHints = EXISTING_BIKE_FIELDS .filter(field => components[field.key] && componentConfidence[field.key] > 0 && componentConfidence[field.key] < 0.75) .map(field => ({ key: field.key, level: confidenceLevel(componentConfidence[field.key]), text: confidenceHintFor(field, componentConfidence[field.key]) })); const lowConfidenceCount = confidenceHints.filter(hint => hint.level === "low").length; return ( <>
{preview ? ( Bestandsbike Vorschau ) : (
Foto-Anleitung: Bike vollstaendig seitlich, hell und auf Nabenhoehe fotografieren
)}
Bestandsbike

Ausstattung als Startpunkt.

Foto hochladen, Vision-Analyse prüfen und sichtbare Teile korrigieren. BikeForge behandelt den Rahmen als vorhandene Basis.

Seitlich fotografieren Ganzes Bike sichtbar Helles Licht ruhiger Hintergrund
{(analysisMeta || analysisError || analyzing) && (
{analyzing && "Vision-Analyse laeuft. Du kannst die Felder danach weiter bearbeiten."} {analysisError && `Vision-Analyse nicht verfuegbar: ${analysisError}`} {analysisMeta && !analysisError && ( <> Vision erkannt ({Math.round(Math.max(0, Math.min(1, analysisMeta.confidence)) * 100)}% Sicherheit) {analysisMeta.observations.length > 0 && (
    {analysisMeta.observations.map((item, index) =>
  • {item}
    • )}
)} )}
)} {confidenceHints.length > 0 && (
{lowConfidenceCount >= 3 ? "Foto wahrscheinlich neu aufnehmen" : "Bitte manuell pruefen"}
{lowConfidenceCount >= 3 ? "Mehrere Teile wurden unsicher erkannt. Seitlicher, heller und mit ruhigem Hintergrund fotografieren." : "Einige erkannte Teile sind unsicher. Pruefe diese Felder vor dem Uebernehmen."}
    {confidenceHints.slice(0, 5).map(hint => (
  • {hint.text}
    • ))}
)} {detailMessage && (
{detailMessage.text}
)}
Bike / Modell
setModelName(e.target.value)} placeholder="z.B. Cube Stereo Hybrid 140" />
Typ
Einsatz
{EXISTING_BIKE_FIELDS.map(field => (
{field.label}
{componentConfidence[field.key] > 0 && ( = 0.75 ? "var(--accent)" : componentConfidence[field.key] < 0.45 ? "var(--danger)" : "var(--ink-muted)", padding: "3px 6px", font: "700 9px/1 var(--font-sans)", letterSpacing: "0.6px", textTransform: "uppercase", whiteSpace: "nowrap" }}> {Math.round(componentConfidence[field.key] * 100)}% )}
setComponentActions(prev => ({ ...prev, [field.key]: value }))} />
setComponent(field.key, e.target.value)} placeholder={field.placeholder} style={{ fontSize: 14 }} /> {components[field.key] && componentConfidence[field.key] > 0 && componentConfidence[field.key] < 0.75 && ( )}
))}
Die Vision-Analyse ist ein Startpunkt, keine technische Garantie. Markiere gute Teile mit Behalten; bei Ersetzen nutzt BikeForge die erkannten Daten nur als Kontext und sucht eine passende neue Komponente.
); } // ----- Upgrade Modal ----- function UpgradeModal({ plan, token, onClose }) { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const handleCheckout = async () => { setLoading(true); setError(null); try { const res = await fetch("/api/checkout/session", { method: "POST", headers: { "Authorization": `Bearer ${token}`, "Content-Type": "application/json" } }); const data = await res.json(); if (!res.ok) { setError(data.error || "Fehler beim Erstellen der Checkout-Session."); setLoading(false); return; } window.location.href = data.url; } catch { setError("Netzwerkfehler. Bitte versuche es erneut."); setLoading(false); } }; const features = [ { label: "Builds speichern", free: "3 Builds", pro: "Unbegrenzt" }, { label: "Komponenten-Tausch", free: true, pro: true }, { label: "Marketplace-Angebote", free: true, pro: true }, { label: "Garage & Verlauf", free: true, pro: true }, { label: "Build-Vergleich", free: false, pro: true }, { label: "PDF-Export", free: false, pro: true }, { label: "Prioritäts-Support", free: false, pro: true }, ]; return ( <>
Upgrade

BikeForge Pro

Feature
Free
Pro
{features.map((f, i) => (
{f.label}
{f.free === true ? "✓" : f.free === false ? "—" : f.free}
{f.pro === true ? "✓" : f.pro === false ? "—" : f.pro}
))}
3,99 €
/ Monat · jederzeit kündbar
{error && (
{error}
)}
Sichere Zahlung über Paddle · Steuern und Zahlungsabwicklung durch Merchant of Record
); } // ----- Profil-Eingabe ----- function ProfileForm({ profile, onChange }) { const set = (k, v) => onChange({ ...profile, [k]: v }); return (
01 — Fahrer-Profil
set("weight", v)} /> set("height", v)} />
02 — Antrieb
set("bike_type", v)} />
03 — Skill
set("skill_level", v)} />
04 — Fahrstil
set("riding_style", v)} />
05 — Einsatzbereich
set("terrain", v)} />
06 — Budget
set("budget", v)} large />
); } function SliderField({ label, min, max, step, unit, value, onChange, large }) { return (
{label}
onChange(Number(e.target.value))} />
{unit === "€" ? fmtNum(value) : value} {unit}
); } function Segmented({ options, value, onChange, accent }) { return (
{options.map(o => ( ))}
); } // ----- Component card ----- function ComponentCard({ slot, item, onClick }) { if (!item) return null; const high = item.level === "high" || item.level === "mid_high"; const visionConfidence = Math.max(0, Math.min(1, Number(item.vision_confidence || 0))); return (
{SLOT_LABELS[slot]}
{item.name}
{item.level && {item.level.replace("_", "-")}} {item.locked && Bestand} {item.replacement_for_existing && Upgrade} {visionConfidence > 0 && Vision {Math.round(visionConfidence * 100)}%} {item.locked && item.confidence && Match {item.confidence}%}
{(item.locked || item.replacement_for_existing) && (
{item.locked ? "Wert" : "Kosten"}
)}
{fmtPrice(item.price || 0)}
); } // ----- Spec cell (Ferrari big-number) ----- function SpecCell({ label, value, unit, accent, mega }) { return (
{label}
{value} {unit && {unit}}
); } // ----- Score panel ----- function ScorePanel({ scores }) { const items = [ { key: "fit_score", label: "FIT", v: scores.fit_score, accent: true }, { key: "performance_score", label: "PERFORMANCE", v: scores.performance_score }, { key: "value_score", label: "VALUE", v: scores.value_score } ]; return (
{items.map(it => (
{it.label}
{it.v.toFixed(1)} /10
))}
); } // ----- Warnings ----- function Warnings({ warnings }) { if (!warnings || warnings.length === 0) return null; return (
{warnings.map((w, i) => (
{w.msg}
))}
); } // ----- Drawer für Komponenten-Tausch ----- function ComponentDrawer({ slot, currentItem, pool, frame, profile, onPick, onClose }) { if (!slot || !pool) return null; // Filter passende Komponenten (gleiche Kompat.-Regeln wie engine) let candidates = pool.slice(); if (slot === "wheels") { candidates = candidates.filter(w => (!w.wheel_sizes || w.wheel_sizes.includes(frame.wheel_size)) && (!w.axle_front || w.axle_front === frame.axle_front)); } else if (slot === "fork") { candidates = candidates.filter(f => (!f.wheel_sizes || f.wheel_sizes.includes(frame.wheel_size)) && (!f.axle || f.axle === frame.axle_front)); } else if (slot === "tires") { candidates = candidates.filter(t => !t.terrain || t.terrain === profile.terrain); } else if (slot === "dropper") { candidates = candidates.filter(d => !d.seatpost_diameters || d.seatpost_diameters.includes(frame.seatpost_diameter)); } else if (slot === "shock" && frame.shock_size_class) { candidates = candidates.filter(s => !s.size_class || s.size_class.includes(frame.shock_size_class)); } candidates.sort((a, b) => (a.price || 0) - (b.price || 0)); return ( <>
Komponente wählen

{SLOT_LABELS[slot]}

{candidates.map(c => (
onPick(c)}>
{c.level ? c.level.replace("_", "-") : ""}
{c.name}
{c.power != null && } {c.range != null && } {c.stiffness != null && } {c.performance != null && } {c.travel_mm != null && } {c.weight_g != null && }
{fmtPrice(c.price || 0)}
))} {candidates.length === 0 &&
Keine kompatiblen Komponenten gefunden.
}
); } function SpecMini({ label, value }) { return ( {label} {value} ); } // ----- Saved Builds Drawer ----- function GarageDrawer({ saved, onClose, onLoad, onDelete, onCompare, user, onLogout, plan, onUpgrade }) { return ( <>
{/* Header */}
Meine Builds

Garage

{saved.length >= 2 && onCompare && ( )}
{/* Build list */}
{saved.length === 0 && (
Noch keine Builds gespeichert

Konfiguriere ein Bike und speichere deinen Build hier.

)} {saved.map(s => { const existingBike = s.profile?.existing_bike; const savedMeta = s.profile?.saved_state || {}; const breakdown = savedMeta.price_breakdown; const existingSummary = savedMeta.existing_summary; const primaryPrice = existingBike && breakdown ? breakdown.upgrade_cost : s.total; const retainedCount = existingSummary?.locked_slots?.length || 0; const replacedCount = existingSummary?.replaced_slots?.length || 0; return (
{s.thumbnail &&
}
{s.profile.terrain.toUpperCase()} · {s.profile.riding_style}
{s.title}
{existingBike && (
Bestandsbike {retainedCount > 0 && Bestand {retainedCount}} {replacedCount > 0 && Upgrade {replacedCount}}
)}
{existingBike && breakdown && (
)}
); })}
{/* User profile footer */} {user && (
{user.name.charAt(0).toUpperCase()}
{user.name}
{user.email}
{plan === "pro" ? ( PRO ) : ( )}
)}
); } window.BikeUI = { TopNav, ProfileForm, ComponentCard, SpecCell, ScorePanel, Warnings, ComponentDrawer, GarageDrawer, UpgradeModal, ExistingBikeModal, BrandTicker, SpecMini, Segmented, SliderField };