app.js

const shapeSelect = document.getElementById('shape-select');
const colorGrid = document.getElementById('color-grid');
const colorValue = document.getElementById('color-value');
const plotArea = document.getElementById('plot-area');
const currentShapeLabel = document.getElementById('current-shape');
const currentColorLabel = document.getElementById('current-color');
const resetBtn = document.getElementById('reset-btn');

// Premium Palette
const palette = [
    '#6366F1', // Indigo
    '#A855F7', // Purple
    '#EC4899', // Pink
    '#F43F5E', // Rose
    '#F59E0B', // Amber
    '#10B981', // Emerald
    '#06B6D4', // Cyan
    '#3B82F6', // Blue
    '#8B5CF6', // Violet
    '#FFFFFF'  // White
];

// Initialize color grid
function initPalette() {
    colorGrid.innerHTML = '';
    palette.forEach((color, index) => {
        const option = document.createElement('div');
        option.classList.add('color-option');
        if (index === 0) option.classList.add('active');
        option.style.backgroundColor = color;
        option.dataset.color = color;
        option.addEventListener('click', () => {
            document.querySelectorAll('.color-option').forEach(opt => opt.classList.remove('active'));
            option.classList.add('active');
            colorValue.value = color;
            updatePlot();
        });
        colorGrid.appendChild(option);
    });
}

// Shape Generators (SVG Paths/Elements)
function getShapeSVG(shape, color) {
    const size = 300;
    const center = size / 2;
    let content = '';

    switch (shape) {
        case 'circle':
            content = `<circle cx="${center}" cy="${center}" r="140" fill="${color}" />`;
            break;
        case 'square':
            content = `<rect x="10" y="10" width="280" height="280" rx="20" fill="${color}" />`;
            break;
        case 'triangle':
            content = `<path d="M${center} 10 L290 280 L10 280 Z" fill="${color}" stroke-linejoin="round" />`;
            break;
        case 'pentagon':
            content = `<path d="M150 10 L290 110 L240 280 L60 280 L10 110 Z" fill="${color}" stroke-linejoin="round" />`;
            break;
        case 'star':
            content = `<path d="M150 10 L190 100 L290 100 L210 170 L240 280 L150 210 L60 280 L90 170 L10 100 L110 100 Z" fill="${color}" stroke-linejoin="round" />`;
            break;
    }

    return `
        <svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg" class="animate">
            <defs>
                <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                    <feGaussianBlur stdDeviation="15" result="blur" />
                    <feComposite in="SourceGraphic" in2="blur" operator="over" />
                </filter>
            </defs>
            ${content}
        </svg>
    `;
}

function updatePlot() {
    const shape = shapeSelect.value;
    const color = colorValue.value;
    
    // Update Stats Label
    currentShapeLabel.textContent = shape.charAt(0).toUpperCase() + shape.slice(1);
    currentColorLabel.textContent = color.toUpperCase();
    
    // Inject SVG
    plotArea.innerHTML = getShapeSVG(shape, color);
    
    // Force animation re-trigger
    const svg = plotArea.querySelector('svg');
    svg.classList.remove('animate');
    void svg.offsetWidth; // trigger reflow
    svg.classList.add('animate');
}

// Event Listeners
shapeSelect.addEventListener('change', updatePlot);
resetBtn.addEventListener('click', () => {
    shapeSelect.value = 'circle';
    document.querySelectorAll('.color-option').forEach((opt, idx) => {
        if (idx === 0) {
            opt.classList.add('active');
            colorValue.value = opt.dataset.color;
        } else {
            opt.classList.remove('active');
        }
    });
    updatePlot();
});

// Start the App
initPalette();
updatePlot();