<% content_for :title do %>
  My Mailing Address
<% end %>

<div class="min-h-screen bg-darker text-white">
  <div class="max-w-6xl mx-auto px-6 py-8">
    <header class="mb-8">
      <h1 class="text-3xl font-bold text-primary mb-2">My Mailing Address</h1>
      <p class="text-secondary">Manage your shipping information for physical mail</p>
    </header>

    <% if @user.mailing_address.present? %>
      <section class="bg-dark rounded-lg p-6 mb-8">
        <div class="flex items-center gap-3 mb-4">
          <div class="w-8 h-8 bg-green rounded-full flex items-center justify-center">
            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
          </svg>
          </div>
          <h2 class="text-xl font-bold text-green">Address on File</h2>
        </div>

        <div class="bg-darkless rounded-lg p-6 border-l-4 border-primary">
          <div class="space-y-2 text-lg">
            <p class="font-semibold text-white">
              <%= h(@user.mailing_address.first_name) %> <%= h(@user.mailing_address.last_name) %>
            </p>
            <p class="text-secondary"><%= h(@user.mailing_address.line_1) %></p>
            <% if @user.mailing_address.line_2.present? %>
              <p class="text-secondary"><%= h(@user.mailing_address.line_2) %></p>
            <% end %>
            <p class="text-secondary">
              <%= h(@user.mailing_address.city) %>, <%= h(@user.mailing_address.state) %> <%= h(@user.mailing_address.zip_code) %>
            </p>
            <p class="text-secondary font-semibold"><%= h(@user.mailing_address.country) %></p>
          </div>
        </div>
      </section>
    <% else %>
      <section class="bg-orange bg-opacity-10 border border-orange rounded-lg p-6 mb-8">

        <div class="flex items-center gap-3 mb-3">
          <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Emergency_Light.gif" alt="Emergency Light" class="w-8 h-8">
          <h2 class="text-xl font-bold text-dark">No Address Added!</h2>
        </div>
        <p class="text-lg text-dark">You need to add your mailing address to receive physical mail and rewards.</p>
      </section>
    <% end %>

    <div class="flex justify-center">
      <%= link_to @user.mailing_address.present? ? "Update this address" : "Add your address",
        edit_my_mailing_address_path,
        class: "bg-primary hover:bg-red text-white px-8 py-3 rounded-lg text-lg font-semibold transition-colors inline-flex items-center gap-2" %>
    </div>
  </div>
</div>
