/* ============================================================ CONTACT / NOIDA STORE ============================================================ */
function ContactPage(){
  const [form,setForm] = useState({ name:'', phone:'', purpose:'', msg:'' });
  const [sent,setSent] = useState(false);
  const set = (k,v)=>setForm(f=>({...f,[k]:v}));
  const waMsg = `Hi Rudraa Ratna, I'm ${form.name||'(name)'}.
Purpose: ${form.purpose||'general enquiry'}
${form.msg||''}
(Phone: ${form.phone||'-'})`;

  return (
    <main>
      <Breadcrumb items={[{label:'Home',page:'home'},{label:'Contact'}]}/>
      <section className="section tight">
        <div className="wrap">
          <Reveal className="section-head center"><span className="eyebrow no-rule">Visit · Call · WhatsApp</span><h1 className="h1" style={{ marginTop:10 }}>Rudraa Ratna support in Noida</h1><p>Behind every order is a team that knows these products. Message us for guidance, product availability and visit details.</p></Reveal>

          <div className="contact-grid mt10">
            {/* info cards */}
            <Reveal className="contact-info">
              <div className="cinfo card">
                <span className="cinfo__ic"><Icon name="pin" size={22}/></span>
                <div><h4>Location</h4><p>{RR.settings.storeAddr.split(',').map((line,i)=><React.Fragment key={i}>{i>0&&<br/>}{line.trim()}</React.Fragment>)}<br/><span className="muted">Exact visit address shared on WhatsApp before visit.</span></p><a className="link-underline" href={"https://maps.google.com/?q="+encodeURIComponent(RR.settings.storeCity)} target="_blank" rel="noopener">View Noida area <Icon name="chevR" size={14}/></a></div>
              </div>
              <div className="cinfo card">
                <span className="cinfo__ic"><Icon name="clock" size={22}/></span>
                <div><h4>Timings</h4><p>{RR.settings.timings}<br/>{RR.settings.timingsAlt}</p></div>
              </div>
              <div className="cinfo card">
                <span className="cinfo__ic"><Icon name="phone" size={22}/></span>
                <div><h4>Talk to us</h4><p><a className="link-underline" href={`tel:+${RR.WA_NUMBER}`}>{RR.WA_DISPLAY}</a>{RR.settings.email ? <React.Fragment><br/><a className="link-underline" href={`mailto:${RR.settings.email}`}>{RR.settings.email}</a></React.Fragment> : <React.Fragment><br/><span className="muted">Email support will be added soon.</span></React.Fragment>}</p></div>
              </div>
              <a className="cinfo cinfo--wa" href={RR.wa("Hi Rudraa Ratna, I'd like to visit / enquire.")} target="_blank" rel="noopener">
                <span className="cinfo__ic" style={{ background:'rgba(31,168,85,.12)', color:'var(--wa)' }}><WaGlyph size={22}/></span>
                <div><h4>Chat on WhatsApp</h4><p className="muted">Fastest replies · usually within minutes</p></div>
                <Icon name="arrow" size={18}/>
              </a>
            </Reveal>

            {/* map + form */}
            <Reveal className="contact-main" delay={0.1}>
              <div className="contact-map">
                <div className="contact-map__grid"/>
                <div className="contact-map__pin"><span className="contact-map__dot"/><Icon name="pin" size={30}/></div>
                <div className="contact-map__label card"><b>{RR.settings.brandName}</b><span>{RR.settings.storeCity}</span></div>
                <span className="contact-map__road contact-map__road--1"/>
                <span className="contact-map__road contact-map__road--2"/>
              </div>

              <div className="contact-form card">
                {!sent ? (
                  <React.Fragment>
                    <h3 className="h3">Send an enquiry</h3>
                    <p className="muted" style={{ fontSize:14, marginTop:4 }}>We'll reply on WhatsApp. Prefer instant? Use the green button.</p>
                    <div className="contact-form__rows mt4">
                      <div className="field"><label>Your name</label><input className="input" value={form.name} onChange={e=>set('name',e.target.value)} placeholder="e.g. Shivani"/></div>
                      <div className="field"><label>Phone</label><input className="input" value={form.phone} onChange={e=>set('phone',e.target.value)} placeholder="+91 …"/></div>
                    </div>
                    <div className="field mt3"><label>What are you seeking?</label>
                      <select className="select" value={form.purpose} onChange={e=>set('purpose',e.target.value)}>
                        <option value="">Choose a purpose…</option>
                        {RR.PURPOSES.map(p=><option key={p.id} value={p.label}>{p.label}</option>)}
                        <option value="A specific product">A specific product</option>
                        <option value="General guidance">General guidance</option>
                      </select>
                    </div>
                    <div className="field mt3"><label>Message <span className="muted">(optional)</span></label><textarea className="input" value={form.msg} onChange={e=>set('msg',e.target.value)} placeholder="Tell us a little about what you're looking for…"/></div>
                    <div className="contact-form__cta mt4">
                      <a className="btn btn-wa btn-lg" href={RR.wa(waMsg)} target="_blank" rel="noopener" onClick={()=>setTimeout(()=>setSent(true),300)}><WaGlyph/> Send on WhatsApp</a>
                      <button className="btn btn-ghost btn-lg" onClick={()=>setSent(true)}>Submit enquiry</button>
                    </div>
                  </React.Fragment>
                ) : (
                  <div className="contact-form__done">
                    <span className="cw__check"><Icon name="check" size={26}/></span>
                    <h3 className="h2">Thank you{form.name?`, ${form.name}`:''}!</h3>
                    <p className="muted">We've noted your enquiry. We'll reach out shortly — or message us anytime on WhatsApp for the fastest reply.</p>
                    <a className="btn btn-wa btn-lg" href={RR.wa(waMsg)} target="_blank" rel="noopener"><WaGlyph/> Continue on WhatsApp</a>
                  </div>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* local trust */}
      <section className="section tight" style={{ background:'var(--ivory-2)', borderTop:'1px solid var(--line)' }}>
        <div className="wrap">
          <div className="local-trust">
            {[
              { ic:'pin', b:'Noida-led support', s:'Exact visit details shared on WhatsApp' },
              { ic:'cert', b:'Certificate-ready products', s:'Documentation where applicable' },
              { ic:'truck', b:'Delivered across India', s:'Safe, insured shipping nationwide' },
              { ic:'hand', b:'Guidance, not selling', s:'Honest, belief-based recommendations' },
            ].map((t,i)=>(
              <Reveal key={i} className="local-trust__item" delay={i*0.06}><span className="lt-ic"><Icon name={t.ic} size={24}/></span><div><b>{t.b}</b><span>{t.s}</span></div></Reveal>
            ))}
          </div>
        </div>
      </section>

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

Object.assign(window, { ContactPage });