<!DOCTYPE html>

<head>

<title>أقلع — خطتك للإقلاع عن التدخين</title>

<style>

:root{--green:#0E4D2B;--gold:#B8912F;--cream:#FBF7EE;--ink:#1F2421;--grey:#8A8A80;--mist:#EFEFE9}

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

body{font-family:'Noto Naskh Arabic',serif;background:#fff;color:var(--ink);

min-height:100vh;display:flex;flex-direction:column;align-items:center;

padding:24px 18px 60px}

.wrap{width:100%;max-width:520px}

.bar{height:4px;background:var(--mist);border-radius:2px;margin:14px 0 30px;overflow:hidden}

.bar span{display:block;height:100%;background:var(--gold);width:0;transition:width .35s}

h1{font-size:30px;color:var(--green);text-align:center;margin-bottom:6px;line-height:1.3}

.sub{text-align:center;color:var(--gold);font-size:14px;margin-bottom:28px}

.q{font-size:21px;color:var(--green);font-weight:700;margin-bottom:6px;line-height:1.5}

.hint{font-size:13px;color:var(--grey);margin-bottom:18px}

.opt{display:block;width:100%;background:var(--cream);border:1.5px solid transparent;

border-radius:12px;padding:15px 18px;margin-bottom:10px;font-family:inherit;

font-size:16px;color:var(--ink);text-align:right;cursor:pointer;transition:.15s}

.opt:hover{border-color:var(--gold)}

.opt.on{background:var(--green);color:#fff;border-color:var(--green)}

.num{display:flex;align-items:center;justify-content:center;gap:22px;margin:22px 0}

.num button{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--gold);

background:#fff;font-size:26px;color:var(--green);cursor:pointer}

.num input{width:96px;text-align:center;font-size:34px;font-family:inherit;

font-weight:700;color:var(--green);border:none;outline:none}

input[type=text],input[type=email],input[type=date]{width:100%;padding:14px;

font-family:inherit;font-size:16px;border:1.5px solid var(--mist);

border-radius:12px;margin-bottom:12px;text-align:right}

input:focus{outline:none;border-color:var(--gold)}

.next{width:100%;background:var(--green);color:#fff;border:none;border-radius:12px;

padding:16px;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;margin-top:8px}

.next:disabled{background:var(--mist);color:var(--grey);cursor:default}

.back{background:none;border:none;color:var(--grey);font-family:inherit;

font-size:14px;cursor:pointer;margin-top:14px;display:block}

.consent{display:flex;gap:10px;align-items:flex-start;background:var(--cream);

padding:14px;border-radius:12px;margin:16px 0;font-size:13px;line-height:1.7}

.consent input{margin-top:4px;width:18px;height:18px;flex-shrink:0}

.spin{text-align:center;padding:60px 0;color:var(--grey)}

.done{text-align:center}

.done h2{color:var(--green);font-size:26px;margin-bottom:10px}

.dl{display:inline-block;background:var(--green);color:#fff;text-decoration:none;

padding:15px 34px;border-radius:12px;font-size:17px;font-weight:700;margin:20px 0 12px}

.err{color:#C8102E;font-size:14px;margin-top:10px}

</style>

</head>

<body>

var API = 'https://script.google.com/macros/s/AKfycbyCTdl3kTKf5ch_vxu6eTfs8KIjZsPm79SNYG6YnpxcbHkxTUSI1Zexnbfrl62TDWbt/exec';

var d = { locale:'ar', triggers:[] };

var step = 0;

var app = document.getElementById('app');

var PRODUCTS = [

['cigarettes','السجائر'],['vape','الفيب'],['shisha','الشيشة'],

['pouches','أكياس النيكوتين'],['multiple','أكثر من نوع']

];

var TIMES = [

['le5','خلال ٥ دقائق'],['6to30','من ٦ إلى ٣٠ دقيقة'],

['31to60','من ٣١ إلى ٦٠ دقيقة'],['gt60','أكثر من ٦٠ دقيقة']

];

var TRIGGERS = [

['coffee','القهوة'],['after_meals','بعد الأكل'],['stress','التوتر'],

['driving','القيادة'],['friends','مع الأصدقاء'],['boredom','الملل'],

['late_night','آخر الليل'],['shisha_gathering','جلسة الشيشة'],

['work_break','استراحة العمل'],['after_prayer','بعد الصلاة'],

['phone','مع الجوال'],['other','موقف آخر']

];

function bar(){ return '<div class="bar"><span style="width:'+(step/8*100)+'%"></span></div>'; }

function back(){ return step>0 ? '<button class="back" onclick="go(-1)">رجوع</button>' : ''; }

function go(n){ step += n; render(); }

function pick(k,v){ d[k]=v; go(1); }

function toggle(v,el){

var i = d.triggers.indexOf(v);

if(i>-1){ d.triggers.splice(i,1); el.classList.remove('on'); }

else { d.triggers.push(v); el.classList.add('on'); }

document.getElementById('tnext').disabled = d.triggers.length===0;

}

function step2(v){

var n = Math.max(1, Math.min(80, (d.amount_per_day||20)+v));

d.amount_per_day = n;

document.getElementById('amt').value = n;

}

function step4(v){

var n = Math.max(1, Math.min(70, (d.years_using||10)+v));

d.years_using = n;

document.getElementById('yrs').value = n;

}

function setQuit(days){

var t=new Date(); t.setDate(t.getDate()+days);

d.quit_date = t.toISOString().slice(0,10);

go(1);

}

function render(){

var h='';

if(step===0){

h = '<h1>خطتك للإقلاع</h1><div class="sub">سبعة أسئلة. دقيقتان. مجانًا.</div>'

+ '<div class="q">وش اسمك؟</div>'

+ '<div class="hint">عشان تكون الخطة باسمك</div>'

+ '<input type="text" id="nm" placeholder="اسمك الأول" autocomplete="given-name">'

+ '<button class="next" onclick="d.name=document.getElementById(\'nm\').value.trim();go(1)">ابدأ</button>';

}

else if(step===1){

h = bar()+'<div class="q">وش تستخدم؟</div>'

+ PRODUCTS.map(function(p){

return '<button class="opt" onclick="pick(\'product\',\''+p[0]+'\')">'+p[1]+'</button>';

}).join('') + back();

}

else if(step===2){

d.amount_per_day = d.amount_per_day || 20;

h = bar()+'<div class="q">كم تستخدم في اليوم؟</div>'

+ '<div class="num"><button onclick="step2(-1)">−</button>'

+ '<input id="amt" value="'+d.amount_per_day+'" readonly>'

+ '<button onclick="step2(1)">+</button></div>'

+ '<button class="next" onclick="go(1)">التالي</button>' + back();

}

else if(step===3){

h = bar()+'<div class="q">بعد كم من وقت ما تصحى تستخدم أول وحدة؟</div>'

+ '<div class="hint">هذا السؤال يحدد درجة الاعتماد</div>'

+ TIMES.map(function(t){

return '<button class="opt" onclick="pick(\'time_to_first\',\''+t[0]+'\')">'+t[1]+'</button>';

}).join('') + back();

}

else if(step===4){

d.years_using = d.years_using || 10;

h = bar()+'<div class="q">من كم سنة؟</div>'

+ '<div class="num"><button onclick="step4(-1)">−</button>'

+ '<input id="yrs" value="'+d.years_using+'" readonly>'

+ '<button onclick="step4(1)">+</button></div>'

+ '<button class="next" onclick="go(1)">التالي</button>' + back();

}

else if(step===5){

h = bar()+'<div class="q">متى تبي توقف؟</div>'

+ '<button class="opt" onclick="setQuit(0)">اليوم</button>'

+ '<button class="opt" onclick="setQuit(7)">بعد أسبوع</button>'

+ '<button class="opt" onclick="setQuit(14)">بعد أسبوعين</button>'

+ '<input type="date" id="dt" style="margin-top:10px">'

+ '<button class="next" onclick="var v=document.getElementById(\'dt\').value;if(v){d.quit_date=v;go(1)}">التالي</button>'

+ back();

}

else if(step===6){

h = bar()+'<div class="q">وش اللي يخليك تشتهيها عادة؟</div>'

+ '<div class="hint">اختر كل اللي ينطبق عليك</div>'

+ TRIGGERS.map(function(t){

var on = d.triggers.indexOf(t[0])>-1 ? ' on' : '';

return '<button class="opt'+on+'" onclick="toggle(\''+t[0]+'\',this)">'+t[1]+'</button>';

}).join('')

+ '<button class="next" id="tnext" onclick="go(1)"'

+ (d.triggers.length?'':' disabled')+'>التالي</button>' + back();

}

else if(step===7){

h = bar()+'<div class="q">وين نرسل خطتك؟</div>'

+ '<input type="email" id="em" placeholder="بريدك الإلكتروني" inputmode="email">'

+ '<input type="text" id="ct" placeholder="مدينتك">'

+ '<label class="consent"><input type="checkbox" id="cs">'

+ '<span>أوافق على حفظ إجاباتي لإنشاء خطتي وتحديثها، وعلى استلام رسائل متابعة. '

+ 'أقدر ألغي الاشتراك أو أحذف بياناتي في أي وقت.</span></label>'

+ '<button class="next" onclick="submit()">أنشئ خطتي</button>'

+ '<div class="err" id="er"></div>' + back();

}

app.innerHTML = h;

window.scrollTo(0,0);

}

function submit(){

var em = document.getElementById('em').value.trim();

var er = document.getElementById('er');

if(!em || em.indexOf('@')<0){ er.textContent='اكتب بريدًا إلكترونيًا صحيحًا'; return; }

if(!document.getElementById('cs').checked){ er.textContent='الرجاء الموافقة للمتابعة'; return; }

d.email = em;

d.city = document.getElementById('ct').value.trim();

d.action = 'submit';

d.session_id = 'web-' + Date.now();

app.innerHTML = '<div class="spin"><div class="q">نجهّز خطتك…</div>'

+ '<div class="hint">ثوانٍ قليلة</div></div>';

fetch(API, { method:'POST', body: JSON.stringify(d) })

.then(function(r){ return r.json(); })

.then(function(res){

if(!res.ok) throw new Error(res.error||'error');

app.innerHTML =

'<div class="done"><h2>خطتك جاهزة يا '+(d.name||'')+'</h2>'

+ '<div class="hint">أرسلناها على بريدك أيضًا</div>'

+ '<a class="dl" href="'+res.pdf_url+'" target="_blank">افتح خطتك</a>'

+ '<div class="hint">نراسلك قبل تاريخ إقلاعك بيوم</div></div>';

})

.catch(function(e){

app.innerHTML = '<div class="done"><h2>صار خطأ</h2>'

+ '<div class="hint">جرّب مرة ثانية بعد شوي</div></div>';

});

}

render();

</script>

</body>

</html>