turbovault-app/app/views/profiles/show.html.erb

<div class="max-w-6xl mx-auto">
  <!-- Profile Header -->
  <div class="bg-white rounded-lg shadow p-6 mb-6">
    <div class="flex justify-between items-start">
      <div>
        <h1 class="text-3xl font-bold text-gray-900">@<%= @user.username %></h1>
        <% if @user.bio.present? %>
          <p class="text-gray-600 mt-2"><%= @user.bio %></p>
        <% end %>
      </div>
      
      <% if current_user && @user == current_user %>
        <%= link_to "Edit Profile", settings_path, class: "px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700" %>
      <% end %>
    </div>
  </div>

  <!-- Statistics -->
  <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
    <div class="bg-white p-6 rounded-lg shadow">
      <div class="text-gray-500 text-sm">Total Games</div>
      <div class="text-3xl font-bold text-gray-900"><%= @total_games %></div>
    </div>
    
    <div class="bg-white p-6 rounded-lg shadow">
      <div class="text-gray-500 text-sm">Physical</div>
      <div class="text-3xl font-bold text-blue-600"><%= @physical_games %></div>
    </div>
    
    <div class="bg-white p-6 rounded-lg shadow">
      <div class="text-gray-500 text-sm">Digital</div>
      <div class="text-3xl font-bold text-green-600"><%= @digital_games %></div>
    </div>
    
    <div class="bg-white p-6 rounded-lg shadow">
      <div class="text-gray-500 text-sm">Completed</div>
      <div class="text-3xl font-bold text-purple-600"><%= @completed_games %></div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Top Platforms -->
    <div class="bg-white rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-900 mb-4">Top Platforms</h2>
      <% if @games_by_platform.any? %>
        <div class="space-y-3">
          <% @games_by_platform.each do |platform_name, count| %>
            <div class="flex justify-between items-center">
              <span class="text-gray-700"><%= platform_name %></span>
              <div class="flex items-center gap-2">
                <div class="w-32 bg-gray-200 rounded-full h-2">
                  <div class="bg-indigo-600 h-2 rounded-full" 
                       style="width: <%= (count.to_f / @total_games * 100).round %>%"></div>
                </div>
                <span class="text-sm font-semibold text-gray-900 w-8 text-right"><%= count %></span>
              </div>
            </div>
          <% end %>
        </div>
      <% else %>
        <p class="text-gray-500 text-sm">No games yet</p>
      <% end %>
    </div>

    <!-- Collections -->
    <div class="bg-white rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-900 mb-4">Collections</h2>
      <% if @public_collections.any? %>
        <div class="space-y-2">
          <% @public_collections.each do |collection| %>
            <%= link_to collection, class: "block p-3 rounded hover:bg-gray-50 transition" do %>
              <div class="flex justify-between items-center">
                <div>
                  <div class="font-semibold text-gray-900"><%= collection.name %></div>
                  <% if collection.description.present? %>
                    <div class="text-sm text-gray-600 truncate"><%= collection.description %></div>
                  <% end %>
                </div>
                <span class="text-sm text-gray-500"><%= collection.games.count %> games</span>
              </div>
            <% end %>
          <% end %>
        </div>
      <% else %>
        <p class="text-gray-500 text-sm">No collections yet</p>
      <% end %>
    </div>
  </div>

  <!-- Recent Games -->
  <div class="bg-white rounded-lg shadow p-6 mt-6">
    <h2 class="text-xl font-bold text-gray-900 mb-4">Recent Additions</h2>
    <% if @recent_games.any? %>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
        <% @recent_games.each do |game| %>
          <div class="border rounded-lg p-3 hover:shadow-md transition">
            <% if game.igdb_game&.cover_url.present? %>
              <%= image_tag game.igdb_game.cover_image_url("cover_big"), 
                  alt: game.title,
                  class: "w-full h-40 object-cover rounded mb-2" %>
            <% else %>
              <div class="w-full h-40 bg-gray-200 rounded mb-2 flex items-center justify-center">
                <span class="text-gray-400 text-xs">No Cover</span>
              </div>
            <% end %>
            
            <h3 class="font-semibold text-sm text-gray-900 truncate" title="<%= game.title %>">
              <%= game.title %>
            </h3>
            <p class="text-xs text-gray-600"><%= game.platform.name %></p>
            <div class="mt-1">
              <span class="inline-block px-2 py-0.5 text-xs rounded <%= game.physical? ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800' %>">
                <%= game.format.titleize %>
              </span>
            </div>
          </div>
        <% end %>
      </div>
    <% else %>
      <p class="text-gray-500 text-sm">No games yet</p>
    <% end %>
  </div>

  <!-- Footer Note -->
  <% if current_user.nil? %>
    <div class="mt-6 text-center text-sm text-gray-500">
      <p>This is a public profile. <%= link_to "Create your own collection", signup_path, class: "text-indigo-600 hover:text-indigo-800" %></p>
    </div>
  <% end %>
</div>