{% extends "base.html" %}

{% block title %}{{ settings.storeName }} - Fidelização Digital{% endblock %}

{% block content %}
<div class="bg-slate-900 text-slate-100 min-h-[calc(100vh-4rem)] flex flex-col justify-between">
  <!-- Hero Section -->
  <section class="relative overflow-hidden pt-12 pb-14 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full text-center">
    <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/30 text-indigo-400 text-xs font-bold uppercase tracking-wider mb-6">
      <i data-lucide="sparkles" class="w-3.5 h-3.5"></i>
      <span>Fidelização Digital Simples &amp; Inteligente</span>
    </div>

    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-white leading-tight">
      O Cartão de Pontos <br class="hidden sm:inline" />
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-violet-300 to-amber-300">
        Moderno &amp; Instantâneo
      </span>
    </h1>

    <p className="mt-4 text-sm sm:text-base text-slate-300 max-w-2xl mx-auto leading-relaxed">
      Substitua os antigos cartões de papel por uma experiência digital completa no telemóvel dos clientes, com leitura de QR Code no balcão e gestão completa.
    </p>

    <!-- Quick Phone Search -->
    <div class="mt-8 max-w-md mx-auto bg-slate-800/80 p-2 rounded-2xl border border-slate-700 shadow-xl backdrop-blur-md">
      <form id="phoneLookupForm" class="flex gap-2" onsubmit="handleLookup(event)">
        <div class="relative flex-1">
          <i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2"></i>
          <input
            type="tel"
            id="phoneInput"
            placeholder="É cliente? Digite o seu telemóvel..."
            class="w-full pl-10 pr-3 py-2.5 bg-slate-900/90 border border-slate-700 rounded-xl text-xs text-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            required
          />
        </div>
        <button
          type="submit"
          class="px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold transition-all shrink-0 cursor-pointer shadow-md"
        >
          Abrir Cartão
        </button>
      </form>
      <p id="lookupMsg" class="text-[11px] text-rose-400 mt-2 px-2 text-left hidden"></p>
    </div>
  </section>

  <!-- 3 Launch Cards -->
  <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 w-full">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <!-- Card 1: Operador -->
      <div class="bg-gradient-to-b from-slate-800 to-slate-850 rounded-3xl p-7 border border-slate-700/80 shadow-xl flex flex-col justify-between group">
        <div>
          <div class="w-14 h-14 rounded-2xl bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <i data-lucide="zap" class="w-7 h-7"></i>
          </div>
          <span class="text-[10px] font-black uppercase tracking-wider text-indigo-400">Para Atendentes &amp; Caixa</span>
          <h3 class="text-2xl font-black text-white mt-1 mb-2">Frontline / Balcão</h3>
          <p class="text-slate-400 text-xs leading-relaxed mb-6">
            Scanner de QR Code em tempo real pela câmara, busca por telefone e +1 carimbo em 1 toque.
          </p>
        </div>
        <a href="/operador" class="w-full py-3.5 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-2xl text-xs flex items-center justify-center gap-2 shadow-lg shadow-indigo-600/30 transition-all">
          <span>Aceder ao Balcão (Caixa)</span>
          <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </a>
      </div>

      <!-- Card 2: Cliente -->
      <div class="bg-gradient-to-b from-slate-800 to-slate-850 rounded-3xl p-7 border border-slate-700/80 shadow-xl flex flex-col justify-between group">
        <div>
          <div class="w-14 h-14 rounded-2xl bg-violet-500/10 border border-violet-500/20 text-violet-400 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <i data-lucide="smartphone" class="w-7 h-7"></i>
          </div>
          <span class="text-[10px] font-black uppercase tracking-wider text-violet-400">Experiência do Cliente</span>
          <h3 class="text-2xl font-black text-white mt-1 mb-2">Cartão Digital</h3>
          <p class="text-slate-400 text-xs leading-relaxed mb-6">
            Cartão que o cliente guarda no telemóvel (PWA), com carimbos visuais, QR Code pessoal e sons.
          </p>
        </div>
        <a href="/cartao/ana-silva-7821" class="w-full py-3.5 px-4 bg-violet-600 hover:bg-violet-700 text-white font-bold rounded-2xl text-xs flex items-center justify-center gap-2 shadow-lg shadow-violet-600/30 transition-all">
          <span>Ver Demonstração de Cartão</span>
          <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </a>
      </div>

      <!-- Card 3: Admin -->
      <div class="bg-gradient-to-b from-slate-800 to-slate-850 rounded-3xl p-7 border border-slate-700/80 shadow-xl flex flex-col justify-between group">
        <div>
          <div class="w-14 h-14 rounded-2xl bg-amber-500/10 border border-amber-500/20 text-amber-400 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
            <i data-lucide="layout-dashboard" class="w-7 h-7"></i>
          </div>
          <span class="text-[10px] font-black uppercase tracking-wider text-amber-400">Para Gestores &amp; Donos</span>
          <h3 class="text-2xl font-black text-white mt-1 mb-2">Painel de Gestão</h3>
          <p class="text-slate-400 text-xs leading-relaxed mb-6">
            Métricas em tempo real, temas visuais, upload de logótipo da loja e base de dados de clientes.
          </p>
        </div>
        <a href="/admin" class="w-full py-3.5 px-4 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded-2xl text-xs flex items-center justify-center gap-2 shadow-lg transition-all">
          <span>Aceder ao Painel de Gestão</span>
          <i data-lucide="arrow-right" class="w-4 h-4"></i>
        </a>
      </div>
    </div>
  </section>
</div>
{% endblock %}

{% block scripts %}
<script>
  async function handleLookup(e) {
    e.preventDefault();
    const phone = document.getElementById('phoneInput').value.trim();
    const msg = document.getElementById('lookupMsg');
    msg.classList.add('hidden');

    try {
      const res = await fetch('/api/customers?q=' + encodeURIComponent(phone));
      const data = await res.json();
      if (data.success && data.customers.length > 0) {
        window.location.href = '/cartao/' + data.customers[0].cardToken;
      } else {
        msg.textContent = 'Nenhum cartão encontrado com este número de telefone.';
        msg.classList.remove('hidden');
      }
    } catch(err) {
      msg.textContent = 'Erro ao pesquisar o cartão.';
      msg.classList.remove('hidden');
    }
  }
</script>
{% endblock %}