509318396
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
const page=document.getElementById('page');
const languageButtons=document.querySelectorAll('[data-lang]');
function setLanguage(lang){
  const isArabic=lang==='ar';
  document.documentElement.lang=lang;
  document.documentElement.dir=isArabic?'rtl':'ltr';
  page.dir=isArabic?'rtl':'ltr';
  page.classList.toggle('arabic',isArabic);
  document.querySelectorAll('[data-en]').forEach(el=>{el.textContent=el.dataset[lang]});
  document.querySelectorAll('[data-en-ph]').forEach(el=>{el.placeholder=el.dataset[lang+'Ph']});
  languageButtons.forEach(button=>button.classList.toggle('active',button.dataset.lang===lang));
  localStorage.setItem('peugeot-retail-language',lang);
}
languageButtons.forEach(button=>button.addEventListener('click',()=>setLanguage(button.dataset.lang)));
setLanguage(localStorage.getItem('peugeot-retail-language')||'ar');

const observer=new IntersectionObserver(entries=>entries.forEach(entry=>{
  if(entry.isIntersecting){
    entry.target.classList.add('in-view');
    if(entry.target.dataset.vehicle){
      document.querySelectorAll('.vehicle-nav a,.topbar nav a').forEach(link=>link.classList.toggle('active',link.getAttribute('href')==='#'+entry.target.dataset.vehicle));
    }
  }
}),{threshold:.25});
document.querySelectorAll('.reveal,.vehicle-story').forEach(el=>observer.observe(el));

const leadForm=document.getElementById('leadForm');
const formMessage=document.getElementById('formMessage');
const translations={
  en:{name:'Enter a valid full name using letters, spaces, apostrophes or hyphens.',company:'Enter the company name.',phone:'Enter a valid Saudi mobile number.',email:'Enter a valid email address.',required:'This field is required.',consent:'Please accept the consent terms.',server:'We could not submit your request. Please try again.',sending:'Submitting…'},
  ar:{name:'أدخل اسماً كاملاً صحيحاً باستخدام الحروف والمسافات فقط.',company:'أدخل اسم الشركة.',phone:'أدخل رقم جوال سعودي صحيح.',email:'أدخل بريداً إلكترونياً صحيحاً.',required:'هذا الحقل مطلوب.',consent:'يرجى الموافقة على شروط التواصل.',server:'تعذر إرسال طلبك. يرجى المحاولة مرة أخرى.',sending:'جارٍ الإرسال…'}
};
function currentLanguage(){return document.documentElement.lang==='ar'?'ar':'en'}
function normalizeSaudiPhone(value){
  let digits=value.replace(/[^0-9]/g,'');
  if(digits.startsWith('00966')) digits=digits.slice(5);
  else if(digits.startsWith('966')) digits=digits.slice(3);
  if(digits.startsWith('0')) digits=digits.slice(1);
  return digits;
}
function setError(name,message=''){
  const input=leadForm.elements[name];
  if(input) input.setAttribute('aria-invalid',message?'true':'false');
  const target=leadForm.querySelector(`[data-error-for="${name}"]`);
  if(target) target.textContent=message;
}
function validateForm(){
  const t=translations[currentLanguage()];
  const data=new FormData(leadForm);
  const name=String(data.get('full_name')||'').trim();
  const phone=normalizeSaudiPhone(String(data.get('phone')||''));
  const email=String(data.get('email')||'').trim();
  const checks={
    full_name:/^[\p{L}\p{M}][\p{L}\p{M}\s'’.-]{1,99}$/u.test(name)?'':t.name,
    phone:/^5\d{8}$/.test(phone)?'':t.phone,
    email:!email||(/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)&&email.length<=254)?'':t.email,
    city:data.get('city')?'':t.required,
    vehicle:['408','OTHER'].includes(data.get('vehicle'))?'':t.required,
    request_type:['test_drive','quotation','finance','callback'].includes(data.get('request_type'))?'':t.required,
    consent:data.get('consent')?'':t.consent
  };
  Object.entries(checks).forEach(([field,error])=>setError(field,error));
  return !Object.values(checks).some(Boolean);
}
leadForm.addEventListener('input',event=>{if(event.target.name)setError(event.target.name)});
leadForm.addEventListener('change',event=>{if(event.target.name)setError(event.target.name)});
leadForm.addEventListener('submit',async event=>{
  event.preventDefault();
  formMessage.hidden=true;
  if(!validateForm()) return;
  const button=leadForm.querySelector('.submit');
  const label=button.querySelector('span');
  const original=label.textContent;
  button.disabled=true;
  label.textContent=translations[currentLanguage()].sending;
  try{
    const response=await fetch(leadForm.action,{method:'POST',body:new FormData(leadForm),headers:{Accept:'application/json'}});
    const result=await response.json();
    if(!response.ok||!result.success){
      if(result.errors) Object.entries(result.errors).forEach(([field,message])=>setError(field,message));
      throw new Error(result.message||'Submission failed');
    }
    leadForm.reset();
    leadForm.hidden=true;
    document.getElementById('success').hidden=false;
  }catch(error){
    formMessage.textContent=translations[currentLanguage()].server;
    formMessage.hidden=false;
  }finally{
    button.disabled=false;
    label.textContent=original;
  }
});

// Use one QR URL per display: ?mall=Display%20Name
const displayLocation=new URLSearchParams(window.location.search).get('mall');
if(displayLocation) leadForm.elements.mall_location.value=displayLocation.slice(0,150);