/* Treatment page renderer — uses window.TREATMENT_ID + window.TREATMENTS */
const { useState: tUseState } = React;

function TreatmentHero({ t, id }){
  return (
    <section id="home" className="thero">
      <div className="container">
        <a href={(window.HOME_PATH || '#') === '#' ? '#home' : window.HOME_PATH.replace(/#$/, '')} className="thero-back">
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Icon.Arrow size={12} /></span> All treatments
        </a>
        <div className="thero-grid">
          <div>
            <span className="eyebrow">{t.eyebrow}</span>
            <h1>{t.h1}</h1>
            <p className="thero-tag">{t.tagline}</p>
            <p className="thero-lead">{t.what}</p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={() => smoothScroll('contact')}>
                <Icon.Calendar size={16} /> Book appointment
              </button>
              <a className="btn btn-whats btn-lg" href="https://wa.me/919930457845?text=Hello%2C%20I%27d%20like%20to%20book%20an%20appointment%20at%20Puneet%20Dental%20Clinic.">
                <Icon.Whatsapp size={16} /> WhatsApp
              </a>
              <a className="btn btn-ghost btn-lg" href="tel:+919930457845">
                <Icon.Phone size={16} /> Call
              </a>
            </div>
          </div>
          <div className="thero-visual">
            <image-slot id={`thero-${id}`} src={t.heroImg ? '../' + t.heroImg : undefined} alt={`${t.h1} at Puneet Dental Clinic in Andheri West`} loading="eager" fetchpriority="high" shape="rect" placeholder={t.heroPlaceholder || `Add a photo for ${t.h1}`} style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhyChoose({ items }){
  return (
    <section className="twhy">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Why choose this treatment</span>
          <h2>The benefits, <em>simply put.</em></h2>
        </div>
        <div className="twhy-grid">
          {items.map((it, i) => (
            <div key={i} className="twhy-item">
              <div className="ic"><Icon.Check size={16} /></div>
              <div>{it}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process({ steps }){
  return (
    <section className="tprocess">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">How it works</span>
          <h2>What to expect, <em>step by step.</em></h2>
          <p>No surprises. Every stage is explained before we start.</p>
        </div>
        <div className="tprocess-grid">
          {steps.map((s, i) => (
            <div key={i} className="tprocess-step">
              <div className="step-num">{i + 1}</div>
              <div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Results({ pairs, id, h1 }){
  if (!pairs || !pairs.length) return null;
  return (
    <section className="tresults">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Real cases</span>
          <h2>Before &amp; after — <em>actual patients.</em></h2>
          <p>Cases treated at our clinic, shared with patient consent. Results vary case to case.</p>
        </div>
        <div className="tresults-grid">
          {pairs.map((p, i) => {
            const key = p.k || p;
            return (
            <div key={i} className="tresult-card">
              <div className="tresult-pair">
                <div className="tresult-img">
                  <image-slot id={`tres-${id}-${key}-b`} src={p.b ? '../' + p.b : undefined} alt={`${h1} before treatment, patient case ${i + 1}`} loading="lazy" shape="rect" placeholder="Drop a 'before' case photo" style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
                  <span className="tresult-label tresult-label-before">Before</span>
                </div>
                <div className="tresult-img">
                  <image-slot id={`tres-${id}-${key}-a`} src={p.a ? '../' + p.a : undefined} alt={`${h1} after treatment, patient case ${i + 1}`} loading="lazy" shape="rect" placeholder="Drop an 'after' case photo" style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
                  <span className="tresult-label tresult-label-after">After</span>
                </div>
              </div>
              <div className="tresult-caption">Case {i + 1} · treated at Puneet Dental Clinic</div>
            </div>
          );})}
        </div>
      </div>
    </section>
  );
}

function TreatmentFAQ({ faqs, h1 }){
  const [open, setOpen] = tUseState(0);
  return (
    <section id="faq" className="faq">
      <div className="container faq-grid">
        <div className="faq-side">
          <span className="eyebrow">Common questions</span>
          <h2>Honest answers about <em>{h1.toLowerCase()}.</em></h2>
          <p>If you have a question that isn't covered here, WhatsApp the clinic — we try to answer the same day.</p>
          <a className="btn btn-whats" href="https://wa.me/919930457845?text=Hello%2C%20I%27d%20like%20to%20book%20an%20appointment%20at%20Puneet%20Dental%20Clinic.">
            <Icon.Whatsapp size={16} /> WhatsApp the clinic
          </a>
        </div>
        <div className="faq-list">
          {faqs.map((f, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-toggle"><Icon.Plus size={14} /></span>
              </button>
              {open === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function RelatedTreatments({ currentId }){
  const all = Object.entries(window.TREATMENTS).filter(([id]) => id !== currentId);
  // Pick 4 related — first 4 after current in catalog
  const related = all.slice(0, 4);
  return (
    <section className="trelated">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Other treatments</span>
          <h2>You may also be looking for</h2>
        </div>
        <div className="trelated-grid">
          {related.map(([rid, rt]) => {
            const RI = Icon[rt.ic] || Icon.Tooth;
            return (
              <a key={rid} href={`${rid}.html`} className="trelated-card">
                <div className="trelated-img trelated-ico"><RI size={34} /></div>
                <div className="trelated-body">
                  <h4>{rt.h1}</h4>
                  <span className="trelated-link">Learn more <Icon.Arrow size={12} /></span>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function TreatmentApp(){
  const id = window.TREATMENT_ID;
  const t = window.TREATMENTS[id];
  const [lightbox, setLightbox] = tUseState(null);

  if (!t){
    return <div style={{ padding: 60, textAlign: 'center' }}>Treatment not found.</div>;
  }

  return (
    <>
      <Nav active="services" />
      <main>
        <TreatmentHero t={t} id={id} />
        <WhyChoose items={t.why} />
        <Process steps={t.process} />
        <Results pairs={t.results} id={id} h1={t.h1} />
        <TreatmentFAQ faqs={t.faqs} h1={t.h1} />
        <RelatedTreatments currentId={id} />
        <Contact defaultTreatment={t.h1} />
      </main>
      <Footer />
      <MobileBar />
      <Lightbox src={lightbox} onClose={() => setLightbox(null)} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<TreatmentApp />);