// ─────────── Treatments Page ───────────

const TREATMENTS = [
  {
    id: 'invisalign',
    num: '01',
    name: 'Invisalign',
    nameEm: 'Clear Aligners',
    subtitle: 'Certified Invisalign Provider · Mulund',
    badge: { val: '200+', label: 'Cases completed' },
    lead: 'Custom-scanned, nearly invisible aligners designed around your smile — not the other way around. Dr. Abhijit simulates your final result in 3D before a single tray is made.',
    body: 'Invisalign uses a series of removable, custom-fabricated clear trays to move teeth with precision. At Align-O-Dent, treatment begins with an iTero Element digital scan — no impressions, no mess. The ClinCheck software then renders a tooth-by-tooth movement simulation so you can see your projected outcome before committing. Trays are changed weekly or fortnightly, with clinic reviews every 6 weeks. Because the trays are removable, there are no dietary restrictions and oral hygiene is unchanged. Refinements and retainers are included in the treatment plan.',
    includes: [
      'Digital iTero scan (no impressions)',
      '3D ClinCheck smile simulation',
      'Full set of aligner trays',
      'Progress reviews every 6 weeks',
      'Mid-course refinements included',
      'Fixed + removable retainers',
    ],
    meta: [
      { label: 'Duration', val: '8 – 18 months' },
      { label: 'Clinic visits', val: 'Every 6 weeks' },
      { label: 'Visibility', val: 'Nearly invisible' },
      { label: 'Restriction', val: 'None' },
    ],
    doctor: { name: 'Dr. Abhijit Shanbhag', role: 'MDS Orthodontist · Invisalign Certified', img: 'assets/6841d5bbc7ab210ee6a5f546.webp' },
    img: 'Invisalign%20delivery%20/IMG-20220523-WA0043.webp',
    imgAlt: 'Patient receiving Invisalign aligner kit at Align-O-Dent, Mulund',
    flip: false,
  },
  {
    id: 'braces',
    num: '02',
    name: 'Braces',
    nameEm: 'Orthodontic Treatment',
    subtitle: 'Metal · Ceramic · Self-Ligating · Lingual',
    badge: { val: '12 yrs', label: 'Clinical experience' },
    lead: 'The gold standard for complex corrections. More force control, more precision for severe crowding, spacing, and skeletal bite issues. Dr. Abhijit has been placing braces for 12 years.',
    body: "Braces apply continuous, calibrated force to move teeth along a precise path — making them ideal for complex cases that aligners can't fully address. Metal braces use high-grade stainless steel brackets and archwires. Ceramic braces use tooth-coloured brackets for less visual impact. Self-ligating brackets (Damon) reduce friction and often cut treatment time. Lingual braces are bonded to the inside surface of teeth — entirely hidden from view. Every Align-O-Dent braces patient gets a written timeline, a fixed review schedule, and a retainer plan before treatment begins.",
    includes: [
      'Full diagnostic records + X-rays',
      'Written treatment timeline',
      'Monthly adjustment visits',
      'Emergency wire-trim visits at no charge',
      'Ceramic or metal bracket options',
      'Retainers (fixed + removable) included',
    ],
    meta: [
      { label: 'Duration', val: '12 – 24 months' },
      { label: 'Clinic visits', val: 'Monthly adjustments' },
      { label: 'Options', val: 'Metal / Ceramic / Lingual' },
      { label: 'Age', val: 'Any age' },
    ],
    doctor: { name: 'Dr. Abhijit Shanbhag', role: 'MDS Orthodontist', img: 'assets/6841d5bbc7ab210ee6a5f546.webp' },
    img: 'Invisalign%20delivery%20/IMG-20220511-WA0057.webp',
    imgAlt: 'Dr. Abhijit Shanbhag performing orthodontic treatment at Align-O-Dent Mulund',
    flip: true,
  },
  {
    id: 'implants',
    num: '03',
    name: 'Dental Implants',
    nameEm: 'Permanent Tooth Replacement',
    subtitle: 'Single · Bridge · All-on-4 · Full Arch',
    badge: { val: '100%', label: 'Handled in-house' },
    lead: 'A titanium root that fuses to bone and looks, feels, and functions like a natural tooth. No adhesives, no removal, no compromise. Bone graft and sinus lift — if needed — are handled in-house by Dr. Sonali.',
    body: 'Dental implants are the only permanent solution to tooth loss. A titanium fixture is placed into the jawbone, where it integrates over 3–4 months. A custom zirconia or E-max crown is then secured on top. The result is indistinguishable from a natural tooth. At Align-O-Dent, Dr. Sonali plans each implant case with a digital CBCT scan and surgical guide for precise placement. Full-arch cases (All-on-4, All-on-6, fixed zirconia bridges) are planned with a complete smile design before surgery begins, so you know exactly what you will look like on the day of loading.',
    includes: [
      'CBCT scan + digital implant planning',
      'Surgical guide fabrication',
      'Titanium implant fixture placement',
      'Bone graft / sinus lift if required',
      'Healing abutment',
      'Custom zirconia or E-max crown',
    ],
    meta: [
      { label: 'Implant to crown', val: '3 – 6 months' },
      { label: 'Procedure', val: 'In-house, all stages' },
      { label: 'Material', val: 'Titanium + Zirconia' },
      { label: 'Lifespan', val: '20+ years with care' },
    ],
    doctor: { name: 'Dr. Sonali Shanbhag', role: 'MDS Prosthodontist · Implant Surgeon', img: 'assets/6841d5be94e149a4b4c2134d.webp' },
    img: 'assets/6841b9038448e032b0a6938e.webp',
    imgAlt: 'Modern dental treatment unit at Align-O-Dent clinic, Mulund Mumbai',
    flip: false,
  },
  {
    id: 'crowns',
    num: '04',
    name: 'Crowns & Veneers',
    nameEm: 'Smile Design',
    subtitle: 'Zirconia · E-max · Porcelain · Veneers',
    badge: { val: '2 visits', label: 'Crown to fit' },
    lead: 'Restorations so natural that even other dentists cannot tell them apart. Every crown and veneer is shade-matched on a photo simulation before fabrication — you sign off on the look before we proceed.',
    body: "Crowns cap a damaged or root-canal-treated tooth, restoring full function and aesthetics. Veneers are thin porcelain or E-max shells bonded to the front surface of teeth to reshape, whiten or close gaps — with minimal or no enamel removal. Dr. Sonali uses digital smile design software to simulate the final result with your actual photos. Temporary restorations are placed first for wear-testing. The final crown or veneer — fabricated in zirconia, layered E-max or full-porcelain — is then cemented with a dual-cure adhesive for a permanent, precise fit.",
    includes: [
      'Digital photo smile simulation',
      'Shade-matching consultation',
      'Temporary crown for wear-testing',
      'Zirconia / E-max / porcelain options',
      'Minimal prep veneers available',
      'Full smile makeover planning',
    ],
    meta: [
      { label: 'Visits', val: '2 – 3 sittings' },
      { label: 'Crown material', val: 'Zirconia / E-max' },
      { label: 'Veneer thickness', val: '0.3 – 0.7 mm' },
      { label: 'Lifespan', val: '10 – 15 years' },
    ],
    doctor: { name: 'Dr. Sonali Shanbhag', role: 'MDS Prosthodontist · Smile Design Specialist', img: 'assets/6841d5be94e149a4b4c2134d.webp' },
    img: 'assets/6841d5bcc7ab210ee6a5f616.webp',
    imgAlt: 'Dr. Abhijit and Dr. Sonali Shanbhag at Align-O-Dent clinic inauguration, Mulund West',
    flip: true,
  },
  {
    id: 'rct',
    num: '05',
    name: 'Root Canal',
    nameEm: 'Painless Endodontics',
    subtitle: 'Single-sitting · Rotary · Apex-guided',
    badge: { val: '1 visit', label: 'Most cases' },
    lead: 'Properly anaesthetised, rotary-instrumented, and apex-located. Most patients call it easier than the toothache that brought them in. We save teeth other clinics suggest extracting.',
    body: 'Root canal treatment removes infected pulp tissue from inside the tooth, seals the canals, and restores function. The fear around RCT comes from inadequate anaesthesia and old technique — neither applies here. At Align-O-Dent, we wait for anaesthesia to take full effect (tested before starting), then use rotary NiTi files driven by an electric motor for consistent, smooth instrumentation. An electronic apex locator determines exact working length, eliminating guesswork. Bio-ceramic sealers ensure a hermetic seal. Most cases are completed in a single sitting, followed by a full-coverage crown.',
    includes: [
      'Digital intraoral X-ray',
      'Proper anaesthesia with wait time',
      'Rotary NiTi endodontics',
      'Apex locator — precise working length',
      'Bio-ceramic root canal sealer',
      'Post and core + crown if required',
    ],
    meta: [
      { label: 'Sittings', val: '1 – 2 (most in 1)' },
      { label: 'Technique', val: 'Rotary endodontics' },
      { label: 'Success rate', val: '>95%' },
      { label: 'Follow-up', val: 'Crown in 1 week' },
    ],
    doctor: { name: 'Dr. Abhijit Shanbhag', role: 'MDS Orthodontist · Endodontics', img: 'assets/6841d5bbc7ab210ee6a5f546.webp' },
    img: 'Clinic%20photos%20/_PS_3859.webp',
    imgAlt: 'Modern dental treatment unit with advanced equipment at Align-O-Dent Mulund',
    flip: false,
  },
  {
    id: 'whitening',
    num: '06',
    name: 'Teeth Whitening',
    nameEm: 'Laser Whitening',
    subtitle: 'In-Chair Session · Take-Home Trays',
    badge: { val: '8 shades', label: 'Lighter on average' },
    lead: 'One in-chair laser session combined with custom take-home trays. Up to 8 shades lighter without damaging enamel — and results that last, not just for a week.',
    body: 'Professional teeth whitening at Align-O-Dent uses a pharmaceutical-grade hydrogen peroxide gel activated by a diode laser. Unlike off-the-shelf kits, clinic-grade gels are significantly more concentrated and work on deep intrinsic staining. The in-chair session takes 60–90 minutes and is immediately followed by fitting of custom tray moulds for home maintenance. Pre-treatment shade assessment and post-treatment comparison photos are taken so you can see the exact change. Sensitivity is managed with a fluoride protocol before and after the session.',
    includes: [
      'Pre-treatment shade photography',
      'Gum barrier and protection',
      'In-chair laser whitening (60–90 min)',
      'Fluoride desensitising treatment',
      'Custom take-home trays + whitening gel',
      'Post-treatment care instructions',
    ],
    meta: [
      { label: 'Session time', val: '60 – 90 minutes' },
      { label: 'Shade change', val: 'Up to 8 shades' },
      { label: 'Sensitivity', val: 'Managed with fluoride' },
      { label: 'Maintenance', val: 'Take-home tray included' },
    ],
    doctor: { name: 'Dr. Sonali Shanbhag', role: 'MDS Prosthodontist · Cosmetic Dentistry', img: 'assets/6841d5be94e149a4b4c2134d.webp' },
    img: 'https://images.unsplash.com/photo-1508830524289-0adcbe822b40?w=900&q=85&fit=crop&auto=format',
    imgAlt: 'Bright, whitened smile result after laser teeth whitening treatment in Mulund Mumbai',
    flip: true,
  },
  {
    id: 'paediatric',
    num: '07',
    name: 'Paediatric Dentistry',
    nameEm: 'For Children',
    subtitle: 'Ages 2–14 · Fear-Free · Parents Welcome',
    badge: { val: 'Age 2+', label: 'First visit' },
    lead: 'First dental visits made calm, not scary. No fear-words, no restraints, parents stay in the room. We build habits that last a lifetime — gently.',
    body: "Children experience dental fear differently from adults, and it is usually the dentist's language and approach that creates it. At Align-O-Dent, we use the Tell-Show-Do technique and age-appropriate explanation. No word 'injection', no forceful holding, no rushing. Fluoride application protects developing enamel. Fissure sealants on molar pits and fissures prevent cavities before they form. Early orthodontic screening (from age 7) identifies developing bite problems when they are easiest and cheapest to correct. We treat children from both branches and welcome parents to sit beside their child throughout.",
    includes: [
      'Dental anxiety management (Tell-Show-Do)',
      'Fluoride application',
      'Fissure sealants on back teeth',
      'Habit correction (thumb, tongue)',
      'Early orthodontic screening (age 7+)',
      'Dietary counselling for parents',
    ],
    meta: [
      { label: 'Ages', val: '2 – 14 years' },
      { label: 'First visit', val: '30 min meet-and-greet' },
      { label: 'Parents', val: 'In room throughout' },
      { label: 'Technique', val: 'Tell-Show-Do, no fear language' },
    ],
    doctor: { name: 'Dr. Abhijit Shanbhag', role: 'MDS Orthodontist · Paediatric Care', img: 'assets/6841d5bbc7ab210ee6a5f546.webp' },
    img: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=900&q=85&fit=crop&auto=format',
    imgAlt: 'Child-friendly paediatric dental care at Align-O-Dent, Mulund Mumbai',
    flip: false,
  },
];

const CREDENTIALS = [
  {
    icon: 'sparkle',
    title: 'Invisalign Certified Provider',
    desc: 'Dr. Abhijit holds an active Invisalign certification with 200+ completed cases — one of the highest case volumes in Mulund.',
  },
  {
    icon: 'shield',
    title: 'MDS-qualified Specialists',
    desc: 'Both doctors hold MDS (Master of Dental Surgery) degrees — the highest postgraduate qualification in dentistry. Not BDS + certificate courses.',
  },
  {
    icon: 'tooth',
    title: 'In-house Lab & Digital Workflow',
    desc: 'iTero scanner, digital OPG, intraoral X-rays and CBCT all in-house. No outsourcing of diagnostics means faster turnaround and tighter quality control.',
  },
  {
    icon: 'xray',
    title: 'Full Sterilisation Protocol',
    desc: 'Autoclaved instruments, single-use consumables, CSSD protocol. Clinic photographically documented and independently certified.',
  },
];

// ── Sticky treatment index ──
const TreatmentNav = ({ active, onSelect }) => {
  const ref = React.useRef(null);
  // Auto-scroll active pill into view
  React.useEffect(() => {
    if (!ref.current) return;
    const el = ref.current.querySelector('.active');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
  }, [active]);

  return (
    <div className="tx-index">
      <div className="tx-index-inner" ref={ref}>
        {TREATMENTS.map(t => (
          <button
            key={t.id}
            className={`tx-index-btn ${active === t.id ? 'active' : ''}`}
            onClick={() => {
              onSelect(t.id);
              const el = document.getElementById(`tx-${t.id}`);
              if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }}
          >
            <span className="num">{t.num}</span>
            {t.name}
          </button>
        ))}
      </div>
    </div>
  );
};

// ── Single treatment section ──
const TreatmentSection = ({ t }) => (
  <section id={`tx-${t.id}`} className="tx-sec">
    <div className="wrap">
      <div className={`tx-split ${t.flip ? 'flip' : ''}`}>
        {/* Image side */}
        <div className="tx-img-wrap reveal">
          <img src={t.img} alt={t.imgAlt} loading="lazy" />
          <div className="tx-img-badge">
            <span className="ico"><Icon name="sparkle" size={14} /></span>
            <div className="txt">
              <b>{t.badge.val}</b>
              {t.badge.label}
            </div>
          </div>
        </div>

        {/* Content side */}
        <div className="reveal reveal-delay-1">
          <div className="tx-num">{t.num} <span>/ {TREATMENTS.length}</span></div>
          <h2 className="tx-title">{t.name} <em>—</em><br/><em>{t.nameEm}</em></h2>
          <p className="tx-subtitle">{t.subtitle}</p>
          <p className="tx-lead">{t.lead}</p>
          <p className="tx-body">{t.body}</p>

          <div className="tx-includes">
            {t.includes.map((item, i) => (
              <div key={i} className="tx-includes-item">
                <span className="ck"><Icon name="check" size={8} /></span>
                <span>{item}</span>
              </div>
            ))}
          </div>

          <div className="tx-meta">
            {t.meta.map((m, i) => (
              <div key={i} className="tx-meta-item">
                <div className="tx-meta-label">{m.label}</div>
                <div className="tx-meta-val">{m.val}</div>
              </div>
            ))}
          </div>

          <div className="tx-doctor">
            <div className="tx-doctor-avatar">
              <img src={t.doctor.img} alt={t.doctor.name} loading="lazy" />
            </div>
            <div>
              <div className="tx-doctor-name">{t.doctor.name}</div>
              <div className="tx-doctor-role">{t.doctor.role}</div>
            </div>
          </div>

          <a href="/#book" className="btn btn-primary">
            <span>Book {t.name}</span>
            <span className="arrow"><Icon name="arrow" size={11} /></span>
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ── Clinic environment section ──
const ClinicSection = () => (
  <section className="tx-clinic">
    <div className="wrap">
      <div className="reveal">
        <p className="eyebrow" style={{color:'var(--gold-soft)'}}><span className="dot"></span>The clinic</p>
        <h2>Designed for<br/><em>calm.</em> Built for <em>precision.</em></h2>
        <p className="tx-clinic-sub">Both branches run the same sterilisation protocol, digital workflow and equipment spec. The experience is consistent whether you visit Mulund East or Mulund West.</p>
      </div>
      <div className="tx-clinic-grid reveal reveal-delay-1">
        <div className="tx-clinic-img">
          <img src="assets/6841b904c407b172433cbf11.webp" alt="Reception area of Align-O-Dent dental clinic, Mulund West" loading="lazy" />
        </div>
        <div className="tx-clinic-img">
          <img src="assets/6841b9038448e032b0a6938e.webp" alt="Modern dental treatment chair at Align-O-Dent, Mulund" loading="lazy" />
        </div>
        <div className="tx-clinic-img">
          <img src="assets/6841b9053c58e20d650bc5e2.webp" alt="Clinic interior design at Align-O-Dent Mulund West" loading="lazy" />
        </div>
        <div className="tx-clinic-img">
          <img src="assets/6841d5bbc7ab210ee6a5f546.webp" alt="Dr. Abhijit and Dr. Sonali Shanbhag at Align-O-Dent clinic" loading="lazy" />
        </div>
        <div className="tx-clinic-img">
          <img src="Clinic%20photos%20/_PS_3858.webp" alt="Clinic reception desk at Align-O-Dent Mulund" loading="lazy" />
        </div>
      </div>
    </div>
  </section>
);

// ── Credentials section ──
const CredentialsSection = () => (
  <section className="tx-creds">
    <div className="wrap">
      <div className="tx-creds-grid">
        <div className="reveal">
          <div className="tx-creds-img">
            <img src="assets/6841b907847b9ea108320b4f.webp" alt="Dr. Abhijit and Dr. Sonali Shanbhag's degrees and certifications displayed at Align-O-Dent clinic" loading="lazy" />
          </div>
        </div>
        <div className="reveal reveal-delay-1">
          <p className="eyebrow" style={{marginBottom:12}}><span className="dot"></span>Credentials</p>
          <h2 style={{fontFamily:'var(--serif)',fontWeight:'var(--serif-weight)',fontSize:'clamp(28px,3.5vw,42px)',letterSpacing:'var(--serif-tracking)',lineHeight:1.05,margin:'0 0 32px',color:'var(--ink)'}}>
            Qualified first.<br/><em style={{color:'var(--aubergine)',fontStyle:'italic'}}>Experienced second.</em>
          </h2>
          <div className="tx-creds-list">
            {CREDENTIALS.map((c, i) => (
              <div key={i} className="tx-cred-item">
                <div className="tx-cred-icon"><Icon name={c.icon} size={20} /></div>
                <div>
                  <div className="tx-cred-title">{c.title}</div>
                  <div className="tx-cred-desc">{c.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── Treatments TopBar (custom — "Treatments" is the active page) ──

// ── Scroll spy hook ──
const useActiveTreatment = () => {
  const [active, setActive] = React.useState(TREATMENTS[0].id);
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(e => {
          if (e.isIntersecting) setActive(e.target.id.replace('tx-', ''));
        });
      },
      { rootMargin: '-140px 0px -60% 0px', threshold: 0 }
    );
    TREATMENTS.forEach(t => {
      const el = document.getElementById(`tx-${t.id}`);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, []);
  return [active, setActive];
};

// ── Page ──
const TreatmentsPage = () => {
  useReveal();
  const [active, setActive] = useActiveTreatment();

  return (
    <>
      <PageTopBar active="treatments" />

      {/* Hero */}
      <div className="tx-hero">
        <div className="tx-hero-bg" aria-hidden="true" />
        <div className="wrap">
          <div className="tx-hero-content">
            <p className="eyebrow" style={{color:'var(--gold-soft)'}}>
              <span className="dot"></span>Mulund · Mumbai · Since 2018
            </p>
            <h1>Every treatment,<br/>planned <em>before</em><br/>you sit down.</h1>
            <p className="tx-hero-sub">
              Seven specialist services. Two MDS doctors. One clinic that tells you exactly what you need, what it costs, and how long it takes — in writing, before treatment begins.
            </p>
            <div className="tx-hero-stats">
              <div className="tx-hero-stat"><div className="n">7</div><div className="l">Specialist services</div></div>
              <div className="tx-hero-stat"><div className="n">3,000+</div><div className="l">Patients treated</div></div>
              <div className="tx-hero-stat"><div className="n">4.9★</div><div className="l">Google rating</div></div>
              <div className="tx-hero-stat"><div className="n">2 MDS</div><div className="l">Qualified specialists</div></div>
            </div>
          </div>
        </div>
      </div>

      {/* Sticky treatment nav */}
      <TreatmentNav active={active} onSelect={setActive} />

      {/* All 7 treatment sections */}
      {TREATMENTS.map(t => <TreatmentSection key={t.id} t={t} />)}

      {/* Clinic environment */}
      <ClinicSection />

      {/* Credentials */}
      <CredentialsSection />

      {/* CTA */}
      <section className="tx-cta">
        <div className="wrap">
          <p className="eyebrow" style={{color:'var(--gold-soft)',marginBottom:12}}>
            <span className="dot"></span>Free consultation · No pressure
          </p>
          <h2>Not sure which<br/>treatment you <em>need?</em></h2>
          <p>Book a free 20-minute consultation. Bring your X-rays, your questions, your concerns. Leave with a written plan, a clear timeline, and an honest cost estimate.</p>
          <div className="tx-cta-btns">
            <a href="/#book" className="tx-cta btn-gold">
              Book Free Consult <Icon name="arrow" size={14} />
            </a>
            <a href="https://wa.me/919321859061" target="_blank" rel="noopener noreferrer" className="tx-cta btn-ghost-light">
              <Icon name="whatsapp" size={16} /> WhatsApp Us
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
};

// Stub useTweaks if not loaded
if (!window.useTweaks) {
  window.useTweaks = (d) => [d, () => {}];
}

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