<%- include('../partials/head', {title: 'Dashboard'}) %>
<%- include('../partials/dash-nav', {activeSection: null}) %>

<div class="dash-layout">
  <div class="dash-main">
    <%- include('../partials/flash') %>

    <h1 class="page-title"><%= t.dashboard.greeting %>, <%= user.name.split(' ')[0] %> 👋</h1>
    <p class="page-sub"><%= t.dashboard.subtitle %></p>

    <div class="tools-grid">
      <% t.dashboard.tools.forEach(tool => { %>
      <div class="tool-card tool-card--<%= tool.id %> <%= tool.status !== 'active' ? 'soon' : '' %>">
        <div class="tool-icon">
          <% if (tool.id === 'instagram') { %>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
            <defs><linearGradient id="ig2" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color="#f09433"/><stop offset="50%" stop-color="#dc2743"/><stop offset="100%" stop-color="#bc1888"/></linearGradient></defs>
            <rect x="2" y="2" width="20" height="20" rx="6" stroke="url(#ig2)" stroke-width="2"/>
            <circle cx="12" cy="12" r="4" stroke="url(#ig2)" stroke-width="2"/>
            <circle cx="17.5" cy="6.5" r="1.2" fill="url(#ig2)"/>
          </svg>
          <% } else if (tool.id === 'google') { %>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
            <path d="M22 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.6c-.2 1.3-1 2.4-2.1 3.1v2.6h3.4c2-1.8 3.1-4.5 3.1-7.5z" fill="#4285F4"/>
            <path d="M12 23c2.7 0 5-.9 6.9-2.4l-3.4-2.6c-.9.6-2.1 1-3.5 1-2.7 0-5-1.8-5.8-4.3H2.7v2.7C4.6 20.9 8.1 23 12 23z" fill="#34A853"/>
            <path d="M6.2 14.7c-.2-.6-.3-1.2-.3-1.9s.1-1.3.3-1.9V8.2H2.7C2 9.6 1.5 11.3 1.5 13s.5 3.4 1.2 4.8l3.5-3.1z" fill="#FBBC05"/>
            <path d="M12 5.8c1.5 0 2.9.5 3.9 1.5l2.9-2.9C17 2.9 14.7 2 12 2 8.1 2 4.6 4.1 2.7 7.2l3.5 2.7C7 7.6 9.3 5.8 12 5.8z" fill="#EA4335"/>
          </svg>
<!--
          <% } else if (tool.id === 'whatsapp') { %>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
            <path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.94-1.42A9.953 9.953 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z" fill="#25D366"/>
            <path d="M16.5 14.2c-.3-.15-1.7-.84-1.96-.94-.27-.1-.46-.15-.65.15-.2.3-.75.94-.92 1.13-.17.2-.34.22-.63.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.6.13-.13.3-.34.44-.51.15-.17.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.66-1.58-.9-2.17-.24-.57-.48-.5-.66-.51h-.56c-.2 0-.51.07-.78.38-.27.3-1.02 1-1.02 2.43s1.05 2.82 1.2 3.01c.14.2 2.07 3.16 5.01 4.43 2.94 1.27 2.94.85 3.47.8.53-.05 1.7-.7 1.95-1.37.24-.67.24-1.25.17-1.37-.08-.12-.27-.2-.57-.35z" fill="white"/>
          </svg>
-->
<% } else if (tool.id === 'telegram') { %>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="10" fill="#229ED9"/>
            <path d="M17.47 7.1L5.37 11.7c-.83.32-.82.77.15 1.03l3.18.99 1.23 3.76c.17.47.09.65.59.65.39 0 .56-.18.78-.39l1.87-1.82 3.89 2.87c.72.4 1.23.19 1.41-.67l2.56-12.05c.26-1.04-.4-1.51-1.06-1.97z" fill="white"/>
          </svg>
          <% } else { %>
          <span style="font-size:28px"><%= tool.icon %></span>
          <% } %>
        </div>
        <div class="tool-title"><%= tool.title %></div>
        <p class="tool-desc"><%= tool.desc %></p>
        <% if (tool.status === 'active') { %>
          <a href="<%= tool.href || '/' + lang + '/dashboard/' + tool.id %>"
             class="btn btn-accent"
             <%= tool.href ? 'target="_blank" rel="noopener"' : '' %>><%= tool.cta %></a>
        <% } else { %>
          <span class="badge-soon"><%= tool.cta %></span>
        <% } %>
      </div>
      <% }) %>
    </div>
  </div>
</div>

<%- include('../partials/footer') %>
</body></html>
