// scenes-services.jsx — Facilities/Services grid + Experience scene /* ============================================================ 6. SERVICES — sticky two-column scroller Left: pinned heading + active service description Right: scrolling list of services that update as you scroll ============================================================ */ const SERVICES = [ { n: '01', name: 'Root Canal Treatment', desc: 'Painless, single-sitting RCTs with rotary endodontics and apex-locator precision — saving the tooth you would otherwise lose.', tag: 'Endodontics' }, { n: '02', name: 'Dental Implants', desc: 'Titanium implants planned with digital imaging — a permanent, natural-feeling replacement for missing teeth.', tag: 'Restorative' }, { n: '03', name: 'Crowns & Bridges', desc: 'Ceramic and zirconia crowns crafted to match — durable, lifelike, and finished to a quiet polish.', tag: 'Prosthodontics' }, { n: '04', name: 'Teeth Whitening', desc: 'Professional bleaching that lifts years of staining in a single appointment, with no enamel compromise.', tag: 'Cosmetic' }, { n: '05', name: 'Veneers & Smile Design',desc: 'Bespoke porcelain veneers — designed around your face, your line of smile, and your daily life.', tag: 'Cosmetic' }, { n: '06', name: 'Braces & Aligners', desc: 'Conventional braces and clear aligner therapy for adults and teens — quiet correction, lasting result.', tag: 'Orthodontics' }, { n: '07', name: 'Filling & Restoration', desc: 'Tooth-coloured composite restorations — strong, sealed, and invisible against your natural enamel.', tag: 'General' }, { n: '08', name: 'Scaling & Cleaning', desc: 'Ultrasonic scaling and polish to remove tartar and surface staining — the foundation of every healthy mouth.', tag: 'Preventive' }, { n: '09', name: 'Extractions & Minor Surgery', desc: 'Atraumatic extractions and minor oral surgery, performed with conservative technique and gentle aftercare.', tag: 'Surgery' }, { n: '10', name: 'Facial Fracture Care', desc: 'Maxillofacial trauma assessment and management — for fractures of the jaw and face requiring surgical attention.', tag: 'Surgery' }, { n: '11', name: 'Child Dentistry', desc: 'Calm, unhurried care for our youngest patients — building a lifetime of comfortable visits, one tooth at a time.', tag: 'Pedodontics' }, { n: '12', name: 'Full Mouth Rehabilitation', desc: 'Coordinated restoration of function and aesthetics — for patients ready to start over with their smile.', tag: 'Comprehensive' }, { n: '13', name: 'Digital Dental X-rays', desc: 'Low-radiation digital imaging on-site — sharper diagnosis, faster treatment, less guesswork.', tag: 'Diagnostics' }, ]; function ServicesScene() { const wrapRef = useRef(null); const p = useElementProgress(wrapRef); // Detect mobile to switch from pinned scroll-driven scene → stacked list 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); }, []); // Active index based on scroll progress through the section (desktop only) const idx = Math.min( SERVICES.length - 1, Math.max(0, Math.floor(p * SERVICES.length * 1.05)) ); // ────────── MOBILE: interactive horizontal swipe deck ────────── if (isMobile) { return ; } // ────────── DESKTOP: pinned, scroll-driven ────────── return (
{/* Left — sticky header + active card */}
● What we do

Different ways
to look after a smile.

From a six-monthly cleaning to full-mouth rehabilitation — everything you need under one roof, performed by the same hands that have done it 100,000 times before.

{/* Active service card */}
{SERVICES[idx].tag}
{SERVICES[idx].name}

{SERVICES[idx].desc}

{String(idx + 1).padStart(2, '0')} / {SERVICES.length}
{/* Right — scrolling list */}
{/* gradient mask */}
{SERVICES.map((s, i) => { const distance = Math.abs(i - idx); const active = i === idx; return (
{s.n} {s.name} {active && ( )}
); })}
); } /* ============================================================ 7. EXPERIENCE — full-bleed image with parallax + overlay ============================================================ */ function ExperienceScene() { const wrapRef = useRef(null); const p = useElementProgress(wrapRef); const scale = 1 + p * 0.18; return (
{/* Background video full-bleed with subtle zoom */}
{/* Dark overlay gradient */}
{/* Centered text */}
● The visit

Every appointment,
an unhurried experience.

A calm operatory. Digital diagnostics. Sterilised instrumentation you can see being unwrapped in front of you. We won't rush you — and we won't sell you what you don't need.

{/* Three feature ticks */}
{['Digital X-Ray On-Site', 'Sterilised, Single-Use', 'Transparent Pricing'].map((t) => (
{t}
))}
); } /* ============================================================ SERVICES — MOBILE: swipeable horizontal card deck ============================================================ */ function ServicesSceneMobile() { const scrollerRef = useRef(null); const [active, setActive] = useState(0); useEffect(() => { const el = scrollerRef.current; if (!el) return; let raf = null; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = null; const cardW = el.clientWidth; const idx = Math.round(el.scrollLeft / cardW); setActive(Math.max(0, Math.min(SERVICES.length - 1, idx))); }); }; el.addEventListener('scroll', onScroll, { passive: true }); return () => { el.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); }; }, []); const goTo = (i) => { const el = scrollerRef.current; if (!el) return; el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' }); }; return (
{/* Header */}
● What we do

Different ways
to look after a smile.

Swipe to browse our care — from a six-monthly cleaning to full-mouth rehabilitation.

{/* Counter + swipe hint */}
{String(active + 1).padStart(2, '0')} / {String(SERVICES.length).padStart(2, '0')}
Swipe
{/* Scroller */}
{SERVICES.map((s, i) => (
{s.n} {s.tag}
{s.n}

{s.name}

{s.desc}

{String(i + 1).padStart(2, '0')} / {String(SERVICES.length).padStart(2, '0')}
))}
{/* Dot indicator */}
{SERVICES.map((_, i) => (
Ask about your concern
); } Object.assign(window, { ServicesScene, ExperienceScene, ServicesSceneMobile });