<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= content_for?(:title) ? yield(:title) : "Match Live TV" %></title>
    <style>
      * { box-sizing: border-box; }
      body { margin: 0; font-family: system-ui, sans-serif; background: #0f0f12; color: #f5f5f5; line-height: 1.5; }
      a { color: #ff6b6b; }
      .header { border-bottom: 1px solid #2a2a32; background: #14141a; padding: 14px 0; margin-bottom: 24px; }
      .wrap { max-width: 880px; margin: 0 auto; padding: 0 16px 40px; }
      .header .wrap { display: flex; justify-content: space-between; align-items: center; }
      .brand { font-weight: 800; color: #fff; text-decoration: none; }
      .brand span { color: #e53935; }
      .flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
      .flash.notice { background: #1b3d2a; color: #a5f0b8; }
      .flash.alert { background: #3d1b1b; color: #ffb4b4; }
      .card { background: #1a1a22; border: 1px solid #2a2a32; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
      .btn { display: inline-block; padding: 12px 20px; border-radius: 8px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; }
      .btn-primary { background: #e53935; color: #fff; }
      .btn-secondary { background: #2a2a32; color: #fff; }
      label { display: block; margin-bottom: 6px; font-size: 0.9rem; color: #aaa; }
      input, select { width: 100%; padding: 10px 12px; margin-bottom: 14px; border-radius: 8px; border: 1px solid #333; background: #0f0f12; color: #fff; }
      .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
      .plan-premium { border-color: #e53935; }
      ul.features { padding-left: 18px; color: #ccc; }
      table { width: 100%; border-collapse: collapse; }
      th, td { text-align: left; padding: 8px; border-bottom: 1px solid #2a2a32; }
    </style>
  </head>
  <body>
    <header class="header">
      <div class="wrap">
        <%= link_to public_pricing_path, class: "brand" do %>Match <span>Live TV</span><% end %>
        <nav>
          <%= link_to "Prezzi", public_pricing_path %>
          <% if logged_in? %>
            <% if current_user.primary_club %>
              · <%= link_to "Società", public_club_path(current_user.primary_club) %>
            <% elsif current_user.manageable_teams.any? %>
              · <%= link_to "Dettagli squadra", public_team_details_path(current_user.manageable_teams.first) %>
            <% end %>
            · <%= button_to "Esci", public_logout_path, method: :delete, form: { style: "display:inline" }, class: "btn btn-secondary", style: "padding:6px 12px;font-size:0.85rem" %>
          <% else %>
            · <%= link_to "Accedi", public_login_path %>
            · <%= link_to "Registrati", public_signup_path, class: "btn btn-primary", style: "padding:6px 12px;font-size:0.85rem" %>
          <% end %>
        </nav>
      </div>
    </header>
    <main class="wrap">
      <% if flash[:notice] %><div class="flash notice"><%= flash[:notice] %></div><% end %>
      <% if flash[:alert] %><div class="flash alert"><%= flash[:alert] %></div><% end %>
      <%= yield %>
    </main>
  </body>
</html>
