@extends('layouts.app')

{{-- Brand Icons — faithful re-expression of src/html/icons/brands.html.
     Same DOM/classes/ARIA. Alpine x-data on the .ax-dash-grid; inline
     iconGallery() component + page-local <style> kept in place. --}}

@section('content')

        <!-- ════════════════ PAGE HEAD ════════════════ -->
        <div class="ax-page-head">
          <div class="ax-page-head__row">
            <div>
              <nav class="ax-breadcrumb" data-ax-breadcrumb aria-label="Breadcrumb"></nav>
              <h1 class="ax-page-head__title">Brand Icons</h1>
              <p class="ax-page-head__subtitle">Social, auth-provider and payment marks for sign-in buttons, share rows and footers. Click any tile to copy its name.</p>
            </div>
            <div class="ax-page-head__actions">
              <a class="ax-btn ax-btn--secondary ax-btn--pill" href="/icons/solid">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.979 -1.404a6 6 0 0 1 3.124 10.236l-.18 .185l-7.5 7.428l-7.5 -7.428a6 6 0 0 1 2.018 -10.43z"/></svg>
                <span class="ax-btn__label">Solid set</span>
              </a>
              <a class="ax-btn ax-btn--primary" href="/icons/tabler">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h6v6h-6z"/><path d="M14 4h6v6h-6z"/><path d="M4 14h6v6h-6z"/><path d="M14 14h6v6h-6z"/></svg>
                <span class="ax-btn__label">All icons</span>
              </a>
            </div>
          </div>
        </div>

        <!-- ════════════════ CONTENT ════════════════ -->
        <div class="ax-dash-grid"
          x-data="iconGallery({
            mode:'brands',
            icons:[
              {n:'brand-github',c:'Auth',k:'git code repo developer signin provider',o:'<path d=\'M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5\'/>'},
              {n:'brand-google',c:'Auth',k:'search signin oauth provider login',o:'<path d=\'M20.945 11a9 9 0 1 1 -3.284 -5.997l-2.655 2.392a5.5 5.5 0 1 0 2.119 6.605h-4.125v-3h7.945\'/>'},
              {n:'brand-apple',c:'Auth',k:'ios mac signin provider login',o:'<path d=\'M8.286 7.008c-3.216 0 -4.286 3.23 -4.286 5.92c0 3.229 2.143 8.072 4.286 8.072c1.165 -.05 1.799 -.538 3.214 -.538c1.406 0 1.607 .538 3.214 .538s4.286 -3.229 4.286 -5.381c-.03 -.011 -2.649 -.434 -2.679 -3.23c-.02 -2.335 2.589 -3.179 2.679 -3.228c-1.096 -1.606 -3.162 -2.113 -3.75 -2.153c-1.535 -.12 -3.032 1.077 -3.75 1.077c-.729 0 -2.036 -1.077 -3.214 -1.077\'/><path d=\'M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2\'/>'},
              {n:'brand-facebook',c:'Social',k:'meta social fb share signin',o:'<path d=\'M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3\'/>'},
              {n:'brand-x',c:'Social',k:'twitter tweet social share',o:'<path d=\'M4 4l11.733 16h4.267l-11.733 -16l-4.267 0\'/><path d=\'M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772\'/>'},
              {n:'brand-instagram',c:'Social',k:'photo social ig meta share',o:'<path d=\'M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4l0 -8\'/><path d=\'M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/><path d=\'M16.5 7.5v.01\'/>'},
              {n:'brand-linkedin',c:'Social',k:'work job network professional social',o:'<path d=\'M8 11v5\'/><path d=\'M8 8v.01\'/><path d=\'M12 16v-5\'/><path d=\'M16 16v-3a2 2 0 1 0 -4 0\'/><path d=\'M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10\'/>'},
              {n:'brand-youtube',c:'Social',k:'video play media channel social',o:'<path d=\'M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8\'/><path d=\'M10 9l5 3l-5 3l0 -6\'/>'},
              {n:'brand-tiktok',c:'Social',k:'video short social music share',o:'<path d=\'M21 7.917v4.034a9.948 9.948 0 0 1 -5 -1.951v4.5a6.5 6.5 0 1 1 -8 -6.326v4.326a2.5 2.5 0 1 0 4 2v-11.5h4.083a6.005 6.005 0 0 0 4.917 4.917\'/>'},
              {n:'brand-slack',c:'Productivity',k:'chat team message work app',o:'<path d=\'M12 12v-6a2 2 0 0 1 4 0v6m0 -2a2 2 0 1 1 2 2h-6\'/><path d=\'M12 12h6a2 2 0 0 1 0 4h-6m2 0a2 2 0 1 1 -2 2v-6\'/><path d=\'M12 12v6a2 2 0 0 1 -4 0v-6m0 2a2 2 0 1 1 -2 -2h6\'/><path d=\'M12 12h-6a2 2 0 0 1 0 -4h6m-2 0a2 2 0 1 1 2 -2v6\'/>'},
              {n:'brand-discord',c:'Social',k:'chat gaming community voice app',o:'<path d=\'M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0\'/><path d=\'M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0\'/><path d=\'M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3\'/><path d=\'M7 16.5c3.5 1 6.5 1 10 0\'/>'},
              {n:'brand-figma',c:'Design',k:'ui design tool collaborate vector',o:'<path d=\'M15 12a3 3 0 1 0 0 -6h-3v6h3\'/><path d=\'M12 6h-3a3 3 0 1 0 0 6h3v-6\'/><path d=\'M12 12h-3a3 3 0 1 0 0 6h3v-6\'/><path d=\'M12 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\'/><path d=\'M9 6a3 3 0 0 1 3 -3v3z\'/>'},
              {n:'brand-dribbble',c:'Design',k:'shot design portfolio basketball social',o:'<path d=\'M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\'/><path d=\'M9 3.6c5 6 7 10.5 7.5 16.2\'/><path d=\'M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4\'/><path d=\'M3.1 10.75c5 0 9.814 -.38 15.314 -5\'/>'},
              {n:'brand-stripe',c:'Payment',k:'checkout pay billing gateway card',o:'<path d=\'M11.453 8.056c0 -.623 .518 -.979 1.442 -.979c1.69 0 3.41 .343 4.605 .923l.5 -4c-.948 -.449 -2.82 -1 -5.5 -1c-1.895 0 -3.373 .087 -4.5 1c-1.172 .956 -2 2.33 -2 4c0 3.03 1.958 4.906 5 6c1.961 .69 3 .743 3 1.5c0 .735 -.851 1.5 -2 1.5c-1.423 0 -3.963 -.609 -5.5 -1.5l-.5 4c1.321 .734 3.474 1.5 6 1.5c2 0 3.957 -.468 5.084 -1.36c1.263 -.979 1.916 -2.268 1.916 -4.14c0 -3.096 -1.915 -4.547 -5 -5.637c-1.646 -.605 -2.544 -1.07 -2.544 -1.807l-.003 0\'/>'},
              {n:'brand-paypal',c:'Payment',k:'checkout pay money wallet gateway',o:'<path d=\'M10 13l2.5 0c2.5 0 5 -2.5 5 -5c0 -3 -1.9 -5 -5 -5h-5.5a1 1 0 0 0 -1 .82l-2.7 13.117a.5 .5 0 0 0 .5 .613h3.1l.7 -3.83\'/><path d=\'M14 13.5c0 1.5 1 2.5 3 2.5s3 -1 3 -3c0 -2 -1.5 -3 -3.5 -3h-3.5l-1.7 8.183a.5 .5 0 0 0 .5 .817h2.4\'/>'},
              {n:'brand-visa',c:'Payment',k:'card pay credit checkout money',o:'<path d=\'M21 15l1 -6\'/><path d=\'M3 15l1.5 -6h2.5l-1.5 6z\'/><path d=\'M8 9l1.5 4l.5 2\'/><path d=\'M9.5 9h2.5l-1 6h-2\'/><path d=\'M19 9h-2a1.5 1.5 0 0 0 -1.5 1.5c0 1.5 2 1.5 2 3c0 .83 -.67 1.5 -1.5 1.5h-1.5\'/><path d=\'M2 9h2\'/>'},
              {n:'brand-mastercard',c:'Payment',k:'card pay credit checkout money',o:'<path d=\'M3 5m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z\'/><path d=\'M12 7.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0 -9\'/><path d=\'M12 7.5a4.5 4.5 0 1 1 0 9\'/>'},
              {n:'brand-android',c:'Platform',k:'mobile app google os device',o:'<path d=\'M4 10l0 6\'/><path d=\'M20 10l0 6\'/><path d=\'M7 9h10v8a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-8a5 5 0 0 1 10 0\'/><path d=\'M8 3l1 2\'/><path d=\'M16 3l-1 2\'/><path d=\'M9 18l0 3\'/><path d=\'M15 18l0 3\'/>'},
              {n:'brand-windows',c:'Platform',k:'microsoft os desktop pc app',o:'<path d=\'M12 5l9 -1v8h-9v-7z\'/><path d=\'M3 6l6 -.74v6.74h-6z\'/><path d=\'M3 13h6v6.74l-6 -.74z\'/><path d=\'M12 13h9v8l-9 -1.182z\'/>'},
              {n:'brand-chrome',c:'Browser',k:'google web browser internet',o:'<path d=\'M12 9a3 3 0 1 0 0 6a3 3 0 0 0 0 -6\'/><path d=\'M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\'/><path d=\'M12 9h8.4\'/><path d=\'M14.598 13.5l-4.2 7.275\'/><path d=\'M9.402 13.5l-4.2 -7.275\'/>'},
              {n:'brand-spotify',c:'Media',k:'music streaming audio play app',o:'<path d=\'M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\'/><path d=\'M8 11.973c2.5 -1.473 5.5 -.973 7.5 .527\'/><path d=\'M9 15c1.5 -1 4 -1 5 .5\'/><path d=\'M7 9c2 -1 6 -2 10 .5\'/>'},
              {n:'brand-dropbox',c:'Storage',k:'cloud files sync share app',o:'<path d=\'M12 6l-4 2.5l4 2.5l4 -2.5z\'/><path d=\'M4 8.5l4 2.5l-4 2.5l-4 -2.5z\'/><path d=\'M4 13.5l4 2.5l4 -2.5\'/><path d=\'M12 11l4 2.5l4 -2.5l-4 -2.5\'/><path d=\'M8 17.5l4 -2.5l4 2.5l-4 2.5z\'/>'},
              {n:'brand-notion',c:'Productivity',k:'notes docs workspace wiki app',o:'<path d=\'M4 5l3.5 .5l9.5 1l1 1v11l-1 1l-9.5 -.5l-3.5 -.5v-13\'/><path d=\'M8 6v11.5\'/><path d=\'M17.5 6.5l-9.5 -1.5\'/><path d=\'M8 6l8.5 11.5\'/>'},
              {n:'brand-vercel',c:'Platform',k:'deploy hosting nextjs cloud app',o:'<path d=\'M3 19h18l-9 -15z\'/>'}
            ]
          })">

          <!-- ───── GALLERY CARD ───── -->
          <section class="ax-card ax-col--12" role="region" aria-label="Brand icon gallery">
            <div class="ax-card__header" style="flex-wrap:wrap;gap:var(--ax-space-3);">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Logos &amp; marks</span>
                <h2 class="ax-card__title">Browse the set</h2>
                <p class="ax-card__subtitle"><span class="ax-num" x-text="filtered.length"></span> of <span class="ax-num" x-text="icons.length"></span> shown · mono marks, ready to tint</p>
              </div>
              <div class="ax-card__actions" style="flex-wrap:wrap;gap:var(--ax-space-2);">
                <!-- size preview -->
                <div class="ax-segment" role="group" aria-label="Preview size">
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='sm'" @click="size='sm'">SM</button>
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='md'" @click="size='md'">MD</button>
                  <button type="button" class="ax-segment__option" :aria-pressed="size==='lg'" @click="size='lg'">LG</button>
                </div>
                <!-- color preview -->
                <div class="ax-segment" role="group" aria-label="Preview color">
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='text'" @click="color='text'" aria-label="Text color"><span style="font-weight:600;">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='accent'" @click="color='accent'" aria-label="Accent color"><span style="font-weight:600;color:var(--ax-accent);">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='success'" @click="color='success'" aria-label="Success color"><span style="font-weight:600;color:var(--ax-success-500);">A</span></button>
                  <button type="button" class="ax-segment__option" :aria-pressed="color==='danger'" @click="color='danger'" aria-label="Danger color"><span style="font-weight:600;color:var(--ax-danger-500);">A</span></button>
                </div>
                <!-- search -->
                <div style="position:relative;min-width:220px;">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:var(--ax-icon-sm);height:var(--ax-icon-sm);color:var(--ax-text-subtle);pointer-events:none;"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/></svg>
                  <input type="search" class="ax-input ax-input--sm" placeholder="Search brands…" x-model.debounce.150ms="q" aria-label="Search brand icons" style="padding-inline-start:36px;width:100%;">
                </div>
              </div>
            </div>

            <div class="ax-card__body">
              <!-- grid -->
              <div class="ax-icongrid" x-show="filtered.length">
                <template x-for="ic in filtered" :key="ic.n">
                  <button type="button" class="ax-icontile" :title="ic.n" @click="copy(ic.n)" :aria-label="'Copy icon name '+ic.n">
                    <span class="ax-icontile__glyph" :class="['is-'+size,'is-'+color]">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" x-html="ic.o"></svg>
                    </span>
                    <span class="ax-icontile__name ax-truncate" x-text="ic.n"></span>
                  </button>
                </template>
              </div>

              <!-- empty state -->
              <div x-show="!filtered.length" x-cloak style="text-align:center;padding:var(--ax-space-9) var(--ax-space-4);">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:48px;height:48px;color:var(--ax-text-subtle);margin-bottom:var(--ax-space-3);"><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/><path d="M21 21l-6 -6"/><path d="M7 10l6 0"/></svg>
                <p style="font-size:var(--ax-text-md);font-weight:var(--ax-weight-semibold);color:var(--ax-text-strong);margin:0;">No brands match "<span x-text="q"></span>"</p>
                <p style="font-size:var(--ax-text-sm);color:var(--ax-text-muted);margin:4px 0 var(--ax-space-4);">Try a platform, network or payment provider.</p>
                <button type="button" class="ax-btn ax-btn--secondary ax-btn--sm" @click="q=''">Clear search</button>
              </div>
            </div>
          </section>

          <!-- ───── SIGN-IN BUTTON SHOWCASE ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Social sign-in example">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">In context</span>
                <h2 class="ax-card__title">Sign-in buttons</h2>
                <p class="ax-card__subtitle">Brand marks paired with provider copy.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-3);">
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--block">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.945 11a9 9 0 1 1 -3.284 -5.997l-2.655 2.392a5.5 5.5 0 1 0 2.119 6.605h-4.125v-3h7.945"/></svg>
                <span class="ax-btn__label">Continue with Google</span>
              </button>
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--block">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"/></svg>
                <span class="ax-btn__label">Continue with GitHub</span>
              </button>
              <button type="button" class="ax-btn ax-btn--secondary ax-btn--block">
                <svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8.286 7.008c-3.216 0 -4.286 3.23 -4.286 5.92c0 3.229 2.143 8.072 4.286 8.072c1.165 -.05 1.799 -.538 3.214 -.538c1.406 0 1.607 .538 3.214 .538s4.286 -3.229 4.286 -5.381c-.03 -.011 -2.649 -.434 -2.679 -3.23c-.02 -2.335 2.589 -3.179 2.679 -3.228c-1.096 -1.606 -3.162 -2.113 -3.75 -2.153c-1.535 -.12 -3.032 1.077 -3.75 1.077c-.729 0 -2.036 -1.077 -3.214 -1.077"/><path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2"/></svg>
                <span class="ax-btn__label">Continue with Apple</span>
              </button>
            </div>
          </section>

          <!-- ───── SHARE / SOCIAL ROW SHOWCASE ───── -->
          <section class="ax-card ax-col--6" role="region" aria-label="Social share example">
            <div class="ax-card__header">
              <div class="ax-card__titles">
                <span class="ax-card__eyebrow">In context</span>
                <h2 class="ax-card__title">Share &amp; follow</h2>
                <p class="ax-card__subtitle">Icon-only buttons for footers and toolbars.</p>
              </div>
            </div>
            <div class="ax-card__body" style="display:flex;flex-direction:column;gap:var(--ax-space-4);">
              <div class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:wrap;">
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Share on X"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l11.733 16h4.267l-11.733 -16l-4.267 0"/><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"/></svg></button>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Share on Facebook"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"/></svg></button>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Share on LinkedIn"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 11v5"/><path d="M8 8v.01"/><path d="M12 16v-5"/><path d="M16 16v-3a2 2 0 1 0 -4 0"/><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4l0 -10"/></svg></button>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Follow on Instagram"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4l0 -8"/><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"/><path d="M16.5 7.5v.01"/></svg></button>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Subscribe on YouTube"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8"/><path d="M10 9l5 3l-5 3l0 -6"/></svg></button>
                <button type="button" class="ax-btn ax-btn--ghost ax-btn--icon" aria-label="Join the Discord"><svg class="ax-btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"/><path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3"/><path d="M7 16.5c3.5 1 6.5 1 10 0"/></svg></button>
              </div>
              <div class="ax-divider"></div>
              <div class="ax-cluster" style="gap:var(--ax-space-2);flex-wrap:wrap;">
                <span style="font-size:var(--ax-text-xs);color:var(--ax-text-subtle);">We accept</span>
                <span class="ax-badge ax-badge--soft" style="gap:var(--ax-space-2);"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15l1 -6"/><path d="M3 15l1.5 -6h2.5l-1.5 6z"/><path d="M9.5 9h2.5l-1 6h-2"/><path d="M19 9h-2a1.5 1.5 0 0 0 -1.5 1.5c0 1.5 2 1.5 2 3c0 .83 -.67 1.5 -1.5 1.5h-1.5"/></svg>Visa</span>
                <span class="ax-badge ax-badge--soft" style="gap:var(--ax-space-2);"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"/><path d="M12 7.5a4.5 4.5 0 1 0 0 9"/><path d="M12 7.5a4.5 4.5 0 1 1 0 9"/></svg>Mastercard</span>
                <span class="ax-badge ax-badge--soft" style="gap:var(--ax-space-2);"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11.453 8.056c0 -.623 .518 -.979 1.442 -.979c1.69 0 3.41 .343 4.605 .923l.5 -4c-.948 -.449 -2.82 -1 -5.5 -1c-1.895 0 -3.373 .087 -4.5 1c-1.172 .956 -2 2.33 -2 4c0 3.03 1.958 4.906 5 6c1.961 .69 3 .743 3 1.5c0 .735 -.851 1.5 -2 1.5c-1.423 0 -3.963 -.609 -5.5 -1.5l-.5 4c1.321 .734 3.474 1.5 6 1.5c2 0 3.957 -.468 5.084 -1.36c1.263 -.979 1.916 -2.268 1.916 -4.14c0 -3.096 -1.915 -4.547 -5 -5.637c-1.646 -.605 -2.544 -1.07 -2.544 -1.807"/></svg>Stripe</span>
              </div>
            </div>
          </section>

          <!-- copy confirmation pill -->
          <div class="ax-copytoast" role="status" aria-live="polite" x-show="copied" x-cloak x-transition.opacity>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5l10 -10"/></svg>
            <span>Copied <code class="ax-code" style="background:transparent;padding:0;color:var(--ax-accent);" x-text="copied"></code></span>
          </div>

        </div>

        <!-- gallery component + page-local styles (role-tokens only) -->
        <style>
          .ax-icongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--ax-space-2);}
          .ax-icontile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ax-space-2);padding:var(--ax-space-4) var(--ax-space-2);min-width:0;color:var(--ax-text-muted);background:var(--ax-surface-subtle);border:1px solid var(--ax-border);border-radius:var(--ax-radius-md);cursor:pointer;transition:color var(--ax-motion-fast) var(--ax-ease-standard),background var(--ax-motion-fast) var(--ax-ease-standard),border-color var(--ax-motion-fast) var(--ax-ease-standard),transform var(--ax-motion-fast) var(--ax-ease-standard);}
          .ax-icontile:hover{color:var(--ax-accent);background:var(--ax-accent-wash);border-color:var(--ax-border-strong);transform:translateY(-2px);}
          .ax-icontile:focus-visible{outline:2px solid var(--ax-accent);outline-offset:2px;}
          .ax-icontile__glyph{display:grid;place-items:center;height:32px;}
          .ax-icontile__glyph svg{width:24px;height:24px;}
          .ax-icontile__glyph.is-sm svg{width:18px;height:18px;}
          .ax-icontile__glyph.is-md svg{width:24px;height:24px;}
          .ax-icontile__glyph.is-lg svg{width:32px;height:32px;}
          .ax-icontile__glyph.is-accent{color:var(--ax-accent);}
          .ax-icontile__glyph.is-success{color:var(--ax-success-500);}
          .ax-icontile__glyph.is-danger{color:var(--ax-danger-500);}
          .ax-icontile:hover .ax-icontile__glyph.is-text{color:var(--ax-accent);}
          .ax-icontile__name{font-size:var(--ax-text-2xs);color:var(--ax-text-subtle);text-align:center;max-width:100%;}
          .ax-copytoast{position:fixed;inset-block-end:var(--ax-space-6);inset-inline:0;margin-inline:auto;width:max-content;max-width:90vw;z-index:var(--ax-z-toast,80);display:flex;align-items:center;gap:var(--ax-space-2);padding:var(--ax-space-3) var(--ax-space-5);color:var(--ax-text-strong);background:var(--ax-surface-overlay);border:1px solid var(--ax-border);border-radius:var(--ax-radius-pill);box-shadow:var(--ax-shadow-lg);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);font-size:var(--ax-text-sm);font-weight:var(--ax-weight-medium);}
          .ax-copytoast svg{width:var(--ax-icon-sm);height:var(--ax-icon-sm);color:var(--ax-success-500);}
        </style>

        <script>
          function iconGallery(cfg){
            return {
              icons: cfg.icons,
              mode: cfg.mode || 'gallery',
              variant: cfg.variant || 'outline',
              size: 'md',
              color: 'text',
              q: '',
              copied: false,
              _t: null,
              get filtered(){
                const q = this.q.trim().toLowerCase();
                if(!q) return this.icons;
                return this.icons.filter(i =>
                  i.n.toLowerCase().includes(q) ||
                  (i.k && i.k.toLowerCase().includes(q)) ||
                  (i.c && i.c.toLowerCase().includes(q))
                );
              },
              copy(name){
                try { navigator.clipboard?.writeText(name); } catch(e){ /* noop */ }
                this.copied = name;
                clearTimeout(this._t);
                this._t = setTimeout(() => { this.copied = false; }, 1500);
              }
            };
          }
        </script>
@endsection