EARLY ACCESS REGISTRATION

<!--
Shopify page template: early-access.liquid
Place this file as a new page template (or use it in a Page with custom HTML via the theme editor).
Important admin steps (you need to do this yourself in Shopify admin):
1) In Admin > Discounts, create an automatic or code discount of 10% with code: EA10 (or choose your own code).
2) In Admin > Customers, create a segment with the filter: Customer tag contains "early_access_2025" (or adjust the year).
3) (Optional, for a live public list) Set up a simple webhook/Zapier/Make/Serverless endpoint that adds new registrations to a JSON file in your theme assets or Google Sheets. The front-end below can retrieve that JSON to display a public visitor list/count.

NOTE: Shopify allows customer creation via the storefront form. To automatically create customers with tags, we use a hidden input: customer[tags] = early_access_2025
This tag field allows you to easily build a segment in admin.
-->

{% comment %} --- EARLY ACCESS PAGE --- {% endcomment %}
<section class="early-access-wrap">
<div class="ea-card">
<header class="ea-header">
Early Access — Sign Up
<p class="sub">Register before <strong>October 10, 2025</strong> and get exclusive access at <strong>12:00</strong> (instead of 5:00 PM) and a 10% discount.</p>
</header>

<div class="ea-body">
<div class="ea-left">
We're launching our new collection exclusively for subscribers earlier today. Enter your details below — we'll send you the discount code and access information immediately after registering.

<form id="ea-signup-form" method="post" action="/account">
<input type="hidden" name="form_type" value="create_customer">
<input type="hidden" name="utf8" value="✓">
<input type="hidden" name="customer[tags]" value="early_access_2025">
<input type="hidden" name="customer[note]" id="ea-customer-note" value="">

<label for="ea-email">Email address</label>
<input id="ea-email" name="customer[email]" type="email" placeholder="name@example.com" required>

<label for="ea-first">First Name (optional)</label>
<input id="ea-first" name="customer[first_name]" type="text" placeholder="First name">

<div class="ea-actions">
<button id="ea-submit" type="submit">Register & receive a discount</button>
</div>

By subscribing, you agree to our privacy policy. You'll receive unlimited access and one discount code for 10% off.
</form>

<aside class="ea-right">
<div class="ea-stats-card">
Who has registered?
<div id="ea-signup-count" class="ea-count">—</div>
<ul id="ea-signup-list" class="ea-list">
<li>Loading…</li>
</ul>
<p class="ea-note">You'll only see names or emails that you're allowed to share publicly — privacy first.</p>
</div>

<div class="ea-info">
<h4>What do you get?</h4>
<ul>
<li>Access to the collection at <strong>12:00</strong> on launch day.</li>
<li>10% off with code <strong>EA10</strong>.</li>
<li>Direct email with instructions after registration.</li>
</ul>
</div>
</aside>
</div>
</div>
</section>

var form = document.getElementById('ea-signup-form');
var email = document.getElementById('ea-email');
var first = document.getElementById('ea-first');
var message = document.getElementById('ea-message');
var noteInput = document.getElementById('ea-customer-note');

if(noteInput) noteInput.value = 'early_access_signup at ' + new Date().toISOString();

form.addEventListener('submit', function(ev){
var now = new Date();
if(now > signupDeadline){
ev.preventDefault();
message.innerText = 'The registration period is closed (deadline: October 10, 2025).';
return false;
}

document.getElementById('ea-submit').disabled = true;

ev.preventDefault();
var payload = new FormData(form);

fetch(form.action, {
method: 'POST',
body: payload,
credentials: 'same-origin'
}).then(function(resp){
window.location.href = thankYouPage + '?email=' + encodeURIComponent(email.value);
}).catch(function(err){
console.error(err);
message.innerText = 'Something went wrong while signing up. Please try again later.';
document.getElementById('ea-submit').disabled = false;
});
});

document.addEventListener('DOMContentLoaded', loadPublicList);
})();
</script>

<!--
<div class="ea-thank">
Thank you for subscribing!
You have successfully subscribed to Early Access. We received your email: {{ request.params.email | default: 'jouw e-mail' }}
Use the discount code EA10 for 10% off the launch. Note: Create this discount code first in Shopify Admin > Discounts and set the correct expiration date.
<p>You will get access to the collection at <strong>12:00</strong> on launch day (instead of 17:00).</p>
<a href="/en/collections/all" class="btn">Take a look at our shop</a>
</div>

SPECIAAL VOOR JOU