// ─────────── Meet the Experts Page ───────────

const DR_ABHIJIT = {
  name: 'Dr. Abhijit Shanbhag',
  title: 'Co-Founder · Head Orthodontist',
  subtitle: 'MDS Orthodontics & Dentofacial Orthopaedics',
  initials: 'AS',
  photo: 'assets/6841d5bbc7ab210ee6a5f546.webp',
  education: [
    { degree: 'BDS', inst: 'Maharashtra University of Health Sciences', year: 'Graduation' },
    { degree: 'MDS', inst: 'A.B. Shetty Memorial Institute of Dental Sciences, NITTE University', detail: 'Orthodontics & Dentofacial Orthopaedics', year: 'Post-Graduation' },
    { degree: 'Cert.', inst: 'Invisalign Fundamentals Training Course', detail: 'Certified Invisalign Provider', year: 'Certification' },
  ],
  expertise: [
    'Braces — Metal, Ceramic, Self-Ligating, Lingual',
    'Invisalign & Clear Aligner Therapy',
    'Smile Design & Facial Aesthetics',
    'Dentofacial Orthopaedics',
    'Adult & Adolescent Orthodontic Correction',
    'Complex Bite Correction & Jaw Alignment',
    'Non-surgical Orthodontic Correction',
    'Personalised Treatment Planning',
  ],
  stats: [
    { n: '12+', l: 'Years treating' },
    { n: '2,500+', l: 'Cases treated' },
    { n: 'Invisalign', l: 'Certified Provider' },
    { n: 'NITTE', l: 'MDS University' },
  ],
  quote: 'Each treatment is curated to the patient\'s specific dental needs. I explain every step before it happens — no surprises, no rush, no compromises.',
  bio: 'Dr. Abhijit Shanbhag is the co-founder and Head Orthodontist at Align-O-Dent. He completed his BDS from Maharashtra University of Health Sciences and pursued his MDS in Orthodontics and Dentofacial Orthopaedics from A.B. Shetty Memorial Institute of Dental Sciences, NITTE University — one of India\'s premier dental institutions.\n\nAs a certified Invisalign provider, Dr. Abhijit combines modern aligner technology with traditional orthodontic precision. He consults across Mumbai and is known for transformations that go beyond straight teeth — improving facial profile, bite function, and long-term oral health.\n\nHis approach is unhurried and methodical. Every patient receives a written treatment timeline, cost estimate, and outcome simulation before any wire is placed or any aligner is handed over.',
};

const DR_SONALI = {
  name: 'Dr. Sonali Abhijit Shanbhag',
  title: 'Co-Founder · Head Prosthodontist & Implantologist',
  subtitle: 'MDS Prosthodontics & Implantology',
  initials: 'SS',
  photo: 'assets/6841d5bcc7ab210ee6a5f616.webp',
  education: [
    { degree: 'BDS', inst: 'Goa Dental College (GDC), Goa', year: 'Graduation' },
    { degree: 'MDS', inst: 'KLE VK Institute of Dental Sciences (VKIDS)', detail: 'Prosthodontics, Crown & Bridge and Implantology', year: 'Post-Graduation' },
    { degree: 'Master', inst: 'Osstem Professional Master Course, Mumbai', detail: 'Implant Systems — Advanced Training', year: 'Advanced Cert.' },
  ],
  expertise: [
    'Dental Implants — Single, Multiple & All-on-4',
    'Crowns, Bridges & Zirconia Restorations',
    'Veneers & Smile Design',
    'Complete & Partial Dentures',
    'Full Mouth Rehabilitation',
    'Smile Restoration & Esthetic Dentistry',
    'Maxillofacial Prosthetics',
    'Oral Rehabilitation with Biocompatible Substitutes',
  ],
  memberships: [
    'Member — Indian Prosthodontic Society (IPS)',
  ],
  awards: [
    { title: 'Best Poster Award', event: '24th IPS National Convention', detail: 'Scientific paper presentation' },
  ],
  stats: [
    { n: '10+', l: 'Years treating' },
    { n: '1,800+', l: 'Restorations' },
    { n: 'IPS', l: 'Member' },
    { n: 'KLE VKIDS', l: 'MDS University' },
  ],
  quote: 'A calm chair, a confident plan, and a result that quietly speaks for itself.',
  bio: 'Dr. Sonali Abhijit Shanbhag is the co-founder and Head Prosthodontist & Implantologist at Align-O-Dent. She completed her dental graduation from Goa Dental College (GDC) and pursued her MDS specialisation in Prosthodontics and Implantology from KLE VK Institute of Dental Sciences (VKIDS) — a nationally recognised centre of dental excellence.\n\nA member of the Indian Prosthodontic Society (IPS), she has presented scientific papers at national conferences and was awarded the Best Poster Award at the 24th IPS Convention. She has also completed an advanced Osstem Professional Master Course in implant systems, ensuring her implant work is backed by the latest evidence.\n\nDr. Sonali is known for her patient-focused approach — taking time to understand both functional needs and aesthetic aspirations. Her restorations are designed to look, feel, and function like natural teeth, with outcomes that restore confidence as much as they restore oral health.',
};

// ── Education Timeline ──
const EducationRow = ({ items, dark }) => (
  <div style={{display:'flex', flexDirection:'column', gap:16, margin:'28px 0'}}>
    {items.map((e, i) => (
      <div key={i} style={{display:'flex', gap:18, alignItems:'flex-start'}}>
        <div style={{
          flexShrink:0, width:52, height:52, borderRadius:'var(--r-lg)',
          background: dark ? 'rgba(201,167,92,.18)' : 'rgba(74,14,78,.1)',
          border: dark ? '1px solid rgba(201,167,92,.35)' : '1px solid rgba(74,14,78,.15)',
          display:'grid', placeItems:'center',
          fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.12em',
          color: dark ? 'var(--gold-soft)' : 'var(--aubergine)',
          textTransform:'uppercase', textAlign:'center', lineHeight:1.3, padding:4
        }}>{e.degree}</div>
        <div>
          <div style={{fontFamily:'var(--sans)', fontWeight:500, fontSize:15, lineHeight:1.3,
            color: dark ? 'rgba(250,246,240,.95)' : 'var(--ink)'
          }}>{e.inst}</div>
          {e.detail && <div style={{fontSize:13, marginTop:3,
            color: dark ? 'rgba(250,246,240,.58)' : 'var(--muted)'
          }}>{e.detail}</div>}
          <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.12em', textTransform:'uppercase', marginTop:4,
            color: dark ? 'rgba(201,167,92,.75)' : 'var(--aubergine)', opacity: dark ? 1 : .8
          }}>{e.year}</div>
        </div>
      </div>
    ))}
  </div>
);

// ── Expertise Checklist ──
const ExpertiseList = ({ items, dark }) => (
  <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'10px 24px', margin:'24px 0'}}>
    {items.map((item, i) => (
      <div key={i} style={{display:'flex', alignItems:'flex-start', gap:10}}>
        <span style={{
          flexShrink:0, width:18, height:18, borderRadius:'50%',
          background: dark ? 'rgba(201,167,92,.18)' : 'rgba(74,14,78,.08)',
          display:'grid', placeItems:'center', marginTop:1
        }}>
          <Icon name="check" size={10} />
        </span>
        <span style={{fontSize:13, color: dark ? 'rgba(250,246,240,.82)' : 'var(--ink-2)', lineHeight:1.5}}>{item}</span>
      </div>
    ))}
  </div>
);

// ── Stat strip ──
const StatStrip = ({ stats, dark }) => (
  <div style={{
    display:'flex', gap:0, borderTop:`1px solid ${dark ? 'rgba(250,246,240,.14)' : 'var(--line)'}`,
    marginTop:32, paddingTop:28, flexWrap:'wrap'
  }}>
    {stats.map((s, i) => (
      <div key={i} style={{flex:'1 1 100px', paddingRight:24, marginBottom:8}}>
        <div style={{
          fontFamily:'var(--serif)', fontWeight:'var(--serif-weight)',
          fontSize:26, letterSpacing:'-0.03em', lineHeight:1,
          color: dark ? 'var(--gold-soft)' : 'var(--aubergine)'
        }}>{s.n}</div>
        <div style={{
          fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.14em',
          textTransform:'uppercase', color: dark ? 'rgba(250,246,240,.5)' : 'var(--muted)',
          marginTop:4
        }}>{s.l}</div>
      </div>
    ))}
  </div>
);

// ── Award Badge ──
const AwardBadge = ({ award }) => (
  <div style={{
    display:'inline-flex', alignItems:'center', gap:12,
    padding:'12px 18px', borderRadius:'var(--r-lg)',
    background:'rgba(201,167,92,.12)', border:'1px solid rgba(201,167,92,.3)',
    margin:'8px 0'
  }}>
    <span style={{fontSize:20}}>🏆</span>
    <div>
      <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:14, color:'var(--gold-soft)'}}>{award.title}</div>
      <div style={{fontSize:12, color:'rgba(250,246,240,.6)', marginTop:1}}>{award.event} · {award.detail}</div>
    </div>
  </div>
);

// ── Dr. Sonali Section (light, first) ──
const DrSonaliSection = () => (
  <section className="dr-sec dr-sec-light" id="dr-sonali">
    <div className="wrap">
      <div className="dr-split">

        {/* LEFT: photo + expertise + award + membership + stats */}
        <div className="dr-photo-col reveal">
          <div className="dr-photo-wrap">
            <img src="assets/6841d5bcc7ab210ee6a5f616.webp" alt="Dr. Sonali Shanbhag — Prosthodontist at Align-O-Dent, Mulund" loading="lazy" className="dr-photo" style={{objectPosition:'left top'}} />
            <div className="dr-photo-badge dr-photo-badge-gold">
              <span className="dr-photo-num">01</span>
              <span>Prosthodontist</span>
            </div>
          </div>
          <div style={{marginTop:28}}>
            <h4 style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>Areas of Expertise</h4>
            <ExpertiseList items={DR_SONALI.expertise} />
            {DR_SONALI.awards && DR_SONALI.awards.map((a, i) => (
              <div key={i} style={{
                display:'inline-flex', alignItems:'center', gap:12,
                padding:'12px 18px', borderRadius:'var(--r-lg)',
                background:'rgba(201,167,92,.1)', border:'1px solid rgba(201,167,92,.25)',
                margin:'8px 0'
              }}>
                <span style={{fontSize:20}}>🏆</span>
                <div>
                  <div style={{fontFamily:'var(--sans)', fontWeight:600, fontSize:14, color:'#8a6a1a'}}>{a.title}</div>
                  <div style={{fontSize:12, color:'var(--muted)', marginTop:1}}>{a.event} · {a.detail}</div>
                </div>
              </div>
            ))}
            <div style={{marginTop:12}}>
              {DR_SONALI.memberships.map((m, i) => (
                <div key={i} style={{
                  display:'inline-flex', alignItems:'center', gap:8,
                  padding:'8px 16px', borderRadius:'var(--r-pill)',
                  background:'rgba(74,14,78,.07)', border:'1px solid rgba(74,14,78,.14)',
                  fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.1em',
                  color:'var(--aubergine)', marginRight:8, marginBottom:8
                }}>
                  <Icon name="shield" size={13} />{m}
                </div>
              ))}
            </div>
            <StatStrip stats={DR_SONALI.stats} />
          </div>
        </div>

        {/* RIGHT: bio + education + CTA */}
        <div className="dr-content-col reveal reveal-delay-1">
          <p className="eyebrow"><span className="dot"></span>Head Prosthodontist & Implantologist · Co-Founder</p>
          <h2 style={{fontFamily:'var(--serif)', fontWeight:'var(--serif-weight)', fontSize:'clamp(28px,3.5vw,48px)', letterSpacing:'var(--serif-tracking)', lineHeight:1.05, color:'var(--ink)', margin:'12px 0 6px'}}>
            Dr. Sonali<br/><em style={{color:'var(--aubergine)'}}>Shanbhag</em>
          </h2>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--muted)', marginBottom:20}}>MDS Prosthodontics & Implantology</div>

          {DR_SONALI.bio.split('\n\n').map((p, i) => (
            <p key={i} style={{fontSize:15, color:'var(--ink-2)', lineHeight:1.75, marginBottom:14}}>{p}</p>
          ))}

          <blockquote style={{
            fontFamily:'var(--serif)', fontStyle:'italic', fontSize:18,
            color:'var(--aubergine)', borderLeft:'3px solid var(--gold)',
            paddingLeft:20, margin:'24px 0', lineHeight:1.5
          }}>"{DR_SONALI.quote}"</blockquote>

          <h4 style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--muted)', marginBottom:4, marginTop:24}}>Education & Credentials</h4>
          <EducationRow items={DR_SONALI.education} />

          <div style={{marginTop:28, display:'flex', gap:12, flexWrap:'wrap'}}>
            <a href="/#book" className="btn btn-primary">
              <span>Book with Dr. Sonali</span>
              <span className="arrow"><Icon name="arrow" size={11} /></span>
            </a>
            <a href="/treatments" className="btn btn-ghost">
              <span>Treatments</span>
              <span className="arrow"><Icon name="arrow" size={11} /></span>
            </a>
          </div>
        </div>

      </div>
    </div>
  </section>
);

// ── Dr. Abhijit Section (dark, second) ──
const DrAbhijitSection = () => (
  <section className="dr-sec dr-sec-dark" id="dr-abhijit">
    <div className="wrap">
      <div className="dr-split dr-split-flip">

        {/* content col (visually left via order:1) */}
        <div className="dr-content-col reveal">
          <p className="eyebrow" style={{color:'var(--gold-soft)'}}><span className="dot"></span>Head Orthodontist · Co-Founder</p>
          <h2 style={{fontFamily:'var(--serif)', fontWeight:'var(--serif-weight)', fontSize:'clamp(28px,3.5vw,48px)', letterSpacing:'var(--serif-tracking)', lineHeight:1.05, color:'var(--cream)', margin:'12px 0 6px'}}>
            Dr. Abhijit<br/><em style={{color:'var(--gold-soft)'}}>Shanbhag</em>
          </h2>
          <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.16em', textTransform:'uppercase', color:'rgba(250,246,240,.45)', marginBottom:20}}>MDS Orthodontics & Dentofacial Orthopaedics</div>

          {DR_ABHIJIT.bio.split('\n\n').map((p, i) => (
            <p key={i} style={{fontSize:15, color:'rgba(250,246,240,.78)', lineHeight:1.75, marginBottom:14}}>{p}</p>
          ))}

          <blockquote style={{
            fontFamily:'var(--serif)', fontStyle:'italic', fontSize:18,
            color:'var(--gold-soft)', borderLeft:'3px solid var(--gold)',
            paddingLeft:20, margin:'24px 0', lineHeight:1.5
          }}>"{DR_ABHIJIT.quote}"</blockquote>

          <h4 style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'rgba(250,246,240,.6)', marginBottom:4, marginTop:24}}>Education & Credentials</h4>
          <EducationRow items={DR_ABHIJIT.education} dark />

          <div style={{marginTop:28, display:'flex', gap:12, flexWrap:'wrap'}}>
            <a href="/#book" className="btn btn-primary" style={{background:'var(--gold)', borderColor:'var(--gold)', color:'var(--ink)'}}>
              <span>Book with Dr. Abhijit</span>
              <span className="arrow" style={{background:'rgba(15,7,21,.15)', color:'var(--ink)'}}><Icon name="arrow" size={11} /></span>
            </a>
            <a href="/treatments" className="btn btn-ghost" style={{borderColor:'rgba(250,246,240,.2)', color:'var(--cream)'}}>
              <span>Treatments</span>
              <span className="arrow" style={{background:'rgba(250,246,240,.1)'}}><Icon name="arrow" size={11} /></span>
            </a>
          </div>
        </div>

        {/* photo col (visually right via order:2): photo + expertise + stats */}
        <div className="dr-photo-col reveal reveal-delay-1">
          <div className="dr-photo-wrap">
            <img src={DR_ABHIJIT.photo} alt="Dr. Abhijit Shanbhag — Orthodontist at Align-O-Dent, Mulund" loading="lazy" className="dr-photo" style={{objectPosition:'center top'}} />
            <div className="dr-photo-badge">
              <span className="dr-photo-num">02</span>
              <span>Orthodontist</span>
            </div>
          </div>
          <div style={{marginTop:28}}>
            <h4 style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:'rgba(250,246,240,.6)', marginBottom:8}}>Areas of Expertise</h4>
            <ExpertiseList items={DR_ABHIJIT.expertise} dark />
            <StatStrip stats={DR_ABHIJIT.stats} dark />
          </div>
        </div>

      </div>
    </div>
  </section>
);

// ── Credentials Wall ──
const CredentialsWallSection = () => (
  <section style={{background:'var(--paper)', padding:'100px 0'}}>
    <div className="wrap">
      <div className="reveal" style={{marginBottom:52}}>
        <p className="eyebrow"><span className="dot"></span>Qualifications & Certifications</p>
        <h2 style={{fontFamily:'var(--serif)', fontWeight:'var(--serif-weight)', fontSize:'clamp(30px,4vw,52px)', letterSpacing:'var(--serif-tracking)', lineHeight:1.05, color:'var(--ink)', margin:'10px 0 14px'}}>
          Every frame on<br/><em style={{color:'var(--aubergine)'}}>that wall, earned.</em>
        </h2>
        <p style={{color:'var(--muted)', fontSize:16, maxWidth:520, margin:0, lineHeight:1.65}}>
          NITTE University, KLE VKIDS, Invisalign, Osstem, Goa University — the credentials aren't just on the wall. They're in every diagnosis and treatment plan.
        </p>
      </div>
      <div className="reveal reveal-delay-1" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:40, alignItems:'start'}}>
        <div style={{borderRadius:'var(--r-xl)', overflow:'hidden', boxShadow:'var(--shadow-lg)'}}>
          <img src="assets/6841b907847b9ea108320b4f.webp" alt="Wall of degrees and certifications at Align-O-Dent — NITTE, KLE VKIDS, Invisalign, Goa University" loading="lazy" style={{width:'100%', height:'auto', display:'block'}} />
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:20}}>
          {[
            { who: 'Dr. Abhijit', degree: 'MDS — Orthodontics & Dentofacial Orthopaedics', inst: 'A.B. Shetty / NITTE University', icon: 'tooth' },
            { who: 'Dr. Abhijit', degree: 'Invisalign Certified Provider', inst: 'Invisalign Fundamentals Training Course', icon: 'sparkle' },
            { who: 'Dr. Abhijit', degree: 'BDS', inst: 'Maharashtra University of Health Sciences', icon: 'tooth' },
            { who: 'Dr. Sonali', degree: 'MDS — Prosthodontics & Implantology', inst: 'KLE VK Institute of Dental Sciences (VKIDS)', icon: 'crown' },
            { who: 'Dr. Sonali', degree: 'BDS', inst: 'Goa Dental College (GDC), Goa University', icon: 'tooth' },
            { who: 'Dr. Sonali', degree: 'Osstem Professional Master Course', inst: 'Implant Systems — Advanced Training', icon: 'shield' },
            { who: 'Dr. Sonali', degree: 'Best Poster Award — 24th IPS Convention', inst: 'Indian Prosthodontic Society', icon: 'star' },
          ].map((item, i) => (
            <div key={i} style={{display:'flex', gap:16, alignItems:'flex-start', padding:'16px 20px', borderRadius:'var(--r-lg)', background:'white', boxShadow:'0 1px 8px rgba(0,0,0,.06)'}}>
              <div style={{
                flexShrink:0, width:40, height:40, borderRadius:10,
                background: item.who === 'Dr. Abhijit' ? 'rgba(74,14,78,.08)' : 'rgba(201,167,92,.12)',
                display:'grid', placeItems:'center',
                color: item.who === 'Dr. Abhijit' ? 'var(--aubergine)' : 'var(--gold)'
              }}>
                <Icon name={item.icon} size={16} />
              </div>
              <div style={{flex:1}}>
                <div style={{fontFamily:'var(--mono)', fontSize:9, letterSpacing:'.14em', textTransform:'uppercase', color: item.who === 'Dr. Abhijit' ? 'var(--aubergine)' : 'var(--gold)', marginBottom:3}}>{item.who}</div>
                <div style={{fontWeight:500, fontSize:14, color:'var(--ink)', lineHeight:1.3}}>{item.degree}</div>
                <div style={{fontSize:12, color:'var(--muted)', marginTop:2}}>{item.inst}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ── Together Section ──
const TogetherSection = () => (
  <section style={{background:'var(--aubergine)', padding:'100px 0', overflow:'hidden', position:'relative'}}>
    <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse 65% 60% at 70% 50%, rgba(201,167,92,.12) 0%, transparent 70%)', pointerEvents:'none'}} />
    <div className="wrap">
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'center'}}>
        <div className="reveal">
          <p className="eyebrow" style={{color:'var(--gold-soft)'}}><span className="dot"></span>Their story · Since 2018</p>
          <h2 style={{fontFamily:'var(--serif)', fontWeight:'var(--serif-weight)', fontSize:'clamp(28px,3.8vw,52px)', letterSpacing:'var(--serif-tracking)', lineHeight:1.05, color:'var(--cream)', margin:'12px 0 24px'}}>
            A clinic built on<br/><em style={{color:'var(--gold-soft)'}}>a shared vision.</em>
          </h2>
          <p style={{color:'rgba(250,246,240,.78)', fontSize:16, lineHeight:1.75, marginBottom:18}}>
            Dr. Abhijit and Dr. Sonali Shanbhag founded Align-O-Dent in 2018 on one conviction: patients in Mulund deserved a specialist orthodontist and a specialist prosthodontist together, in a single clinic, working as a team.
          </p>
          <p style={{color:'rgba(250,246,240,.65)', fontSize:15, lineHeight:1.75, marginBottom:18}}>
            Most dental clinics offer general dentistry. Most specialists practice alone. Here, a patient with a crooked bite, missing teeth, and a desire to improve their smile gets both specialists at one address — with treatment plans that are coordinated, not conflicting.
          </p>
          <p style={{color:'rgba(250,246,240,.65)', fontSize:15, lineHeight:1.75}}>
            Seven years and 3,000+ patients later, that conviction turned out to be right.
          </p>
          <div style={{display:'flex', gap:32, marginTop:36, paddingTop:28, borderTop:'1px solid rgba(250,246,240,.14)'}}>
            {[{n:'2018', l:'Founded'}, {n:'3,000+', l:'Patients treated'}, {n:'2', l:'MDS Specialists'}].map((s, i) => (
              <div key={i}>
                <div style={{fontFamily:'var(--serif)', fontWeight:'var(--serif-weight)', fontSize:28, color:'var(--gold-soft)', lineHeight:1}}>{s.n}</div>
                <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.14em', textTransform:'uppercase', color:'rgba(250,246,240,.45)', marginTop:4}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="reveal reveal-delay-1">
          <div style={{borderRadius:'var(--r-xl)', overflow:'hidden', boxShadow:'0 24px 80px rgba(0,0,0,.4)', position:'relative'}}>
            <img src="assets/6841d5bbc7ab210ee6a5f546.webp" alt="Dr. Abhijit and Dr. Sonali Shanbhag, co-founders of Align-O-Dent, Mulund" loading="lazy" style={{width:'100%', height:'auto', display:'block'}} />
            <div style={{position:'absolute', bottom:0, left:0, right:0, padding:'20px 24px', background:'linear-gradient(to top, rgba(15,7,21,.85) 0%, transparent 100%)'}}>
              <div style={{fontFamily:'var(--sans)', fontWeight:500, fontSize:14, color:'var(--cream)'}}>Dr. Abhijit & Dr. Sonali Shanbhag</div>
              <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.12em', textTransform:'uppercase', color:'var(--gold-soft)', marginTop:3}}>Co-Founders · Align-O-Dent · Est. 2018</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ── CTA ──
const DoctorsCTA = () => (
  <section style={{background:'var(--paper)', padding:'100px 0', textAlign:'center'}}>
    <div className="wrap" style={{maxWidth:640}}>
      <p className="eyebrow" style={{marginBottom:14}}><span className="dot"></span>Free first consultation</p>
      <h2 style={{fontFamily:'var(--serif)', fontWeight:'var(--serif-weight)', fontSize:'clamp(30px,4vw,52px)', letterSpacing:'var(--serif-tracking)', lineHeight:1.05, color:'var(--ink)', margin:'0 0 18px'}}>
        Ready to meet<br/><em style={{color:'var(--aubergine)'}}>your specialist?</em>
      </h2>
      <p style={{color:'var(--muted)', fontSize:16, lineHeight:1.7, marginBottom:36}}>
        Book a free 20-minute consultation with Dr. Abhijit or Dr. Sonali. Bring your X-rays, your questions, your concerns — and leave with a clear, written plan.
      </p>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <a href="/#book" className="btn btn-primary">
          <span>Book Free Consult</span>
          <span className="arrow"><Icon name="arrow" size={11} /></span>
        </a>
        <a href="https://wa.me/919321859061" target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
          <span>WhatsApp Us</span>
          <span className="arrow" style={{background:'rgba(74,14,78,.08)'}}><Icon name="whatsapp" size={11} /></span>
        </a>
      </div>
    </div>
  </section>
);

// ── Page Hero ──
const DoctorsHero = () => (
  <section className="dh-hero">
    <div className="dh-hero-bg" aria-hidden="true" />
    <div className="wrap">
      <div className="dh-hero-content">
        <p className="eyebrow" style={{color:'var(--gold-soft)'}}>
          <span className="dot"></span>The Specialists · Align-O-Dent, Mulund
        </p>
        <h1>Two specialists.<br/>One clinic.<br/><em>Complete care.</em></h1>
        <p className="dh-hero-sub">
          Dr. Abhijit and Dr. Sonali Shanbhag built Align-O-Dent on a simple idea — every patient deserves both a specialist orthodontist and a specialist prosthodontist, under one roof.
        </p>
        <div className="dh-hero-stats">
          <div className="dh-hero-stat"><div className="n">3,000+</div><div className="l">Patients treated</div></div>
          <div className="dh-hero-stat"><div className="n">4.9★</div><div className="l">Google rating</div></div>
          <div className="dh-hero-stat"><div className="n">2 MDS</div><div className="l">Qualified specialists</div></div>
          <div className="dh-hero-stat"><div className="n">7 yrs</div><div className="l">Serving Mulund</div></div>
        </div>
        <div style={{display:'flex', gap:12, flexWrap:'wrap', marginTop:32}}>
          <a href="#dr-sonali" className="btn btn-primary" style={{background:'var(--gold)', borderColor:'var(--gold)', color:'var(--ink)'}}>
            <span>Dr. Sonali</span>
            <span className="arrow" style={{background:'rgba(15,7,21,.15)', color:'var(--ink)'}}><Icon name="arrow" size={11} /></span>
          </a>
          <a href="#dr-abhijit" className="btn btn-ghost" style={{borderColor:'rgba(250,246,240,.25)', color:'var(--cream)'}}>
            <span>Dr. Abhijit</span>
            <span className="arrow" style={{background:'rgba(250,246,240,.1)'}}><Icon name="arrow" size={11} /></span>
          </a>
        </div>
      </div>
    </div>
  </section>
);

// ── Root Page ──
const DoctorsPage = () => {
  useReveal();
  return (
    <>
      <PageTopBar active="doctors" />
      <DoctorsHero />
      <DrSonaliSection />
      <DrAbhijitSection />
      <CredentialsWallSection />
      <TogetherSection />
      <DoctorsCTA />
      <Footer />
    </>
  );
};

if (!window.useTweaks) {
  window.useTweaks = (defaults) => {
    const [t] = React.useState(defaults);
    return [t, () => {}];
  };
}

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