// ============================================================ // Enfield Royal Clinic — page components // ============================================================ // Hooks (useState, useEffect, etc.) are declared in components.jsx // and shared via Babel's flat script scope. // ===================== HOME ===================== // -------- Hero (centered editorial typography, no image) -------- const HeroSection = () => { const D = window.ERC_DATA; return (
{/* Decorative corner serifs — subtle, like an old certificate */}
{/* Eyebrow */}
Enfield  Royal  Clinic Dubai  ·  Abu Dhabi  ·  Est. MMXI
{/* Ornament */} {/* HEADLINE */}

Doctor-led
cosmetic surgery
&{' '} aesthetic medicine
in Dubai.

{/* Italic byline */}

— A clinic group, since 2011 —

{/* Second ornament */} {/* Lede */}

A multi-specialty clinic group, regulated by the Dubai Health Authority. Every plan begins with a consultation — built by the specialist who'll perform it. No price lists, no guarantees, no promises we can't keep.

{/* CTAs */}
Book a Consultation WhatsApp the clinic
{/* MARQUEE — slow scrolling treatments band, closes the hero */} {/* Stagger fade-up animation */}
); }; // -------- Ornament: thin gold rules + diamond center -------- const Ornament = ({ className = '', style = {}, subtle = false }) => (
); // -------- Decorative corner serif marks (like a certificate) -------- const CornerMark = ({ position }) => { const pos = { tl: { top: 24, left: 24, transform: 'rotate(0deg)' }, tr: { top: 24, right: 24, transform: 'rotate(90deg)' }, bl: { bottom: 24, left: 24, transform: 'rotate(270deg)' }, br: { bottom: 24, right: 24, transform: 'rotate(180deg)' }, }[position]; return ( ); }; // -------- Treatment marquee (slow horizontal scroll, gold dot dividers) -------- const TreatmentMarquee = () => { const D = window.ERC_DATA; const items = D.areas.map(a => a.name); const doubled = [...items, ...items, ...items]; // ensure seamless loop return (
{doubled.map((name, i) => ( {name} ))}
); }; const HomePage = () => { const D = window.ERC_DATA; return (
{/* HERO — editorial masthead + tall portrait + treatment marquee */} {/* TREATMENT AREAS — editorial showcase */} {/* DOCTORS BAND */}
The people who actually perform the care.} />

Our roster is built on the 17 official doctor profiles currently published by Enfield Royal. Each profile is shown only with verified credentials, DHA licence and portrait consent — anything pending is clearly labelled.

{D.doctors.slice(0, 4).map((d) => )}
View all doctors
{/* WHY ENFIELD / VALUES */}
Compliant. Specialist-led. Calm.} />
{[ { n: '01', t: 'DHA-regulated practice', b: 'All services are regulated by the Dubai Health Authority. Per-clinic and per-doctor licences shown on profiles once confirmed.' }, { n: '02', t: 'Doctor-led, not sales-led', b: 'Plans are made by the specialist who will perform the procedure. No upsells from a sales desk.' }, { n: '03', t: 'Compliant communication', b: 'We do not publish guaranteed results, banned superlatives or unverified ratings — and we attribute every brand stat clearly.' }, { n: '04', t: 'Consent-gated content', b: 'Before/after material requires written patient consent and DHA-compliant disclosure before it appears anywhere on this site.' }, ].map((v) => (
{v.n}

{v.t}

{v.b}

))}
{/* BIG QUOTE / CANONICAL LINE */}
The canonical line

"Doctor-led cosmetic surgery & aesthetic medicine in Dubai — trusted, DHA-regulated care since 2011."

Book a Consultation WhatsApp
{/* BEFORE / AFTER teaser — locked */}

Gallery — consent-gated

Available only with written patient consent + DHA-compliant disclosure.

A gallery architecture, not a marketing gallery.} lede="The Before & After section ships as a complete content architecture — slider, candidacy notes, treatment context — but stays locked until the clinic supplies consent-cleared, DHA-compliant case material." />
{[ 'Written, treatment-specific patient consent', 'DHA medical-advertising disclosure on every case', 'Same lighting, angle, lens — no retouching', 'No claims, no guarantees, no comparisons', ].map((t) => (
{t}
))}
See the gallery architecture
{/* LOCATIONS strip */}
Two locations. One standard of care.} />
{D.locations.map((loc) => (
{loc.name}

{loc.name}

{loc.address}

{loc.phone} View location
))}
); }; // -------- Treatment tile (Home / Hub) -------- const TreatmentTile = ({ area, span = 4 }) => (
= 8 ? '21 / 9' : span === 6 ? '4 / 3' : '4 / 5' }}> {area.name}
{area.eyebrow}

= 8 ? 38 : 26, lineHeight: 1.05, margin: 0, color: '#fff' }}>{area.name}

{area.procedures.length} procedures
); // -------- Treatments Showcase (Home) — editorial mosaic with featured + filter -------- const TreatmentsShowcase = () => { const D = window.ERC_DATA; const [filter, setFilter] = useState('all'); const all = D.areas; const counts = useMemo(() => ({ all: all.length, surgical: all.filter(a => a.category === 'surgical').length, aesthetic: all.filter(a => a.category === 'aesthetic').length, specialist: all.filter(a => a.category === 'specialist').length, }), [all]); const filtered = filter === 'all' ? all : all.filter(a => a.category === filter); const featured = filtered[0]; const rest = filtered.slice(1); const totalProcedures = all.reduce((n, a) => n + a.procedures.length, 0); // Asymmetric span pattern for the mosaic (designed for ~9 items; loops if more) const spanCycle = [ { col: 7, ratio: '16 / 11' }, { col: 5, ratio: '4 / 5' }, { col: 4, ratio: '1 / 1' }, { col: 4, ratio: '1 / 1' }, { col: 4, ratio: '1 / 1' }, { col: 8, ratio: '16 / 9' }, { col: 4, ratio: '4 / 5' }, { col: 6, ratio: '4 / 3' }, { col: 6, ratio: '4 / 3' }, ]; return (
{/* HEADER */}
01 — Treatments by area

Ten areas of specialist care — planned by the doctor who'll perform it.

No price lists. Every treatment begins with a doctor-led consultation — candidacy, plan, fees and follow-up.

{/* FILTER ROW */}
{[ { k: 'all', l: 'All areas' }, { k: 'surgical', l: 'Surgical' }, { k: 'aesthetic', l: 'Aesthetic' }, { k: 'specialist', l: 'Specialist' }, ].map(f => { const active = filter === f.k; return ( ); })}
View all
{/* FEATURED */} {featured && } {/* MOSAIC */} {rest.length > 0 && (
{rest.map((a, i) => ( ))}
)}
{/* responsive collapses */}
); }; const Stat = ({ n, l }) => (
{n}
{l}
); // -------- Featured treatment (large editorial card) -------- const FeaturedTreatment = ({ area }) => (
{area.name}
Featured · {area.eyebrow}
The flagship

{area.name}

{area.blurb}

Procedures in this area
{area.procedures.slice(0, 8).map(p => (
{p}
))}
{area.procedures.length} procedures · {area.doctorCount} doctors
); // -------- Mosaic card with hover-reveal procedures -------- const ShowcaseCard = ({ area, span, index }) => { const [hover, setHover] = useState(false); const big = span.col >= 7; return ( setHover(true)} onMouseLeave={() => setHover(false)} onFocus={() => setHover(true)} onBlur={() => setHover(false)} style={{ gridColumn: 'span ' + span.col, position: 'relative', background: 'var(--primary)', overflow: 'hidden', textDecoration: 'none', display: 'block', }} >
{area.name}
{/* Top row — index + category */}
{String(index).padStart(2, '0')} {area.category}
{/* Bottom — name + meta */}

= 5 ? 26 : 22, lineHeight: 1.04, margin: 0, letterSpacing: '-0.008em', textWrap: 'balance' }}> {area.name}

{area.procedures.length} procedures · {area.doctorCount} doctor{area.doctorCount === 1 ? '' : 's'}
{/* Hover overlay — procedures list */}
{area.eyebrow} {String(index).padStart(2, '0')} / {window.ERC_DATA.areas.length}

{area.name}

{area.procedures.slice(0, big ? 8 : 5).map(p => (
{p}
))} {area.procedures.length > (big ? 8 : 5) && ( +{area.procedures.length - (big ? 8 : 5)} more )}
Explore
); }; // -------- Doctor card -------- const DoctorCard = ({ doctor, dense = false }) => { const area = window.ERC_DATA.areas.find(a => a.slug === doctor.area); return (
{doctor.name}
{area ? area.name : 'Specialty'}

{doctor.name}

{doctor.specialty}

Credentials — to verify
); }; // ===================== TREATMENTS HUB ===================== const TreatmentsHubPage = () => { const D = window.ERC_DATA; return (
The full treatment architecture.} lede="Ten treatment areas across surgery, aesthetics, dental, regenerative and general medicine — every page follows the same compliant outline: what it is, candidacy, the process, recovery & aftercare, FAQ." />
{D.areas.map((a, i) => ( ))}
); }; // ===================== TREATMENT DETAIL ===================== const TreatmentDetailPage = ({ slug }) => { const D = window.ERC_DATA; const a = D.areas.find(x => x.slug === slug); const [tab, setTab] = useState('what'); if (!a) return ; const sectionsCopy = { what: a.blurb, who: 'Candidacy is assessed during your consultation. Patient history, medical fitness, lifestyle, and the realistic outcomes for your case are all considered before a plan is offered.', process: 'Your treating doctor walks you through the steps, theatre/clinic time, anaesthesia (where applicable), and what to expect on the day. No two plans are identical — the order, sessions and protocols are tailored.', recovery: 'Aftercare instructions, recovery time, follow-up checks and red-flag symptoms are documented and provided in writing. We do not promise outcomes; we work to a realistic plan.', faq: 'Common questions on safety, downtime, fees, anaesthesia and follow-up are covered by your treating doctor at consultation. We do not publish prices online — every quote is individual.', }; return (
← Treatments / {a.eyebrow}

{a.name}

{a.blurb}

Book a Consultation Ask on WhatsApp
{a.name}
{D.treatmentOutline.map((s) => (
{D.treatmentOutline.indexOf(s) + 1 < 10 ? '0' : ''}{D.treatmentOutline.indexOf(s) + 1} — {s.label}

{s.label}

{sectionsCopy[s.id]}

{s.id === 'what' && (
Procedures in this area
{a.procedures.map((p, i) => (
{p}
))}
)}
))}
Next step

Book a consultation with one of our doctors.

Book a Consultation
); }; // ===================== DOCTORS ===================== const DoctorsPage = () => { const D = window.ERC_DATA; const [filter, setFilter] = useState('all'); const filtered = filter === 'all' ? D.doctors : D.doctors.filter(d => d.area === filter); const dense = !!(window.__tweaks && window.__tweaks.denseDoctors); return (
The clinic's 17 official profiles.} lede="Names captured from the official roster. Every doctor card is shown with a 'credentials to verify' tag until DHA licence numbers, board certifications and portrait consent are confirmed for publication." />
setFilter('all')}>All doctors · {D.doctors.length} {D.areas.filter(a => D.doctors.some(d => d.area === a.slug)).map(a => ( setFilter(a.slug)}>{a.name} ))}
{filtered.map(d => )}
); }; const FilterChip = ({ active, children, onClick }) => ( ); // ===================== BEFORE / AFTER ===================== const BeforeAfterPage = () => { const [slider, setSlider] = useState(50); return (
The architecture — locked until consent is supplied.} lede="This page is built and ready. It will populate only with case material that comes with written patient consent and the DHA-compliant disclosure required for UAE medical advertising." />
{/* The slider component, on a locked placeholder */}
BEFORE — case material to supply
AFTER — case material to supply
BEFORE AFTER · consent required
‹›
setSlider(+e.target.value)} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0, cursor: 'ew-resize' }}/>
Case context (template)
{[ { l: 'Treatment', v: '—' }, { l: 'Doctor', v: '—' }, { l: 'Sessions', v: '—' }, { l: 'Time-since', v: '—' }, ].map((r) => (
{r.l}
{r.v}
))}

This gallery ships locked.

We do not publish, repurpose or reuse before/after material from the live site. Each case requires written, treatment-specific patient consent and the DHA's medical-advertising disclosure.

What unlocks this section
    {[ 'Patient consent form, signed and dated, per case', 'DHA medical-advertising disclosure attached', 'Same lighting / lens / angle, no edits, no claims', 'Treating doctor named on every case', 'No comparative or guaranteed-result language', ].map((t) => (
  • {t}
    • ))}
{/* The empty grid — placeholders */}
Cases — 0 / consent-cleared
{Array.from({ length: 8 }).map((_, i) => (
Case {String(i + 1).padStart(2, '0')} · pending consent
))}
); }; // ===================== ABOUT ===================== const AboutPage = () => { const D = window.ERC_DATA; return (
A doctor-led clinic group, since 2011.} lede="Enfield Royal is a multi-specialty cosmetic surgery and aesthetic medical clinic group operating in Dubai (Al Manara) and Abu Dhabi — with all services regulated by the Dubai Health Authority." />
Lobby
Treatment room
Lounge

Master pitch: "A premium clinic group should look more authoritative online — before/after content architecture, doctor-led trust pages, and higher-conversion consultation funnels."

This site is an elevation of the existing WordPress build — same clinic, same doctors, but a faster, clearer, more compliant interface for the people who use it: patients planning a procedure and the doctors who'll perform it.

{/* Stats */}
{D.statedClaims.map((s, i) => (
{s.num}
{s.label}
{s.verified ? Verified : Clinic's claim · to confirm}
))}

* Stated by the clinic in its own marketing materials — published here only with attribution and DHA-compliant phrasing.

{/* Timeline */}
Dubai & Abu Dhabi — group reach to confirm.} />
{[ { y: '2011', t: 'Founded', b: 'Enfield Royal Clinic opens in Dubai (verified).' }, { y: '—', t: 'Dubai · Al Manara', b: 'Villa 1089, Al Wasl Road, Al Manara Area (verified).' }, { y: '—', t: 'Abu Dhabi', b: 'Enfield Royal Abu Dhabi (group reach — full address to confirm).' }, { y: '—', t: 'Wider group', b: 'The clinic also references Sharjah / international branches in its own materials — to confirm.' }, ].map((s, i) => (
{s.y}

{s.t}

{s.b}

))}
); }; // ===================== LOCATIONS ===================== const LocationsPage = () => { const D = window.ERC_DATA; return (
Two locations. One standard of care.} lede="Hours, the exact Dubai map pin, and the full Abu Dhabi address are shown only once confirmed in writing by the clinic. Until then we publish 'open 7 days — call to confirm timings'." />
{D.locations.map((loc, i) => (
{loc.name}
{i === 0 ? '01 — Dubai' : '02 — Abu Dhabi'}

{loc.name}

{loc.note}

Book a consultation Contact
))}
); }; const Row = ({ icon, label, value, href, warn }) => { const inner = (
{label}
{value}
); return href ? {inner} : inner; }; // ===================== CONTACT ===================== const ContactPage = () => { const D = window.ERC_DATA; return (
How to reach the clinic.} lede="Verified phone, WhatsApp, email and address. For a full consultation booking, use the form on the Book page — it sends to both the clinic and your inbox." />
{[ { icon: 'phone', label: 'Dubai', value: D.brand.phoneDubai, href: 'tel:' + D.brand.phoneDubai.replace(/\s/g,'') }, { icon: 'phone', label: 'Abu Dhabi', value: D.brand.phoneAUH, href: 'tel:' + D.brand.phoneAUH.replace(/\s/g,'') }, { icon: 'whatsapp', label: 'WhatsApp', value: D.brand.whatsapp, href: 'https://wa.me/' + D.brand.whatsappRaw }, { icon: 'mail', label: 'Email', value: D.brand.email, href: 'mailto:' + D.brand.email }, { icon: 'pin', label: 'Address (Dubai)', value: D.brand.addressDubai }, ].map((r, i) => (
{r.label}
{r.value}
{r.href && } ))}
Reception desk
For a consultation

Book via our consultation form — it routes to the clinic with a copy to your inbox.

Book a Consultation
); }; // ===================== BOOK ===================== const BookPage = () => { const D = window.ERC_DATA; const [step, setStep] = useState(1); const [form, setForm] = useState({ name: '', phone: '', email: '', branch: 'dubai', treatment: '', date: '', notes: '' }); const [submitted, setSubmitted] = useState(false); useEffect(() => { const m = window.location.hash.match(/treatment=([^&]+)/); if (m) setForm(f => ({ ...f, treatment: decodeURIComponent(m[1]) })); }, []); const update = (k, v) => setForm(s => ({ ...s, [k]: v })); const next = () => setStep(s => Math.min(3, s + 1)); const back = () => setStep(s => Math.max(1, s - 1)); const canNext = step === 1 ? (form.name && form.phone) : step === 2 ? !!form.treatment : true; if (submitted) { return (
Thank you, {form.name.split(' ')[0] || 'we'}.} lede="A clinic coordinator will reach out within 24 hours to confirm your preferred date and walk you through what to bring." />
Your request
{Object.entries(form).filter(([k,v]) => v).map(([k, v]) => (
{k}
{v}
 ))}
While you wait

WhatsApp the clinic directly for anything urgent.

Open WhatsApp
); } return (
Book a Consultation

A doctor reviews every request personally.

We ask only for what's needed to schedule you — name, contact, treatment interest, branch and preferred date. We do not collect medical history through this form.

Privacy
  • Minimal PHI — no medical history collected here.
  • Routed to the clinic + a confirmation to your inbox.
  • You can WhatsApp us instead at any time.
{[1, 2, 3].map((n) => ( ))}
{step === 1 && (
update('name', v)} placeholder="First & last name" /> update('phone', v)} placeholder="+971 ..." /> update('email', v)} placeholder="you@example.com" />
)} {step === 2 && (
Treatment area
{D.areas.map(a => ( ))}
update('notes', v)} placeholder="Anything specific you'd like the doctor to know?" multiline />
)} {step === 3 && (
Branch
{[{ id: 'dubai', l: 'Dubai · Al Manara' }, { id: 'abu-dhabi', l: 'Abu Dhabi' }].map(b => ( ))}
update('date', v)} placeholder="e.g. Sun 8 Jun 2026, mid-morning" />
)}
{step > 1 && } {step < 3 && } {step === 3 && } or WhatsApp instead
); }; const Field = ({ label, value, onChange, placeholder, multiline }) => (