<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A'Lure — Discover Your Scent Identity</title>
<meta name="description" content="Take the A'Lure Perfume Personality Quiz and discover your scent archetype.">
<meta property="og:title" content="What's Your Scent Identity? — A'Lure Quiz">
<meta property="og:description" content="Find out which perfume archetype matches your personality. Take the A'Lure scent quiz.">
<meta property="og:url" content="https://alure.ng/quiz">
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--gold:#C8963E;--gold-light:#F5E6CC;--gold-pale:#FBF5EA;--gold-dark:#8B6420;
--ink:#1A1208;--ink-soft:#3D300F;--muted:#6B5B3E;
--border:rgba(200,150,62,0.25);--border-light:rgba(200,150,62,0.12);
--bg:#FDFAF5;--surface:#FAF6EE;--white:#FFFFFF;
--radius:14px;--radius-sm:8px;--t:0.22s ease;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.6}
.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:0 16px 56px}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:560px;padding:2rem 2rem 2.5rem;margin-top:2rem}
.site-header{width:100%;max-width:560px;padding:1.5rem 0 0;text-align:center}
.logo{font-size:13px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--gold-dark);text-decoration:none;display:inline-block}
.header-rule{width:36px;height:1.5px;background:var(--gold);margin:10px auto 0;border-radius:1px}
/* Intro */
.intro-wrap{text-align:center;padding:.5rem 0}
.intro-icon{font-size:40px;display:block;margin-bottom:1.25rem;line-height:1}
.intro-title{font-size:26px;font-weight:700;color:var(--ink);line-height:1.25;margin-bottom:.75rem;letter-spacing:-.3px}
.intro-title span{color:var(--gold)}
.intro-desc{font-size:14px;color:var(--muted);line-height:1.75;max-width:400px;margin:0 auto 1.75rem}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:2rem}
.pill{font-size:11px;padding:5px 12px;border-radius:20px;border:1px solid var(--border);color:var(--muted);background:var(--surface);letter-spacing:.5px}
/* Progress */
.progress-wrap{margin-bottom:1.75rem}
.progress-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);letter-spacing:.75px;text-transform:uppercase;margin-bottom:8px}
.progress-track{height:3px;background:var(--border-light);border-radius:2px;overflow:hidden}
.progress-bar{height:100%;background:var(--gold);border-radius:2px;transition:width .4s ease}
/* Question */
.q-num{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem;font-weight:600}
.q-text{font-size:19px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:.4rem;letter-spacing:-.2px}
.q-sub{font-size:13px;color:var(--muted);margin-bottom:1.5rem}
.options{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;background:var(--surface);border:1.5px solid transparent;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:border-color var(--t),background var(--t);width:100%}
.opt:hover{border-color:rgba(200,150,62,.5);background:var(--gold-pale)}
.opt.sel{border-color:var(--gold);background:var(--gold-pale)}
.opt-key{font-size:10px;font-weight:700;color:var(--gold);letter-spacing:1px;min-width:16px;padding-top:1px}
.opt-label{font-size:14px;color:var(--ink);line-height:1.45;font-weight:500}
.opt-hint{font-size:12px;color:var(--muted);margin-top:2px;font-weight:400}
/* Nav */
.nav{display:flex;gap:10px;margin-top:1.75rem;justify-content:space-between}
.btn{font-size:13px;font-weight:600;padding:11px 24px;border-radius:var(--radius-sm);cursor:pointer;border:1.5px solid var(--border);background:transparent;color:var(--ink);letter-spacing:.3px;transition:all var(--t);min-width:90px}
.btn:hover{background:var(--surface)}
.btn:disabled{opacity:.3;cursor:not-allowed}
.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.primary:hover:not(:disabled){background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}
.btn.ghost{border-color:transparent;color:var(--muted);font-weight:400}
.btn.ghost:hover{color:var(--ink);background:var(--surface)}
.btn.full{width:100%;font-size:15px;padding:14px}
/* Lead capture screen */
.lead-wrap{text-align:center}
.lead-icon{font-size:36px;display:block;margin-bottom:1rem;line-height:1}
.lead-title{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:.5rem;letter-spacing:-.2px}
.lead-sub{font-size:13px;color:var(--muted);line-height:1.75;max-width:400px;margin:0 auto 1.5rem}
.lead-preview{background:var(--gold-pale);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:1.5rem;display:flex;align-items:center;gap:12px;text-align:left}
.lead-preview-icon{font-size:28px;line-height:1}
.lead-preview-text{font-size:13px;color:var(--muted);line-height:1.5}
.lead-preview-name{font-size:15px;font-weight:700;color:var(--ink)}
.field-group{display:flex;flex-direction:column;gap:10px;margin-bottom:1.25rem}
.field{display:flex;flex-direction:column;gap:5px;text-align:left}
.field label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gold-dark)}
.field input{font-size:14px;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-family:inherit;transition:border-color var(--t),background var(--t);outline:none}
.field input:focus{border-color:var(--gold);background:var(--white)}
.field input::placeholder{color:var(--muted);opacity:.7}
.field-hint{font-size:11px;color:var(--muted);margin-top:2px}
.privacy-note{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:1.25rem;padding:10px 12px;background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border-light)}
.error-msg{font-size:12px;color:#c0392b;margin-top:4px;display:none}
.submit-status{text-align:center;padding:1rem 0;display:none}
.submit-status-icon{font-size:32px;display:block;margin-bottom:.75rem}
.submit-status-text{font-size:14px;color:var(--muted);line-height:1.7}
/* Result */
.result-wrap{text-align:center}
.result-icon{width:80px;height:80px;border-radius:50%;border:2px solid var(--gold);background:var(--gold-pale);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 1.25rem}
.result-archetype{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.5px;margin-bottom:6px}
.intensity-tag{display:inline-block;font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;padding:5px 14px;border-radius:20px;border:1px solid var(--gold);color:var(--gold-dark);background:var(--gold-pale);margin-bottom:1.25rem}
.result-desc{font-size:14px;color:var(--muted);line-height:1.8;max-width:440px;margin:0 auto 1.5rem}
.section-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px;text-align:left}
.notes-block{background:var(--surface);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:1.25rem;text-align:left}
.notes-pills{display:flex;flex-wrap:wrap;gap:6px}
.note-pill{font-size:12px;padding:4px 11px;border-radius:20px;border:1px solid var(--border);color:var(--ink-soft);background:var(--white)}
.products-block{margin-bottom:1.5rem;text-align:left}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.prod-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-sm);padding:13px;cursor:pointer;text-decoration:none;display:block;transition:border-color var(--t),background var(--t)}
.prod-card:hover{border-color:var(--gold);background:var(--gold-pale)}
.prod-name{font-size:12px;font-weight:600;color:var(--ink);line-height:1.4;margin-bottom:4px}
.prod-price{font-size:11px;color:var(--gold-dark);font-weight:500}
.scores-block{margin-bottom:1.5rem;text-align:left}
.score-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.score-name{font-size:12px;color:var(--muted);width:88px;text-align:right;flex-shrink:0}
.score-track{flex:1;height:4px;background:var(--border-light);border-radius:2px;overflow:hidden}
.score-fill{height:100%;background:var(--gold);border-radius:2px;transition:width .6s ease}
/* Share */
.share-block{background:var(--gold-pale);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem;text-align:left}
.share-heading{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}
.share-sub{font-size:12px;color:var(--muted);margin-bottom:1.25rem;line-height:1.6}
.share-text-box{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;font-size:13px;color:var(--ink-soft);line-height:1.7;margin-bottom:1rem;white-space:pre-line;font-family:inherit;user-select:all;cursor:text}
.share-btns{display:flex;flex-wrap:wrap;gap:8px}
.share-btn{font-size:12px;font-weight:600;padding:10px 16px;border-radius:var(--radius-sm);cursor:pointer;border:1.5px solid var(--border);background:var(--white);color:var(--ink);transition:all var(--t);display:flex;align-items:center;gap:6px;text-decoration:none}
.share-btn:hover{background:var(--surface);border-color:var(--gold)}
.share-btn.whatsapp{background:#25D366;border-color:#25D366;color:#fff}
.share-btn.whatsapp:hover{background:#1DAB56;border-color:#1DAB56}
.share-btn.copy{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.share-btn.copy:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}
.copied-msg{font-size:11px;color:var(--gold-dark);margin-top:6px;display:none;font-weight:600;letter-spacing:.5px}
.action-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:.5rem}
.footer{margin-top:1.75rem;font-size:11px;color:var(--muted);text-align:center;letter-spacing:.5px;line-height:1.8}
.footer a{color:var(--gold-dark);text-decoration:none}
.footer a:hover{text-decoration:underline}
@media(max-width:480px){
.card{padding:1.5rem 1.25rem 2rem}
.q-text{font-size:17px}
.result-archetype{font-size:26px}
.prod-grid{grid-template-columns:repeat(2,1fr)}
}
</style>
</head>
<body>
<div class="page">
<header class="site-header">
<a href="https://alure.ng" class="logo">A'Lure</a>
<div class="header-rule"></div>
</header>
<!-- Intro -->
<div class="card" id="screen-intro">
<div class="intro-wrap">
<span class="intro-icon">✨</span>
<h1 class="intro-title">What's your <span>scent identity?</span></h1>
<p class="intro-desc">8 questions. No right or wrong answers. Discover your perfume archetype and the A'Lure fragrances made for your personality.</p>
<div class="pill-row">
<span class="pill">2 minutes</span>
<span class="pill">12 archetypes</span>
<span class="pill">Personalised picks</span>
<span class="pill">Free to take</span>
</div>
<button class="btn primary full" onclick="startQuiz()">Start the quiz</button>
</div>
</div>
<!-- Quiz -->
<div class="card" id="screen-quiz" style="display:none">
<div class="progress-wrap">
<div class="progress-meta">
<span id="q-counter">Question 1 of 8</span>
<span id="q-pct">12%</span>
</div>
<div class="progress-track"><div class="progress-bar" id="prog" style="width:12.5%"></div></div>
</div>
<div class="q-num" id="q-num">01</div>
<div class="q-text" id="q-text"></div>
<div class="q-sub" id="q-sub"></div>
<div class="options" id="options"></div>
<div class="nav">
<button class="btn ghost" id="btn-back" onclick="goBack()">Back</button>
<button class="btn primary" id="btn-next" onclick="goNext()" disabled>Next →</button>
</div>
</div>
<!-- Lead Capture -->
<div class="card" id="screen-lead" style="display:none">
<div class="lead-wrap">
<span class="lead-icon">🎁</span>
<div class="lead-title">Your result is ready!</div>
<div class="lead-sub">Enter your details below to reveal your scent identity and receive exclusive A'Lure offers straight to your WhatsApp.</div>
<div class="lead-preview" id="lead-preview">
<div class="lead-preview-icon" id="preview-icon">✨</div>
<div>
<div class="lead-preview-text">Your archetype is...</div>
<div class="lead-preview-name" id="preview-name">🔒 Locked — enter details to reveal</div>
</div>
</div>
<form id="lead-form" onsubmit="submitLead(event)">
<div class="field-group">
<div class="field">
<label for="f-name">Your name</label>
<input type="text" id="f-name" name="name" placeholder="e.g. Adaeze Okonkwo" required>
</div>
<div class="field">
<label for="f-email">Email address</label>
<input type="email" id="f-email" name="email" placeholder="e.g. adaeze@gmail.com" required>
<span class="field-hint">We'll send your full result here</span>
</div>
<div class="field">
<label for="f-wa">WhatsApp number</label>
<input type="tel" id="f-wa" name="whatsapp" placeholder="e.g. 08012345678" required>
<span class="field-hint">For exclusive deals and new arrivals</span>
</div>
</div>
<div class="privacy-note">🔒 We respect your privacy. Your details are only used by A'Lure to send you your result and relevant fragrance offers. No spam, ever.</div>
<div class="error-msg" id="form-error">Something went wrong. Please try again.</div>
<button type="submit" class="btn primary full" id="btn-submit">Reveal my scent identity →</button>
</form>
<div class="submit-status" id="submit-status">
<span class="submit-status-icon">⏳</span>
<div class="submit-status-text">Sending your details...</div>
</div>
</div>
</div>
<!-- Result -->
<div class="card" id="screen-result" style="display:none">
<div class="result-wrap" id="result-content"></div>
</div>
</div>
<script>
// ── CONFIGURATION ──────────────────────────────────────────
// Replace the value below with your Formspree endpoint
// Get it free at formspree.io → New Form → copy the URL
const FORMSPREE_ENDPOINT = "https://formspree.io/f/xvznwayz";
// ──────────────────────────────────────────────────────────
const Q = [
{
text:"You're getting dressed for an important evening out. What's your goal?",
sub:"Pick the one that feels most like you.",
opts:[
{l:"Leave an impression they won't forget",h:"You want to be remembered",v:{rebel:2,ruler:2,magician:1}},
{l:"Feel polished and in command",h:"Confidence is your signature",v:{leader:2,hero:1}},
{l:"Warm the room and make people feel at ease",h:"You bring the comfort",v:{nurturer:2,innocent:1}},
{l:"Surprise them — you like to be unexpected",h:"Intrigue is your thing",v:{creator:2,magician:1,rebel:1}}
]
},
{
text:"Your friends would describe your personal style as...",
sub:"Be honest — what's the first word they'd use?",
opts:[
{l:"Bold and fearless — you dress to be noticed",v:{rebel:2,ruler:1}},
{l:"Warm and put-together — reliable elegance",v:{nurturer:2,leader:1}},
{l:"Fresh and effortless — clean, light, natural",v:{innocent:2,explorer:1}},
{l:"Eclectic and artistic — you mix things others wouldn't",v:{creator:2,jester:1}}
]
},
{
text:"How do you prefer your presence to be felt when you walk into a room?",
sub:"Think about what feels most authentic.",
opts:[
{l:"People notice immediately — commanding, undeniable",h:"Super strong energy",v:{rebel:2,ruler:2,magician:1}},
{l:"People notice after a moment — confident but not loud",h:"Strong, lasting presence",v:{leader:2,hero:2,lover:1}},
{l:"People feel comfortable around you — warm and approachable",h:"Moderate, inviting energy",v:{nurturer:2,jester:1,explorer:1}},
{l:"You're subtle — people have to lean in to discover you",h:"Mild, quiet depth",v:{sage:2,innocent:2}}
]
},
{
text:"Pick the scenario that sounds most like your ideal Friday night:",
sub:"",
opts:[
{l:"A rooftop event — you're the person everyone gravitates to",v:{ruler:2,rebel:1,lover:1}},
{l:"A cosy dinner with people you love — you're hosting",v:{nurturer:2,sage:1}},
{l:"An underground art show or live music — somewhere unexpected",v:{creator:2,explorer:1,rebel:1}},
{l:"A spontaneous adventure — plans changed and it's better that way",v:{explorer:2,jester:1,hero:1}}
]
},
{
text:"When it comes to perfume, what matters most to you?",
sub:"",
opts:[
{l:"Longevity — it should still be on me at midnight",h:"The longer the better",v:{ruler:2,rebel:2,magician:1}},
{l:"Compliments — I love when people ask what I'm wearing",h:"Noticeable and memorable",v:{lover:2,leader:1,hero:1}},
{l:"Mood — it should change how I feel",h:"Like an invisible layer of confidence",v:{creator:2,sage:1,magician:1}},
{l:"Freshness — clean, non-intrusive, wearable every day",h:"Light and easy to live in",v:{innocent:2,explorer:1,nurturer:1}}
]
},
{
text:"Someone close to you says your perfume is too strong. Your reaction?",
sub:"",
opts:[
{l:"That's the point — intensity is the whole idea",v:{rebel:3,ruler:2}},
{l:"I'd scale back a little — I care what people think",v:{leader:1,lover:1,nurturer:1}},
{l:"I'd switch to something lighter — I prefer subtlety",v:{innocent:2,sage:2,explorer:1}},
{l:"I'd find a middle ground — presence without overwhelm",v:{hero:1,creator:1,jester:1}}
]
},
{
text:"Which of these scent families sounds most like you?",
sub:"",
opts:[
{l:"Oud, smoke, leather, tobacco — rich and primal",v:{rebel:2,ruler:2,magician:1}},
{l:"Rose, jasmine, amber, vanilla — sensual and warm",v:{lover:2,nurturer:1,creator:1}},
{l:"Bergamot, vetiver, cedarwood, pepper — crisp and confident",v:{leader:2,hero:2,explorer:1}},
{l:"Citrus, white musk, fresh florals — clean and effortless",v:{innocent:2,jester:1,explorer:1}}
]
},
{
text:"Finally — what word best describes the version of yourself you want to project?",
sub:"Trust your gut.",
opts:[
{l:"Powerful — no one overlooks me",v:{ruler:2,rebel:1,hero:1}},
{l:"Magnetic — people are drawn to me",v:{lover:2,magician:2}},
{l:"Genuine — I'm comfortable in my own skin",v:{nurturer:1,innocent:1,sage:1,explorer:1}},
{l:"Unforgettable — I leave something behind",v:{creator:2,magician:1,rebel:1}}
]
}
];
const A = {
rebel: {name:"The Rebel", icon:"🔥",intensity:"Super Strong",tag:"BEAST MODE",
desc:"You don't follow the room — you change it. Your presence is intentional, bold, and impossible to ignore. You wear your scent like armour and you wouldn't have it any other way.",
notes:["Oud","Smoke","Leather","Tobacco","Dark Amber"],
products:[
{n:"Badee Al Oud – Oud for Glory",p:"₦35,000",u:"https://alure.ng/product/badee-al-oud-oud-for-glory/"},
{n:"Oud Mood Elixir by Lattafa",p:"₦22,000",u:"https://alure.ng/product/oud-mood-collection-by-lattafa/"},
{n:"Alure Extraits Men (Strong)",p:"₦2,500–₦12,500",u:"https://alure.ng/product/alure-extraits-men-strong/"}
]},
ruler: {name:"The Ruler", icon:"👑",intensity:"Super Strong",tag:"COMMANDS THE ROOM",
desc:"Rich. Luxurious. Commanding. You walk in and the air changes. Your scent is an extension of your authority — opulent, precisely chosen, and designed to dominate.",
notes:["Ambergris","Rose","Oud","Precious Woods","Saffron"],
products:[
{n:"Ya Habibti (Oh My Love)",p:"₦30,000",u:"https://alure.ng/product/ya-habibti-oh-my-love/"},
{n:"Badee Al Oud Amethyst",p:"₦30,000",u:"https://alure.ng/product/badee-al-oud-amethyst/"},
{n:"Star Bloom Combo",p:"₦25,000",u:"https://alure.ng/product/star-bloom/"}
]},
magician:{name:"The Magician",icon:"✨",intensity:"Super Strong",tag:"MYSTERIOUS & TRANSFORMATIVE",
desc:"You move through the world with quiet power and deep intention. Your scent is layered, complex, and leaves people wondering. You don't explain yourself — you leave an impression.",
notes:["Myrrh","Incense","Oud","Saffron","Dark Musk"],
products:[
{n:"Wicked Elixir MoF",p:"₦20,000",u:"https://alure.ng/product/wicked-elixir-mof/"},
{n:"Alure Extraits Unisex/Niche",p:"₦2,500–₦12,500",u:"https://alure.ng/product/alure-extraits-unisex-niche/"},
{n:"Oud Mood Elixir by Lattafa",p:"₦22,000",u:"https://alure.ng/product/oud-mood-collection-by-lattafa/"}
]},
leader: {name:"The Leader", icon:"👔",intensity:"Strong",tag:"CONFIDENT & COMPOSED",
desc:"You command respect without demanding attention. Your presence is deliberate, assured, and steady. Your scent is the finishing touch on someone who already has it together.",
notes:["Bergamot","Oakmoss","Vetiver","Leather","Cedar"],
products:[
{n:"Qaed Al Fursan Untamed",p:"₦23,000",u:"https://alure.ng/product/qaed-al-fursan-untamed/"},
{n:"Your Touch Intense (Maison Alhambra)",p:"₦20,000",u:"https://alure.ng/product/your-touch-intense-maison-alhambra/"},
{n:"Opeyemi Famakin Approved Combo",p:"₦58,000",u:"https://alure.ng/product/opeyemi-famakin-approved-combo-durkhan_opulence/"}
]},
hero: {name:"The Hero", icon:"🦸",intensity:"Strong",tag:"ENERGY & COURAGE",
desc:"You show up fully, every time. Your scent is dynamic and confident — it projects energy, courage, and lasting substance. People know when you've arrived.",
notes:["Pepper","Cedar","Patchouli","Citrus","Amber"],
products:[
{n:"9 PM",p:"₦10,000",u:"https://alure.ng/product/diviloo-9-pm/"},
{n:"Night de Club Man",p:"₦22,000",u:"https://alure.ng/product/night-de-club-man-eau-de-parfum-100ml/"},
{n:"Gold After Dark Combo",p:"₦16,000",u:"https://alure.ng/product/gold-after-dark-combo/"}
]},
lover: {name:"The Lover", icon:"❤️",intensity:"Strong",tag:"SENSUAL & MEMORABLE",
desc:"You live for connection — deep, warm, and real. Your scent creates intimacy before you even speak. Romantic, emotional, and lasting, it tells people exactly what you're about.",
notes:["Rose","Jasmine","Amber","Vanilla","Sandalwood"],
products:[
{n:"Maison Asrar Fairyland",p:"₦32,000",u:"https://alure.ng/product/maison-asrar-fairyland-by-gulf-orchid/"},
{n:"Alure Extraits Female",p:"₦2,500–₦12,500",u:"https://alure.ng/product/alure-extraits-female/"},
{n:"Purple Swirl Combo",p:"₦17,500",u:"https://alure.ng/product/purple-swirl/"}
]},
creator: {name:"The Creator", icon:"🎨",intensity:"Moderate–Strong",tag:"DISTINCTIVE & ARTISTIC",
desc:"You see the world differently and your scent reflects that. Unexpected, multi-dimensional, and deeply personal — you wear fragrance as art. Nobody smells quite like you.",
notes:["Violet","Saffron","Unusual Accords","Iris","Amber Wood"],
products:[
{n:"Alure Extraits Unisex/Niche",p:"₦2,500–₦12,500",u:"https://alure.ng/product/alure-extraits-unisex-niche/"},
{n:"Exotic Combo",p:"₦18,500",u:"https://alure.ng/product/exotic-combo/"},
{n:"Blue Water Combo",p:"₦15,000",u:"https://alure.ng/product/4550/"}
]},
explorer:{name:"The Explorer",icon:"🧭",intensity:"Moderate",tag:"FRESH & ADVENTUROUS",
desc:"You're always moving, always curious. Your scent is fresh and alive — enough presence to be noticed, never enough to slow you down. It smells like possibility.",
notes:["Bergamot","Vetiver","Marine Notes","Green Accord","Light Musk"],
products:[
{n:"Khamrah Paris Avenue",p:"₦6,500",u:"https://alure.ng/product/khamrah-paris-avenue/"},
{n:"Fakhar Lattafa Mini",p:"₦6,000",u:"https://alure.ng/product/fakhar-lattafa-mini/"},
{n:"Aura Mango Splash",p:"₦22,500",u:"https://alure.ng/product/aura-mango-splash-juicy-tropical-unforgettable/"}
]},
jester: {name:"The Jester", icon:"🃏",intensity:"Moderate",tag:"PLAYFUL & JOYFUL",
desc:"Life is better with you in it. Your scent is cheerful, fizzy, and fun — noticeable without being demanding. You make people smile before they even know why.",
notes:["Fruity Notes","Fizzy Citrus","Sweet Florals","Coconut","Peach"],
products:[
{n:"Pistachio Fever",p:"₦13,000",u:"https://alure.ng/product/pistachio-fever/"},
{n:"Yum Yum Mini",p:"₦6,000",u:"https://alure.ng/product/yum-yum-mini/"},
{n:"Fantasy Combo",p:"₦13,500",u:"https://alure.ng/product/fantasy-combo/"}
]},
sage: {name:"The Sage", icon:"📚",intensity:"Mild–Moderate",tag:"THOUGHTFUL & UNDERSTATED",
desc:"You don't need to announce yourself. Your depth draws people in quietly — curious minds find you fascinating. Your scent rewards those who get close enough to notice.",
notes:["Iris","Tea","Incense","Cedar","Soft Musk"],
products:[
{n:"Vintage Radio Mini",p:"₦5,500",u:"https://alure.ng/product/vintage-radio-mini/"},
{n:"Ramz Silver Mini",p:"₦6,000",u:"https://alure.ng/product/ramz-silver-mini/"},
{n:"Sugar Oud Mini",p:"₦5,000",u:"https://alure.ng/product/sugar-oud-mini/"}
]},
nurturer:{name:"The Nurturer",icon:"🤗",intensity:"Mild",tag:"WARM & COMFORTING",
desc:"People feel safe around you — your energy is soft, generous, and real. Your scent is like a warm hug: comforting, inviting, and deeply personal. You make places feel like home.",
notes:["Vanilla","Sandalwood","Milk","Soft Musk","Tonka Bean"],
products:[
{n:"Hayaati Royale Mini",p:"₦5,500",u:"https://alure.ng/product/hayaati-royale-mini/"},
{n:"Liquid Burn Mini",p:"₦5,500",u:"https://alure.ng/product/liquid-burn-mini/"},
{n:"Golden Aura Combo",p:"₦13,000",u:"https://alure.ng/product/golden-aura-combo/"}
]},
innocent:{name:"The Innocent",icon:"🌿",intensity:"Mild",tag:"CLEAN & EFFORTLESS",
desc:"There's something refreshing about you — open, optimistic, and genuinely at ease. Your scent is clean and airy, never trying too hard. It's the most honest version of you.",
notes:["Fresh Linen","Citrus","White Musk","Soft Florals","Green Notes"],
products:[
{n:"Mandarin Sky Mini",p:"₦4,000",u:"https://alure.ng/product/mandarin-sky-mini/"},
{n:"His Confession Mini",p:"₦4,000",u:"https://alure.ng/product/his-confession-mini/"},
{n:"Rave Now (50ml)",p:"₦9,000",u:"https://alure.ng/product/rave-now-50ml/"}
]}
};
let cur=0, ans=new Array(Q.length).fill(null), topKey='';
function startQuiz(){
document.getElementById('screen-intro').style.display='none';
document.getElementById('screen-quiz').style.display='block';
renderQ(0);
}
function renderQ(i){
const q=Q[i];
const pct=Math.round(((i+1)/Q.length)*100);
document.getElementById('q-counter').textContent=`Question ${i+1} of ${Q.length}`;
document.getElementById('q-pct').textContent=`${pct}%`;
document.getElementById('prog').style.width=`${((i+1)/Q.length)*100}%`;
document.getElementById('q-num').textContent=String(i+1).padStart(2,'0');
document.getElementById('q-text').textContent=q.text;
document.getElementById('q-sub').textContent=q.sub||'';
const grid=document.getElementById('options');
grid.innerHTML='';
q.opts.forEach((o,idx)=>{
const b=document.createElement('button');
b.className='opt'+(ans[i]?.opt===idx?' sel':'');
b.innerHTML=`<span class="opt-key">${String.fromCharCode(65+idx)}</span><span><div class="opt-label">${o.l}</div>${o.h?`<div class="opt-hint">${o.h}</div>`:''}</span>`;
b.onclick=()=>pick(i,idx);
grid.appendChild(b);
});
document.getElementById('btn-back').disabled=i===0;
document.getElementById('btn-next').disabled=ans[i]===null;
document.getElementById('btn-next').textContent=i===Q.length-1?'See my result ✨':'Next →';
}
function pick(qi,oi){
ans[qi]={q:qi,opt:oi};
document.querySelectorAll('.opt').forEach((b,i)=>b.classList.toggle('sel',i===oi));
document.getElementById('btn-next').disabled=false;
}
function goBack(){if(cur>0){cur--;renderQ(cur);}}
function goNext(){
if(cur<Q.length-1){cur++;renderQ(cur);}
else showLeadCapture();
}
function calcScores(){
const s={};Object.keys(A).forEach(k=>s[k]=0);
ans.forEach(a=>{
if(!a)return;
Object.entries(Q[a.q].opts[a.opt].v).forEach(([k,v])=>{s[k]=(s[k]||0)+v;});
});
return s;
}
function showLeadCapture(){
const scores=calcScores();
const sorted=Object.entries(scores).sort((a,b)=>b[1]-a[1]);
topKey=sorted[0][0];
const arch=A[topKey];
document.getElementById('screen-quiz').style.display='none';
document.getElementById('preview-icon').textContent=arch.icon;
document.getElementById('preview-name').textContent='🔒 Locked — enter details to reveal';
document.getElementById('screen-lead').style.display='block';
}
async function submitLead(e){
e.preventDefault();
const name=document.getElementById('f-name').value.trim();
const email=document.getElementById('f-email').value.trim();
const whatsapp=document.getElementById('f-wa').value.trim();
const arch=A[topKey];
const errEl=document.getElementById('form-error');
const statusEl=document.getElementById('submit-status');
const formEl=document.getElementById('lead-form');
errEl.style.display='none';
// Show loading state
formEl.style.display='none';
statusEl.style.display='block';
statusEl.innerHTML='<span class="submit-status-icon">⏳</span><div class="submit-status-text">Sending your details...</div>';
const payload={
name,
email,
whatsapp,
archetype: arch.name,
intensity: arch.intensity,
scent_notes: arch.notes.join(', '),
top_product: arch.products[0].n,
quiz_date: new Date().toLocaleString('en-NG',{dateStyle:'full',timeStyle:'short'}),
_subject: `New A'Lure Quiz Lead — ${arch.name} ${arch.icon} | ${name}`
};
try {
const res=await fetch(FORMSPREE_ENDPOINT,{
method:'POST',
headers:{'Content-Type':'application/json','Accept':'application/json'},
body:JSON.stringify(payload)
});
if(res.ok){
showResult(name);
} else {
throw new Error('Submission failed');
}
} catch(err){
// If Formspree not configured yet, still show result (for testing)
if(FORMSPREE_ENDPOINT.includes('YOUR_FORM_ID')){
showResult(name);
} else {
formEl.style.display='block';
statusEl.style.display='none';
errEl.style.display='block';
}
}
}
function showResult(userName){
const arch=A[topKey];
const scores=calcScores();
const sorted=Object.entries(scores).sort((a,b)=>b[1]-a[1]);
const maxScore=sorted[0][1];
document.getElementById('screen-lead').style.display='none';
const screen=document.getElementById('screen-result');
screen.style.display='block';
const top5=sorted.slice(0,5);
const barsHTML=top5.map(([k,v])=>
`<div class="score-row">
<span class="score-name">${A[k].name.replace('The ','')}</span>
<div class="score-track"><div class="score-fill" style="width:${Math.round((v/maxScore)*100)}%"></div></div>
</div>`
).join('');
const notesHTML=arch.notes.map(n=>`<span class="note-pill">${n}</span>`).join('');
const prodsHTML=arch.products.map(p=>
`<a class="prod-card" href="${p.u}" target="_blank" rel="noopener">
<div class="prod-name">${p.n}</div>
<div class="prod-price">${p.p}</div>
</a>`
).join('');
const shareText=`I just took the A'Lure Scent Identity Quiz and got ${arch.name}! ${arch.icon}\n\n"${arch.desc.split('.')[0]}."\n\nMy scent signature: ${arch.notes.slice(0,3).join(', ')}\n\nFind out yours 👇\nalure.ng · #ALure #ScentIdentity #PerfumePersonality`;
const firstName=userName?userName.split(' ')[0]:'';
document.getElementById('result-content').innerHTML=`
<div class="result-icon">${arch.icon}</div>
<div class="result-archetype">${firstName ? `${firstName}, you're ` : ''}${arch.name}</div>
<div class="intensity-tag">${arch.intensity} · ${arch.tag}</div>
<p class="result-desc">${arch.desc}</p>
<div class="notes-block">
<div class="section-label">Your scent signature</div>
<div class="notes-pills">${notesHTML}</div>
</div>
<div class="products-block">
<div class="section-label">Handpicked for you from A'Lure</div>
<div class="prod-grid">${prodsHTML}</div>
</div>
<div class="scores-block">
<div class="section-label">Your top scent personalities</div>
${barsHTML}
</div>
<div class="share-block">
<div class="share-heading">Share your result 🎉</div>
<div class="share-sub">Copy the text below and paste into Instagram, TikTok, or WhatsApp. Tag a friend to find out their scent identity too.</div>
<div class="share-text-box" id="share-text">${shareText}</div>
<div class="share-btns">
<button class="share-btn whatsapp" onclick="shareWhatsApp()">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
WhatsApp
</button>
<button class="share-btn copy" onclick="copyShareText()">Copy text</button>
<button class="share-btn" onclick="shareTwitter()">Twitter / X</button>
</div>
<div class="copied-msg" id="copied-msg">Copied! Paste into your caption or story ✓</div>
</div>
<div class="action-row">
<a href="https://alure.ng/shop/" target="_blank" class="btn primary">Shop A'Lure</a>
<button class="btn ghost" onclick="retake()">Retake quiz</button>
</div>
<div class="footer">
<a href="https://alure.ng">alure.ng</a> · Look Great without Breaking the Bank<br>
Fragrances for every personality. Delivered across Nigeria.
</div>`;
}
function getShareText(){
const arch=A[topKey];
return `I just took the A'Lure Scent Identity Quiz and got ${arch.name}! ${arch.icon}\n\n"${arch.desc.split('.')[0]}."\n\nMy scent signature: ${arch.notes.slice(0,3).join(', ')}\n\nFind out yours 👇\nalure.ng · #ALure #ScentIdentity #PerfumePersonality`;
}
function shareWhatsApp(){
window.open(`https://wa.me/?text=${encodeURIComponent(getShareText())}`, '_blank');
}
function shareTwitter(){
const arch=A[topKey];
const t=`I got ${arch.name} ${arch.icon} on the @alure_nig Scent Identity Quiz!\n\nFind yours at alure.ng\n\n#ALure #ScentIdentity #PerfumePersonality`;
window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(t)}`, '_blank');
}
function copyShareText(){
navigator.clipboard.writeText(getShareText()).then(()=>{
const m=document.getElementById('copied-msg');
m.style.display='block';
setTimeout(()=>{m.style.display='none';},3500);
});
}
function retake(){
ans=new Array(Q.length).fill(null);cur=0;topKey='';
document.getElementById('screen-result').style.display='none';
document.getElementById('screen-intro').style.display='block';
document.getElementById('f-name').value='';
document.getElementById('f-email').value='';
document.getElementById('f-wa').value='';
}
</script>
</body>
</html>
