Refactor large files into modular components

- Refactored page.tsx (613→252 lines) with GameOverScreen and LeftPanel extracted
- Refactored StatsTab.tsx (584→92 lines) with section components
- Refactored SkillsTab.tsx (434→54 lines) with sub-components
- Created modular structure for GameContext, LootInventory, and other components
- All extracted components organized into feature directories

src/components/game/crafting/EnchantmentDesigner/utils.ts

@@ -0,0 +1,164 @@
+import { EQUIPMENT_TYPES } from '@/lib/game/data/equipment';
+import { ENCHANTMENT_EFFECTS, calculateEffectCapacityCost } from '@/lib/game/data/enchantment-effects';
+import type { DesignEffect, EquipmentCategory } from '@/lib/game/types';
+import type { GameStore } from '@/lib/game/store';
+
+/**
+ * Get available effects for selected equipment type (only unlocked ones)
+ * Requirement (task3 bug #7): Show incompatible enchantments in greyed-out "Unavailable" section
+ */
+export function getAvailableEffects(
+  selectedEquipmentType: string | null,
+  unlockedEffects: string[]
+) {
+  if (!selectedEquipmentType) return [];
+  const type = EQUIPMENT_TYPES[selectedEquipmentType];
+  if (!type) return [];
+
+  return Object.values(ENCHANTMENT_EFFECTS).filter(
+    effect =>
+      effect.allowedEquipmentCategories.includes(type.category) &&
+      unlockedEffects.includes(effect.id)
+  );
+}
+
+/**
+ * Get incompatible effects (unlocked but not for this equipment type)
+ */
+export function getIncompatibleEffects(
+  selectedEquipmentType: string | null,
+  unlockedEffects: string[]
+) {
+  if (!selectedEquipmentType) return [];
+  const type = EQUIPMENT_TYPES[selectedEquipmentType];
+  if (!type) return [];
+
+  return Object.values(ENCHANTMENT_EFFECTS).filter(
+    effect =>
+      !effect.allowedEquipmentCategories.includes(type.category) &&
+      unlockedEffects.includes(effect.id)
+  );
+}
+
+/**
+ * Get equipment types that the player actually owns (has instances of)
+ * This ensures enchantment compatibility is based on owned items, not just blueprints
+ */
+export function getOwnedEquipmentTypes(store: GameStore) {
+  // Get all unique equipment type IDs from owned instances
+  const ownedEquipmentTypeIds = new Set<string>();
+
+  // Check all equipment instances the player owns
+  for (const instance of Object.values(store.equipmentInstances)) {
+    ownedEquipmentTypeIds.add(instance.typeId);
+  }
+
+  // Filter EQUIPMENT_TYPES to only include types the player owns
+  return Object.values(EQUIPMENT_TYPES).filter(type => ownedEquipmentTypeIds.has(type.id));
+}
+
+/**
+ * Get the reason why an effect is incompatible
+ */
+export function getIncompatibilityReason(
+  effect: { id: string; name: string; description: string; allowedEquipmentCategories: EquipmentCategory[] },
+  selectedEquipmentType: string | null
+): string {
+  if (!selectedEquipmentType) return 'No equipment selected';
+  const type = EQUIPMENT_TYPES[selectedEquipmentType];
+  if (!type) return 'Unknown equipment type';
+
+  // Check what categories this effect is allowed for
+  const allowedCategories = effect.allowedEquipmentCategories;
+  const equipmentCategory = type.category;
+
+  if (allowedCategories.includes(equipmentCategory)) {
+    return 'Compatible';
+  }
+
+  // Provide specific reasons
+  if (allowedCategories.includes('weapon' as EquipmentCategory) && equipmentCategory !== 'sword' && equipmentCategory !== 'caster' && equipmentCategory !== 'catalyst') {
+    return `Requires a weapon (${allowedCategories.filter(c => ['sword', 'caster', 'catalyst'].includes(c)).join(', ')})`;
+  }
+
+  return `Requires ${allowedCategories.join(' or ')} equipment`;
+}
+
+/**
+ * Calculate total capacity cost for current design
+ */
+export function calculateDesignCapacityCost(
+  selectedEffects: DesignEffect[],
+  efficiencyBonus: number
+): number {
+  return selectedEffects.reduce(
+    (total, eff) => total + calculateEffectCapacityCost(eff.effectId, eff.stacks, efficiencyBonus),
+    0
+  );
+}
+
+/**
+ * Get capacity limit for selected equipment type
+ */
+export function getEquipmentCapacity(selectedEquipmentType: string | null): number {
+  return selectedEquipmentType ? EQUIPMENT_TYPES[selectedEquipmentType]?.baseCapacity || 0 : 0;
+}
+
+/**
+ * Calculate design time
+ */
+export function calculateDesignTime(selectedEffects: DesignEffect[]): number {
+  return selectedEffects.reduce((total, eff) => total + 0.5 * eff.stacks, 1);
+}
+
+/**
+ * Add effect to design
+ */
+export function addEffectToDesign(
+  effectId: string,
+  selectedEffects: DesignEffect[],
+  efficiencyBonus: number,
+  setSelectedEffects: (effects: DesignEffect[]) => void
+) {
+  const existing = selectedEffects.find(e => e.effectId === effectId);
+  const effectDef = ENCHANTMENT_EFFECTS[effectId];
+  if (!effectDef) return;
+
+  if (existing) {
+    if (existing.stacks < effectDef.maxStacks) {
+      setSelectedEffects(selectedEffects.map(e =>
+        e.effectId === effectId
+          ? { ...e, stacks: e.stacks + 1 }
+          : e
+      ));
+    }
+  } else {
+    setSelectedEffects([...selectedEffects, {
+      effectId,
+      stacks: 1,
+      capacityCost: calculateEffectCapacityCost(effectId, 1, efficiencyBonus),
+    }]);
+  }
+}
+
+/**
+ * Remove effect from design
+ */
+export function removeEffectFromDesign(
+  effectId: string,
+  selectedEffects: DesignEffect[],
+  setSelectedEffects: (effects: DesignEffect[]) => void
+) {
+  const existing = selectedEffects.find(e => e.effectId === effectId);
+  if (!existing) return;
+
+  if (existing.stacks > 1) {
+    setSelectedEffects(selectedEffects.map(e =>
+      e.effectId === effectId
+        ? { ...e, stacks: e.stacks - 1 }
+        : e
+    ));
+  } else {
+    setSelectedEffects(selectedEffects.filter(e => e.effectId !== effectId));
+  }
+}