// scenes-doctors.jsx — Doctors + Stats

/* ============================================================
   4. DOCTORS — two cards, generous, with portrait placeholders
   ============================================================ */
function DoctorsScene() {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia('(max-width: 880px)');
    const update = () => setIsMobile(mq.matches);
    update();
    mq.addEventListener('change', update);
    return () => mq.removeEventListener('change', update);
  }, []);

  const doctors = [
    {
      name: 'Dr. Anikesh Raj',
      title: 'Dental Surgeon · BDS',
      role: 'Patient-focused · Continuing the family legacy',
      bio: 'A young, patient-focused dental surgeon with hands-on experience treating more than 5,000 patients across procedures including root canals, cleanings, extractions, and prosthetic rehabilitation. Emphasises hygiene, precision, and modern comfort — carrying forward a second-generation family legacy in dentistry.',
      stats: [
        { v: '5,000+', l: 'Patients treated' },
        { v: '100%',   l: 'Aseptic protocol' },
        { v: 'BIDSH',   l: 'Buddha Institute of Dental Sciences & Hospital' },
      ],
      tag: 'PRACTICING PARTNER',
      img: 'assets/dr-anikesh.jpg',
      pos: '50% 18%',
    },
    {
      name: 'Dr. Santosh Kumar Singh',
      title: 'Senior Dental Surgeon · BDS',
      role: 'Founder · The first generation',
      bio: 'A senior dental surgeon with more than two decades of practice and a treatment history of over 100,000 patients. His specialties span root canals, crowns & bridges, cosmetic dentistry, orthodontics, surgeries, and implants — known throughout Patna for ethical treatment, precision, and long-term patient trust.',
      stats: [
        { v: '1 Lakh+',   l: 'Patients treated' },
        { v: '20+',       l: 'Years of practice' },
        { v: '7',         l: 'Specialty domains' },
      ],
      tag: 'FOUNDER',
      img: 'assets/dr-santosh.jpg',
      pos: '50% 22%',
    },
  ];

  return (
    <section id="doctors" className="full" style={{
      background: 'linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 100%)',
      padding: 'clamp(80px, 13vw, 200px) clamp(20px, 6vw, 96px) clamp(70px, 9vw, 90px)',
      minHeight: 'auto',
    }}>
      <div style={{ maxWidth: 1380, margin: '0 auto' }}>
        {/* Section header */}
        <div style={{ textAlign: 'center', marginBottom: 'clamp(50px, 8vw, 80px)' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 18 }}>● Meet the Doctors</div>
          </Reveal>
          <Reveal delay={0.06}>
            <h2 className="h-serif" style={{
              fontSize: 'clamp(34px, 5vw, 76px)',
              margin: 0, color: 'var(--navy)', fontWeight: 400,
              maxWidth: 900, marginInline: 'auto', lineHeight: 1.1,
            }}>
              Quiet hands. <span className="accent">Honest counsel.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.14}>
            <div className="divider-leaf" style={{ margin: '30px auto 0', justifyContent: 'center' }}>
              <span className="line" />
              <LeafOrnament size={22} />
              <span className="line" />
            </div>
          </Reveal>
        </div>

        {/* Doctor cards — mobile vs desktop */}
        {isMobile ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 80 }}>
            {doctors.map((d, i) => <DoctorCardMobile key={d.name} d={d} idx={i} />)}
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(40px, 7vw, 90px)' }}>
            {doctors.map((d, i) => (
              <DoctorCard key={d.name} d={d} flip={i % 2 === 1} />
            ))}
          </div>
        )}

        {/* Education footnote */}
        <Reveal delay={0.1}>
          <div style={{
            marginTop: 80,
            padding: '22px 30px',
            background: 'rgba(11,30,63,.04)',
            borderLeft: '2px solid var(--gold)',
            maxWidth: 760, marginInline: 'auto',
            fontFamily: 'var(--f-serif)',
            fontStyle: 'italic',
            fontSize: 17,
            color: 'var(--ink)',
            opacity: 0.82,
          }}>
            Both doctors are graduates of Buddha Institute of Dental Sciences
            and Hospital — and members of the Indian Dental Association.
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function DoctorCard({ d, flip }) {
  return (
    <Reveal y={50} duration={1.3}>
      <article className="doctor-card grid-2col" style={{
        display: 'grid',
        gridTemplateColumns: flip ? 'minmax(0, 1fr) minmax(0, 1.1fr)' : 'minmax(0, 1.1fr) minmax(0, 1fr)',
        gap: 'clamp(36px, 5vw, 80px)',
        alignItems: 'center',
      }}>
        {/* Portrait — flipped per card */}
        <div style={{ order: flip ? 2 : 1, position: 'relative' }}>
          <Parallax speed={0.12}>
            <div style={{
              position: 'relative',
              aspectRatio: '4/5',
              overflow: 'hidden',
              background: 'var(--cream-deep)',
              border: '1px solid rgba(11,30,63,.08)',
            }}>
              <img
                src={d.img}
                alt={d.name}
                style={{
                  width: '100%', height: '100%',
                  objectFit: 'cover',
                  objectPosition: d.pos || '50% 25%',
                  display: 'block',
                  filter: 'contrast(1.02) saturate(.96)',
                }}
              />
              {/* Soft bottom gradient */}
              <div style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, transparent 65%, rgba(11,30,63,.18))',
              }} />
            </div>
          </Parallax>
        </div>

        {/* Text */}
        <div style={{ order: flip ? 1 : 2 }}>
          <h3 className="h-display" style={{
            fontSize: 'clamp(26px, 3.2vw, 46px)',
            color: 'var(--navy)',
            margin: '0 0 8px',
            letterSpacing: '0.04em',
            lineHeight: 1.1,
          }}>{d.name}</h3>
          <div className="eyebrow" style={{ color: 'var(--gold-deep)', marginBottom: 18 }}>
            {d.title}
          </div>
          <div style={{
            fontFamily: 'var(--f-serif)',
            fontSize: 'clamp(17px, 1.4vw, 21px)',
            color: 'var(--gold-deep)',
            marginBottom: 22,
            fontWeight: 500,
          }}>{d.role}</div>

          <p style={{
            fontFamily: 'var(--f-serif)',
            fontSize: 'clamp(16px, 1.3vw, 19px)',
            lineHeight: 1.78,
            color: 'var(--ink)',
            margin: '0 0 28px',
            opacity: 0.86,
            maxWidth: 560,
          }}>{d.bio}</p>

          <div className="hairline" style={{ maxWidth: 360, margin: '0 0 22px' }} />

          <div className="doctor-stats" style={{ display: 'flex', gap: 'clamp(24px, 4vw, 40px)', flexWrap: 'wrap' }}>
            {d.stats.map((s) => (
              <div key={s.l}>
                <div className="h-display" style={{
                  fontSize: 'clamp(22px, 2.4vw, 30px)', color: 'var(--navy)', letterSpacing: '0.04em',
                }}>{s.v}</div>
                <div className="eyebrow" style={{ marginTop: 6, fontSize: 10 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </article>
    </Reveal>
  );
}

function DoctorCardMobile({ d, idx }) {
  const wrapRef = useRef(null);
  const p = useElementProgress(wrapRef);

  // Photo Ken-Burns: subtle scale + vertical drift as user scrolls past
  const scale = 1.04 + p * 0.10;
  const ty = (p - 0.5) * 28;

  return (
    <article ref={wrapRef} className="dr-mobile">
      {/* Big cinematic photo */}
      <div className="dr-photo-wrap">
        <div className="dr-photo-inner" style={{
          transform: `scale(${scale}) translateY(${ty}px)`,
          willChange: 'transform',
        }}>
          <img src={d.img} alt={d.name} />
        </div>
        {/* Gold corner accents */}
        <div className="dr-corner-tr" />
        <div className="dr-corner-bl" />
        {/* Index number */}
        <div className="dr-index">
          <span>0{idx + 1}</span>
          <span className="dr-index-line" />
          <span>02</span>
        </div>
        {/* Bottom name overlay */}
        <div className="dr-name-overlay">
          <div className="eyebrow" style={{ color: 'var(--gold-light)', marginBottom: 6, fontSize: 9.5 }}>
            {d.title}
          </div>
          <h3 className="h-display" style={{
            fontSize: 'clamp(24px, 6.5vw, 36px)',
            color: 'var(--cream)',
            margin: 0, letterSpacing: '0.04em', lineHeight: 1.1,
          }}>{d.name}</h3>
        </div>
      </div>

      {/* Text below */}
      <Reveal delay={0.05} y={22}>
        <div style={{ marginTop: 24, padding: '0 4px' }}>
          <div style={{
            fontFamily: 'var(--f-serif)',
            fontSize: 17,
            color: 'var(--gold-deep)',
            marginBottom: 18,
            fontWeight: 500,
          }}>{d.role}</div>

          <p style={{
            fontFamily: 'var(--f-serif)',
            fontSize: 16.5,
            lineHeight: 1.7,
            color: 'var(--ink)',
            margin: '0 0 28px',
            opacity: 0.86,
          }}>{d.bio}</p>

          <div className="hairline" style={{ margin: '0 0 20px' }} />

          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            {d.stats.map((s) => (
              <div key={s.l} style={{ flex: '1 1 auto', minWidth: 90 }}>
                <div className="h-display" style={{
                  fontSize: 'clamp(20px, 5.5vw, 24px)',
                  color: 'var(--navy)',
                  letterSpacing: '0.02em',
                  whiteSpace: 'nowrap',
                }}>{s.v}</div>
                <div className="eyebrow" style={{ marginTop: 6, fontSize: 9.5 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </Reveal>

      <style>{`
        .dr-mobile { width: 100%; }
        .dr-photo-wrap {
          position: relative;
          aspect-ratio: 4/5;
          overflow: hidden;
          background: var(--navy);
          border: 1px solid rgba(11,30,63,.10);
          box-shadow: 0 18px 50px rgba(11,30,63,.18);
        }
        .dr-photo-inner { position: absolute; inset: 0; }
        .dr-photo-inner img {
          width: 100%; height: 100%;
          object-fit: cover;
          object-position: 50% 18%;
          display: block;
          filter: contrast(1.04) saturate(.96);
        }
        .dr-corner-tr {
          position: absolute; top: 14px; right: 14px;
          width: 28px; height: 28px;
          border-top: 1px solid var(--gold);
          border-right: 1px solid var(--gold);
        }
        .dr-corner-bl {
          position: absolute; bottom: 14px; left: 14px;
          width: 28px; height: 28px;
          border-bottom: 1px solid var(--gold);
          border-left: 1px solid var(--gold);
        }
        .dr-index {
          position: absolute; top: 22px; left: 22px;
          display: flex; align-items: center; gap: 10px;
          font-family: var(--f-display);
          font-size: 11px;
          letter-spacing: 0.22em;
          color: var(--gold-light);
        }
        .dr-index-line { width: 24px; height: 1px; background: var(--gold); }
        .dr-name-overlay {
          position: absolute; left: 0; right: 0; bottom: 0;
          padding: 26px 22px 22px;
          background: linear-gradient(180deg, transparent, rgba(6,18,41,.78));
          color: var(--cream);
        }
      `}</style>
    </article>
  );
}

/* ============================================================
   5. STATS — sticky navy panel with counters
   ============================================================ */
function StatsScene() {
  const stats = [
    { v: 100000, suffix: '+', l: 'Patients cared for',         hint: 'across two generations', format: (v) => v >= 100000 ? '1 Lakh' : v.toLocaleString('en-IN') },
    { v: 25,     suffix: '+', l: 'Years of combined practice', hint: 'two generations of dentistry' },
    { v: 13,     suffix: '',  l: 'Treatment specialities',     hint: 'from routine to rehabilitation' },
    { v: 100,    suffix: '%', l: 'Aseptic protocol',           hint: 'sterilisation, single-use, every chair' },
  ];

  return (
    <section className="full" style={{
      background: 'var(--navy-deep)',
      color: 'var(--cream)',
      padding: 'clamp(80px, 12vw, 170px) clamp(20px, 6vw, 96px)',
      minHeight: 'auto',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Faint background mark */}
      <div style={{
        position: 'absolute', right: '-6vw', top: '50%', transform: 'translateY(-50%)',
        opacity: 0.10, pointerEvents: 'none',
      }}>
        <img src="assets/dental-avenue-mark.png" alt="" style={{ width: 560, height: 'auto', opacity: 0.9, filter: 'brightness(1.2) saturate(.85)' }} />
      </div>

      <div style={{ maxWidth: 1380, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <Reveal>
          <div className="eyebrow" style={{ color: 'var(--gold)', marginBottom: 18 }}>● By the numbers</div>
        </Reveal>
        <Reveal delay={0.05}>
          <h2 className="h-serif" style={{
            fontSize: 'clamp(32px, 5vw, 76px)',
            margin: '0 0 70px',
            color: 'var(--cream)',
            maxWidth: 900,
            fontWeight: 400,
            lineHeight: 1.1,
          }}>
            A quiet record, <span className="accent">built one chair at a time.</span>
          </h2>
        </Reveal>

        <div className="stats-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 'clamp(28px, 4vw, 60px)',
          borderTop: '1px solid rgba(201,165,91,.22)',
          paddingTop: 60,
        }}>
          {stats.map((s, i) => (
            <Reveal key={i} delay={i * 0.08} y={28}>
              <div>
                <div className="h-display" style={{
                  fontSize: 'clamp(34px, 4vw, 60px)',
                  color: 'var(--gold-light)',
                  letterSpacing: '0.01em',
                  lineHeight: 1,
                  marginBottom: 14,
                  whiteSpace: 'nowrap',
                }}>
                  <Counter to={s.v} suffix={s.suffix} format={s.format || ((v) => v.toLocaleString('en-IN'))} />
                </div>
                <div style={{
                  fontFamily: 'var(--f-serif)',
                  fontSize: 19,
                  color: 'var(--cream)',
                  marginBottom: 6,
                }}>{s.l}</div>
                <div className="eyebrow" style={{ color: 'rgba(245,239,228,.5)', fontSize: 10 }}>
                  {s.hint}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DoctorsScene, StatsScene });