<!-- 色変更デバッグUI -->
  <div
    x-data="{
      showColorPicker: false,
      colorPresets: [
        { name: 'グレー（デフォルト）', color1: 'rgba(75, 85, 99, 0.85)', color2: 'rgba(55, 65, 81, 0.85)' },
        { name: 'ダークブルー', color1: 'rgba(30, 58, 138, 0.85)', color2: 'rgba(29, 78, 216, 0.85)' },
        { name: 'ネイビー', color1: 'rgba(31, 41, 55, 0.85)', color2: 'rgba(17, 24, 39, 0.85)' },
        { name: 'ティール', color1: 'rgba(19, 78, 74, 0.85)', color2: 'rgba(13, 148, 136, 0.85)' },
        { name: 'エメラルド', color1: 'rgba(6, 95, 70, 0.85)', color2: 'rgba(4, 120, 87, 0.85)' },
        { name: 'スレート', color1: 'rgba(51, 65, 85, 0.85)', color2: 'rgba(30, 41, 59, 0.85)' },
        { name: 'オレンジ', color1: 'rgba(194, 65, 12, 0.85)', color2: 'rgba(234, 88, 12, 0.85)' },
        { name: 'アンバー', color1: 'rgba(180, 83, 9, 0.85)', color2: 'rgba(217, 119, 6, 0.85)' }
      ],
      applyColor(color1, color2) {
        const heroElement = document.querySelector('.hero-bg');
        if (heroElement) {
          heroElement.style.background = `linear-gradient(135deg, ${color1} 0%, ${color2} 100%)`;
        }
      }
    }"
    class="fixed bottom-6 right-6 z-50"
  >
    <!-- カラーパレットパネル -->
    <div
      x-show="showColorPicker"
      x-cloak
      @click.away="showColorPicker = false"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0 transform translate-y-2"
      x-transition:enter-end="opacity-100 transform translate-y-0"
      x-transition:leave="transition ease-in duration-150"
      x-transition:leave-start="opacity-100 transform translate-y-0"
      x-transition:leave-end="opacity-0 transform translate-y-2"
      class="absolute bottom-16 right-0 bg-white rounded-lg shadow-2xl border border-gray-200 p-4 w-64"
    >
      <h4 class="text-sm font-bold text-gray-800 mb-3">Hero背景色を変更</h4>
      <div class="space-y-2">
        <template x-for="preset in colorPresets" :key="preset.name">
          <button
            @click="applyColor(preset.color1, preset.color2)"
            class="w-full text-left px-3 py-2 text-sm rounded hover:bg-gray-100 transition-colors flex items-center justify-between group"
          >
            <span class="text-gray-700" x-text="preset.name"></span>
            <div class="flex gap-1">
              <div
                class="w-4 h-4 rounded border border-gray-300"
                :style="`background: ${preset.color1}`"
              ></div>
              <div
                class="w-4 h-4 rounded border border-gray-300"
                :style="`background: ${preset.color2}`"
              ></div>
            </div>
          </button>
        </template>
      </div>
      <p class="text-xs text-gray-500 mt-3 pt-3 border-t">
        ※この設定はページをリロードすると元に戻ります
      </p>
    </div>

    <!-- フローティングボタン -->
    <button
      @click="showColorPicker = !showColorPicker"
      class="bg-gray-800 hover:bg-gray-900 text-white p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-200 flex items-center justify-center"
      title="Hero背景色を変更"
    >
      <svg
        class="w-6 h-6"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
        />
      </svg>
    </button>
  </div>