/* Template 3 "The Showcase" - Re-Ignite · part B: trust, offer, gallery, video, flow, before/after, why */ (function () { const e = React.createElement; const { useState, useRef, useEffect, useCallback } = React; const { fmtDate } = window; const Icon = window.Icon; const trust = [ ["scan", "See it before you commit", "Your future smile on the iTero Lumina, before you decide anything."], ["badge", "Invisalign Gold provider", "Dr Imran Nisar, Gold provider, close to Platinum. We have completed hundreds of cases."], ["ticket", "One day, one price", "A total value package worth up to £2,990, with whitening and retainers included."], ["chair", "Limited places", "A handful of unhurried, one-to-one appointments."], ]; const Trust = () => e("section", { className: "t3-sec t3-cont", style: { paddingTop: 0 } }, e("div", { className: "t3-trust__card t3-reveal" }, trust.map(([ic, t, s], i) => e("div", { className: "t3-trust__item", key: i }, e("span", { className: "t3-trust__ic" }, e(Icon, { name: ic })), e("div", null, e("div", { className: "t3-trust__t" }, t), e("div", { className: "t3-trust__s" }, s)))))); /* offer ----------------------------------------------------------------- */ const Offer = ({ cfg }) => { const B = window.T3Btn; const incl = [ ["ticket", "Up to £955 off your Invisalign", "The open-day saving - available on the day only.", "£955 OFF", "free"], ["chair", "Consultation with Dr Imran Nisar", "Ask everything on your mind - clarity, not pressure.", "Worth £85", "worth"], ["scan", "iTero 3D scan, treatment plan, X-rays & photos", "Everything needed to plan your treatment, and see your future smile.", "Worth £500", "worth"], ["badge", "Vivera & fixed retainers included", "Backed by our 2-year straight-teeth guarantee.", "Worth £900", "worth"], ["sparkles", "Teeth whitening included", "A brighter smile to finish your treatment.", "Worth £375", "worth"], ["check", "Scale and polish clean", "A professional clean with the dentist.", "Worth £175", "worth"], ]; return e("section", { className: "t3-sec t3-cont", id: "offer" }, e("div", { className: "t3-offer__head" }, e("span", { className: "t3-eyebrow" }, e("span", { className: "dot" }), "What’s included with your Invisalign"), e("h2", { className: "t3-h2" }, "A single morning, and ", e("span", { className: "alt" }, "everything"), " you need to start.")), e("div", { className: "t3-offer__grid" }, e("div", { className: "t3-card t3-reveal" }, e("ul", { className: "t3-incl" }, incl.map(([ic, t, s, pr, cls], i) => e("li", { key: i }, e("span", { className: "ic" }, e(Icon, { name: ic })), e("span", { className: "it" }, t, e("small", null, s)), e("span", { className: "pr " + cls }, pr))))), e("div", { className: "t3-pricecard t3-reveal" }, e("div", { className: "lbl" }, "On the day"), e("div", { className: "was" }, "Invisalign from £2,995, including whitening & retainers"), e("div", { className: "mo" }, "Total savings package worth up to"), e("div", { className: "now" }, "£2,990"), e("div", { className: "t3-pricecard__spacer" }), e(B, { variant: "gold", block: true, lg: true, href: "#reserve" }, "Reserve your spot"))), ); }; /* flow ------------------------------------------------------------------ */ const Flow = ({ cfg }) => { const steps = [ ["A warm welcome", "Arrive to drinks and a relaxed start, with no rush.", "Relax"], ["Photos & your 3D scan", "Quick and comfortable with the nurse - no messy moulds.", "No moulds"], ["Meet Dr Imran Nisar", "Your options and your questions, explained clearly.", "One-to-one"], ["See your future smile", "A digital preview of where your treatment could take you.", "On screen"], ["Your plan & next steps", "With our treatment coordinator - finance, timings, and a written plan to take home.", "Take home"], ]; return e("section", { className: "t3-sec t3-cont", id: "day" }, e("div", { className: "t3-flow__head" }, e("div", null, e("span", { className: "t3-kick" }, "How the day flows"), e("h2", { className: "t3-h2", style: { marginTop: 14 } }, "A calm, unhurried morning, ", e("span", { className: "alt" }, "in one visit"), ".")), e("p", { className: "t3-body", style: { maxWidth: 340 } }, "No commitment to walk through the door - just the clearest picture you’ve ever had of your new smile, with everything handled in a single morning.")), e("div", { className: "t3-flow__grid" }, steps.map(([t, s, time], i) => e("div", { className: "t3-step t3-reveal", key: i }, e("div", { className: "t3-step__n" }, i + 1), e("div", { className: "t3-step__t" }, t), e("div", { className: "t3-step__s" }, s), e("span", { className: "t3-step__time" }, time)))), ); }; /* before/after ---------------------------------------------------------- */ const BeforeAfter = () => { const wrap = useRef(null); const [pos, setPos] = useState(52); const drag = useRef(false); const move = useCallback((x) => { const el = wrap.current; if (!el) return; const r = el.getBoundingClientRect(); setPos(Math.max(0, Math.min(100, ((x - r.left) / r.width) * 100))); }, []); useEffect(() => { const mm = (ev) => { if (drag.current) move(ev.touches ? ev.touches[0].clientX : ev.clientX); }; const up = () => { drag.current = false; }; window.addEventListener("mousemove", mm); window.addEventListener("touchmove", mm, { passive: true }); window.addEventListener("mouseup", up); window.addEventListener("touchend", up); return () => { window.removeEventListener("mousemove", mm); window.removeEventListener("touchmove", mm); window.removeEventListener("mouseup", up); window.removeEventListener("touchend", up); }; }, [move]); return e("section", { className: "t3-sec t3-cont", id: "results" }, e("div", { className: "t3-ba__grid" }, e("div", { className: "t3-ba__copy" }, e("span", { className: "t3-kick" }, "Real results"), e("h2", { className: "t3-h2" }, "The kind of change people ", e("span", { className: "alt" }, "notice"), "."), e("p", { className: "t3-body" }, "Drag to see the difference Invisalign makes. On the day, you’ll see your own before-and-after on screen - modelled from your iTero scan, not a stock photo.")), e("div", { className: "t3-baframe", ref: wrap, onMouseDown: (ev) => { drag.current = true; move(ev.clientX); }, onTouchStart: (ev) => { drag.current = true; move(ev.touches[0].clientX); }, }, e("img", { className: "after", src: "assets/rid-after.jpg", alt: "After Invisalign", style: { filter: "none" } }), e("img", { className: "before", src: "assets/rid-before.jpg", alt: "Before Invisalign", style: { filter: "none", clipPath: `inset(0 ${100 - pos}% 0 0)` } }), e("span", { className: "t3-baframe__tag b" }, "Before"), e("span", { className: "t3-baframe__tag a" }, "After"), e("div", { className: "t3-baframe__h", style: { left: pos + "%" } }), e("div", { className: "t3-baframe__g", style: { left: pos + "%" } }, e(Icon, { name: "move" })))), ); }; /* why ------------------------------------------------------------------- */ const Why = ({ cfg }) => { const cards = [ ["badge", "An Invisalign Gold provider", "Dr Imran Nisar is an Invisalign Gold provider, close to Platinum. We have completed hundreds of cases."], ["scan", "A fully digital practice", "Every scan is taken on the iTero Lumina - no moulds, and you see your potential result before committing to anything."], ["heart", "A 5-star reputation", "A 5-star rating from 368 reviews, from patients who wanted clarity, not pressure."], ["ticket", "Clear, fair pricing", "No surprises, with 0% finance spread interest-free over up to 5 years."], ["chair", "Around your life", "Evening and Saturday appointments to fit around your work and family."], ["sparkles", "More than a smile", "A personal, premium experience from a team that sees more than a smile."], ]; return e("section", { className: "t3-sec t3-cont" }, e("div", { className: "t3-why__head" }, e("span", { className: "t3-kick" }, "Why patients across Hale choose us"), e("h2", { className: "t3-h2", style: { marginTop: 14 } }, "Considered care, ", e("span", { className: "alt" }, "delivered with precision"), ".")), e("div", { className: "t3-why__grid" }, cards.map(([ic, t, s], i) => e("div", { className: "t3-whycard t3-reveal", key: i }, e("span", { className: "t3-whycard__ic" }, e(Icon, { name: ic })), e("div", { className: "t3-whycard__t" }, t), e("div", { className: "t3-whycard__s" }, s)))), ); }; /* gallery + video slot -------------------------------------------------- */ const Gallery = () => { const shots = [ ["rid-smile-1.jpg", "Smiles we’ve created"], ["rid-patient-2.jpg", "Your Invisalign journey"], ["reignite_reception.webp", "Our welcoming reception"], ["photo-invisalign-kit.jpg", "Your free iTero 3D scan"], ]; return e("section", { className: "t3-sec t3-cont" }, e("div", { className: "t3-why__head" }, e("span", { className: "t3-kick" }, "Inside the practice"), e("h2", { className: "t3-h2", style: { marginTop: 14 } }, "A calm, modern home for your ", e("span", { className: "alt" }, "new smile"), ".")), e("div", { className: "t3-gallery" }, shots.map(([img, cap], i) => e("figure", { className: "t3-galfig t3-reveal", key: i }, e("img", { src: "assets/" + img, alt: cap }), e("figcaption", null, cap))))); }; const VideoSlot = ({ cfg }) => { const B = window.T3Btn; return e("section", { className: "t3-sec t3-cont" }, e("div", { className: "t3-video__grid" }, e("div", { className: "t3-video__media t3-reveal" }, e("video", { className: "t3-video__media-el", src: "assets/" + (cfg.video || "patient-journey.mp4"), poster: "assets/rid-mirror.jpg", autoPlay: true, loop: true, muted: true, playsInline: true, preload: "auto", ref: (el) => { if (el) el.muted = true; } })), e("div", null, e("span", { className: "t3-kick" }, "See for yourself"), e("h2", { className: "t3-h2", style: { margin: "14px 0 0" } }, "Sixty seconds inside ", e("span", { className: "alt" }, "Re-Ignite"), "."), e("p", { className: "t3-body", style: { margin: "18px 0 24px" } }, "Meet the team, see the iTero Lumina in action, and get a feel for the day before you arrive. No surprises, just a warm welcome."), e(B, { variant: "light", href: "#reserve" }, "Reserve your spot")))); }; window.T3B = { Trust, Offer, Flow, BeforeAfter, Why, Gallery, VideoSlot }; })();