// ─────────── Doctors ───────────
const DOCTORS = [
  {
    id: 'abhijit',
    name: 'Dr. Abhijit Shanbhag',
    specialty: 'Co-Founder · Head Orthodontist & Dentofacial Orthopaedist',
    bio: 'MDS in Orthodontics from NITTE University. Certified Invisalign provider. Specialises in braces, clear aligners, smile design, and complex bite correction — with a written plan in your hands before any wire is placed.',
    cred: [
      { k: 'MDS', v: 'NITTE University' },
      { k: 'Invisalign', v: 'Certified Provider' },
      { k: 'Cases treated', v: '2,500+' },
      { k: 'Experience', v: '12+ years' },
    ],
    tag: 'Treating since 2014',
    quote: 'Each treatment is curated to the patient\'s specific dental needs. Happy patient, happy us.',
  },
  {
    id: 'sonali',
    name: 'Dr. Sonali Shanbhag',
    specialty: 'Co-Founder · Head Prosthodontist & Implantologist',
    bio: 'MDS in Prosthodontics & Implantology from KLE VKIDS. Member of the Indian Prosthodontic Society. Best Poster Award winner at the 24th IPS Convention. Specialises in implants, crowns, full-mouth rehabilitation, and smile restoration.',
    cred: [
      { k: 'MDS', v: 'KLE VKIDS' },
      { k: 'Membership', v: 'Indian Prosthodontic Society' },
      { k: 'Restorations', v: '1,800+' },
      { k: 'Experience', v: '10+ years' },
    ],
    tag: 'Treating since 2016',
    quote: 'A calm chair, a confident plan, and a result that quietly speaks for itself.',
  },
];

const DoctorsSection = () => {
  const [active, setActive] = React.useState('abhijit');
  const doc = DOCTORS.find(d => d.id === active);
  return (
    <section id="doctors" className="doctors">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <p className="eyebrow"><span className="dot"></span>The team</p>
            <h2 className="display">Meet the <i>Shanbhags</i>.</h2>
          </div>
          <p>A husband-and-wife specialist team, treating Mulund families since 2018. The kind of dental duo where one finishes the other's sentences, and the rest of your treatment plan.</p>
        </div>

        <div className="docs-grid">
          <div className="docs-photo reveal">
            <img src="assets/doctors.webp" alt="Dr. Abhijit and Dr. Sonali Shanbhag" />
            <div className="frame-tag">Mulund West · 2024</div>
            <div className="overlay"></div>
            <div className="signed">
              <div>
                <div className="name">Dr. Abhijit &amp; Dr. Sonali</div>
                <div className="role">Co-founders, Align-O-Dent</div>
              </div>
              <div style={{fontFamily:'var(--serif)', fontSize: 30, fontStyle:'italic', opacity:0.9}}>2018→</div>
            </div>
          </div>

          <div className="reveal reveal-delay-1" style={{minHeight: 560}}>
            <div className="doc-tabs">
              {DOCTORS.map(d => (
                <button
                  key={d.id}
                  onClick={() => setActive(d.id)}
                  className={`doc-tab ${active === d.id ? 'active' : ''}`}
                >{d.name.replace('Dr. ', 'Dr. ').split(' Shanbhag')[0]}</button>
              ))}
            </div>

            <div className="doc-info" key={doc.id} style={{animation: 'fadeIn 400ms ease'}}>
              <h3>{doc.name}</h3>
              <div className="specialty">{doc.specialty}</div>
              <p>{doc.bio}</p>
              <p style={{fontFamily:'var(--serif)', fontStyle:'italic', color:'var(--aubergine)', fontSize: 18, marginBottom: 32}}>
                "{doc.quote}"
              </p>

              <div className="doc-cred">
                {doc.cred.map(c => (
                  <div className="doc-cred-item" key={c.k}>
                    <div className="k">{c.k}</div>
                    <div className="v">{c.v}</div>
                  </div>
                ))}
              </div>

              <div style={{marginTop: 32, display:'flex', gap:12, flexWrap:'wrap'}}>
                <Btn kind="primary" onClick={() => scrollTo('book')}>Book with {doc.name.split(' ')[1]}</Btn>
                <a href="/doctors" className="btn btn-ghost" style={{textDecoration:'none'}}>
                  <span>Full Profile</span>
                  <span className="arrow"><Icon name="arrow" size={11} /></span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}`}</style>
    </section>
  );
};

// ─────────── Treatment showcase ───────────
const TREATMENTS = [
  {
    id: 'invisalign',
    name: 'Invisalign',
    label: '01 / Aligners',
    h: 'Clear aligners, designed in 3D.',
    desc: 'Custom-trayed clear aligners that nobody notices. We scan with iTero, simulate your final smile before you commit, then ship trays in pre-numbered weekly sets.',
    stats: [{k:'Avg. duration', v:'8–14 mo'}, {k:'Visits', v:'Every 6 wks'}, {k:'Visibility', v:'Near-invisible'}],
    incl: ['Digital scan', 'ClinCheck simulation', 'Refinements', 'Retainers'],
  },
  {
    id: 'braces',
    name: 'Braces',
    label: '02 / Orthodontics',
    h: 'Metal, ceramic, lingual.',
    desc: 'Self-ligating systems that need fewer adjustments and feel gentler than what you remember from school. Ceramic for the camera-shy. Lingual for the truly stealthy.',
    stats: [{k:'Avg. duration', v:'12–24 mo'}, {k:'Adjustments', v:'Every 4 wks'}, {k:'Pain rating', v:'Low'}],
    incl: ['Self-ligating', 'Ceramic', 'Lingual', 'Damon system'],
  },
  {
    id: 'implants',
    name: 'Dental Implants',
    label: '03 / Restorative',
    h: 'Titanium roots, lifetime bite.',
    desc: 'Single-tooth replacement to full-arch All-on-4. Bone graft, sinus lift and immediate-load options in-house. No shuttling between clinics.',
    stats: [{k:'Success rate', v:'98%'}, {k:'Healing', v:'3–4 mo'}, {k:'Warranty', v:'5 years'}],
    incl: ['CBCT planning', 'All-on-4', 'Bone graft', 'Immediate load'],
  },
  {
    id: 'crowns',
    name: 'Crowns & Veneers',
    label: '04 / Cosmetic',
    h: 'Photo-mocked smile design.',
    desc: 'Zirconia, layered porcelain, and ultra-thin E-max veneers. We show you a digital preview before any tooth prep so the result is never a surprise.',
    stats: [{k:'Materials', v:'Zirconia · E-max'}, {k:'Visits', v:'2–3'}, {k:'Longevity', v:'15+ yrs'}],
    incl: ['Digital smile design', 'Wax-up trial', 'Shade matching', 'Bite analysis'],
  },
  {
    id: 'rct',
    name: 'Root Canal',
    label: '05 / Endodontics',
    h: 'Single-sitting, painless RCT.',
    desc: 'Rotary endodontics with apex locators. Most patients leave saying "that was it?" Anaesthesia is given time to work, and we don\'t rush the rinse.',
    stats: [{k:'Duration', v:'45–90 min'}, {k:'Sittings', v:'Usually 1'}, {k:'Pain', v:'Numb start'}],
    incl: ['Rotary instruments', 'Apex locator', 'Crown after', 'Follow-up scan'],
  },
  {
    id: 'whitening',
    name: 'Whitening',
    label: '06 / Cosmetic',
    h: 'Up to 8 shades, in one chair.',
    desc: 'In-chair laser whitening for events, plus take-home trays for gradual results. Sensitivity management is built into the protocol, not an afterthought.',
    stats: [{k:'Sitting', v:'60 min'}, {k:'Shades', v:'4–8 lighter'}, {k:'Duration', v:'~12 mo'}],
    incl: ['Pre-clean', 'Laser-activated', 'Sensitivity gel', 'Take-home kit'],
  },
];

const TreatmentsSection = () => {
  const [active, setActive] = React.useState('invisalign');
  const t = TREATMENTS.find(x => x.id === active);
  return (
    <section id="treatments" className="sec sec-dark">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <p className="eyebrow"><span className="dot"></span>Signature treatments</p>
            <h2 className="display" style={{color:'var(--cream)'}}>Pick a chair.<br/><i style={{color:'var(--gold-soft)'}}>We'll walk you through it.</i></h2>
          </div>
          <p>Hover the list to preview. Every treatment is planned in writing. What we're doing, how long it takes, what it costs, before you sit down.</p>
        </div>

        <div className="treat-row reveal reveal-delay-1">
          <ul className="treat-list" style={{listStyle:'none', padding:0, margin:0}}>
            {TREATMENTS.map(tt => (
              <li
                key={tt.id}
                className={`treat-item ${active === tt.id ? 'active' : ''}`}
                onMouseEnter={() => setActive(tt.id)}
                onClick={() => setActive(tt.id)}
              >
                <span className="name">{tt.name}</span>
                <span className="marker"></span>
              </li>
            ))}
          </ul>

          <div className="treat-detail" key={t.id} style={{animation:'slideIn 500ms cubic-bezier(.2,.7,.2,1)'}}>
            <div className="label">{t.label}</div>
            <h3>{t.h}</h3>
            <p className="desc">{t.desc}</p>

            <div className="treat-stats">
              {t.stats.map(s => (
                <div className="treat-stat" key={s.k}>
                  <div className="k">{s.k}</div>
                  <div className="v">{s.v}</div>
                </div>
              ))}
            </div>

            <div className="treat-includes">
              {t.incl.map(i => <span key={i}>{i}</span>)}
            </div>

            <div style={{marginTop: 36, display:'flex', gap: 12}}>
              <button className="btn btn-primary" style={{background:'var(--gold)', color:'var(--aubergine)'}} onClick={() => scrollTo('book')}>
                <span>Book {t.name}</span>
                <span className="arrow" style={{background:'var(--aubergine)'}}><Icon name="arrow" size={11} /></span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <style>{`@keyframes slideIn { from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}`}</style>
    </section>
  );
};

// ─────────── Before / After ───────────
const SmileSVG = ({ variant }) => {
  // Two illustrated states: crooked and aligned
  if (variant === 'before') {
    return (
      <svg viewBox="0 0 400 220" className="ba-mouth" fill="none">
        <ellipse cx="200" cy="110" rx="180" ry="90" fill="#2a0e30" />
        <ellipse cx="200" cy="118" rx="150" ry="62" fill="#5C2A4E" />
        {/* Crooked teeth */}
        {[0,1,2,3,4,5,6,7,8,9,10,11].map((i) => {
          const x = 60 + i * 24;
          const rot = (i % 2 === 0 ? -1 : 1) * (5 + (i % 3) * 6);
          const yOff = (i % 3) * 4 - 2;
          return (
            <g key={i} transform={`translate(${x}, ${85 + yOff}) rotate(${rot})`}>
              <rect width="20" height="34" rx="5" fill="#F0E6D2" stroke="rgba(58,19,64,.4)" strokeWidth="1"/>
            </g>
          );
        })}
      </svg>
    );
  }
  return (
    <svg viewBox="0 0 400 220" className="ba-mouth" fill="none">
      <ellipse cx="200" cy="110" rx="180" ry="90" fill="#3A1340" />
      <ellipse cx="200" cy="118" rx="150" ry="62" fill="#7B2D8E" />
      {[0,1,2,3,4,5,6,7,8,9,10,11].map((i) => {
        const x = 60 + i * 24;
        return (
          <g key={i} transform={`translate(${x}, 86)`}>
            <rect width="20" height="34" rx="5" fill="#FFFEFB" stroke="rgba(58,19,64,.2)" strokeWidth="1"/>
            <rect x="2" y="2" width="6" height="10" rx="2" fill="rgba(255,255,255,.7)" />
          </g>
        );
      })}
    </svg>
  );
};

const BEFORE_AFTER_CASES = [
  { id: 'crowded',  label: 'Crowding', months: '14 months · Invisalign' },
  { id: 'gap',      label: 'Spacing',  months: '11 months · Ceramic braces' },
  { id: 'overbite', label: 'Overbite', months: '18 months · Self-ligating' },
];

const BeforeAfterSection = () => {
  const [split, setSplit] = React.useState(50);
  const [activeCase, setActiveCase] = React.useState('crowded');
  const stageRef = React.useRef(null);
  const dragging = React.useRef(false);

  const move = React.useCallback((clientX) => {
    if (!stageRef.current) return;
    const r = stageRef.current.getBoundingClientRect();
    const pct = Math.max(4, Math.min(96, ((clientX - r.left) / r.width) * 100));
    setSplit(pct);
  }, []);

  React.useEffect(() => {
    const onMove = (e) => { if (dragging.current) move(e.clientX || e.touches?.[0]?.clientX); };
    const onUp = () => { dragging.current = false; document.body.style.cursor = ''; };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('touchmove', onMove);
    window.addEventListener('mouseup', onUp);
    window.addEventListener('touchend', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('touchmove', onMove);
      window.removeEventListener('mouseup', onUp);
      window.removeEventListener('touchend', onUp);
    };
  }, [move]);

  const c = BEFORE_AFTER_CASES.find(x => x.id === activeCase);

  return (
    <section className="sec">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <p className="eyebrow"><span className="dot"></span>Smile transformations</p>
            <h2 className="display">Drag to see<br/><i>the difference</i>.</h2>
          </div>
          <p>Real case archetypes from our practice, not stock photos. Slide the handle to compare before and after, and tap a case below to switch.</p>
        </div>

        <div className="reveal reveal-delay-1">
          <div
            className="ba-stage"
            ref={stageRef}
            onMouseDown={(e) => { dragging.current = true; document.body.style.cursor = 'ew-resize'; move(e.clientX); }}
            onTouchStart={(e) => { dragging.current = true; move(e.touches[0].clientX); }}
            style={{'--split': `${split}%`}}
          >
            <div className="ba-side before">
              <img src="assets/ba_before.webp" alt="Before treatment" className="ba-photo" />
              <span className="tag">Before</span>
            </div>
            <div className="ba-side after" style={{clipPath: `inset(0 0 0 ${split}%)`}}>
              <img src="assets/ba_after.webp" alt="After treatment" className="ba-photo" />
              <span className="tag">After · {c.months}</span>
            </div>
            <div className="ba-handle" style={{left: `${split}%`}}>
              <div className="ba-knob"><Icon name="drag" size={20}/></div>
            </div>
          </div>

          <div className="ba-controls">
            {BEFORE_AFTER_CASES.map(b => (
              <button
                key={b.id}
                className={`ba-chip ${activeCase === b.id ? 'active' : ''}`}
                onClick={() => setActiveCase(b.id)}
              >{b.label} · {b.months.split(' · ')[0]}</button>
            ))}
            <button className="ba-chip" onClick={() => scrollTo('book')} style={{borderStyle:'dashed'}}>+ Get my own preview</button>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { DoctorsSection, TreatmentsSection, BeforeAfterSection });