// ─────────── Invisalign Gallery — Happy Patients ───────────
const HAPPY_PHOTOS = [
  { src: 'Invisalign%20delivery%20/IMG-20220523-WA0043.webp', alt: 'Patient smiling after Invisalign' },
  { src: 'Invisalign%20delivery%20/IMG-20220519-WA0029.webp', alt: 'Dr. Abhijit handing Invisalign kit to patient' },
  { src: 'Invisalign%20delivery%20/IMG_20220523_115813_354.webp', alt: 'Patient smiling with new aligners' },
  { src: 'Invisalign%20delivery%20/IMG-20220519-WA0019.webp', alt: 'Dr. Abhijit with happy patient' },
  { src: 'Invisalign%20delivery%20/IMG_20220503_115219.webp', alt: 'Patient receiving RTS clear aligners' },
  { src: 'Invisalign%20delivery%20/IMG_20220523_115745_373.webp', alt: 'Patient with Never Compromise sign' },
  { src: 'Invisalign%20delivery%20/IMG-20220523-WA0027__01.webp', alt: 'Patient with aligner kit' },
];

const InvisalignGallery = () => (
  <section className="sec sec-cream">
    <div className="wrap">
      <div className="sec-head reveal">
        <div>
          <p className="eyebrow"><span className="dot"></span>Happy patients</p>
          <h2 className="display">Invisalign. <i>Delivered with a smile.</i></h2>
        </div>
        <p>Every aligner kit handed over is the result of months of planning and trust. Real patients, real results — at Align-O-Dent, Mulund.</p>
      </div>
      <div className="masonry-grid reveal reveal-delay-1">
        {HAPPY_PHOTOS.map((p, i) => (
          <div key={i} className="masonry-item">
            <img src={p.src} alt={p.alt} loading="lazy" style={p.rotate ? {transform:'rotate(90deg) scale(0.75)', transformOrigin:'center'} : undefined} />
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ─────────── Doctor in Action ───────────
const ACTION_PHOTOS = [
  { src: 'Invisalign%20delivery%20/IMG-20220511-WA0057.webp', alt: 'Dr. Abhijit treating patient' },
  { src: 'Invisalign%20delivery%20/IMG-20220427-WA0037.webp', alt: 'Dr. Abhijit at work' },
  { src: 'Invisalign%20delivery%20/IMG-20220519-WA0021.webp', alt: 'Dr. Abhijit reviewing X-ray with patient' },
  { src: 'Invisalign%20delivery%20/IMG-20220511-WA0061.webp', alt: 'Treatment in progress' },
  { src: 'Invisalign%20delivery%20/IMG-20220523-WA0036.webp', alt: 'Dr. Abhijit treating patient' },
];

const DoctorInAction = () => (
  <section className="doctor-action">
    <div className="wrap">
      <div className="action-head reveal">
        <div>
          <p className="eyebrow" style={{color:'var(--gold-soft)'}}><span className="dot"></span>Doctor in action</p>
          <h2 className="display" style={{color:'var(--cream)'}}>Dr. Abhijit, <i style={{color:'var(--gold-soft)'}}>at work.</i></h2>
        </div>
        <p style={{color:'rgba(250,246,240,.7)'}}>Candid shots from the clinic. Every patient treated with focus, precision, and patience — and the camera caught some of it.</p>
      </div>
      <div className="masonry-grid masonry-dark reveal reveal-delay-1">
        {ACTION_PHOTOS.map((p, i) => (
          <div key={i} className="masonry-item">
            <img src={p.src} alt={p.alt} loading="lazy" />
          </div>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { InvisalignGallery, DoctorInAction });