// ui.jsx — shared UI atoms: Logo, Icons, CarPhoto, etc. const Logo = ({ size = 28 }) => ( OttoKlar ); // Iconography — single-stroke, 1.6px const Ic = { arrow: (p) => (), arrowDown: (p) => (), check: (p) => (), camera: (p) => (), upload: (p) => (), pin: (p) => (), star: (p) => (), shield: (p) => (), bolt: (p) => (), euro: (p) => (), wrench: (p) => (), wrench2: (p) => (), tools: (p) => (), clock: (p) => (), sparkle: (p) => (), x: (p) => (), more: (p) => (), phone: (p) => (), calendar: (p) => (), chevron: (p) => (), }; // Header bar — used on landing AND app screens const Header = ({ onLaunch, view, onHome, onPartnerLogin }) => (
{ e.preventDefault(); onHome && onHome(); }} aria-label="OttoKlar home">
); // CarPhoto — synthetic damaged-car "photo" with severity-aware annotations. // Severity: 'minor' | 'moderate' | 'severe' const CarPhoto = ({ severity = "moderate", showOverlay = true, scanning = false, theme }) => { const accent = "#10A171"; // Damage configurations per severity const damages = { minor: [ { x: 56, y: 64, w: 18, h: 9, label: t("CarPhoto.damageMinorBumper"), conf: "97%" }, ], moderate: [ { x: 30, y: 56, w: 22, h: 14, label: t("CarPhoto.damageModerateDoor"), conf: "96%" }, { x: 58, y: 64, w: 16, h: 8, label: t("CarPhoto.damageModeratePaint"), conf: "92%" }, ], severe: [ { x: 28, y: 50, w: 28, h: 22, label: t("CarPhoto.damageSeverePanel"), conf: "98%" }, { x: 56, y: 62, w: 22, h: 13, label: t("CarPhoto.damageSevereBumper"), conf: "97%" }, { x: 12, y: 42, w: 14, h: 12, label: t("CarPhoto.damageSevereHeadlight"), conf: "89%" }, ], }[severity]; return (
{/* Asphalt ground */}
{/* Car body — stylized 3/4 view of rear-door + bumper */} {/* Main body */} {/* Window strip */} {/* Door split lines */} {/* Door handles */} {/* Wheel arches */} {/* Wheels */} {/* Highlight on body */} {/* DAMAGE marks — drawn on the body underneath the AI overlay */} {severity === "minor" && ( <> )} {severity === "moderate" && ( <> {/* Door dent */} {/* Paint chip on bumper */} )} {severity === "severe" && ( <> {/* Big panel deformation */} {/* Cracked bumper */} {/* Headlight crack */} )} {/* Scanning line overlay */} {scanning && ( <>
{t("CarPhoto.scanning")}
)} {/* AI overlay — bounding boxes & labels */} {showOverlay && !scanning && damages.map((d, i) => (
{d.label} · {d.conf}
))} {/* Camera HUD corners */} {showOverlay && [["tl",10,10],["tr",10,"auto"],["bl","auto",10],["br","auto","auto"]].map(([pos, top, left], i) => { const corner = pos; const style = { position: "absolute", width: 14, height: 14, opacity: 0.65 }; if (corner === "tl") Object.assign(style, { top: 10, left: 10, borderTop: "1.5px solid #fff", borderLeft: "1.5px solid #fff" }); if (corner === "tr") Object.assign(style, { top: 10, right: 10, borderTop: "1.5px solid #fff", borderRight: "1.5px solid #fff" }); if (corner === "bl") Object.assign(style, { bottom: 10, left: 10, borderBottom: "1.5px solid #fff", borderLeft: "1.5px solid #fff" }); if (corner === "br") Object.assign(style, { bottom: 10, right: 10, borderBottom: "1.5px solid #fff", borderRight: "1.5px solid #fff" }); return
; })}
); }; // Step number ring const StepNum = ({ n }) => (
{String(n).padStart(2, "0")}
); // Avatar bubble const Avatar = ({ initials, color = "#10A171" }) => (
{initials}
); Object.assign(window, { Logo, Ic, Header, CarPhoto, StepNum, Avatar });