<% const isStart = typeof align !== 'undefined' && align === 'start'; %>
<section class="pt-32 pb-20 px-6 relative overflow-hidden" style="background:linear-gradient(160deg,#0b1f3a 0%,#142d55 100%)">
  <% if (typeof watermark !== 'undefined' && watermark) { %>
  <div class="absolute text-[120px] font-black leading-none select-none pointer-events-none" style="top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.03);white-space:nowrap" aria-hidden="true"><%= watermark %></div>
  <% } %>
  <div class="absolute" style="width:500px;height:500px;top:-100px;right:-100px;background:radial-gradient(circle,rgba(128,101,248,.15) 0%,transparent 70%);pointer-events:none"></div>
  <div class="absolute" style="width:400px;height:400px;bottom:-80px;left:-80px;background:radial-gradient(circle,rgba(19,179,180,.12) 0%,transparent 70%);pointer-events:none"></div>

  <div class="max-w-4xl mx-auto relative<%= isStart ? ' text-left' : ' text-center' %>">
    <% if (typeof showBreadcrumb === 'undefined' || showBreadcrumb) { %>
    <%- include('./breadcrumb', { segments: typeof segments !== 'undefined' ? segments : [], labels: typeof labels !== 'undefined' ? labels : undefined, centered: !isStart }) %>
    <% } %>
    <% if (typeof badge !== 'undefined' && badge) { %>
    <span class="inline-block text-xs font-bold uppercase tracking-widest px-3 py-1.5 rounded-full mb-5"
          style="background:rgba(128,101,248,.2);color:#c4b5fd"><%= badge %></span>
    <% } %>
    <h1 class="text-4xl md:text-5xl font-black text-white mb-5 leading-tight"><%- typeof title !== 'undefined' ? title : 'Page title' %></h1>
    <% if (typeof subtitle !== 'undefined' && subtitle) { %>
    <p class="text-base max-w-2xl<%= isStart ? '' : ' mx-auto' %>" style="color:rgba(255,255,255,.6);line-height:1.8"><%= subtitle %></p>
    <% } %>
    <% if (typeof pills !== 'undefined' && Array.isArray(pills) && pills.length) { %>
    <div class="flex flex-wrap gap-2 mt-6<%= isStart ? '' : ' justify-center' %>">
      <% pills.forEach(function(pill) { %>
      <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold"
            style="background:<%= pill.bg || 'rgba(128,101,248,.15)' %>;border:1.5px solid <%= pill.border || 'rgba(128,101,248,.25)' %>;color:<%= pill.color || '#c4b5fd' %>"><%= pill.text %></span>
      <% }); %>
    </div>
    <% } %>
    <% if ((typeof primaryHref !== 'undefined' && primaryHref) || (typeof secondaryHref !== 'undefined' && secondaryHref)) { %>
    <div class="flex gap-3 flex-wrap mt-7<%= isStart ? '' : ' justify-center' %>">
      <% if (typeof primaryHref !== 'undefined' && primaryHref) { %>
      <a href="<%= primaryHref %>" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold text-white no-underline transition-transform hover:-translate-y-0.5"
         style="background:linear-gradient(135deg,#8065f8,#4490d3);box-shadow:0 8px 24px rgba(128,101,248,.35)"><%= typeof primaryLabel !== 'undefined' ? primaryLabel : 'Get started' %></a>
      <% } %>
      <% if (typeof secondaryHref !== 'undefined' && secondaryHref) { %>
      <a href="<%= secondaryHref %>" class="inline-flex items-center px-6 py-3 rounded-xl text-sm font-semibold no-underline transition-colors"
         style="border:1.5px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85)"><%= typeof secondaryLabel !== 'undefined' ? secondaryLabel : 'Learn more' %></a>
      <% } %>
    </div>
    <% } %>
  </div>
</section>
