EARLY ACESS INSCHRIJVING

<!--
Shopify page template: early-access.liquid
Plaats dit bestand als een nieuwe pagina template (of gebruik het in een Page met custom HTML via de theme editor).
Belangrijke admin-stappen (moet je zelf even doen in Shopify admin):
1) Maak in Admin > Discounts een automatische of code-discount van 10% met code: EA10 (of kies je eigen code).
2) Maak in Admin > Customers een segment met filter: Customer tag contains "early_access_2025" (of pas jaartal aan).
3) (Optioneel, voor live publieke lijst) Zet een eenvoudige webhook / Zapier/Make/Serverless endpoint op die nieuwe inschrijvingen toevoegt aan een JSON bestand in je theme assets of Google Sheets. De front-end hieronder kan die JSON ophalen om een openbare bezoekerslijst/count te tonen.

LET OP: Shopify staat het aanmaken van klanten via de storefront-form toe. Om klanten automatisch met tag aan te maken gebruiken we een hidden input: customer[tags] = early_access_2025
Door dit tag-veld kun je in admin eenvoudig een segment opbouwen.
-->

{% comment %} --- EARLY ACCESS PAGE --- {% endcomment %}
<section class="early-access-wrap">
<div class="ea-card">
<header class="ea-header">
<h1>Early Access — Schrijf je in</h1>
<p class="sub">Meld je aan vóór <strong>10 oktober 2025</strong> en krijg exclusieve toegang om <strong>12:00</strong> (in plaats van 17:00) én 10% korting.</p>
</header>

<div class="ea-body">
<div class="ea-left">
<p>We lanceren onze nieuwe collectie exclusief voor inschrijvers eerder op de dag. Vul hieronder je gegevens in — we sturen je de kortingscode en toegangsinformatie direct na inschrijving.</p>

<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">E-mailadres</label>
<input id="ea-email" name="customer[email]" type="email" placeholder="naam@voorbeeld.com" required>

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

<div class="ea-actions">
<button id="ea-submit" type="submit">Inschrijven & ontvang korting</button>
</div>

<p class="terms">Door je in te schrijven ga je akkoord met onze privacyvoorwaarden. Je ontvangt onbeperkt toegang en één kortingscode voor 10% korting.</p>
</form>

<aside class="ea-right">
<div class="ea-stats-card">
<h3>Wie heeft zich ingeschreven?</h3>
<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">Je ziet alleen namen of e-mails die publiek gedeeld mogen worden — privacy first.</p>
</div>

<div class="ea-info">
<h4>Wat krijg je?</h4>
<ul>
<li>Toegang tot de collectie op <strong>12:00</strong> op de lanceringsdag.</li>
<li>10% korting met code <strong>EA10</strong>.</li>
<li>Directe e-mail met instructies na inschrijving.</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 = 'De inschrijfperiode is gesloten (deadline: 10 oktober 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 = 'Er ging iets mis bij inschrijven. Probeer later opnieuw.';
document.getElementById('ea-submit').disabled = false;
});
});

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

<!--
<div class="ea-thank">
<h1>Bedankt voor je inschrijving!</h1>
<p>Je bent succesvol ingeschreven voor Early Access. We hebben je e-mail ontvangen: <strong>{{ request.params.email | default: 'jouw e-mail' }}</strong></p>
<p>Gebruik de kortingscode <strong>EA10</strong> voor 10% korting op de lancering. Let op: maak deze kortingscode eerst aan in Shopify Admin > Discounts en zet de juiste geldigheidsperiode.</p>
<p>Je krijgt toegang tot de collectie op <strong>12:00</strong> op de lanceringsdag (in plaats van 17:00).</p>
<a href="/collections/all" class="btn">Bekijk alvast onze shop</a>
</div>

SPECIAAL VOOR JOU