{/* fade edges */}

{items.map(({ name, url, logo }, i) => (

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 }) { return (

BIKEFORGE

{user && ( {user.name} )} {plan === "pro" ? ( PRO ) : ( )} {onLogout && ( )}

); } // ----- 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: "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 Stripe · Keine versteckten Kosten

); } // ----- 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"; return (

{SLOT_LABELS[slot]}

{item.name}

{item.level && {item.level.replace("_", "-")}}

{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 => (

{s.thumbnail &&

}

{s.profile.terrain.toUpperCase()} · {s.profile.riding_style}

{s.title}

))}

{/* 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, BrandTicker, SpecMini, Segmented, SliderField };