/* How it Works + Why 360 + UGC + Final CTA + Footer + Modal */ const { useState: u4S, useEffect: u4E, useRef: u4R } = React; /* ---------- How it works ---------- */ function HowItWorks() { const steps = [ { n: "01", t: "Your dentist fits your trays", b: "Custom-made to your mouth from a PVS impression or digital scan. These are yours to keep, and they last for years." }, { n: "02", t: "You're prescribed your gel", b: "16% carbamide peroxide for overnight wear, or 6% hydrogen peroxide for a one-hour daytime protocol. Your dentist chooses what's right for you." }, { n: "03", t: "The app runs your journey", b: "Daily routine, a built-in timer, and session reminders. It keeps you on track from day one to day fourteen." }, { n: "04", t: "You top up through your dentist", b: "When your gel runs low, one tap sends a request to your practice. No faff, no going back to the start." }, ]; return (
— How it actually works Trays · gel · app

Done properly,
it's transformative.

{steps.map((s, i) => ( ))}
); } function Step({ n, t, b }) { return (
e.currentTarget.style.borderTopColor = "var(--accent)"} onMouseLeave={(e) => e.currentTarget.style.borderTopColor = "var(--on-dark-15)"} >
{n}

{t}

{b}

); } /* ---------- Why 360 ---------- */ function Why360() { const rows = [ ["Prescription-strength peroxide", true, false, false], ["Applied through a dentist", true, false, false], ["Custom-fit trays", true, false, false], ["Near-zero sensitivity", true, false, false], ["App-guided routine", true, false, false], ["Only through your dentist", true, false, false], ]; const cols = [ { label: "360", em: true, sub: "Trays + gel + app" }, { label: "Strips", sub: "Boots, Amazon, eBay" }, { label: "Salon", sub: "In-chair light" }, ]; return (
— Why 360

Better than strips.
Half the price of the salon.

We checked — every other whitening system we could find was on Amazon, eBay or the high street. Ours isn't, and never will be. The only place to get 360 is through a dental professional, because it's the only way to do this legally and properly. 20 years of whitening, five years formulating our own gel.

{/* Header */}
Feature {cols.map(c => (
{c.label}
{c.sub}
))}
{/* Rows */} {rows.map(([feature, a, b, c], i) => (
{feature}
))}
); } function CheckCell({ on, accent }) { return (
{on ? ( ) : ( )}
); } /* ---------- UGC reels grid ---------- */ function Reels({ onOpenModal }) { const tiles = [ { handle: "@stassie", caption: "fourteen days. that's it.", tone: 1 }, { handle: "@charlotted", caption: "i'm never going back.", tone: 2 }, { handle: "@emmacgallagher", caption: "side by side w/ veneers. unreal.", tone: 3 }, { handle: "@taliarobinson", caption: "the kit unboxing.", tone: 1 }, { handle: "@aliyahbah", caption: "no sensitivity. promise.", tone: 2 }, { handle: "@noellebanno", caption: "before bed routine, day 9.", tone: 3 }, ]; return (
— The letters page

Or take it from everyone else.

4.9 · 1,824 reviews
{tiles.map((t, i) => ( ))}
Ready when you are

Your turn,
then.

See how it works
); } function ReelTile({ handle, caption, tone, index }) { const [hover, setHover] = u4S(false); const palettes = [ "linear-gradient(180deg, #2A1F18 0%, #5C3F2A 100%)", "linear-gradient(180deg, #3D2920 0%, #8C6442 100%)", "linear-gradient(180deg, #1F1612 0%, #4A3528 100%)", ]; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: "relative", aspectRatio: "9 / 16", borderRadius: 6, overflow: "hidden", cursor: "pointer", background: palettes[(tone - 1) % palettes.length], transition: "transform .5s cubic-bezier(.2,.7,.2,1)", transform: hover ? "translateY(-4px)" : "translateY(0)", }} > {/* Play icon */}
{/* Bottom caption */}
{handle}
{caption}
); } /* ---------- Footer with quiet 'For Dentists' rail ---------- */ function Footer({ onOpenModal }) { return ( ); } function FCol({ title, links, dim }) { return (
{title}
); } /* ---------- Find Your Dentist modal ---------- */ function FindDentistModal({ open, onClose }) { const [step, setStep] = u4S(0); const [form, setForm] = u4S({ name: "", email: "", postcode: "" }); const [busy, setBusy] = u4S(false); const [err, setErr] = u4S(""); const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value })); u4E(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; if (open) window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, onClose]); const submit = async () => { setErr(""); if (!form.postcode.trim() || !form.email.trim()) { setErr("Please add your postcode and email so we can match you."); return; } setBusy(true); try { await window.submitEnquiry({ name: form.name.trim(), email: form.email.trim(), postcode: form.postcode.trim(), message: "Patient enquiry — requesting a nearby 360 Whitening dentist.", }); setStep(1); } catch (e) { setErr("Something went wrong sending that. Please try again, or email hello@360whitening.co.uk."); } finally { setBusy(false); } }; return (
e.stopPropagation()}> {step === 0 ? ( <> — Find your dentist

Where shall we look?

Drop your postcode and an email. We'll match you to a 360-trained dentist nearby and book you a free 15-minute fit visit.

{err && (

{err}

)}

No card. No spam. Unsubscribe any time.

) : (

Found you three.

We've sent the practice list and a booking link to your inbox. Expect it inside two minutes.

)}
); } Object.assign(window, { HowItWorks, Why360, Reels, Footer, FindDentistModal, TheApp }); /* ---------- The 360 App — patient side ---------- */ function TheApp({ onOpenModal }) { return (
— The 360 app

Your glow-up,
on autopilot.

Included free with your kit. It's the difference between a course you forget about after week one and a result you can actually see and prove. Open it, follow the routine, take your photos, and stay on track to day fourteen.

{[ ["01", "Daily routine", "Your session for today, your formulation, your wear time. Just follow along."], ["02", "Progress photos", "Snap a photo through the app to see the change for yourself, week by week."], ["03", "Session reminders", "A nudge when it's time — so a 14-day course doesn't drift into a six-week one."], ["04", "One-tap top-ups", "Running low? Tap Top-up. Your dentist arranges the refill."], ].map(([n, t, b]) => (
{n}
{t}
{b}
))}
Download on the App Store ▶ Get it on Google Play
); } function PatientPhone() { const notifs = [ { title: "Time for tonight's session", body: "Pop in your trays · 30-min timer ready.", flag: "ROUTINE" }, { title: "Day 9 · You're on a streak", body: "Nine nights down, five to go. Keep it going.", flag: "PROGRESS" }, { title: "Running low?", body: "One gel left. Tap to re-order through your dentist.", flag: "TOP-UP" }, ]; return (
); } Object.assign(window, { TheApp, PatientPhone });