/* DISC Dubai — Pages */
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;
const { SERVICES: SVCS, CONCERNS: CONS, LOCATIONS: LOCS, TEAM: TEAMP } = window.DISC_DATA;
const { Icon: I, navigate: navP } = window.DISC_UI;

/* ---------------- Home ---------------- */
function HomePage({ onBook, onBookService }) {
  const [activeConcern, setActiveConcern] = useStateP(null);
  return (
    <div className="page home">
      {/* Hero */}
      <section className="hero">
        <div className="hero-media">
          <img src="media/home-header.webp" alt="" />
          <div className="hero-fade" />
        </div>
        <div className="wrap hero-inner">
          <div className="hero-eyebrow">
            <span className="green-dot"/> Since 2014 · Dubai Healthcare City
          </div>
          <h1>
            Integrative sports medicine, <em>built around movement</em>.
          </h1>
          <p className="hero-sub">
            A multidisciplinary clinic in Dubai for sports injury, rehabilitation, chiropractic, physiotherapy and longevity care. One team, three locations, one plan for getting you back to what you love.
          </p>
          <div className="hero-cta">
            <button className="primary-btn lg" onClick={onBook}>Book an appointment <I.arrow /></button>
            <a className="ghost-btn lg" href="#/services">Explore our services</a>
          </div>
          <div className="hero-stats">
            <div><strong>10+</strong><span>years in Dubai</span></div>
            <div><strong>3</strong><span>Dubai locations</span></div>
            <div><strong>8</strong><span>integrated services</span></div>
            <div><strong>EN · AR · RU · ZH</strong><span>multilingual care</span></div>
          </div>
        </div>
      </section>

      {/* By concern strip */}
      <section className="band concern-band">
        <div className="wrap">
          <div className="band-head">
            <small>Start here</small>
            <h2>What brings you in today?</h2>
          </div>
          <div className="concern-chips lg">
            {CONS.map(c => (
              <a key={c.label} className={"chip lg " + (activeConcern === c.label ? "is-on" : "")}
                 href={`#/services/${c.service}`}
                 onMouseEnter={() => setActiveConcern(c.label)}
                 onMouseLeave={() => setActiveConcern(null)}>
                {c.label} <I.arrow />
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Services grid */}
      <section className="band">
        <div className="wrap">
          <div className="band-head two-col">
            <div>
              <small>What we do</small>
              <h2>Care that thinks in <em>movement</em>, not in silos.</h2>
            </div>
            <p>Eight services, one clinical team. Your physiotherapist and your chiropractor share the same notes — so your rehab is a conversation, not a relay race.</p>
          </div>
          <div className="services-grid">
            {SVCS.map((s, i) => (
              <a key={s.slug} className={"svc-card " + (i === 0 ? "is-feature" : "")} href={`#/services/${s.slug}`}>
                <div className="svc-img" style={{backgroundImage:`url(${s.image})`}} />
                <div className="svc-body">
                  <h3>{s.title}</h3>
                  <p>{s.short}</p>
                  <span className="text-link">Read more <I.arrow /></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Differentiators */}
      <section className="band band-mist">
        <div className="wrap">
          <div className="band-head">
            <small>Why DISC</small>
            <h2>An integrated model — not a referral chain.</h2>
          </div>
          <div className="diff-grid">
            <article className="diff">
              <I.layers />
              <h3>One clinical team</h3>
              <p>Chiropractors, physiotherapists, sports doctors and family-medicine consultants under one roof — your case is reviewed in clinic, not in a chat thread.</p>
            </article>
            <article className="diff">
              <I.spark />
              <h3>Dynexus AI gait analysis</h3>
              <p>Objective movement and gait data, captured in our DHCC lab. We use the report to drive rehab decisions — and to prove progress.</p>
              <a href="#/services/dynexus-gait-analysis" className="text-link">See how it works <I.arrow /></a>
            </article>
            <article className="diff">
              <I.shield />
              <h3>Practitioner-led</h3>
              <p>Medically directed by Dr Tamara Ghazi (Doctor of Chiropractic) since 2014. Every clinician on our team is registered with the appropriate UAE authority.</p>
              <a href="#/team" className="text-link">Meet the team <I.arrow /></a>
            </article>
          </div>
        </div>
      </section>

      {/* Practitioner spotlight */}
      <section className="band spotlight">
        <div className="wrap spotlight-grid">
          <div className="spotlight-img">
            <img src="media/doctor-tamara-ghazi.webp" alt="Dr Tamara Ghazi" />
            <div className="spotlight-badge">
              <I.shield />
              <span>Medical Director · Doctor of Chiropractic</span>
            </div>
          </div>
          <div className="spotlight-body">
            <small>Leadership</small>
            <h2>“Movement is the through-line. Everything we do orbits it.”</h2>
            <p className="lede">Dr Tamara Ghazi co-founded DISC in 2014 to build a clinic where chiropractic, physiotherapy and sports medicine sit at the same table. A decade on, that model is what brings people back.</p>
            <ul className="spotlight-creds">
              <li><I.check /> Doctor of Chiropractic — Palmer West Chiropractic College, San Jose</li>
              <li><I.check /> BSc Human Biology — University of Toronto</li>
              <li><I.check /> Board Member — Emirates Chiropractic Association</li>
            </ul>
            <div className="spotlight-cta">
              <a className="ghost-btn" href="#/team/tamara-ghazi">Read Dr Tamara's profile</a>
              <button className="primary-btn" onClick={() => onBookService("chiropractic-and-osteopathy")}>Book with our chiropractic team <I.arrow /></button>
            </div>
          </div>
        </div>
      </section>

      {/* Approach pillars */}
      <section className="band">
        <div className="wrap">
          <div className="band-head two-col">
            <div>
              <small>Our approach</small>
              <h2>Three commitments we keep, visit after visit.</h2>
            </div>
            <a className="text-link" href="#/about">More about our approach <I.arrow /></a>
          </div>
          <div className="pillar-grid">
            <article className="pillar">
              <div className="pillar-img" style={{backgroundImage:"url(media/approach-1.webp)"}}/>
              <div className="pillar-body">
                <em>01 · Integration</em>
                <h3>Disciplines that share a corridor.</h3>
                <p>Sports medicine, chiropractic, physiotherapy, family medicine — one clinical record and one care plan.</p>
              </div>
            </article>
            <article className="pillar">
              <div className="pillar-img" style={{backgroundImage:"url(media/approach-2.webp)"}}/>
              <div className="pillar-body">
                <em>02 · Innovation</em>
                <h3>Measurement before opinion.</h3>
                <p>From Dynexus gait capture to objective strength testing — we use data to decide, not to decorate.</p>
              </div>
            </article>
            <article className="pillar">
              <div className="pillar-img" style={{backgroundImage:"url(media/approach-3.webp)"}}/>
              <div className="pillar-body">
                <em>03 · Quality &amp; safety</em>
                <h3>Standards, not slogans.</h3>
                <p>Practitioners registered with the appropriate UAE authority. Compliant, consented, evidence-led.</p>
              </div>
            </article>
          </div>
        </div>
      </section>

      {/* Team preview */}
      <section className="band band-ink">
        <div className="wrap">
          <div className="band-head two-col">
            <div>
              <small>The team</small>
              <h2>Fifteen clinicians. One clinical conversation.</h2>
            </div>
            <a className="text-link light" href="#/team">All practitioners <I.arrow /></a>
          </div>
          <div className="team-rail">
            {TEAMP.slice(0, 8).map(p => (
              <a key={p.slug} href={`#/team/${p.slug}`} className="team-rail-card">
                <div className="team-rail-img" style={{backgroundImage:`url(${p.image})`}} />
                <div>
                  <strong>{p.name}</strong>
                  <span>{p.role}</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Locations */}
      <section className="band">
        <div className="wrap">
          <div className="band-head two-col">
            <div>
              <small>Where we are</small>
              <h2>Three Dubai locations, one care plan.</h2>
            </div>
            <a className="text-link" href="#/locations">All locations &amp; hours <I.arrow /></a>
          </div>
          <div className="loc-grid">
            {LOCS.map(l => (
              <a key={l.id} className="loc-card-lg" href={`#/locations#${l.id}`}>
                <div className="loc-card-img" style={{backgroundImage:`url(${l.image})`}}>
                  {l.lead && <span className="tag-pill light">Flagship</span>}
                </div>
                <div className="loc-card-body">
                  <h3>{l.name}</h3>
                  <p>{l.addressLines.join(" · ")}</p>
                  <div className="loc-hours">
                    {l.hours.map(([d,t]) => <span key={d}><em>{d}</em> {t}</span>)}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CTA band */}
      <CTABand onBook={onBook} />
    </div>
  );
}

function CTABand({ onBook }) {
  return (
    <section className="cta-band">
      <div className="wrap cta-inner">
        <h2>Let's get you moving again.</h2>
        <p>Most patients are seen within 48 hours. No referral required.</p>
        <div className="cta-actions">
          <button className="primary-btn lg invert" onClick={onBook}>Book an appointment <I.arrow /></button>
          <a className="ghost-btn lg light" href="https://wa.me/971521214295" target="_blank" rel="noopener"><I.whatsapp /> Chat on WhatsApp</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Services hub ---------------- */
function ServicesHubPage({ onBook }) {
  const [filter, setFilter] = useStateP("all");
  return (
    <div className="page services-hub">
      <PageHero
        eyebrow="Services"
        title={<>Care plans built around <em>your</em> goal — not ours.</>}
        sub="Eight services, one integrated team. Every plan is reviewed in clinic and re-tested before discharge."
      />
      <div className="wrap">
        <div className="filter-row">
          <span>View</span>
          {["all", "movement", "performance", "longevity"].map(f => (
            <button key={f} className={"chip " + (filter === f ? "is-on" : "")} onClick={() => setFilter(f)}>{f === "all" ? "Everything" : f}</button>
          ))}
        </div>
        <div className="services-grid lg">
          {SVCS.map(s => (
            <a key={s.slug} className="svc-card lg" href={`#/services/${s.slug}`}>
              <div className="svc-img" style={{backgroundImage:`url(${s.image})`}} />
              <div className="svc-body">
                <h3>{s.title}</h3>
                <p>{s.short}</p>
                <span className="text-link">Read the treatment journey <I.arrow /></span>
              </div>
            </a>
          ))}
        </div>
        <div className="by-concern">
          <h3>Or start from a concern</h3>
          <div className="concern-chips lg">
            {CONS.map(c => <a key={c.label} className="chip lg" href={`#/services/${c.service}`}>{c.label} <I.arrow /></a>)}
          </div>
        </div>
      </div>
      <CTABand onBook={onBook} />
    </div>
  );
}

/* ---------------- Service detail ---------------- */
function ServiceDetailPage({ slug, onBookService }) {
  const svc = SVCS.find(s => s.slug === slug);
  const [openFaq, setOpenFaq] = useStateP(0);
  if (!svc) return <NotFound />;
  const related = SVCS.filter(s => s.slug !== slug).slice(0,3);
  return (
    <div className="page service-detail">
      <section className="svc-hero">
        <div className="wrap svc-hero-grid">
          <div>
            <a className="back-link" href="#/services"><I.arrow style={{transform:"rotate(180deg)"}}/> All services</a>
            <small>Treatment journey</small>
            <h1>{svc.title}</h1>
            <p className="lede">{svc.short}</p>
            <div className="svc-hero-cta">
              <button className="primary-btn" onClick={() => onBookService(svc.slug)}>Book a consultation <I.arrow /></button>
              <a className="ghost-btn" href="https://wa.me/971521214295" target="_blank" rel="noopener"><I.whatsapp /> Ask a quick question</a>
            </div>
          </div>
          <div className="svc-hero-img" style={{backgroundImage:`url(${svc.image})`}} />
        </div>
      </section>

      <section className="band">
        <div className="wrap svc-section">
          <div className="svc-side">
            <small>Who it's for</small>
          </div>
          <div className="svc-main">
            <h2>{svc.who}</h2>
          </div>
        </div>
      </section>

      <section className="band band-mist">
        <div className="wrap">
          <small>What to expect</small>
          <h2 style={{marginTop:6}}>Your treatment journey</h2>
          <div className="journey">
            {svc.journey.map(([h, b], i) => (
              <article key={h} className="journey-step">
                <em>{String(i+1).padStart(2,"0")}</em>
                <h3>{h}</h3>
                <p>{b}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="band">
        <div className="wrap svc-section">
          <div className="svc-side">
            <small>The DISC approach</small>
          </div>
          <div className="svc-main">
            <h2>{svc.approach}</h2>
            <p>We work in small clinical teams across our three Dubai locations. Your record stays with you between visits and disciplines — so progress compounds.</p>
          </div>
        </div>
      </section>

      <section className="band band-mist">
        <div className="wrap">
          <small>Frequently asked</small>
          <h2 style={{marginTop:6}}>Questions, answered</h2>
          <div className="faqs">
            {svc.faqs.map((f, i) => (
              <div key={f[0]} className={"faq " + (openFaq === i ? "is-open" : "")}>
                <button onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span>{f[0]}</span><I.plus />
                </button>
                <div className="faq-body"><p>{f[1]}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="band">
        <div className="wrap">
          <small>Related</small>
          <h2>Other services your plan might include</h2>
          <div className="services-grid">
            {related.map(s => (
              <a key={s.slug} className="svc-card" href={`#/services/${s.slug}`}>
                <div className="svc-img" style={{backgroundImage:`url(${s.image})`}} />
                <div className="svc-body">
                  <h3>{s.title}</h3>
                  <p>{s.short}</p>
                  <span className="text-link">Read more <I.arrow /></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <CTABand onBook={() => onBookService(svc.slug)} />
    </div>
  );
}

/* ---------------- Team ---------------- */
function TeamPage({ onBook }) {
  const [filter, setFilter] = useStateP("all");
  const disciplines = useMemoP(() => {
    const set = new Set(TEAMP.map(t => t.discipline));
    return ["all", ...Array.from(set)];
  }, []);
  const filtered = TEAMP.filter(t => filter === "all" || t.discipline === filter);
  return (
    <div className="page team-page">
      <PageHero
        eyebrow="Our team"
        title={<>Practitioners you can <em>name</em>, credentials you can verify.</>}
        sub="Every clinician on the DISC team is registered with the appropriate UAE authority. Profiles include discipline, training and the locations they consult from."
      />
      <div className="wrap">
        <div className="filter-row">
          <span>Discipline</span>
          {disciplines.map(d => (
            <button key={d} className={"chip " + (filter === d ? "is-on" : "")} onClick={() => setFilter(d)}>{d === "all" ? "Everyone" : d}</button>
          ))}
        </div>
        <div className="team-grid">
          {filtered.map(p => (
            <a key={p.slug} href={`#/team/${p.slug}`} className={"team-card " + (p.slug === "tamara-ghazi" ? "is-lead" : "")}>
              <div className="team-img" style={{backgroundImage:`url(${p.image})`}}>
                {p.slug === "tamara-ghazi" && <span className="tag-pill light">Medical Director</span>}
              </div>
              <div className="team-meta">
                <strong>{p.name}</strong>
                <span>{p.role}</span>
                <div className="team-locs">
                  {p.locations.map(lid => <em key={lid}>{LOCS.find(l => l.id === lid).short}</em>)}
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
      <CTABand onBook={onBook} />
    </div>
  );
}

function PractitionerPage({ slug, onBookService }) {
  const p = TEAMP.find(t => t.slug === slug);
  if (!p) return <NotFound />;
  return (
    <div className="page practitioner">
      <section className="prac-hero">
        <div className="wrap prac-hero-grid">
          <div className="prac-img" style={{backgroundImage:`url(${p.image})`}} />
          <div className="prac-meta">
            <a className="back-link" href="#/team"><I.arrow style={{transform:"rotate(180deg)"}}/> All practitioners</a>
            <small>{p.discipline}</small>
            <h1>{p.name}</h1>
            <p className="role">{p.role}</p>
            {p.credentials && <ul className="cred-list">
              <li><I.check /> {p.credentials}</li>
              {p.licence && <li><I.check /> {p.licence}</li>}
            </ul>}
            {p.bio && <p className="lede">{p.bio}</p>}
            <div className="prac-locs">
              <small>Consults at</small>
              <div>{p.locations.map(lid => {
                const l = LOCS.find(x => x.id === lid);
                return <a key={lid} className="chip sm" href={`#/locations#${lid}`}>{l.name}</a>;
              })}</div>
            </div>
            <div className="prac-cta">
              <button className="primary-btn" onClick={() => onBookService("")}>Book with {p.name.split(" ").slice(-1)[0]} <I.arrow /></button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------------- About ---------------- */
function AboutPage({ onBook }) {
  return (
    <div className="page about-page">
      <PageHero
        eyebrow="About DISC"
        title={<>A clinic built around <em>movement</em>, since 2014.</>}
        sub="Diversified Integrated Sports Clinic was founded in Dubai Healthcare City with a single brief: bring sports medicine, chiropractic, physiotherapy and rehab into one clinical conversation."
      />
      <section className="about-hero-img">
        <img src="media/about-main.webp" alt="Inside DISC" />
      </section>
      <section className="band">
        <div className="wrap two-col-band">
          <div>
            <small>Our story</small>
            <h2>A decade of one team, one record, one care plan.</h2>
          </div>
          <div className="story-body">
            <p className="lede">
              DISC opened its doors in 2014 — a small chiropractic-led team in Dubai Healthcare City. A decade later, we're a multidisciplinary clinic with three Dubai locations and group clinics in Abu Dhabi and Kuwait. What hasn't changed: every patient is seen by a team that talks to each other.
            </p>
            <p>
              We treat sports injuries, persistent musculoskeletal pain, pre- and post-surgical recovery, women's health and longevity. We've stayed deliberately small in scope so that we can stay deep in quality.
            </p>
          </div>
        </div>
      </section>

      <section className="band band-mist">
        <div className="wrap">
          <div className="band-head"><small>Our approach</small><h2>Three commitments we keep.</h2></div>
          <div className="pillar-grid">
            <article className="pillar">
              <div className="pillar-img" style={{backgroundImage:"url(media/approach-1.webp)"}}/>
              <div className="pillar-body">
                <em>01 · Integration</em>
                <h3>One clinical record.</h3>
                <p>Sports physician, chiropractor, physiotherapist — same patient, same notes. Your plan is one document, not a sequence of letters.</p>
              </div>
            </article>
            <article className="pillar">
              <div className="pillar-img" style={{backgroundImage:"url(media/approach-2.webp)"}}/>
              <div className="pillar-body">
                <em>02 · Innovation</em>
                <h3>Measurement before opinion.</h3>
                <p>Dynexus AI gait analysis, objective strength testing, video review — we use the data to plan and to prove progress.</p>
              </div>
            </article>
            <article className="pillar">
              <div className="pillar-img" style={{backgroundImage:"url(media/approach-3.webp)"}}/>
              <div className="pillar-body">
                <em>03 · Quality &amp; safety</em>
                <h3>Standards, not slogans.</h3>
                <p>Every DISC clinician is registered with the appropriate UAE authority. We don't make outcome guarantees and we don't publish patient images without consent.</p>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section className="band">
        <div className="wrap leadership">
          <div className="lead-card">
            <img src="media/doctor-tamara-ghazi.webp" alt="Dr Tamara Ghazi" />
            <div>
              <small>Medical Director &amp; Co-Founder</small>
              <h3>Dr Tamara Ghazi</h3>
              <p>Doctor of Chiropractic — Palmer West Chiropractic College. BSc Human Biology — University of Toronto. Board member, Emirates Chiropractic Association.</p>
              <a className="text-link" href="#/team/tamara-ghazi">Read profile <I.arrow /></a>
            </div>
          </div>
          <div className="lead-side">
            <small>Founded</small>
            <h4>2014, in Dubai Healthcare City</h4>
            <small>Licensed by</small>
            <h4>Dubai Healthcare City (DHCC)</h4>
            <small>Entity</small>
            <h4>D.I.S.C FZ-LLC</h4>
            <small>Group footprint</small>
            <h4>Dubai · Abu Dhabi · Kuwait</h4>
          </div>
        </div>
      </section>

      <CTABand onBook={onBook} />
    </div>
  );
}

/* ---------------- Locations ---------------- */
function LocationsPage({ onBook }) {
  return (
    <div className="page locations-page">
      <PageHero
        eyebrow="Locations"
        title={<>Three Dubai clinics. <em>One care plan.</em></>}
        sub="DHCC is our flagship, with the full multidisciplinary team and our Dynexus gait lab. JLT serves the Marina corridor. Al Quoz lives inside Central Padel — for athletes, by athletes."
      />
      <div className="wrap locations-detail">
        {LOCS.map(l => (
          <article key={l.id} id={l.id} className="location-row">
            <div className="loc-row-media" style={{backgroundImage:`url(${l.image})`}}>
              {l.lead && <span className="tag-pill light">Flagship</span>}
            </div>
            <div className="loc-row-body">
              <small>{l.short}</small>
              <h2>{l.name}</h2>
              <p className="lede">{l.note}</p>
              <div className="loc-row-grid">
                <div>
                  <h5><I.pin /> Address</h5>
                  <p>{l.addressLines.map((line, i) => <Fragment key={i}>{line}<br/></Fragment>)}</p>
                </div>
                <div>
                  <h5><I.clock /> Hours</h5>
                  <ul className="hours">
                    {l.hours.map(([d,t]) => <li key={d}><em>{d}</em><span>{t}</span></li>)}
                  </ul>
                </div>
                <div>
                  <h5>Parking</h5>
                  <p>{l.parking}</p>
                </div>
              </div>
              <div className="loc-row-cta">
                <button className="primary-btn" onClick={onBook}>Book at {l.short} <I.arrow /></button>
                <a className="ghost-btn" href="tel:+97143662334"><I.phone /> +971 4 366 2334</a>
              </div>
            </div>
          </article>
        ))}
      </div>
      <CTABand onBook={onBook} />
    </div>
  );
}

/* ---------------- Contact ---------------- */
function ContactPage({ onBook }) {
  return (
    <div className="page contact-page">
      <PageHero
        eyebrow="Contact"
        title={<>Talk to us — <em>before</em> you book, if it helps.</>}
        sub="The front-of-house team can answer questions on insurance, hours, accessibility and what to expect at your first visit."
      />
      <div className="wrap contact-grid">
        <div className="contact-card">
          <h3><I.phone /> Call</h3>
          <p>For all three Dubai clinics.</p>
          <a className="big-link" href="tel:+97143662334">+971 4 366 2334</a>
        </div>
        <div className="contact-card">
          <h3><I.whatsapp /> WhatsApp</h3>
          <p>For quick questions and to confirm appointments.</p>
          <a className="big-link" href="https://wa.me/971521214295" target="_blank" rel="noopener">+971 52 121 4295</a>
        </div>
        <div className="contact-card">
          <h3>Email</h3>
          <p>For corporate, press and general enquiries.</p>
          <a className="big-link" href="mailto:contact@disc-me.com">contact@disc-me.com</a>
        </div>
        <div className="contact-card lg">
          <h3>Book an appointment</h3>
          <p>Three locations, eight services, most patients seen within 48 hours.</p>
          <button className="primary-btn lg" onClick={onBook}>Start the booking <I.arrow /></button>
        </div>
      </div>
      <CTABand onBook={onBook} />
    </div>
  );
}

/* ---------------- Before & After (placeholder, compliance-locked) ---------------- */
function BeforeAfterPage({ onBook }) {
  return (
    <div className="page ba-page">
      <PageHero
        eyebrow="Before &amp; after"
        title={<>Outcomes — published only with <em>consent</em>.</>}
        sub="Recovery results are personal. We publish patient outcomes only with written consent and in full compliance with UAE medical-advertising rules."
      />
      <div className="wrap">
        <div className="ba-locked">
          <I.shield />
          <h3>This gallery is consent-gated.</h3>
          <p>Our before/after gallery is in build. When live, it will show only outcomes for which the patient has provided informed, written consent — and only in formats permitted under DHA / DHCC advertising rules. No imagery is republished here without that work being done first.</p>
          <p>Until then, if you would like to discuss a specific outcome you've seen elsewhere, we're happy to talk through what we typically see at consultation.</p>
          <button className="primary-btn" onClick={onBook}>Book a consultation <I.arrow /></button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Page hero ---------------- */
function PageHero({ eyebrow, title, sub }) {
  return (
    <section className="page-hero">
      <div className="wrap">
        <small>{eyebrow}</small>
        <h1>{title}</h1>
        <p className="lede">{sub}</p>
      </div>
    </section>
  );
}

function NotFound() {
  return (
    <div className="page">
      <PageHero eyebrow="404" title={<>That page is between sessions.</>} sub="Try the services hub, or head home." />
      <div className="wrap" style={{paddingBottom:80, display:"flex", gap:12}}>
        <a className="primary-btn" href="#/">Home</a>
        <a className="ghost-btn" href="#/services">Services</a>
      </div>
    </div>
  );
}

window.DISC_PAGES = { HomePage, ServicesHubPage, ServiceDetailPage, TeamPage, PractitionerPage, AboutPage, LocationsPage, ContactPage, BeforeAfterPage, NotFound };