<%- include('../layouts/header') %>

<div class="container" style="padding-top: 4rem; padding-bottom: 6rem; max-width: 820px;">
  <div style="font-size: 0.82rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem;">
    <a href="/" style="color: var(--text-muted);">Home</a> / 
    <span>Policy</span>
  </div>

  <h1 class="heading-xl" style="margin-top: 0.5rem; margin-bottom: 2rem;">
    <%= policy ? policy.title : 'Policy Document' %>
  </h1>

  <div style="background: #FFF; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 3rem; box-shadow: var(--shadow-sm); line-height: 1.85; font-size: 1.05rem; color: #2E2A27;">
    <% if (policy && policy.content) { %>
      <div style="white-space: pre-line;">
        <%= policy.content %>
      </div>
    <% } else { %>
      <p style="color: var(--text-muted);">Content is being updated by our atelier administrators.</p>
    <% } %>

    <div style="margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: var(--text-light);">
      <span>Last Reviewed: <%= policy ? (policy.updated_at || '').slice(0, 10) : 'Current' %></span>
      <a href="/contact" style="color: var(--accent-gold); text-decoration: underline;">Questions? Contact Concierge</a>
    </div>
  </div>
</div>

<%- include('../layouts/footer') %>
