const { useState } = React;

const KEYS = {
  AC: 'L',
  AA: 'RSHIFT',
  REACH: 'R',
  HB: 'H',
  BL: 'B',
  JR: 'J',
  SR: 'S',
  ESP: 'O',
  HEALTH: 'P',
  NT: 'N',
  TR: 'T',
  RAD: 'M',
  BED: 'K',
  CHAMS: 'C',
  SEARCH: 'F',
  SCF: 'X',
  VEL: 'Y',
  SPRINT: 'Z',
  FP: 'G',
  PKR: 'F5',
  CBC: 'F6',
  CLUTCH: 'F7',
  BIN: 'F8',
  WP: '0',
};

const NAV_ITEMS = [
  { id: 'combat',   label: 'Combat',   icon: 'fa-shield-halved' },
  { id: 'visuals',  label: 'Visuals',  icon: 'fa-eye' },
  { id: 'movement', label: 'Movement', icon: 'fa-wind' },
  { id: 'player',   label: 'Player',   icon: 'fa-user' },
  { id: 'utility',  label: 'Utility',  icon: 'fa-wrench' },
];

const WINDOWS = [
  {
    title: 'Combat',
    icon: 'fa-shield-halved',
    modules: [
      { id: 'AC', name: 'Auto Clicker' },
      { id: 'AA', name: 'Aim Assist' },
      { id: 'REACH', name: 'Reach' },
      { id: 'HB', name: 'Hitboxes' },
      { id: 'BL', name: 'Block Hit' },
      { id: 'JR', name: 'Jump Reset' },
      { id: 'SR', name: 'Sprint Reset' },
    ],
  },
  {
    title: 'Visuals',
    icon: 'fa-eye',
    modules: [
      { id: 'ESP', name: 'ESP' },
      { id: 'HEALTH', name: 'Health' },
      { id: 'NT', name: 'Nametags' },
      { id: 'TR', name: 'Tracers' },
      { id: 'RAD', name: 'Radar' },
      { id: 'BED', name: 'Bedplates' },
      { id: 'CHAMS', name: 'Chams' },
      { id: 'SEARCH', name: 'Search' },
    ],
  },
  {
    title: 'Movement',
    icon: 'fa-wind',
    modules: [
      { id: 'SCF', name: 'Scaffold' },
      { id: 'VEL', name: 'Velocity' },
      { id: 'SPRINT', name: 'Sprint' },
    ],
  },
  {
    title: 'Player',
    icon: 'fa-user',
    modules: [
      { id: 'FP', name: 'Fast Place' },
      { id: 'PKR', name: 'Parkour' },
    ],
  },
  {
    title: 'Utility',
    icon: 'fa-wrench',
    modules: [
      { id: 'CBC', name: 'Client Brand Changer' },
      { id: 'CLUTCH', name: 'Clutch' },
      { id: 'BIN', name: 'Block In' },
      { id: 'WP', name: 'Weapon Selection' },
    ],
  },
];

const SEARCH_MODULES = WINDOWS.flatMap((w) => w.modules.map((m) => ({
  category: w.title,
  name: m.name,
  subs: getModuleOptions(m.id),
})));

function getModuleOptions(id) {
  const map = {
    AC: ['Left', 'Right', 'Adv', 'Min CPS', 'Max CPS', 'Ignore Blocks', 'Weapon Only', 'Allow in Inventory', 'Inv Multiplier', 'Right Click Enabled', 'Blocks Only', 'Advanced Rand'],
    AA: ['Main', 'Rand', 'Checks', 'Visuals', 'Smoothness', 'FOV', 'Lock Distance', 'Target Priority', 'Yaw Randomness', 'Pitch Randomness', 'Adapt to strafing', 'Adaptive Offset', 'Weapon Only', 'Ignore Friends', 'Visiblity Check', 'Ignore Invisible', 'Allow Block Breaking', 'Sprinting Only', 'Mouse Press Check', 'Mouse Move Check', 'FOV Circle', 'FOV Circle Color', 'Feedback Line', 'Feedback Color'],
    REACH: ['Main', 'Checks', 'Distance', 'Chance', 'Method', 'Liquid Check', 'Sprinting Only', 'Hit Through Walls'],
    HB: ['Main', 'Advanced', 'Chance', 'Scale', 'Manual Adjust', 'Scale X', 'Scale Y', 'Scale Z'],
    BL: ['Main', 'Type', 'Chance'],
    JR: ['Main', 'Mode', 'Accurancy', 'Chance'],
    SR: ['Main', 'Delay Between', 'Let Go Delay'],
    ESP: ['Main', 'Box', 'Color', 'Fade Distance', 'Friends', 'Box Type', 'Thickness', 'Glow', 'Box', 'Filled', 'Outline', 'Main Color', 'Fill 1', 'Fill 2', 'Friend Color'],
    HEALTH: ['Main', 'Style', 'Fade Dist'],
    NT: ['Main', 'Style', 'Color', 'Show Health', 'Show Distance', 'Ignore Friends', 'Text Size', 'Fade Dist', 'Outline', 'Background', 'Text Color', 'BG Color'],
    TR: ['Main', 'Color'],
    RAD: ['Main', 'Pos', 'Color', 'Radius', 'Rotate', 'Names', 'Size', 'X', 'Y', 'Local', 'Player', 'Friend'],
    BED: ['Main', 'Color', 'Render Distance', 'Plate Scale', 'Background', 'Outline', 'Accent Bar'],
    CHAMS: ['Main', 'Through Walls', 'Color'],
    SEARCH: ['Main', 'Blocks', 'Scan Radius', 'Outline Color', 'Block picker'],
    SCF: ['Main', 'Checks', 'Mode', 'Aim Speed', 'Auto Swap', 'Block Check', 'Min Delay', 'Max Delay', 'Only Shift', 'Pitch Check'],
    VEL: ['Main', 'Checks', 'Mode', 'Horizontal', 'Vertical', 'Tick Delay', 'Chance', 'Only Sprinting', 'Liquid Check', 'Fire Check', 'Only Targeting'],
    SPRINT: ['Main', 'Cancel On Invis'],
    FP: ['Main', 'Delay'],
    PKR: [],
    CBC: ['Main', 'Client Brand', 'Reset to Original', 'Set Vanilla'],
    CLUTCH: ['Clutch on Void', 'Clutch on Lethal Fall', 'Clutch on X Blocks', 'X Blocks', 'Aim Speed', 'Fall Delay (s)'],
    BIN: ['Bed Finder', 'Aim Speed'],
    WP: ['Main', 'Swords', 'Axes', 'Sticks', 'Fists'],
  };
  return map[id] || [];
}

function renderModuleBody(id, s, set) {
  switch (id) {
    case 'AC': return (<>
      <SectionTabs tabs={['Left','Right','Adv']} value={s.AC_sec} onChange={(v) => set({ AC_sec: v })} />
      {s.AC_sec === 0 && (<>
        <Slider label="Min CPS" value={s.AC_minCps} min={1} max={s.AC_maxCps} fmt={(v) => v} onChange={(v) => set({ AC_minCps: v })} />
        <Slider label="Max CPS" value={s.AC_maxCps} min={s.AC_minCps} max={25} onChange={(v) => set({ AC_maxCps: v })} />
        <Checkbox label="Ignore Blocks" value={s.AC_ignoreBlocks} onChange={(v) => set({ AC_ignoreBlocks: v })} />
        <Checkbox label="Weapon Only" value={s.AC_weaponOnly} onChange={(v) => set({ AC_weaponOnly: v })} />
        <Checkbox label="Allow in Inventory" value={s.AC_allowInv} onChange={(v) => set({ AC_allowInv: v })} />
        {s.AC_allowInv && <Slider label="Inv Multiplier" value={s.AC_invMulti} min={1} max={10} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ AC_invMulti: v })} />}
      </>)}
      {s.AC_sec === 1 && (<>
        <Checkbox label="Right Click Enabled" value={s.RAC_on} onChange={(v) => set({ RAC_on: v })} />
        <Slider label="Min CPS" value={s.RAC_minCps} min={1} max={s.RAC_maxCps} fmt={(v) => v} onChange={(v) => set({ RAC_minCps: v })} />
        <Slider label="Max CPS" value={s.RAC_maxCps} min={s.RAC_minCps} max={25} onChange={(v) => set({ RAC_maxCps: v })} />
        <Checkbox label="Blocks Only" value={s.RAC_blocksOnly} onChange={(v) => set({ RAC_blocksOnly: v })} />
      </>)}
      {s.AC_sec === 2 && (<>
        <Checkbox label="Advanced Rand" value={s.AC_advanced} onChange={(v) => set({ AC_advanced: v })} />
      </>)}
    </>);

    case 'AA': return (<>
      <SectionTabs tabs={['Main','Rand','Checks','Visuals']} value={s.AA_sec} onChange={(v) => set({ AA_sec: v })} />
      {s.AA_sec === 0 && (<>
        <Slider label="Smoothness" value={s.AA_smooth} min={1} max={90} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ AA_smooth: v })} />
        <Slider label="FOV" value={s.AA_fov} min={5} max={180} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ AA_fov: v })} />
        <Slider label="Lock Distance" value={s.AA_dist} min={1} max={10} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ AA_dist: v })} />
        <Dropdown label="Target Priority" options={['Closest to Crosshair','Health','Distance']} value={s.AA_priority} onChange={(v) => set({ AA_priority: v })} />
      </>)}
      {s.AA_sec === 1 && (<>
        <Slider label="Yaw Randomness" value={s.AA_randomYaw} min={0} max={10} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ AA_randomYaw: v })} />
        <Slider label="Pitch Randomness" value={s.AA_randomPitch} min={0} max={1} step={0.01} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ AA_randomPitch: v })} />
        <Checkbox label="Adapt to strafing" value={s.AA_adaptive} onChange={(v) => set({ AA_adaptive: v })} />
        {s.AA_adaptive && <Slider label="Adaptive Offset" value={s.AA_adaptiveOffset} min={0} max={15} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ AA_adaptiveOffset: v })} />}
      </>)}
      {s.AA_sec === 2 && (<>
        <Checkbox label="Weapon Only" value={s.AA_weaponOnly} onChange={(v) => set({ AA_weaponOnly: v })} />
        <Checkbox label="Ignore Friends" value={s.AA_ignoreFriends} onChange={(v) => set({ AA_ignoreFriends: v })} />
        <Checkbox label="Visiblity Check" value={s.AA_visibilityCheck} onChange={(v) => set({ AA_visibilityCheck: v })} />
        <Checkbox label="Ignore Invisible" value={s.AA_invisibleCheck} onChange={(v) => set({ AA_invisibleCheck: v })} />
        <Checkbox label="Allow Block Breaking" value={s.AA_blockBreakCheck} onChange={(v) => set({ AA_blockBreakCheck: v })} />
        <Checkbox label="Sprinting Only" value={s.AA_sprintCheck} onChange={(v) => set({ AA_sprintCheck: v })} />
        <Checkbox label="Mouse Press Check" value={s.AA_mousePressCheck} onChange={(v) => set({ AA_mousePressCheck: v })} />
        <Checkbox label="Mouse Move Check" value={s.AA_mouseMoveCheck} onChange={(v) => set({ AA_mouseMoveCheck: v })} />
      </>)}
      {s.AA_sec === 3 && (<>
        <Checkbox label="FOV Circle" value={s.AA_fovCircle} onChange={(v) => set({ AA_fovCircle: v })} />
        {s.AA_fovCircle && <ColorEdit label="FOV Circle Color" value={s.AA_fovCircleColor} onChange={(v) => set({ AA_fovCircleColor: v })} />}
        <Checkbox label="Feedback Line" value={s.AA_feedbackLine} onChange={(v) => set({ AA_feedbackLine: v })} />
        {s.AA_feedbackLine && <ColorEdit label="Feedback Color" value={s.AA_feedbackColor} onChange={(v) => set({ AA_feedbackColor: v })} />}
      </>)}
    </>);

    case 'REACH': return (<>
      <SectionTabs tabs={['Main','Checks']} value={s.REACH_sec} onChange={(v) => set({ REACH_sec: v })} />
      {s.REACH_sec === 0 && (<>
        <Slider label="Distance" value={s.REACH_dist} min={3} max={6} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ REACH_dist: v })} />
        <Slider label="Chance" value={s.REACH_chance} min={0} max={100} fmt={(v) => `${v}%`} onChange={(v) => set({ REACH_chance: v })} />
        <Dropdown label="Method" options={['Normal','Drag']} value={s.REACH_method} onChange={(v) => set({ REACH_method: v })} />
      </>)}
      {s.REACH_sec === 1 && (<>
        <Checkbox label="Liquid Check" value={s.REACH_liquidCheck} onChange={(v) => set({ REACH_liquidCheck: v })} />
        <Checkbox label="Sprinting Only" value={s.REACH_onlySprinting} onChange={(v) => set({ REACH_onlySprinting: v })} />
        <Checkbox label="Hit Through Walls" value={s.REACH_hitThroughWalls} onChange={(v) => set({ REACH_hitThroughWalls: v })} />
      </>)}
    </>);

    case 'HB': return (<>
      <SectionTabs tabs={['Main','Advanced']} value={s.HB_sec} onChange={(v) => set({ HB_sec: v })} />
      {s.HB_sec === 0 && (<>
        <Slider label="Chance" value={s.HB_chance} min={0} max={100} fmt={(v) => `${v}%`} onChange={(v) => set({ HB_chance: v })} />
        {!s.HB_manual && <Slider label="Scale" value={s.HB_scale} min={1} max={3} step={0.05} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ HB_scale: v })} />}
      </>)}
      {s.HB_sec === 1 && (<>
        <Checkbox label="Manual Adjust" value={s.HB_manual} onChange={(v) => set({ HB_manual: v })} />
        {s.HB_manual ? (<>
          <Slider label="Scale X" value={s.HB_scaleX} min={1} max={3} step={0.05} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ HB_scaleX: v })} />
          <Slider label="Scale Y" value={s.HB_scaleY} min={1} max={3} step={0.05} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ HB_scaleY: v })} />
          <Slider label="Scale Z" value={s.HB_scaleZ} min={1} max={3} step={0.05} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ HB_scaleZ: v })} />
        </>) : <div className="r-empty">Enable Manual Adjust to edit.</div>}
      </>)}
    </>);

    case 'BL': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <Dropdown label="Type" options={['Automatic','Manual','Predict']} value={s.BL_type} onChange={(v) => set({ BL_type: v })} />
      {s.BL_type === 1 && <Slider label="Chance" value={s.BL_chance} min={0} max={100} fmt={(v) => `${v.toFixed(0)}%`} onChange={(v) => set({ BL_chance: v })} />}
    </>);

    case 'JR': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <Dropdown label="Mode" options={['HurtTime']} value={s.JR_mode} onChange={(v) => set({ JR_mode: v })} />
      <Slider label="Accurancy" value={s.JR_acc} min={0} max={100} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ JR_acc: v })} />
      <Slider label="Chance" value={s.JR_chance} min={0} max={100} fmt={(v) => `${v.toFixed(0)}%`} onChange={(v) => set({ JR_chance: v })} />
    </>);

    case 'SR': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <Slider label="Delay Between" value={s.SR_delayBetween} min={0.1} max={2} step={0.01} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ SR_delayBetween: v })} />
      <Slider label="Let Go Delay" value={s.SR_letGoDelay} min={0.01} max={0.5} step={0.01} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ SR_letGoDelay: v })} />
    </>);

    case 'ESP': return (<>
      <SectionTabs tabs={['Main','Box','Color']} value={s.ESP_sec} onChange={(v) => set({ ESP_sec: v })} />
      {s.ESP_sec === 0 && (<>
        <Slider label="Fade Distance" value={s.ESP_fade} min={0} max={20} step={0.5} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ ESP_fade: v })} />
        <Checkbox label="Friends" value={s.ESP_friends} onChange={(v) => set({ ESP_friends: v })} />
      </>)}
      {s.ESP_sec === 1 && (<>
        <Dropdown label="Box Type" options={['Dynamic 2D','3D Cornered']} value={s.ESP_boxType} onChange={(v) => set({ ESP_boxType: v })} />
        <Slider label="Thickness" value={s.ESP_thick} min={0.5} max={4} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ ESP_thick: v })} />
        <Slider label="Glow" value={s.ESP_glow} min={0} max={1} step={0.05} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ ESP_glow: v })} />
        <Checkbox label="Box" value={s.ESP_box} onChange={(v) => set({ ESP_box: v })} />
        <Checkbox label="Filled" value={s.ESP_filled} onChange={(v) => set({ ESP_filled: v })} />
        <Checkbox label="Outline" value={s.ESP_outline} onChange={(v) => set({ ESP_outline: v })} />
      </>)}
      {s.ESP_sec === 2 && (<>
        <ColorEdit label="Main Color" value={s.ESP_color} onChange={(v) => set({ ESP_color: v })} />
        {s.ESP_filled && (<>
          <ColorEdit label="Fill 1" value={s.ESP_fill1} onChange={(v) => set({ ESP_fill1: v })} />
          <ColorEdit label="Fill 2" value={s.ESP_fill2} onChange={(v) => set({ ESP_fill2: v })} />
        </>)}
        {s.ESP_friends && <ColorEdit label="Friend Color" value={s.ESP_friend} onChange={(v) => set({ ESP_friend: v })} />}
      </>)}
    </>);

    case 'HEALTH': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <Dropdown label="Style" options={['Bar','Value']} value={s.HEALTH_style} onChange={(v) => set({ HEALTH_style: v })} />
      <Slider label="Fade Dist" value={s.HEALTH_fadeDist} min={1} max={20} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ HEALTH_fadeDist: v })} />
    </>);

    case 'NT': return (<>
      <SectionTabs tabs={['Main','Style','Color']} value={s.NT_sec} onChange={(v) => set({ NT_sec: v })} />
      {s.NT_sec === 0 && (<>
        <Checkbox label="Show Health" value={s.NT_showHealth} onChange={(v) => set({ NT_showHealth: v })} />
        <Checkbox label="Show Distance" value={s.NT_showDistance} onChange={(v) => set({ NT_showDistance: v })} />
        <Checkbox label="Ignore Friends" value={s.NT_ignoreFriends} onChange={(v) => set({ NT_ignoreFriends: v })} />
      </>)}
      {s.NT_sec === 1 && (<>
        <Slider label="Text Size" value={s.NT_textSize} min={10} max={30} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ NT_textSize: v })} />
        <Slider label="Fade Dist" value={s.NT_fadeDist} min={1} max={20} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ NT_fadeDist: v })} />
        <Checkbox label="Outline" value={s.NT_outline} onChange={(v) => set({ NT_outline: v })} />
        <Checkbox label="Background" value={s.NT_background} onChange={(v) => set({ NT_background: v })} />
      </>)}
      {s.NT_sec === 2 && (<>
        <ColorEdit label="Text Color" value={s.NT_textColor} onChange={(v) => set({ NT_textColor: v })} />
        <ColorEdit label="BG Color" value={s.NT_bgColor} onChange={(v) => set({ NT_bgColor: v })} />
      </>)}
    </>);

    case 'TR': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <ColorEdit label="Color" value={s.TR_color} onChange={(v) => set({ TR_color: v })} />
    </>);

    case 'RAD': return (<>
      <SectionTabs tabs={['Main','Pos','Color']} value={s.RAD_sec} onChange={(v) => set({ RAD_sec: v })} />
      {s.RAD_sec === 0 && (<>
        <Slider label="Radius" value={s.RAD_radius} min={0} max={300} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ RAD_radius: v })} />
        <Checkbox label="Rotate" value={s.RAD_rotate} onChange={(v) => set({ RAD_rotate: v })} />
        <Checkbox label="Names" value={s.RAD_names} onChange={(v) => set({ RAD_names: v })} />
      </>)}
      {s.RAD_sec === 1 && (<>
        <Slider label="Size" value={s.RAD_size} min={100} max={400} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ RAD_size: v })} />
        <Slider label="X" value={s.RAD_x} min={0} max={1920} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ RAD_x: v })} />
        <Slider label="Y" value={s.RAD_y} min={0} max={1080} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ RAD_y: v })} />
      </>)}
      {s.RAD_sec === 2 && (<>
        <ColorEdit label="Local" value={s.RAD_localColor} onChange={(v) => set({ RAD_localColor: v })} />
        <ColorEdit label="Player" value={s.RAD_playerColor} onChange={(v) => set({ RAD_playerColor: v })} />
        <ColorEdit label="Friend" value={s.RAD_friendColor} onChange={(v) => set({ RAD_friendColor: v })} />
      </>)}
    </>);

    case 'BED': return (<>
      <SectionTabs tabs={['Main','Color']} value={s.BED_sec} onChange={(v) => set({ BED_sec: v })} />
      {s.BED_sec === 0 && (<>
        <Slider label="Render Distance" value={s.BED_renderDistance} min={10} max={1000} fmt={(v) => `${v.toFixed(0)} blocks`} onChange={(v) => set({ BED_renderDistance: v })} />
        <Slider label="Plate Scale" value={s.BED_plateScale} min={10} max={50} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ BED_plateScale: v })} />
      </>)}
      {s.BED_sec === 1 && (<>
        <ColorEdit label="Background" value={s.BED_bgColor} onChange={(v) => set({ BED_bgColor: v })} />
        <ColorEdit label="Outline" value={s.BED_outlineColor} onChange={(v) => set({ BED_outlineColor: v })} />
        <ColorEdit label="Accent Bar" value={s.BED_accentColor} onChange={(v) => set({ BED_accentColor: v })} />
      </>)}
    </>);

    case 'CHAMS': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <Checkbox label="Through Walls" value={s.CHAMS_through} onChange={(v) => set({ CHAMS_through: v })} />
      <ColorEdit label="Color" value={s.CHAMS_color} onChange={(v) => set({ CHAMS_color: v })} />
    </>);

    case 'SEARCH': return (<>
      <SectionTabs tabs={['Main','Blocks']} value={s.SEARCH_sec} onChange={(v) => set({ SEARCH_sec: v })} />
      {s.SEARCH_sec === 0 && (<>
        <Slider label="Scan Radius" value={s.SEARCH_radius} min={2} max={64} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ SEARCH_radius: v })} />
        <ColorEdit label="Outline Color" value={s.SEARCH_color} onChange={(v) => set({ SEARCH_color: v })} />
      </>)}
      {s.SEARCH_sec === 1 && <div className="r-empty">Block picker</div>}
    </>);

    case 'SCF': return (<>
      <SectionTabs tabs={['Main','Checks']} value={s.SCF_sec} onChange={(v) => set({ SCF_sec: v })} />
      {s.SCF_sec === 0 && (<>
        <Dropdown label="Mode" options={['Legit','Blatant']} value={s.SCF_mode} onChange={(v) => set({ SCF_mode: v })} />
        {s.SCF_mode === 1 && <Slider label="Aim Speed" value={s.SCF_aimSpeed} min={0.1} max={10} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ SCF_aimSpeed: v })} />}
        <Checkbox label="Auto Swap" value={s.SCF_autoSwap} onChange={(v) => set({ SCF_autoSwap: v })} />
        <Slider label="Block Check" value={s.SCF_blockCheck} min={1} max={10} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ SCF_blockCheck: v })} />
        <Slider label="Min Delay" value={s.SCF_minDelay} min={0} max={500} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ SCF_minDelay: v })} />
        <Slider label="Max Delay" value={s.SCF_maxDelay} min={0} max={500} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ SCF_maxDelay: v })} />
      </>)}
      {s.SCF_sec === 1 && (<>
        <Checkbox label="Only Shift" value={s.SCF_onlyShift} onChange={(v) => set({ SCF_onlyShift: v })} />
        {s.SCF_mode === 0 && <Slider label="Pitch Check" value={s.SCF_pitchCheck} min={0} max={90} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ SCF_pitchCheck: v })} />}
      </>)}
    </>);

    case 'VEL': return (<>
      <SectionTabs tabs={['Main','Checks']} value={s.VEL_sec} onChange={(v) => set({ VEL_sec: v })} />
      {s.VEL_sec === 0 && (<>
        <Dropdown label="Mode" options={['Normal','Packet']} value={s.VEL_mode} onChange={(v) => set({ VEL_mode: v })} />
        <Slider label="Horizontal" value={s.VEL_h} min={0} max={100} fmt={(v) => `${v.toFixed(0)}%`} onChange={(v) => set({ VEL_h: v })} />
        <Slider label="Vertical" value={s.VEL_v} min={0} max={100} fmt={(v) => `${v.toFixed(0)}%`} onChange={(v) => set({ VEL_v: v })} />
        {s.VEL_mode === 0 && <Slider label="Tick Delay" value={s.VEL_tick} min={0} max={10} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ VEL_tick: v })} />}
        <Slider label="Chance" value={s.VEL_chance} min={0} max={100} fmt={(v) => `${v.toFixed(0)}%`} onChange={(v) => set({ VEL_chance: v })} />
      </>)}
      {s.VEL_sec === 1 && (<>
        <Checkbox label="Only Sprinting" value={s.VEL_onlySprinting} onChange={(v) => set({ VEL_onlySprinting: v })} />
        <Checkbox label="Liquid Check" value={s.VEL_liquidCheck} onChange={(v) => set({ VEL_liquidCheck: v })} />
        <Checkbox label="Fire Check" value={s.VEL_fireCheck} onChange={(v) => set({ VEL_fireCheck: v })} />
        <Checkbox label="Only Targeting" value={s.VEL_onlyTargeting} onChange={(v) => set({ VEL_onlyTargeting: v })} />
      </>)}
    </>);

    case 'SPRINT': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <Checkbox label="Cancel On Invis" value={s.SPRINT_cancelInvis} onChange={(v) => set({ SPRINT_cancelInvis: v })} />
    </>);

    case 'FP': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <Slider label="Delay" value={s.FP_delay} min={0} max={4} fmt={(v) => v.toFixed(0)} onChange={(v) => set({ FP_delay: v })} />
    </>);

    case 'PKR': return <div className="r-empty">No options available.</div>;

    case 'CBC': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <TextInput value={s.CBC_brand} onChange={(v) => set({ CBC_brand: v })} placeholder="vanilla" />
      <Button onClick={() => set({ CBC_brand: 'original' })}>Reset to Original</Button>
      <Button accent onClick={() => set({ CBC_brand: 'vanilla' })}>Set Vanilla</Button>
    </>);

    case 'CLUTCH': return (<>
      <Checkbox label="Clutch on Void" value={s.CLUTCH_onVoid} onChange={(v) => set({ CLUTCH_onVoid: v })} />
      <Checkbox label="Clutch on Lethal Fall" value={s.CLUTCH_onLethalFall} onChange={(v) => set({ CLUTCH_onLethalFall: v })} />
      <Checkbox label="Clutch on X Blocks" value={s.CLUTCH_onXBlocks} onChange={(v) => set({ CLUTCH_onXBlocks: v })} />
      {s.CLUTCH_onXBlocks && <Slider label="X Blocks" value={s.CLUTCH_xBlocks} min={1} max={10} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ CLUTCH_xBlocks: v })} />}
      <Slider label="Aim Speed" value={s.CLUTCH_aimSpeed} min={0.1} max={10} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ CLUTCH_aimSpeed: v })} />
      <Slider label="Fall Delay (s)" value={s.CLUTCH_fallDelay} min={0} max={2} step={0.01} fmt={(v) => v.toFixed(2)} onChange={(v) => set({ CLUTCH_fallDelay: v })} />
    </>);

    case 'BIN': return (<>
      <Checkbox label="Bed Finder" value={s.BIN_bedFinder} onChange={(v) => set({ BIN_bedFinder: v })} />
      <Slider label="Aim Speed" value={s.BIN_aimSpeed} min={0.1} max={10} step={0.1} fmt={(v) => v.toFixed(1)} onChange={(v) => set({ BIN_aimSpeed: v })} />
    </>);

    case 'WP': return (<>
      <SectionTabs tabs={['Main']} value={0} onChange={() => {}} />
      <Checkbox label="Swords" value={s.WP_sword} onChange={(v) => set({ WP_sword: v })} />
      <Checkbox label="Axes" value={s.WP_axe} onChange={(v) => set({ WP_axe: v })} />
      <Checkbox label="Sticks" value={s.WP_stick} onChange={(v) => set({ WP_stick: v })} />
      <Checkbox label="Fists" value={s.WP_fist} onChange={(v) => set({ WP_fist: v })} />
    </>);

    default: return null;
  }
}

function App() {
  const [open, setOpen] = useState([true, true, false, false, false]);
  const [pos, setPos] = useState([
    { x: 90,  y: 60  },
    { x: 380, y: 60  },
    { x: 670, y: 60  },
    { x: 90,  y: 420 },
    { x: 380, y: 420 },
  ]);

  const [s, setS] = useState({
    AC_on: true, AC_exp: true, AC_bind: false, AC_sec: 0,
      AC_minCps: 8, AC_maxCps: 14, AC_weaponOnly: true, AC_ignoreBlocks: false, AC_allowInv: false, AC_invMulti: 1.5,
      RAC_on: true, RAC_minCps: 6, RAC_maxCps: 12, RAC_blocksOnly: true,
      AC_advanced: true,
    AA_on: true, AA_exp: false, AA_bind: false, AA_sec: 0,
      AA_smooth: 42, AA_fov: 90, AA_dist: 4.5, AA_priority: 0, AA_randomYaw: 2.5, AA_randomPitch: 0.15,
      AA_adaptive: true, AA_adaptiveOffset: 6, AA_weaponOnly: true, AA_ignoreFriends: true,
      AA_visibilityCheck: false, AA_invisibleCheck: true, AA_blockBreakCheck: true, AA_sprintCheck: false,
      AA_mousePressCheck: true, AA_mouseMoveCheck: false, AA_fovCircle: true, AA_fovCircleColor: '#7BA2BF',
      AA_feedbackLine: true, AA_feedbackColor: '#A5C2D6',
    REACH_on: false, REACH_exp: false, REACH_bind: false, REACH_sec: 0,
      REACH_dist: 3.4, REACH_chance: 80, REACH_method: 0, REACH_liquidCheck: true, REACH_onlySprinting: false, REACH_hitThroughWalls: false,
    HB_on: false, HB_exp: false, HB_bind: false, HB_sec: 0,
      HB_chance: 70, HB_scale: 1.5, HB_manual: false, HB_scaleX: 1.3, HB_scaleY: 1.3, HB_scaleZ: 1.3,
    BL_on: true, BL_exp: false, BL_bind: false, BL_type: 0, BL_chance: 50,
    JR_on: false, JR_exp: false, JR_bind: false, JR_mode: 0, JR_acc: 80, JR_chance: 60,
    SR_on: false, SR_exp: false, SR_bind: false, SR_delayBetween: 0.6, SR_letGoDelay: 0.08,

    ESP_on: true, ESP_exp: true, ESP_bind: false, ESP_sec: 1,
      ESP_fade: 8, ESP_friends: true, ESP_boxType: 0, ESP_box: true, ESP_filled: true, ESP_outline: true,
      ESP_thick: 1.5, ESP_glow: 0.6, ESP_color: '#FF4D5E', ESP_friend: '#9EDCFF',
      ESP_fill1: '#FF4D5E', ESP_fill2: '#FFB341',
    HEALTH_on: true, HEALTH_exp: false, HEALTH_bind: false, HEALTH_style: 0, HEALTH_fadeDist: 8,
    NT_on: true, NT_exp: false, NT_bind: false, NT_sec: 0,
      NT_showHealth: true, NT_showDistance: true, NT_ignoreFriends: false, NT_textSize: 16, NT_fadeDist: 9,
      NT_outline: true, NT_background: true, NT_textColor: '#E8EEF4', NT_bgColor: '#141C26',
    TR_on: false, TR_exp: false, TR_bind: false, TR_color: '#4DA3FF',
    RAD_on: true, RAD_exp: false, RAD_bind: false, RAD_sec: 0,
      RAD_radius: 120, RAD_rotate: true, RAD_names: false, RAD_size: 220, RAD_x: 35, RAD_y: 120,
      RAD_localColor: '#7BA2BF', RAD_playerColor: '#E35A5A', RAD_friendColor: '#9EDCFF',
    BED_on: false, BED_exp: false, BED_bind: false, BED_sec: 0,
      BED_renderDistance: 120, BED_plateScale: 18, BED_bgColor: '#141C26', BED_outlineColor: '#7BA2BF', BED_accentColor: '#A5C2D6',
    CHAMS_on: false, CHAMS_exp: false, CHAMS_bind: false, CHAMS_through: true, CHAMS_color: '#4DA3FF',
    SEARCH_on: false, SEARCH_exp: false, SEARCH_bind: false, SEARCH_sec: 0, SEARCH_radius: 32, SEARCH_color: '#7BA2BF',

    SCF_on: false, SCF_exp: false, SCF_bind: false, SCF_sec: 0,
      SCF_autoSwap: true, SCF_blockCheck: 5, SCF_minDelay: 40, SCF_maxDelay: 110, SCF_onlyShift: false, SCF_mode: 0, SCF_aimSpeed: 4, SCF_pitchCheck: 70,
    VEL_on: true, VEL_exp: true, VEL_bind: false, VEL_sec: 0,
      VEL_mode: 1, VEL_h: 60, VEL_v: 30, VEL_chance: 100, VEL_tick: 2,
      VEL_onlySprinting: false, VEL_liquidCheck: true, VEL_fireCheck: true, VEL_onlyTargeting: false,
    SPRINT_on: true, SPRINT_exp: false, SPRINT_bind: false, SPRINT_cancelInvis: true,

    FP_on: true, FP_exp: false, FP_bind: false, FP_delay: 1,
    PKR_on: false, PKR_exp: false, PKR_bind: false,

    CBC_on: false, CBC_exp: true, CBC_bind: false, CBC_brand: 'vanilla',
    CLUTCH_on: false, CLUTCH_exp: false, CLUTCH_bind: false,
      CLUTCH_onVoid: true, CLUTCH_onLethalFall: true, CLUTCH_onXBlocks: false, CLUTCH_xBlocks: 3,
      CLUTCH_aimSpeed: 3.5, CLUTCH_fallDelay: 0.2,
    BIN_on: false, BIN_exp: false, BIN_bind: false, BIN_bedFinder: true, BIN_aimSpeed: 4,
    WP_exp: false, WP_bind: false, WP_sword: true, WP_axe: true, WP_stick: false, WP_fist: false,
  });

  const set = (patch) => setS((prev) => ({ ...prev, ...patch }));

  const [searchOpen, setSearchOpen] = useState(false);
  const [search, setSearch] = useState('');
  const searchNeedle = search.toLowerCase();
  const searchResults = search
    ? SEARCH_MODULES.filter((m) => (
      m.name.toLowerCase().includes(searchNeedle)
      || m.subs.some((sub) => sub.toLowerCase().includes(searchNeedle))
    ))
    : [];

  const toggleNav = (i) => {
    const next = [...open]; next[i] = !next[i]; setOpen(next);
  };
  const move = (i, x, y) => {
    const next = [...pos]; next[i] = { x, y }; setPos(next);
  };

  const getEnabled = (id) => id === 'WP' ? s.WP_sword : s[`${id}_on`];
  const getExpanded = (id) => s[`${id}_exp`];
  const getBinding = (id) => s[`${id}_bind`];
  const setEnabled = (id, value) => id === 'WP' ? set({ WP_sword: value }) : set({ [`${id}_on`]: value });
  const setExpanded = (id, value) => set({ [`${id}_exp`]: value });
  const setBinding = (id, value) => set({ [`${id}_bind`]: value });

  return (
    <>
      <div className="r-bg" />
      <Canvas topBar={
        <NavBar
          items={NAV_ITEMS}
          active={open}
          onToggle={toggleNav}
          searchOpen={searchOpen}
          onToggleSearch={() => setSearchOpen((v) => !v)}
          search={search}
          onSearchChange={setSearch}
          searchResults={searchResults}
        />
      }>
        {WINDOWS.map((win, i) => open[i] && (
          <CategoryWindow
            key={win.title}
            icon={win.icon}
            title={win.title}
            x={pos[i].x}
            y={pos[i].y}
            onMove={(x, y) => move(i, x, y)}
            onClose={() => toggleNav(i)}
          >
            {win.modules.map((m) => (
              <ModuleRow
                key={m.id}
                name={m.name}
                enabled={getEnabled(m.id)}
                onToggle={() => setEnabled(m.id, !getEnabled(m.id))}
                expanded={getExpanded(m.id)}
                onExpand={() => setExpanded(m.id, !getExpanded(m.id))}
                keyName={KEYS[m.id]}
                binding={getBinding(m.id)}
                onBind={() => setBinding(m.id, !getBinding(m.id))}
              >
                {renderModuleBody(m.id, s, set)}
              </ModuleRow>
            ))}
          </CategoryWindow>
        ))}
      </Canvas>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);