/* global React, ReactDOM */
// Bike-Konfigurator — Haupt-App
// Layouts: studio (split), editorial (scroll), garage (dashboard)

const { useState, useEffect, useMemo, useCallback, useRef } = React;

// ----- Helpers -----
const fmtPrice = (n) => new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR", maximumFractionDigits: 0 }).format(n || 0);
const fmtNum = (n) => new Intl.NumberFormat("de-DE").format(Math.round(n || 0));

const TERRAIN_OPTIONS = [
  { value: "trail", label: "Trail" },
  { value: "enduro", label: "Enduro" },
  { value: "xc", label: "Cross-Country" }
];
const STYLE_OPTIONS = [
  { value: "playful", label: "Verspielt" },
  { value: "balanced", label: "Balanced" },
  { value: "stable", label: "Stabil" },
  { value: "aggressive", label: "Aggressiv" }
];
const SKILL_OPTIONS = [
  { value: "beginner", label: "Einsteiger" },
  { value: "intermediate", label: "Fortgeschritten" },
  { value: "advanced", label: "Erfahren" },
  { value: "expert", label: "Experte" }
];

const SLOT_LABELS = {
  frame: "Rahmen",
  brakes: "Bremsen",
  drivetrain: "Antrieb",
  wheels: "Laufräder",
  fork: "Gabel",
  shock: "Dämpfer",
  tires: "Reifen",
  cockpit: "Cockpit",
  dropper: "Dropper-Post",
  saddle: "Sattel",
  grips: "Griffe",
  chain: "Kette",
  pedals: "Pedale"
};

const SLOT_TO_POOL = {
  frame: null, // separate (frames data)
  brakes: "brakes",
  drivetrain: "drivetrains",
  wheels: "wheels",
  fork: "forks",
  shock: "shocks",
  tires: "tires",
  cockpit: "cockpit",
  dropper: "droppers",
  saddle: "saddles",
  grips: "grips",
  chain: "chains",
  pedals: "pedals"
};

const PRIMARY_SLOTS = ["frame", "brakes", "drivetrain", "wheels", "fork", "shock", "tires", "cockpit", "dropper"];
const SECONDARY_SLOTS = ["saddle", "grips", "chain", "pedals"];

// ----- Icons (inline SVG, hairline) -----
const Icon = ({ name, size = 24 }) => {
  const c = "currentColor";
  const sw = 1.5;
  const paths = {
    frame: <><circle cx="6" cy="17" r="3.5" /><circle cx="18" cy="17" r="3.5" /><path d="M6 17 L11 8 L17 8 L18 17 M11 8 L15 17" /></>,
    brakes: <><circle cx="12" cy="12" r="7" /><circle cx="12" cy="12" r="2" /><path d="M12 5 L12 8 M12 16 L12 19 M5 12 L8 12 M16 12 L19 12" /></>,
    drivetrain: <><circle cx="9" cy="14" r="4" /><circle cx="17" cy="10" r="2.5" /><path d="M9 10 L9 6 M5 14 L3 16" /></>,
    wheels: <><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="1.5" /><path d="M12 4 L12 20 M4 12 L20 12 M6.3 6.3 L17.7 17.7 M17.7 6.3 L6.3 17.7" /></>,
    fork: <><path d="M10 4 L10 13 M14 4 L14 13 M8 13 L16 13 M9 17 L15 17 M12 13 L12 21" /></>,
    shock: <><rect x="9" y="4" width="6" height="16" /><path d="M11 7 L13 7 M11 10 L13 10 M11 13 L13 13 M11 16 L13 16" /></>,
    tires: <><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="6" strokeDasharray="2 2" /></>,
    cockpit: <><path d="M3 12 L21 12 M6 9 L6 15 M18 9 L18 15 M11 12 L11 18 M13 12 L13 18" /></>,
    dropper: <><rect x="10" y="3" width="4" height="6" /><path d="M12 9 L12 21 M9 12 L15 12 M9 18 L15 18" /></>,
    saddle: <><path d="M4 10 Q12 6 20 10 Q12 14 4 10 Z M12 14 L12 20" /></>,
    grips: <><path d="M3 11 L3 13 L18 13 L21 12 L18 11 Z" /></>,
    chain: <><circle cx="6" cy="12" r="2.5" /><circle cx="12" cy="12" r="2.5" /><circle cx="18" cy="12" r="2.5" /></>,
    pedals: <><rect x="4" y="9" width="8" height="6" /><path d="M12 12 L20 12" /></>,
    cavallino: <><path d="M12 3 L14 7 L12 9 L10 7 Z M12 9 L12 21 M9 12 L15 12 M8 18 L16 18" /></>,
    chevron: <><path d="M9 6 L15 12 L9 18" /></>,
    save: <><path d="M5 5 L5 19 L19 19 L19 9 L15 5 Z M9 5 L9 11 L15 11 L15 5 M9 15 L15 15" /></>,
    list: <><path d="M4 6 L20 6 M4 12 L20 12 M4 18 L20 18" /></>,
    close: <><path d="M5 5 L19 19 M5 19 L19 5" /></>,
    plus: <><path d="M12 5 L12 19 M5 12 L19 12" /></>,
    upload: <><path d="M12 4 L12 16 M7 9 L12 4 L17 9 M5 19 L19 19" /></>,
    download: <><path d="M12 4 L12 16 M7 11 L12 16 L17 11 M5 20 L19 20" /></>,
    refresh: <><path d="M3 12 A9 9 0 0 1 18 6 L21 6 M21 4 L21 8 M21 12 A9 9 0 0 1 6 18 L3 18 M3 16 L3 20" /></>,
    weight: <><path d="M5 8 L19 8 L17 21 L7 21 Z M9 8 Q9 4 12 4 Q15 4 15 8" /></>,
    height: <><path d="M12 3 L12 21 M8 7 L12 3 L16 7 M8 17 L12 21 L16 17" /></>,
    skill: <><path d="M4 20 L4 14 M10 20 L10 10 M16 20 L16 6 M22 20 L22 4" /></>,
    style: <><path d="M3 17 Q9 8 14 13 Q18 17 21 7" /></>,
    terrain: <><path d="M3 18 L8 11 L12 15 L16 8 L21 18 Z" /></>,
    money: <><path d="M12 3 L12 21 M8 7 Q14 5 16 8 Q18 11 13 12 Q8 13 9 16 Q11 19 17 17" /></>,
    check: <><path d="M5 12 L10 17 L19 7" /></>,
    compare: <><path d="M12 3 L12 21 M5 6 L5 17 L9 17 L9 6 Z M15 9 L15 14 L19 14 L19 9 Z" /></>,
    warn: <><path d="M12 4 L21 19 L3 19 Z M12 10 L12 14 M12 17 L12 17.5" /></>,
    info: <><circle cx="12" cy="12" r="9" /><path d="M12 11 L12 17 M12 7 L12 8" /></>,
    bolt: <><path d="M13 3 L5 14 L11 14 L11 21 L19 10 L13 10 Z" /></>
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth={sw} strokeLinecap="square" strokeLinejoin="miter">
      {paths[name] || null}
    </svg>
  );
};

window.BikeIcon = Icon;
window.BikeFmt = { fmtPrice, fmtNum, SLOT_LABELS, SLOT_TO_POOL, PRIMARY_SLOTS, SECONDARY_SLOTS, TERRAIN_OPTIONS, STYLE_OPTIONS, SKILL_OPTIONS };