<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title><%= name %> | BioLink</title>

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <style>
    body {
      background-image: url('/bg.jpg'); /* Ganti bg.jpg dengan nama file background kamu */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
    }
  </style>
</head>
<body class="min-h-screen flex items-center justify-center bg-black/60">
  <div class="w-full max-w-md mx-auto px-4 py-8">
    <div class="bg-white/10 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl p-6 text-white text-center">
      
      <!-- Avatar (pakai variabel avatar biar bisa diganti) -->
      <img src="<%= avatar %>" 
           alt="Avatar" 
           class="w-24 h-24 rounded-full mx-auto border-4 border-white/30 object-cover mb-4" />
           
      <!-- Name + Ceklis -->
      <h1 class="text-2xl md:text-3xl font-bold mb-1 flex items-center justify-center gap-2">
        <%= name %>
        <i class="fas fa-circle-check text-blue-400 text-xl" title="Terverifikasi"></i>
      </h1>

      <!-- Bio -->
      <p class="text-sm md:text-base text-white/80 mb-5"><%= bio %></p>

      <!-- Link Buttons -->
      <div class="space-y-3">
        <% links.forEach(link => { %>
          <a href="<%= link.url %>" target="_blank"
             class="flex items-center gap-3 justify-center bg-white/20 hover:bg-white/30 backdrop-blur-md py-3 px-4 rounded-xl font-semibold transition duration-300 ease-in-out">
            <i class="<%= link.icon %> text-lg"></i>
            <span><%= link.title %></span>
          </a>
        <% }) %>
      </div>

      <!-- Footer -->
      <div class="mt-6 text-xs text-white/60 text-center">
        &copy; <%= new Date().getFullYear() %> AP
      </div>

    </div>
  </div>
</body>
</html>