<script>
    let currentCity = "Lisbon"; // Dynamic location
    const expeditions = [
      { 
        name: "Tram 28 Tascas Crawl", 
        seats: 3, 
        cuisine: "Petiscos",  
        highlights: ["Sardines", "Green Wine", "Local Artists"],
        meeting: "Praça Luís de Camões, 7pm"
      },
      {
        name: "Alfama Family Feast",
        seats: 5,
        cuisine: "Seafood",
        highlights: ["Cataplana Stew", "Fado Music", "Viewpoint"],
        meeting: "Miradouro Santa Luzia, 7:30pm"
      }
    ];
  </script>
  
  <div class="h-full overflow-scroll bg-base-100 font-[Inter]">
    <!-- Header -->

  
    <!-- Local Context Bar -->
    <div class="bg-primary/10 py-3 px-4 flex items-center gap-4">
      <div class="flex-1">
        <div class="text-sm opacity-75">Currently Exploring</div>
        <div class="text-xl font-bold text-primary">{currentCity}</div>
      </div>
      <div class="text-4xl">🍴</div>
    </div>
  
    <!-- Expedition Cards -->
    <main class="p-4 space-y-6">
      {#each expeditions as expedition}
        <div class="card bg-base-100 shadow-sm hover:shadow-md transition-shadow">
          <div class="card-body">
            <!-- Expedition Header -->
            <div class="flex justify-between items-start">
              <div>
                <h2 class="card-title text-lg">{expedition.name}</h2>
                <div class="badge badge-outline badge-sm mt-1">
                  {expedition.cuisine}
                </div>
              </div>
              <div class="text-2xl">
                {#if expedition.seats > 3}
                  🍽️
                {:else}
                  🔥
                {/if}
              </div>
            </div>
  
            <!-- Cultural Highlights -->
            <div class="my-4 space-y-2">
              {#each expedition.highlights as item}
                <div class="flex items-center gap-2 text-sm">
                  <div class="text-primary">✦</div>
                  <span>{item}</span>
                </div>
              {/each}
            </div>
  
            <!-- Group Status -->
            <div class="flex items-center justify-between border-t pt-4">
              <div class="flex -space-x-3">
                {#each Array(expedition.seats) as _, i}
                  <div class="avatar placeholder">
                    <div class="w-8 h-8 bg-neutral text-neutral-content">
                      {i === 0 ? '👤' : '?'}
                    </div>
                  </div>
                {/each}
              </div>
              <button class="btn btn-primary btn-sm">
                Claim Seat ({expedition.seats} left)
              </button>
            </div>
  
            <!-- Meeting Details -->
            <div class="mt-4 text-xs opacity-75 flex items-center gap-2">
              <span class="flex-1">📍 {expedition.meeting}</span>
              <span class="badge badge-ghost badge-sm">Local Guide: Maria</span>
            </div>
          </div>
        </div>
      {/each}
    </main>
  
    <!-- Cultural Footprint -->
    <div class="p-4 bg-base-200 mt-8">
      <div class="max-w-md mx-auto text-center space-y-4">
        <div class="text-3xl">🌐</div>
        <h3 class="font-bold">Your Lisbon Journey</h3>
        <div class="flex justify-center gap-4 text-sm">
          <div class="space-y-1">
            <div class="text-primary font-bold">5</div>
            <div class="opacity-75">New Allies</div>
          </div>
          <div class="space-y-1">
            <div class="text-primary font-bold">9</div>
            <div class="opacity-75">Local Dishes</div>
          </div>
          <div class="space-y-1">
            <div class="text-primary font-bold">3</div>
            <div class="opacity-75">Neighborhoods</div>
          </div>
        </div>
      </div>
    </div>
  </div>