const Config = {
    colors: {
        BACKGROUND: 'rgba(135, 207, 235, 1)',
        GRID: 'rgba(0, 0, 0, 0.25)',
        PLAYER: 'red',
        HEX_FILL: '#ffffff',
        FOG: {
            HIDDEN: 'rgba(0, 0, 0, 1)',
            REVEALED: 'rgba(0, 0, 0, 0.25)',
            GRID_DIM: 'rgba(0, 0, 0, 0.0)'
        },
        UI: {
            INVENTORY: {
                BACKGROUND: 'rgba(0, 0, 0, 0.7)',
                WINDOW: '#ffffff',
                TEXT: '#000000'
            }
        },
        ITEMS: {
            COIN: '#FFD700',
            GEM: '#50C878'
        }
    },
    
    hex: {
        SIZE: 40, // Size of a single hex
        GRID_SIZE: 30, // Number of hexes in the grid (width/height)
        get WIDTH() { // Computed hex width
            return this.SIZE * 2;
        },
        get HEIGHT() { // Computed hex height
            return Math.sqrt(3) * this.SIZE;
        }
    },

    game: {
        FPS: 60,
        get FRAME_TIME() {
            return 1000 / this.FPS;
        }
    },

    player: {
        MOVE_SPEED: 0.1,
        SIZE_RATIO: 1/3,
        VISION_RANGE: 3,
        SPRITE_SCALE: 0.8,
        ANIMATION_SPEED: 500
    },

    camera: {
        FOLLOW_SPEED: 0.1,
        DEADZONE_RATIO_X: {
            NARROW: 0.1,
            WIDE: 0.2
        },
        DEADZONE_RATIO_Y: 0.2,
        MIN_DEADZONE: 30,
        MAX_DEADZONE: 200,
        NARROW_SCREEN_THRESHOLD: 600
    },

    ui: {
        inventory: {
            PADDING: 20,
            WIDTH: 300,
            HEIGHT: 400,
            TITLE_FONT: '20px Arial',
            ITEM_FONT: '16px Arial',
            ITEM_SPACING: 30,
            TITLE_OFFSET: 20,
            ITEMS_START_OFFSET: 60
        }
    },
    
    items: {
        SPAWN_COUNT: 10,
        types: {
            COIN: {
                name: 'Coin',
                size: 0.2
            },
            GEM: {
                name: 'Gem',
                size: 0.25
            }
        }
    },

    fog: {
        states: {
            HIDDEN: { alpha: 1.0 },
            REVEALED: { alpha: 0.5 },
            VISIBLE: { alpha: 0 }
        }
    }
};