<turbo-stream action="append" target="modals-container"><template>
  <div id="guide-modal" class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center" data-controller="guide" data-guide-target="modal">
  <div class="bg-white rounded-2xl max-w-xl lg:max-w-2xl w-full mx-4 lg:p-6 flex flex-col max-h-[90vh]">
    <!-- 上部：タイトル and × ボタン -->
    <div class="flex justify-between items-center px-8 py-6 pb-0">
      <h3 class="text-2xl font-bold text-text">RakuCiでできること</h3>
      <button class="text-3xl text-text-light hover:text-text transition" data-action="click->guide#closeAndRemove" title="閉じる">
        ×
      </button>
    </div>

    <!-- 中央：スライドコンテンツ（高さ固定） -->
    <div class="px-8 py-6 overflow-y-auto h-[430px] md:h-[480px]">
        <div data-guide-target="slide">
  <div>
    <h2 class="text-lg font-bold text-text mb-2">カードに行きたい場所を追加</h2>

    <p class="md:text-lg text-text-light leading-relaxed mb-4">
      あなたが行ってみたい場所をカードに追加できます。次の旅行に向けていろいろな場所を追加していきましょう。
    </p>

    <div class="flex justify-center">
      <img alt="Guide illustration" class="w-full h-auto rounded-lg" src="/assets/guide_slide_1-05f98ee5b093497c71f41ef4921cfe5fb02169a8f461491e77e39906f272ae78.svg" />
    </div>
  </div>
</div>

        <div data-guide-target="slide">
  <div>
    <h2 class="text-lg font-bold text-text mb-2">グループで一緒に計画</h2>

    <p class="md:text-lg text-text-light leading-relaxed mb-4">
      グループに友人や家族を招待することで、旅行の計画を一緒に進められます。行きたい場所をカードに追加していきましょう。
    </p>

    <div class="flex justify-center">
      <img alt="Guide illustration" class="w-full h-auto rounded-lg" src="/assets/guide_slide_2-c9df78096d2bbe4d634306cac2000dedd359ebd48f711ce3652e651c8cef4983.svg" />
    </div>
  </div>
</div>

        <div data-guide-target="slide">
  <div>
    <h2 class="text-lg font-bold text-text mb-2">しおりをつくる</h2>

    <p class="md:text-lg text-text-light leading-relaxed mb-4">
      旅行先が決まったらしおりを作成しましょう。カードに記録した場所をしおりに追加することができます。
    </p>

    <div class="flex justify-center">
      <img alt="Guide illustration" class="w-full h-auto rounded-lg" src="/assets/guide_slide_3-c1fa742705169e59b110ec9f9bf54b8986426977035d7ddf89dad44cc73c9ee6.svg" />
    </div>
  </div>
</div>

        <div data-guide-target="slide">
  <div>
    <h2 class="text-lg font-bold text-text mb-2">もちものを整理</h2>

    <p class="md:text-lg text-text-light leading-relaxed mb-4">
      旅行のもちものを整理できます。あなたのもちものページに、いつも持っていくものを追加することで忘れ物を防ぐことができます。
    </p>

    <div class="flex justify-center">
      <img alt="Guide illustration" class="w-full h-auto rounded-lg" src="/assets/guide_slide_4-d769974d456f2009ef24ab6bfea01a6f004a23eaa4a22ff9a19b57798c7f4626.svg" />
    </div>
  </div>
</div>

        <div data-guide-target="slide">
  <div>
    <h2 class="text-lg font-bold text-text mb-2">費用を精算する</h2>

    <p class="md:text-lg text-text-light leading-relaxed mb-4">
      旅行中の費用を記録しておくことで、旅費の精算ができます。
    </p>

    <div class="flex justify-center">
      <img alt="Guide illustration" class="w-full h-auto rounded-lg" src="/assets/guide_slide_5-aa869f191b4add1a36005d1697e244589dc0e4de100a8ac2f1605599c380a6b9.svg" />
    </div>
  </div>
</div>

    </div>

    <!-- 下部：ナビゲーション -->
    <div class="border-t border-border px-8 py-6 space-y-4">
      <!-- ナビゲーション: 戻る | インジケータ（ドット） | 次へ（常時表示・無効化切り替え） -->
      <div class="flex items-center justify-between gap-4">
        <button class="btn-sub px-4 py-2" data-action="click->guide#previousSlide" data-guide-target="previousButton">
          戻る
        </button>

        <!-- インジケータ（中央・常に固定） -->
        <div class="flex justify-center gap-2">
          <button class="w-3 h-3 rounded-full bg-secondary transition-colors" data-guide-target="indicator"></button>
          <button class="w-3 h-3 rounded-full bg-gray-300 transition-colors" data-guide-target="indicator"></button>
          <button class="w-3 h-3 rounded-full bg-gray-300 transition-colors" data-guide-target="indicator"></button>
          <button class="w-3 h-3 rounded-full bg-gray-300 transition-colors" data-guide-target="indicator"></button>
          <button class="w-3 h-3 rounded-full bg-gray-300 transition-colors" data-guide-target="indicator"></button>
        </div>

        <!-- 次へボタン（最後のスライドでは無効化） -->
        <button class="btn-main px-4 py-2" data-action="click->guide#nextSlide" data-guide-target="nextButton">
          次へ
        </button>
      </div>

      <!-- 最後のスライド時のみ表示：「RakuCiをつかう」ボタン（フルサイズ） -->
    </div>
  </div>
</div>

</template></turbo-stream>