<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
  <button class="btn positive" onclick="hygge.toast.success('Operation completed successfully!')">
    Success
  </button>
  <button class="btn negative" onclick="hygge.toast.error('An error occurred!')">Error</button>
  <button class="btn info" onclick="hygge.toast.info('Here is some information')">Info</button>
  <button class="btn warning" onclick="hygge.toast.warning('This is a warning message')">
    Warning
  </button>
  <button
    class="btn primary"
    onclick="hygge.toast({type: 'primary', header: 'Primary notification'})"
  >
    Primary
  </button>
</div>

<div class="grid grid-cols-2 md:grid-cols-5 gap-3">
  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Tiny toast', size: 'tiny', type: 'info'})"
  >
    Tiny
  </button>
  <button
    class="btn small"
    onclick="hygge.toast({header: 'Small toast', size: 'small', type: 'info'})"
  >
    Small
  </button>
  <button class="btn" onclick="hygge.toast({header: 'Default size', type: 'info'})">Default</button>
  <button
    class="btn large"
    onclick="hygge.toast({header: 'Large toast', description: 'With more content', size: 'large', type: 'info'})"
  >
    Large
  </button>
  <button
    class="btn big"
    onclick="hygge.toast({header: 'Big toast', description: 'Even more space', size: 'big', type: 'info'})"
  >
    Big
  </button>
</div>

<div class="grid grid-cols-3 gap-2 max-w-md mx-auto">
  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Top Left', position: 'top-left', type: 'info'})"
  >
    ↖ Top Left
  </button>
  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Top Center', position: 'top-center', type: 'info'})"
  >
    ↑ Top Center
  </button>
  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Top Right', position: 'top-right', type: 'info'})"
  >
    ↗ Top Right
  </button>

  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Middle Left', position: 'middle-left', type: 'info'})"
  >
    ← Mid Left
  </button>
  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Middle Center', position: 'middle-center', type: 'info'})"
  >
    • Mid Center
  </button>
  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Middle Right', position: 'middle-right', type: 'info'})"
  >
    → Mid Right
  </button>

  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Bottom Left', position: 'bottom-left', type: 'info'})"
  >
    ↙ Bot Left
  </button>
  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Bottom Center', position: 'bottom-center', type: 'info'})"
  >
    ↓ Bot Center
  </button>
  <button
    class="btn tiny"
    onclick="hygge.toast({header: 'Bottom Right', position: 'bottom-right', type: 'info'})"
  >
    ↘ Bot Right
  </button>
</div>

<div class="mt-4">
  <p class="text-sm text-gray-600 mb-3">Full Width Positions (Perfect for Mobile):</p>
  <div class="grid grid-cols-2 gap-3">
    <button
      class="btn primary"
      onclick="hygge.toast.clear(); hygge.toast({header: 'Top Stretch', description: 'Full width notification at the top', position: 'topstretch', type: 'info', maxToasts: 1})"
    >
      ⬆️ Top Stretch
    </button>
    <button
      class="btn primary"
      onclick="hygge.toast.clear(); hygge.toast({header: 'Bottom Stretch', description: 'Full width notification at the bottom', position: 'bottomstretch', type: 'info', maxToasts: 1})"
    >
      ⬇️ Bottom Stretch
    </button>
  </div>
</div>

<div class="grid grid-cols-3 gap-3">
  <button
    class="btn"
    onclick="hygge.toast({header: 'Light variant', variant: 'light', type: 'success'})"
  >
    Light
  </button>
  <button
    class="btn filled positive"
    onclick="hygge.toast({header: 'Filled variant', variant: 'filled', type: 'success'})"
  >
    Filled (Default)
  </button>
  <button
    class="btn outline"
    onclick="hygge.toast({header: 'Outline variant', variant: 'outline', type: 'success'})"
  >
    Outline
  </button>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
  <button class="btn" onclick="hygge.toast({header: 'Auto dismiss', displayTime: 3, type: 'info'})">
    3 Seconds
  </button>
  <button class="btn" onclick="hygge.toast({header: 'Quick toast', displayTime: 1, type: 'info'})">
    1 Second
  </button>
  <button
    class="btn warning"
    onclick="hygge.toast({header: 'Persistent toast', description: 'Won\'t auto-dismiss', displayTime: 0, type: 'warning'})"
  >
    No Dismiss
  </button>
  <button
    class="btn primary"
    onclick="hygge.toast({header: 'With progress bar', description: 'Watch the indicator', displayTime: 5, showProgress: true, type: 'info'})"
  >
    With Progress
  </button>
</div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
  <button
    class="btn"
    onclick="hygge.toast({
                    header: 'Item deleted',
                    type: 'info',
                    actions: [{
                        text: 'Undo',
                        onClick: function() {
                            hygge.toast.success('Item restored!');
                        }
                    }]
                })"
  >
    With Undo
  </button>

  <button
    class="btn"
    onclick="hygge.toast({
                    header: 'New message',
                    description: 'From John Doe',
                    type: 'info',
                    size: 'large',
                    displayTime: 0,
                    actions: [
                        {text: 'View', onClick: function() { hygge.toast.info('Opening...'); }},
                        {text: 'Reply', onClick: function() { hygge.toast.info('Replying...'); }}
                    ]
                })"
  >
    Multi Actions
  </button>

  <button
    class="btn"
    onclick="hygge.toast({
                    header: 'Click me!',
                    description: 'Toast responds to clicks',
                    type: 'info',
                    displayTime: 0,
                    onClick: function(e, toast) {
                        alert('Toast clicked!');
                        toast.find('.close').click();
                    }
                })"
  >
    Clickable
  </button>

  <button
    class="btn"
    onclick="hygge.toast({
                    header: 'Custom Icon',
                    description: 'With heart icon',
                    type: 'info',
                    icon: 'heart'
                })"
  >
    Custom Icon
  </button>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
  <button
    class="btn success"
    onclick="hygge.toast.clear(); hygge.toast({
                    header: '✅ Changes Saved',
                    description: 'Your profile has been updated successfully',
                    type: 'success',
                    position: 'topstretch',
                    displayTime: 4,
                    showProgress: true,
                    maxToasts: 1
                })"
  >
    Mobile Success (Top)
  </button>

  <button
    class="btn negative"
    onclick="hygge.toast.clear(); hygge.toast({
                    header: '⚠️ No Internet Connection',
                    description: 'Check your network settings and try again',
                    type: 'error',
                    position: 'bottomstretch',
                    displayTime: 0,
                    dismissible: true,
                    maxToasts: 1
                })"
  >
    Mobile Error (Bottom)
  </button>

  <button
    class="btn warning"
    onclick="hygge.toast.clear(); hygge.toast({
                    header: '🔄 Syncing...',
                    description: 'Your data is being synchronized',
                    type: 'info',
                    position: 'topstretch',
                    showProgress: true,
                    displayTime: 6,
                    maxToasts: 1
                })"
  >
    Sync Status (Top)
  </button>

  <button
    class="btn primary"
    onclick="hygge.toast.clear(); hygge.toast({
                    header: '📱 Update Available',
                    description: 'A new version is ready to install',
                    type: 'warning',
                    position: 'bottomstretch',
                    displayTime: 0,
                    maxToasts: 1,
                    actions: [{
                        text: 'Update Now',
                        onClick: function() { hygge.toast.clear(); hygge.toast.success('Updating...', {position: 'topstretch', maxToasts: 1}); }
                    }]
                })"
  >
    Update Notification
  </button>
</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
  <button
    class="btn positive"
    onclick="hygge.toast({
                    header: 'Upload Complete',
                    description: '5 files uploaded successfully (2.3 MB)',
                    type: 'success',
                    size: 'large',
                    position: 'bottom-right',
                    displayTime: 7,
                    showProgress: true,
                    variant: 'filled',
                    actions: [{
                        text: 'View Files',
                        onClick: function() { hygge.toast.info('Opening file viewer...'); }
                    }]
                })"
  >
    Success with Details
  </button>

  <button
    class="btn negative"
    onclick="hygge.toast({
                    header: 'Upload Failed',
                    description: 'Check your connection and try again.',
                    type: 'error',
                    size: 'large',
                    position: 'top-center',
                    displayTime: 0,
                    variant: 'filled',
                    actions: [
                        {
                            text: 'Retry',
                            onClick: function(e, toast) {
                                toast.find('.close').click();
                                hygge.toast.info('Retrying...');
                                setTimeout(() => hygge.toast.success('Success!'), 2000);
                            }
                        },
                        {text: 'Help', href: '#'}
                    ]
                })"
  >
    Error with Actions
  </button>

  <button
    class="btn warning"
    onclick="
                    hygge.toast.success('First toast');
                    setTimeout(() => hygge.toast.warning('Second toast'), 500);
                    setTimeout(() => hygge.toast.info('Third toast'), 1000);
                    setTimeout(() => hygge.toast.error('Fourth toast'), 1500);
                "
  >
    Multiple Toasts
  </button>
</div>

<div class="mt-4">
  <button class="btn negative" onclick="hygge.toast['clear']()">Clear All Toasts</button>
</div>

<p class="text-sm text-gray-600 mb-4">
  The <code>hygge.say</code> function processes complex message arrays and displays them as toasts.
</p>

<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
  <button class="btn" onclick="hygge.say('S:Data saved successfully!')">Success Message</button>

  <button class="btn" onclick="hygge.say('E:Validation failed. Check your input.')">
    Error Message
  </button>

  <button
    class="btn"
    onclick="hygge.say([
                    'S:Profile updated!',
                    'I:Email verification sent.',
                    'A:Check your spam folder.'
                ])"
  >
    Multiple Messages
  </button>

  <button
    class="btn"
    onclick="hygge.say({
                    type: 'success',
                    header: 'Operation Complete',
                    description: 'Changes saved to database.'
                })"
  >
    Object Format
  </button>
</div>

<div class="overflow-x-auto">
  <table class="table-auto w-full text-sm">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-4 py-2 text-left">Option</th>
        <th class="px-4 py-2 text-left">Type</th>
        <th class="px-4 py-2 text-left">Default</th>
        <th class="px-4 py-2 text-left">Description</th>
      </tr>
    </thead>
    <tbody class="divide-y">
      <tr>
        <td class="px-4 py-2 font-mono">header</td>
        <td class="px-4 py-2">string</td>
        <td class="px-4 py-2">''</td>
        <td class="px-4 py-2">Toast title/header text</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">description</td>
        <td class="px-4 py-2">string</td>
        <td class="px-4 py-2">''</td>
        <td class="px-4 py-2">Toast body/description text</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">type</td>
        <td class="px-4 py-2">string</td>
        <td class="px-4 py-2">'info'</td>
        <td class="px-4 py-2">success, error, info, warning, primary</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">icon</td>
        <td class="px-4 py-2">string</td>
        <td class="px-4 py-2">auto</td>
        <td class="px-4 py-2">Custom icon name (overrides type default)</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">displayTime</td>
        <td class="px-4 py-2">number/null</td>
        <td class="px-4 py-2">null</td>
        <td class="px-4 py-2">Seconds (0=no dismiss, null=auto-calculate)</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">position</td>
        <td class="px-4 py-2">string</td>
        <td class="px-4 py-2">'top-right'</td>
        <td class="px-4 py-2">9 position combinations</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">size</td>
        <td class="px-4 py-2">string</td>
        <td class="px-4 py-2">'small'</td>
        <td class="px-4 py-2">tiny, small (default), '', large, big</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">showProgress</td>
        <td class="px-4 py-2">boolean</td>
        <td class="px-4 py-2">false</td>
        <td class="px-4 py-2">Show countdown progress bar</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">dismissible</td>
        <td class="px-4 py-2">boolean</td>
        <td class="px-4 py-2">true</td>
        <td class="px-4 py-2">Show close button</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">variant</td>
        <td class="px-4 py-2">string</td>
        <td class="px-4 py-2">'filled'</td>
        <td class="px-4 py-2">light, filled, outline</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">actions</td>
        <td class="px-4 py-2">array</td>
        <td class="px-4 py-2">[]</td>
        <td class="px-4 py-2">Action buttons/links</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">onClick</td>
        <td class="px-4 py-2">function</td>
        <td class="px-4 py-2">null</td>
        <td class="px-4 py-2">Toast click handler</td>
      </tr>
      <tr>
        <td class="px-4 py-2 font-mono">onClose</td>
        <td class="px-4 py-2">function</td>
        <td class="px-4 py-2">null</td>
        <td class="px-4 py-2">Close event callback</td>
      </tr>
    </tbody>
  </table>
</div>