/* ============================================================ CONSULTATION ============================================================ */
function ConsultWizard(){
  const { go } = useContext(Nav);
  const [step,setStep] = useState(0);
  const [ans,setAns] = useState({ purpose:[], who:'', exp:'', budget:'' });
  const steps = [
    { key:'purpose', q:'What are you seeking?', hint:'Pick one or more. This shapes everything.', multi:true,
      opts:RR.PURPOSES.map(p=>({ v:p.id, label:p.label, deva:p.deva, glyph:p.glyph })) },
    { key:'who', q:'Who is it for?', hint:'So we tailor the guidance.',
      opts:[{v:'Myself',label:'Myself'},{v:'A gift',label:'A gift'},{v:'Family',label:'Family member'},{v:'My business',label:'My business / shop'}] },
    { key:'exp', q:'Have you worn spiritual products before?', hint:'No wrong answer — it helps us explain the right amount.',
      opts:[{v:'First time',label:'First time'},{v:'A few',label:"I've worn a few"},{v:'Experienced',label:'Experienced wearer'}] },
    { key:'budget', q:"What's your comfortable budget?", hint:'We respect every budget.',
      opts:[{v:'Under ₹1,500',label:'Under ₹1,500'},{v:'₹1,500–₹5,000',label:'₹1,500 – ₹5,000'},{v:'₹5,000+',label:'₹5,000 & above'},{v:'Guide me',label:'Not sure — guide me'}] },
  ];
  const done = step>=steps.length;
  const cur = steps[step];

  const pick = (key,v,multi)=>{
    setAns(a=>{
      if(multi){ const arr=a[key].includes(v)?a[key].filter(x=>x!==v):[...a[key],v]; return {...a,[key]:arr}; }
      return {...a,[key]:v};
    });
    if(!multi) setTimeout(()=>setStep(s=>s+1),220);
  };
  const canNext = cur && (cur.multi ? ans[cur.key].length>0 : ans[cur.key]);

  const recs = (()=>{
    let l = RR.PRODUCTS.filter(p=>ans.purpose.length===0 || p.purposes.some(x=>ans.purpose.includes(x)));
    if(ans.budget==='Under ₹1,500') l=l.filter(p=>p.price<1500);
    if(ans.budget==='₹1,500–₹5,000') l=l.filter(p=>p.price>=1500&&p.price<=5000);
    if(ans.budget==='₹5,000+') l=l.filter(p=>p.price>5000);
    l=[...l].sort((a,b)=>a.price-b.price);
    if(l.length===0) l=RR.PRODUCTS.filter(p=>p.purposes.some(x=>ans.purpose.includes(x)));
    return l.slice(0,3);
  })();

  const waMsg = `Hi Rudraa Ratna, here's what I'm looking for —
• Purpose: ${ans.purpose.map(p=>RR.purpose(p).label).join(', ')||'open to guidance'}
• For: ${ans.who||'—'}
• Experience: ${ans.exp||'—'}
• Budget: ${ans.budget||'—'}
${recs.length?'• Interested in: '+recs.map(r=>r.name).join(', '):''}
Please guide me on the best choice.`;

  if(done){
    return (
      <div className="cw cw--result">
        <div className="cw__resulthead">
          <span className="cw__check"><Icon name="check" size={26}/></span>
          <h3 className="h2">Here's what we'd suggest</h3>
          <p className="muted">Based on {ans.purpose.map(p=>RR.purpose(p).label).join(' & ')||'your needs'}{ans.budget&&ans.budget!=='Guide me'?` · ${ans.budget}`:''}. These are starting points — let's refine together on WhatsApp.</p>
        </div>
        <div className="cw__recs">
          {recs.map((p,i)=><ProductCard key={p.id} p={p} delay={i*0.06}/>)}
        </div>
        <div className="cw__resultcta">
          <a className="btn btn-wa btn-lg" href={RR.wa(waMsg)} target="_blank" rel="noopener"><WaGlyph/> Continue on WhatsApp</a>
          <button className="btn btn-ghost btn-lg" onClick={()=>{ setStep(0); setAns({purpose:[],who:'',exp:'',budget:''}); }}>Start over</button>
        </div>
        <p className="cw__note muted">Your WhatsApp message is pre-filled with these answers — just hit send.</p>
      </div>
    );
  }

  return (
    <div className="cw">
      <div className="cw__progress">
        {steps.map((s,i)=><span key={i} className={`cw__dot ${i<step?'is-done':''} ${i===step?'is-now':''}`}/>)}
        <span className="cw__progress-txt">Step {step+1} of {steps.length}</span>
      </div>
      <div className="cw__q" key={step}>
        <h3 className="h2">{cur.q}</h3>
        <p className="muted">{cur.hint}</p>
        <div className={`cw__opts ${cur.key==='purpose'?'cw__opts--grid':''}`}>
          {cur.opts.map(o=>{
            const active = cur.multi ? ans[cur.key].includes(o.v) : ans[cur.key]===o.v;
            return (
              <button key={o.v} className={`cw__opt ${active?'is-active':''}`} onClick={()=>pick(cur.key,o.v,cur.multi)}>
                {o.glyph && <span className="cw__opt-ic"><PurposeGlyph glyph={o.glyph} size={22}/></span>}
                <span className="cw__opt-lbl">{o.label}</span>
                {o.deva && <span className="cw__opt-deva deva">{o.deva}</span>}
                {active && <span className="cw__opt-check"><Icon name="check" size={14}/></span>}
              </button>
            );
          })}
        </div>
      </div>
      <div className="cw__nav">
        <button className="btn btn-ghost" disabled={step===0} onClick={()=>setStep(s=>Math.max(0,s-1))}>Back</button>
        {cur.multi && <button className="btn btn-maroon" disabled={!canNext} onClick={()=>setStep(s=>s+1)}>Continue <Icon name="arrow" size={16}/></button>}
      </div>
    </div>
  );
}

function ConsultationPage(){
  const steps = [
    { ic:'message', t:'Tell us your purpose', d:'Prosperity, protection, peace, business growth — or simply ask. Use the guide here or message us directly.' },
    { ic:'hand', t:'Get honest guidance', d:'We recommend by purpose and authenticity, never by what we want to sell. Belief-based, never exaggerated.' },
    { ic:'cert', t:'Receive your selected piece', d:'Your chosen product arrives prepared with documentation where applicable, delivered across India.' },
  ];
  return (
    <main>
      <Breadcrumb items={[{label:'Home',page:'home'},{label:'Consultation'}]}/>
      <section className="consult-hero">
        <div className="wrap consult-hero__in">
          <Reveal className="consult-hero__copy">
            <span className="eyebrow">Guided Buying · <span className="deva">परामर्श</span></span>
            <h1 className="h1" style={{ marginTop:12 }}>Choose with guidance.<br/>Buy with certainty.</h1>
            <p className="lead mt3">Spiritual products are easier to choose when they fit <i>you</i>. Answer a few simple questions and we'll point you to the right Rudraksha, gemstone or crystal — free, and without pressure.</p>
            <div className="consult-hero__stats mt6">
              <div><b>WhatsApp</b><span>guided buying</span></div>
              <div><b>Free</b><span>consultation</span></div>
              <div><b>&lt;5 min</b><span>on WhatsApp</span></div>
            </div>
          </Reveal>
          <Reveal className="consult-hero__art" delay={0.1}><div className="consult-orb consult-orb--light"><GemArt stone="citrine" form="bracelet" size={240}/></div></Reveal>
        </div>
      </section>

      <section className="section tight">
        <div className="wrap">
          <div className="cw-wrap card"><ConsultWizard/></div>
        </div>
      </section>

      <section className="section tight" style={{ background:'var(--ivory-2)', borderBlock:'1px solid var(--line)' }}>
        <div className="wrap">
          <Reveal className="section-head center"><span className="eyebrow no-rule">Simple & sincere</span><h2 className="h2">How consultation works</h2></Reveal>
          <div className="how-grid mt8">
            {steps.map((s,i)=>(
              <Reveal key={i} className="how-card" delay={i*0.08}>
                <span className="how-num">{i+1}</span>
                <span className="how-ic"><Icon name={s.ic} size={24}/></span>
                <h3 className="h3">{s.t}</h3><p>{s.d}</p>
              </Reveal>
            ))}
          </div>
          <Reveal className="center mt8"><a className="btn btn-wa btn-lg" href={RR.wa("Hi Rudraa Ratna, I'd like a free consultation.")} target="_blank" rel="noopener"><WaGlyph/> Or just message us now</a></Reveal>
        </div>
      </section>

      <PageAnswers page="consultation"/>
      <TrustDisclaimer/>
    </main>
  );
}

Object.assign(window, { ConsultationPage, ConsultWizard });