<!DOCTYPE html>

<head>

<title>Esoteric — Newsletter</title>

<style>

* { margin:0; padding:0; box-sizing:border-box; }

body {

background:#0a0a0a;

color:#f2f2f2;

font-family:'Courier New', monospace;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:24px;

}

.card {

max-width:480px;

width:100%;

text-align:center;

}

.eyebrow {

letter-spacing:4px;

font-size:11px;

color:#8a8a8a;

text-transform:uppercase;

margin-bottom:18px;

}

h1 {

font-size:32px;

font-weight:400;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:14px;

line-height:1.2;

}

p.sub {

color:#a8a8a8;

font-size:14px;

line-height:1.6;

margin-bottom:36px;

}

form {

display:flex;

flex-direction:column;

gap:12px;

}

input[type=email] {

background:transparent;

border:1px solid #444;

color:#f2f2f2;

padding:16px;

font-family:inherit;

font-size:14px;

letter-spacing:1px;

outline:none;

}

input[type=email]:focus { border-color:#f2f2f2; }

button {

background:#f2f2f2;

color:#0a0a0a;

border:none;

padding:16px;

font-family:inherit;

font-size:13px;

letter-spacing:3px;

text-transform:uppercase;

cursor:pointer;

transition:opacity .2s;

}

button:hover { opacity:.8; }

button:disabled { opacity:.5; cursor:not-allowed; }

.msg {

margin-top:18px;

font-size:13px;

min-height:18px;

}

.msg.ok { color:#7fd67f; }

.msg.err { color:#e37b7b; }

.fine {

margin-top:40px;

font-size:10px;

color:#555;

letter-spacing:1px;

}

</style>

</head>

<body>

<div class="eyebrow">Esoteric Garment</div>

<h1>Entre na lista</h1>

<p class="sub">Tenha acesso antecipado aos drops da Esoteric 24 horas antes de todo mundo.</p>

<button type="submit" id="submit-btn">Quero acesso antecipado</button>

</form>

</div>

// ==========================================================

// V2 — PREVIEW LOCAL. As integrações abaixo estão em modo "mock"

// (console.log em vez de chamada real) até a versão final ser

// aprovada e subida na Nuvemshop de verdade.

// ==========================================================

const form = document.getElementById('signup-form');

const btn = document.getElementById('submit-btn');

const msg = document.getElementById('msg');

form.addEventListener('submit', async function(e) {

e.preventDefault();

const email = document.getElementById('email').value.trim();

if (!email) return;

btn.disabled = true;

btn.textContent = 'ENVIANDO...';

msg.className = 'msg';

msg.textContent = '';

try {

// ---- MOCK: na versão final isso vira um fetch real pra API de clientes da Nuvemshop ----

// await fetch('https://api.nuvemshop.com.br/v1/4694117/customers', {

// method: 'POST',

// headers: {

// 'Content-Type': 'application/json',

// 'Authentication': 'bearer TOKEN_AQUI' // NUNCA expor token no client-side real —

// // isso precisa passar por um proxy/serverless,

// // não pode ir direto do navegador do usuário

// },

// body: JSON.stringify({ email: email, accepts_marketing: true })

// });

console.log('[MOCK] Criaria cliente na Nuvemshop:', email);

// ---- GTM dataLayer (real, isso já pode ir na versão final) ----

window.dataLayer = window.dataLayer || [];

dataLayer.push({

event: 'newsletter_signup',

email_provided: true

});

console.log('[dataLayer push] newsletter_signup');

// ---- Meta Pixel (real, já pode ir na versão final) ----

if (typeof fbq === 'function') {

fbq('track', 'Lead', { content_name: 'newsletter_signup' });

}

console.log('[Meta Pixel] Lead event disparado');

// ---- Microsoft Clarity: não precisa de código extra ----

// Clarity já grava a sessão inteira e o clique automaticamente

// desde que o script de Clarity esteja instalado na página.

// Se quiser marcar essa conversão especificamente:

if (typeof clarity === 'function') {

clarity('event', 'newsletter_signup');

}

await new Promise(r => setTimeout(r, 600)); // simula latência

msg.className = 'msg ok';

msg.textContent = '✓ Você está na lista. Fica de olho no email.';

form.reset();

} catch (err) {

msg.className = 'msg err';

msg.textContent = 'Deu erro, tenta de novo.';

console.error(err);

} finally {

btn.disabled = false;

btn.textContent = 'Quero acesso antecipado';

}

});

</script>

</body>

</html>