const stepsData = [
  {
    icon:'fa-user-plus', minutes:'2 mins',
    title:'Quick Registration',
    lead:'Sign up in under 2 minutes with your Australian details',
    text:"Provide your basic information, verify your email, and you're ready to start playing!",
    ok:'Quick & Secure Process'
  },
  {
    icon:'fa-id-card', minutes:'1–2 mins',
    title:'KYC Verification',
    lead:'Verify your identity once — fully compliant with AU standards',
    text:'Upload ID securely and pass automated checks with bank-level encryption.',
    ok:'Gov-grade security'
  },
  {
    icon:'fa-bolt', minutes:'Instant',
    title:'Instant Deposit',
    lead:'Top up instantly with major AU banks & cards',
    text:'Use PayID, card or bank transfer. Funds appear immediately in your balance.',
    ok:'No fees on deposit'
  },
  {
    icon:'fa-sack-dollar', minutes:'Instant',
    title:'Fast Payouts',
    lead:'Cash out to your bank in seconds — 24/7',
    text:'Withdrawals are processed automatically to Australian bank accounts.',
    ok:'Real-time transfers'
  },
];

const tabs = document.querySelectorAll('.steps .tab');
const dots = document.querySelectorAll('.steps .dot');
const card = document.querySelector('.stepcard');
const title = card.querySelector('.stepcard__title');
const lead = card.querySelector('.stepcard__lead');
const text = card.querySelector('.stepcard__text');
const ok = card.querySelector('.stepcard__ok');
const badge = card.querySelector('.bicon');
const time = card.querySelector('.pill--time');
const tileBadge = card.querySelector('.tile-icon__badge i');

function setStep(i){
  const s = stepsData[i];
  tabs.forEach(t=>t.classList.toggle('is-active', t.dataset.step==i));
  dots.forEach(d=>d.classList.toggle('is-active', d.dataset.step==i));
  title.textContent = s.title;
  lead.textContent = s.lead;
  text.textContent = s.text;
  ok.innerHTML = `<i class="fa-regular fa-circle-check"></i> ${s.ok}`;
  time.innerHTML = `<i class="fa-regular fa-clock"></i> ${s.minutes}`;
  badge.innerHTML = `<i class="fa-solid ${s.icon}"></i>`;
  tileBadge.className = `fa-solid ${s.icon}`;
}
tabs.forEach(t=>t.addEventListener('click',()=>setStep(+t.dataset.step)));
dots.forEach(d=>d.addEventListener('click',()=>setStep(+d.dataset.step)));

// init
setStep(0);