<!-- Primary Actions -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-primary" disabled>Disabled Button</button>

<!-- Button Group -->
<div class="btn-group vertical">
    <button class="btn btn-primary">Save Changes</button>
    <button class="btn btn-secondary">Cancel</button>
</div>

<!-- State-specific Buttons -->
<button class="btn btn-success">Confirm Purchase</button>
<button class="btn btn-danger">Delete Item</button>
<button class="btn btn-warning">Reset Data</button>
<button class="btn btn-info">Edit Details</button>

<!-- Navigation Buttons (for colored backgrounds) -->
<nav class="page-nav">
    <a href="/analytics" class="btn btn-nav">📊 Analytics</a>
    <button class="btn btn-nav btn-export">📥 Export Data</button>
    <button class="btn btn-nav btn-help">❓ Help</button>
</nav>

<!-- Button Sizes -->
<button class="btn btn-primary btn-sm">Small Button</button>
<button class="btn btn-primary">Regular Button</button>
<button class="btn btn-primary btn-lg">Large Button</button>

<!-- Basic Form Elements -->
<div class="form-group">
    <label for="budget-name">Budget Name</label>
    <input type="text" id="budget-name" class="form-input" 
           placeholder="Enter budget name...">
</div>

<div class="form-group">
    <label for="amount">Amount</label>
    <input type="number" id="amount" class="form-input" 
           placeholder="0.00" min="0" step="0.01">
</div>

<div class="form-group">
    <label for="currency">Currency</label>
    <select id="currency" class="form-select">
        <option value="">Select currency...</option>
        <option value="USD">USD ($)</option>
        <option value="EUR">EUR (€)</option>
    </select>
</div>

<!-- Input with Unit Indicator -->
<div class="form-group">
    <label for="investment">Investment Amount</label>
    <div class="form-input-with-unit">
        <input type="number" id="investment" class="form-input" 
               placeholder="0.00">
        <span class="form-input-unit">$</span>
    </div>
</div>

<!-- File Upload -->
<div class="form-group">
    <label for="budget-file">Import Budget Data</label>
    <div class="form-file-wrapper">
        <input type="file" id="budget-file" class="form-file" 
               accept=".json,.csv">
        <label for="budget-file" class="form-file-label">
            Choose File
        </label>
    </div>
</div>

<!-- Form Validation States -->
<div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" id="email" class="form-input valid" 
           value="user@example.com">
    <span class="form-status success">Email format is valid</span>
</div>

<div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" class="form-input invalid" 
           value="123">
    <span class="form-status error">
        Password must be at least 8 characters
    </span>
</div>

<div class="form-group">
    <label for="budget">Budget Amount</label>
    <input type="number" id="budget" class="form-input" 
           placeholder="0.00">
    <span class="form-status warning">Optional field</span>
</div>

<!-- Basic Tooltips with Positioning -->
<span class="tooltip">
    Hover me (top)
    <span class="tooltip-content">This tooltip appears on top</span>
</span>

<span class="tooltip">
    Hover me (bottom)
    <span class="tooltip-content bottom">This tooltip appears on bottom</span>
</span>

<span class="tooltip">
    Hover me (left)
    <span class="tooltip-content left">This tooltip appears on left</span>
</span>

<span class="tooltip">
    Hover me (right)
    <span class="tooltip-content right">This tooltip appears on right</span>
</span>

<!-- Colored Tooltips -->
<button class="btn btn-success tooltip">
    Success
    <span class="tooltip-content success">
        Operation completed successfully!
    </span>
</button>

<button class="btn btn-danger tooltip">
    Error
    <span class="tooltip-content danger">
        Something went wrong!
    </span>
</button>

<button class="btn btn-warning tooltip">
    Warning
    <span class="tooltip-content warning">
        Please be careful!
    </span>
</button>

<button class="btn btn-info tooltip">
    Info
    <span class="tooltip-content info">
        Additional information available
    </span>
</button>

<!-- Form Field Tooltips -->
<div class="form-group">
    <label for="budget-amount">
        Budget Amount
        <span class="tooltip">
            <span class="tooltip-content">
                Enter your total monthly budget in USD
            </span>
        </span>
    </label>
    <input type="number" id="budget-amount" class="form-input">
</div>

<!-- Multiline Tooltip -->
<div class="form-group">
    <label for="investment-type">
        Investment Type
        <span class="tooltip">
            <span class="tooltip-content multiline">
                Choose between fixed amount or percentage 
                for your investment allocation
            </span>
        </span>
    </label>
    <select id="investment-type" class="form-select">...</select>
</div>

<!-- Icon Tooltips -->
<span style="display: flex; align-items: center; gap: 0.5rem;">
    Budget Status
    <span class="tooltip">
        <span class="tooltip-icon">?</span>
        <span class="tooltip-content">
            Your current budget utilization is 75%
        </span>
    </span>
</span>

<!-- Success Icon Tooltip -->
<span class="tooltip">
    <span class="tooltip-icon success">✓</span>
    <span class="tooltip-content success">
        Investments performing above average
    </span>
</span>

<!-- Danger Icon Tooltip -->
<span class="tooltip">
    <span class="tooltip-icon danger">!</span>
    <span class="tooltip-content danger">
        You've exceeded your dining budget
    </span>
</span>

<!-- Large Tooltip with Icon -->
<span class="tooltip">
    <span class="tooltip-icon warning">💡</span>
    <span class="tooltip-content warning large">
        Consider setting up automatic transfers 
        to reach your savings goals faster
    </span>
</span>

<!-- Basic Circle Spinner -->
<div class="spinner-circle"></div>

<!-- Spinner with Text -->
<div class="spinner-with-text">
    <div class="spinner-circle"></div>
    <span>Loading...</span>
</div>

<!-- Colored Spinners -->
<div class="spinner-circle spinner-primary"></div>
<div class="spinner-circle spinner-success"></div>
<div class="spinner-circle spinner-warning"></div>
<div class="spinner-circle spinner-danger"></div>

<!-- Spinner Sizes -->
<div class="spinner-circle spinner-sm"></div>
<div class="spinner-circle spinner-md"></div>
<div class="spinner-circle spinner-lg"></div>
<div class="spinner-circle spinner-xl"></div>

<!-- Different Spinner Types -->
<div class="spinner-dots"></div>
<div class="spinner-pulse"></div>
<div class="spinner-bars"></div>
<div class="spinner-ring"></div>
<div class="spinner-ripple"></div>

<!-- Center Loading (spinner only) -->
<button class="btn btn-primary loading btn-loading-center">
    <span class="btn-text">Save Changes</span>
    <div class="btn-loading-content">
        <div class="btn-spinner"></div>
    </div>
</button>

<!-- Left Loading (spinner + text) -->
<button class="btn btn-secondary loading btn-loading-left">
    <span class="btn-text">Process</span>
    <div class="btn-loading-content">
        <div class="btn-spinner"></div>
        <span class="btn-loading-text">Processing...</span>
    </div>
</button>

<!-- Right Loading (text + spinner) -->
<button class="btn btn-success loading btn-loading-right">
    <span class="btn-text">Upload</span>
    <div class="btn-loading-content">
        <span class="btn-loading-text">Uploading...</span>
        <div class="btn-spinner"></div>
    </div>
</button>

<!-- JavaScript Control -->
<script>
function startLoading(button) {
    button.classList.add('loading');
}
function stopLoading(button) {
    button.classList.remove('loading');
}
</script>

<!-- Centered Spinner -->
<div class="spinner-center">
    <div class="spinner-circle spinner-lg spinner-primary"></div>
</div>

<!-- Full Page Overlay -->
<div class="spinner-overlay">
    <div class="spinner-circle"></div>
</div>

<!-- Interactive Loading Demo -->
<button onclick="showSpinnerDemo()">Show Loading Demo</button>
<div id="spinner-demo-area"></div>

<script>
function showSpinnerDemo() {
    const area = document.getElementById('spinner-demo-area');
    area.innerHTML = '<div class="spinner-with-text"><div class="spinner-circle"></div><span>Processing...</span></div>';
    
    setTimeout(() => {
        area.innerHTML = '<span style="color: #28a745;">✓ Complete!</span>';
    }, 2000);
}
</script>

<!-- Basic Snackbar Usage -->
<script>
// Basic snackbar
snackbar.show('Hello World!');

// Variant shortcuts
snackbar.success('Operation completed successfully!');
snackbar.warning('Please check your input');
snackbar.error('Something went wrong!');
snackbar.info('Here is some information');
</script>

<!-- Position Options -->
<script>
// Available positions:
snackbar.show('Message', {position: 'top-left'});
snackbar.show('Message', {position: 'top-center'});
snackbar.show('Message', {position: 'top-right'});
snackbar.show('Message', {position: 'center-left'});
snackbar.show('Message', {position: 'center-right'});
snackbar.show('Message', {position: 'bottom-left'});
snackbar.show('Message', {position: 'bottom-center'});
snackbar.show('Message', {position: 'bottom-right'});
</script>

<!-- Advanced Snackbar Options -->
<script>
// Persistent snackbar (no auto-dismiss)
snackbar.show('Persistent message', {
    duration: 0,
    dismissible: true
});

// With action button
snackbar.show('File deleted', {
    action: {
        text: 'Undo',
        handler: 'undoDelete()'
    }
});

// Custom duration (10 seconds)
snackbar.show('Long message', {
    duration: 10000
});

// Custom icon and styling
snackbar.show('Custom notification', {
    icon: '🎉',
    variant: 'success',
    position: 'top-center'
});

// Dismiss all snackbars
snackbar.dismissAll();
</script>

<!-- Interactive Snackbar Demo -->
<input type="text" id="demo-message" value="Custom message">
<select id="demo-position">
    <option value="bottom-right">Bottom Right</option>
    <!-- More options... -->
</select>
<select id="demo-variant">
    <option value="default">Default</option>
    <!-- More options... -->
</select>

<script>
function showCustomSnackbarDemo() {
    const message = document.getElementById('demo-message').value;
    const position = document.getElementById('demo-position').value;
    const variant = document.getElementById('demo-variant').value;
    
    snackbar.show(message, {
        position: position,
        variant: variant,
        icon: getVariantIcon(variant)
    });
}
</script>

<!-- Theme System Usage -->
<!-- Include theme manager -->
<script src="themes/theme-manager.js"></script>

<!-- Set ds-theme attribute on body -->
<body ds-theme="dark"> <!-- or ds-theme="light" -->

<script>
// Manual theme switching
setTheme('dark');
setTheme('light');
toggleTheme();

// Using theme object
theme.set('dark');
theme.toggle();
theme.clear(); // Use system preference

// Check current theme
if (theme.isDark()) {
    console.log('Dark theme is active');
}

// Listen for theme changes
theme.onChange((event) => {
    console.log('Theme changed to:', event.detail.theme);
});
</script>

<!-- All components are theme-aware -->
<button class="btn btn-primary">Primary</button>
<div class="card">
    <div class="card-header">
        <h5>Card Title</h5>
    </div>
    <div class="card-body">
        <input class="form-control" placeholder="Input">
    </div>
</div>

<!-- Components automatically inherit theme colors -->
<!-- No additional CSS classes needed -->

<!-- Use CSS variables for theme compatibility -->
.my-component {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

<!-- Variables automatically change with theme -->
[ds-theme="dark"] {
    --color-surface: #334155;
    --color-text-primary: #f8fafc;
    --color-border: #475569;
}

<!-- Listen for theme changes in JS -->
theme.onChange((event) => {
    if (event.detail.isDark) {
        // Dark theme specific logic
    } else {
        // Light theme specific logic
    }
});
</script>