/* global React */
/* Team page + vet modal, Locations page, Emergency page, About page */
const DP = window.BVH_DATA;
const { useState: useStateP, useEffect: useEffectP } = React;

/* ==================== TEAM PAGE ==================== */
function TeamPage({ openVet }) {
  return (
    <div className="page-enter">
      <section className="section" style={{paddingBottom:48}}>
        <div className="wrap">
          <div className="section-head" style={{marginBottom:48}}>
            <div>
              <div className="eyebrow"><span className="num">04</span>VETERINARIANS</div>
              <h1 className="display" style={{fontSize:'clamp(54px, 7vw, 96px)'}}>Six vets.<br/>One <em>team.</em></h1>
            </div>
            <div>
              <p className="lede">
                Every vet's credentials are published verbatim from their certifications. UK and South African regulators (RCVS, SAVC) govern their qualifications; Dubai practice licences (MOCCAE / Dubai Municipality) are held by each individual and will be displayed once we receive client-supplied numbers.
              </p>
              <div style={{display:'flex', gap:8, marginTop:16, flexWrap:'wrap'}}>
                <span className="tag success">RCVS / SAVC VERIFIED</span>
                <span className="tag">MOCCAE — CLIENT TO SUPPLY</span>
                <span className="tag">6 OF 6 VETS PUBLISHED</span>
              </div>
            </div>
          </div>

          <div className="vets-grid" style={{gap:40}}>
            {DP.vets.map((v) => (
              <div key={v.slug} className="vet-card" onClick={() => openVet(v.slug)}>
                <div className="vet-photo">
                  <img src={v.photo} alt={v.name} />
                  <span className="vet-meta">{v.creds.split(' · ')[0]}</span>
                </div>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:8}}>
                  <div className="vet-name">{v.name}</div>
                  <div className="creds" style={{color:'var(--vet)'}}>0{DP.vets.indexOf(v)+1}/06</div>
                </div>
                <div className="vet-role">{v.role} · {v.country}</div>
                <div className="creds" style={{marginTop:8}}>{v.creds}</div>
                <div style={{marginTop:14, paddingTop:14, borderTop:'1px solid var(--line)', fontSize:13, color:'var(--slate)', lineHeight:1.5}}>
                  Qualified — {v.qualifiedAt}<br/>
                  {v.experience} of clinical experience
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function VetModal({ slug, onClose, setRoute }) {
  const v = DP.vets.find(x => x.slug === slug);
  useEffectP(() => {
    function esc(e) { if (e.key === 'Escape') onClose(); }
    document.addEventListener('keydown', esc);
    return () => document.removeEventListener('keydown', esc);
  }, [onClose]);
  if (!v) return null;
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>✕</button>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr'}}>
          <div style={{aspectRatio:'4/5', overflow:'hidden', background:'var(--paper-2)'}}>
            <img src={v.photo} alt={v.name} style={{width:'100%', height:'100%', objectFit:'cover'}} />
          </div>
          <div style={{padding:'40px 36px'}}>
            <div className="eyebrow"><span className="num">VET</span>{v.role.toUpperCase()}</div>
            <h2 className="display" style={{fontSize:42, margin:'10px 0 8px', fontWeight:500}}>{v.name}</h2>
            <div className="creds" style={{color:'var(--vet)'}}>{v.creds}</div>

            <div style={{marginTop:24, fontSize:15, lineHeight:1.6, color:'var(--ink)'}}>{v.bio}</div>

            <div style={{marginTop:28, display:'grid', gridTemplateColumns:'1fr 1fr', gap:20}}>
              <div>
                <div className="creds" style={{marginBottom:6}}>QUALIFIED</div>
                <div style={{fontSize:14}}>{v.qualifiedAt}</div>
              </div>
              <div>
                <div className="creds" style={{marginBottom:6}}>EXPERIENCE</div>
                <div style={{fontSize:14}}>{v.experience}</div>
              </div>
              <div>
                <div className="creds" style={{marginBottom:6}}>BASED IN</div>
                <div style={{fontSize:14}}>{v.country}</div>
              </div>
              <div>
                <div className="creds" style={{marginBottom:6}}>MOCCAE LICENCE</div>
                <div style={{fontSize:12, color:'var(--slate)', fontStyle:'italic'}}>Pending — client to supply</div>
              </div>
            </div>

            <div style={{marginTop:24}}>
              <div className="creds" style={{marginBottom:8}}>SPECIAL INTERESTS</div>
              <div style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                {v.interests.map(i => <span key={i} className="tag vet">{i}</span>)}
              </div>
            </div>

            <div style={{marginTop:32, display:'flex', gap:10}}>
              <button className="btn btn-primary btn-sm" onClick={() => { onClose(); setRoute("book"); }}>Book with {v.name.split(' ')[1]} →</button>
              <a className="btn btn-ghost btn-sm" href={DP.hospital.waLink}>Ask on WhatsApp</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ==================== LOCATIONS PAGE ==================== */
function LocationsPage({ location, setLocation, setRoute, focusId }) {
  const cur = DP.locations.find(l => l.id === (focusId || location));
  useEffectP(() => { if (focusId) setLocation(focusId); }, [focusId]);

  return (
    <div className="page-enter">
      <section className="section" style={{paddingBottom:32}}>
        <div className="wrap">
          <div className="section-head" style={{marginBottom:32}}>
            <div>
              <div className="eyebrow"><span className="num">06</span>LOCATIONS</div>
              <h1 className="display" style={{fontSize:'clamp(54px, 7vw, 96px)'}}>Two doors.<br/><em>One</em> standard.</h1>
            </div>
            <div>
              <p className="lede">
                Your patient record follows you between branches — vaccinations, dental charts, lab results and surgical notes are shared instantly. Click a location below to see its team, on-site facilities and a working map embed.
              </p>
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:16, marginBottom:24}}>
            {DP.locations.map(l => (
              <button
                key={l.id}
                onClick={() => setLocation(l.id)}
                style={{
                  textAlign:'left',
                  padding:'20px 24px',
                  background: l.id===cur.id?'var(--ink)':'var(--paper)',
                  color: l.id===cur.id?'var(--paper)':'var(--ink)',
                  border:'1px solid '+(l.id===cur.id?'var(--ink)':'var(--line-strong)'),
                  borderRadius:6,
                  cursor:'pointer',
                  transition:'all .15s ease',
                }}
              >
                <div className="creds" style={{color: l.id===cur.id?'rgba(251,249,244,.6)':'var(--slate)', marginBottom:8}}>
                  {l.isFlagship ? "FLAGSHIP HOSPITAL" : "NEIGHBOURHOOD CLINIC"}
                </div>
                <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:500}}>{l.name}</div>
                <div style={{fontSize:13, opacity:.7, marginTop:4}}>{l.addressLine1}, {l.addressLine2.split(',')[0]}</div>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:48}}>
            <div>
              {/* Map placeholder */}
              <div style={{
                aspectRatio:'4/3',
                background: `linear-gradient(135deg, #E1E9F0 0%, #F2EFE8 100%)`,
                position:'relative',
                overflow:'hidden',
                borderRadius:6,
                border:'1px solid var(--line-strong)',
              }}>
                {/* fake map grid */}
                <svg width="100%" height="100%" style={{position:'absolute', inset:0, opacity:.3}}>
                  <defs>
                    <pattern id="g" width="36" height="36" patternUnits="userSpaceOnUse">
                      <path d="M 36 0 L 0 0 0 36" fill="none" stroke="#8C99AA" strokeWidth="0.5"/>
                    </pattern>
                  </defs>
                  <rect width="100%" height="100%" fill="url(#g)"/>
                </svg>
                {/* a road */}
                <div style={{position:'absolute', top:'40%', left:0, right:0, height:14, background:'#fff', opacity:.6}}></div>
                <div style={{position:'absolute', top:'40%', left:0, right:0, height:14, borderTop:'1px dashed var(--slate)', borderBottom:'1px dashed var(--slate)', opacity:.5}}></div>
                <div style={{position:'absolute', top:'42%', left:0, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--slate)', padding:'4px 12px', letterSpacing:'.12em'}}>
                  AL WASL ROAD →
                </div>
                {/* pin */}
                <div style={{position:'absolute', top:'45%', left:'45%', width:32, height:32, transform:'translate(-50%, -100%)'}}>
                  <div style={{
                    width:32, height:32, borderRadius:'50% 50% 50% 0',
                    background:'var(--emergency)',
                    transform:'rotate(-45deg)',
                    boxShadow:'0 4px 16px rgba(200,71,47,.4)',
                  }}>
                    <div style={{position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%) rotate(45deg)', color:'#fff', fontFamily:'var(--font-display)', fontWeight:700}}>B</div>
                  </div>
                </div>
                <div style={{position:'absolute', top:'45%', left:'45%', transform:'translate(-50%, 12px)', background:'#fff', padding:'6px 12px', borderRadius:4, fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.08em', whiteSpace:'nowrap', boxShadow:'0 2px 8px rgba(0,0,0,.1)'}}>
                  {cur.short.toUpperCase()} · OPEN NOW
                </div>
                <div style={{position:'absolute', bottom:12, right:12, fontFamily:'var(--font-mono)', fontSize:9, color:'var(--slate)', letterSpacing:'.1em', background:'rgba(255,255,255,.8)', padding:'4px 8px', borderRadius:3}}>
                  PIN UNCONFIRMED · CLIENT TO SUPPLY GEO
                </div>
              </div>

              <div style={{marginTop:24, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)'}}>
                {cur.facilities.slice(0,8).map(f => (
                  <div key={f} style={{background:'var(--paper)', padding:'18px 16px'}}>
                    <div className="creds" style={{color:'var(--vet)', marginBottom:6}}>ON SITE</div>
                    <div style={{fontSize:14, fontWeight:500}}>{f}</div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div className="creds" style={{color:'var(--vet)', marginBottom:6}}>{cur.isFlagship ? "FLAGSHIP" : "MARINA"}</div>
              <h2 className="display" style={{fontSize:44, fontWeight:500, margin:'4px 0 18px'}}>{cur.name}</h2>
              <div style={{fontSize:17, color:'var(--ink)', marginBottom:10, lineHeight:1.5}}>{cur.addressLine1}<br/>{cur.addressLine2}</div>
              <div style={{fontSize:13, color:'var(--slate)', marginBottom:24}}>{cur.area}</div>

              <div>
                <div className="loc-row">
                  <span className="label">PHONE</span>
                  <span><a href={`tel:${cur.phone.replace(/\s/g,'')}`}>{cur.phone}</a><br/>{cur.phoneAlt !== '—' && <span style={{color:'var(--slate)', fontSize:13}}>Alt — {cur.phoneAlt}</span>}</span>
                </div>
                <div className="loc-row">
                  <span className="label">WHATSAPP</span>
                  <span><a href={DP.hospital.waLink}>{cur.whatsapp}</a></span>
                </div>
                <div className="loc-row">
                  <span className="label">HOURS</span>
                  <span>{cur.hoursLine}<br/><span style={{color:'var(--slate)', fontSize:12}}>{cur.hoursNote}</span></span>
                </div>
                <div className="loc-row">
                  <span className="label">EMAIL</span>
                  <span><a href={`mailto:${DP.hospital.email}`}>{DP.hospital.email}</a></span>
                </div>
                <div className="loc-row" style={{borderBottom:0}}>
                  <span className="label">EMERGENCY</span>
                  <span><span style={{color:'var(--emergency)', fontWeight:500}}>24/7 line · {DP.hospital.phoneMain}</span></span>
                </div>
              </div>

              <div style={{display:'flex', flexDirection:'column', gap:10, marginTop:24}}>
                <button className="btn btn-primary" onClick={() => setRoute("book")}>Book at {cur.short} →</button>
                <a className="btn btn-ghost" href={`tel:${cur.phone.replace(/\s/g,'')}`}>Call {cur.phone}</a>
                <a className="btn btn-emergency" href={`tel:${DP.hospital.phoneMain.replace(/\s/g,'')}`}><span className="dot dot-pulse"></span>24/7 emergency</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ==================== EMERGENCY PAGE ==================== */
function EmergencyPage({ setRoute }) {
  return (
    <div className="page-enter">
      <section className="section" style={{background:'var(--emergency)', color:'#fff', padding:'80px 0'}}>
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:80, alignItems:'center'}}>
            <div>
              <div className="eyebrow" style={{color:'rgba(255,255,255,.7)'}}>
                <span className="num" style={{color:'#fff'}}>!</span>EMERGENCY · 24/7 · DUBAI
              </div>
              <h1 className="display" style={{fontSize:'clamp(56px, 8vw, 120px)', margin:'18px 0 24px', color:'#fff'}}>
                We're <em style={{color:'#FCE4DD'}}>here.</em><br/>Right now.
              </h1>
              <p style={{fontSize:20, lineHeight:1.5, color:'rgba(255,255,255,.85)', maxWidth:'48ch'}}>
                The hospital is staffed 24 hours a day with trained emergency veterinarians and a fully-equipped ICU. Call us — don't wait for the morning. Don't drive in panic; ring on the way.
              </p>
            </div>
            <div style={{background:'rgba(0,0,0,.18)', padding:32, borderRadius:8}}>
              <div className="creds" style={{color:'rgba(255,255,255,.7)', marginBottom:18}}>CALL FIRST · DRIVE SECOND</div>
              <a href={`tel:${DP.hospital.phoneMain.replace(/\s/g,'')}`} style={{display:'block', fontFamily:'var(--font-display)', fontSize:36, color:'#fff', textDecoration:'none', fontWeight:500, marginBottom:8}}>
                {DP.hospital.phoneMain}
              </a>
              <div style={{fontSize:14, color:'rgba(255,255,255,.7)', marginBottom:20}}>Main line · 24/7 · Jumeirah hospital</div>
              <a href={`tel:${DP.hospital.phoneAlt.replace(/\s/g,'')}`} style={{display:'block', fontFamily:'var(--font-display)', fontSize:24, color:'#fff', textDecoration:'none', marginBottom:6}}>
                {DP.hospital.phoneAlt}
              </a>
              <div style={{fontSize:13, color:'rgba(255,255,255,.7)', marginBottom:20}}>Alternative line</div>
              <a href={DP.hospital.waLink} className="btn btn-lg btn-whatsapp" style={{width:'100%', justifyContent:'center'}}>
                WhatsApp · {DP.hospital.whatsapp}
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="num">A</span>WHILE YOU'RE ON THE WAY</div>
              <h2 className="display">First-aid<br/>protocol.</h2>
            </div>
            <div>
              <p className="lede">
                These are the most common steps our triage nurse will walk you through on the phone. They are guidance only — please call us before doing anything in this list.
              </p>
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
            {[
              { t:'Bleeding', body:'Firm pressure with clean fabric for 5 minutes. Don\'t lift the pad to check — keep pressing. Call us.', n:'01' },
              { t:'Suspected poisoning', body:'Don\'t make your pet vomit unless our vet tells you to. Bring the packaging if you can.', n:'02' },
              { t:'Collapse / fitting', body:'Don\'t hold the pet down. Time the seizure. Keep airway clear. Lights dim. Call immediately.', n:'03' },
              { t:'Heat stroke', body:'Wet (not iced) towels, fan, get into car AC. Call us. Heat is a Dubai-specific risk we plan around.', n:'04' },
              { t:'Hit by car', body:'Even if walking — internal injury possible. Don\'t feed or water. Stable transport, call ahead.', n:'05' },
              { t:'Breathing distress', body:'Don\'t restrain. Don\'t force water. Drive calmly with windows down — call us on the way.', n:'06' },
            ].map((c,i) => (
              <div key={i} style={{padding:24, border:'1px solid var(--line-strong)', borderRadius:6, background:'var(--paper)'}}>
                <div className="creds" style={{color:'var(--emergency)', marginBottom:10}}>EMERGENCY {c.n}</div>
                <div style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:500, marginBottom:10}}>{c.t}</div>
                <div style={{fontSize:14, color:'var(--slate)', lineHeight:1.55}}>{c.body}</div>
              </div>
            ))}
          </div>

          <div style={{marginTop:48, padding:'32px 36px', background:'var(--ink)', color:'#fff', borderRadius:6, display:'flex', justifyContent:'space-between', alignItems:'center', gap:32, flexWrap:'wrap'}}>
            <div>
              <div className="creds" style={{color:'rgba(255,255,255,.6)', marginBottom:6}}>NOT SURE IF IT'S AN EMERGENCY?</div>
              <div style={{fontFamily:'var(--font-display)', fontSize:24, color:'#fff'}}>Call anyway — we'll triage on the phone.</div>
            </div>
            <div style={{display:'flex', gap:10}}>
              <a className="btn btn-emergency" href={`tel:${DP.hospital.phoneMain.replace(/\s/g,'')}`}>
                <span className="dot dot-pulse"></span>
                {DP.hospital.phoneMain}
              </a>
              <a className="btn btn-whatsapp" href={DP.hospital.waLink}>WhatsApp</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ==================== ABOUT PAGE ==================== */
function AboutPage({ setRoute }) {
  return (
    <div className="page-enter">
      <section className="section">
        <div className="wrap">
          <div className="section-head" style={{marginBottom:64}}>
            <div>
              <div className="eyebrow"><span className="num">07</span>ABOUT THE HOSPITAL</div>
              <h1 className="display" style={{fontSize:'clamp(54px, 7vw, 96px)'}}>British‑standard<br/>care, <em>in Dubai.</em></h1>
            </div>
            <div>
              <p className="lede">
                British Veterinary Hospital was built around a single conviction: that British-standard veterinary medicine — the kind we trained in — should be available to Dubai's pets, every hour of the day, every day of the year.
              </p>
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:64, alignItems:'start'}}>
            <div>
              <img src="media/facility-operating-theatre.webp" alt="Operating theatre" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:6}} />
              <div className="creds" style={{marginTop:12}}>FIG. 03 — JUMEIRAH OPERATING THEATRE · DAY OF COMMISSIONING</div>

              <div style={{marginTop:48}}>
                <h3 style={{fontFamily:'var(--font-display)', fontSize:32, fontWeight:500, margin:'0 0 16px'}}>From a small consult room to two hospitals.</h3>
                <p style={{fontSize:17, lineHeight:1.6, color:'var(--ink)'}}>
                  We opened in Jumeirah as a small consult room. Today the hospital holds surgery, hospitalisation, a fully-equipped ICU, digital X-ray, 4D ultrasound and endoscopy under one roof — and a sister neighbourhood clinic in Dubai Marina. The team has grown to six veterinarians, an RVN nursing core, and a support team that knows half the dogs in the postcode by name.
                </p>
                <p style={{fontSize:17, lineHeight:1.6, color:'var(--ink)', marginTop:16}}>
                  We do not publish star ratings or "best in Dubai" superlatives. We publish credentials, named vets, real photographs of the hospital, and an unconditional 24/7 emergency line. That is the trust we ask owners to extend us.
                </p>
              </div>
            </div>

            <div>
              <div style={{position:'sticky', top:100}}>
                <div className="creds" style={{marginBottom:14}}>WHAT WE COMMIT TO</div>
                {[
                  { k:'Named-vet care', v:'You are told which vet is responsible for your pet from the moment you arrive.' },
                  { k:'Credentials, verbatim', v:'Every vet\'s qualification is published as it appears on their certification — no rounding, no inflation.' },
                  { k:'24/7 emergency', v:'A trained clinician answers the main line at any hour. We do not divert to a third-party night service.' },
                  { k:'Conservative claims', v:'We do not guarantee outcomes or publish "best hospital" superlatives. Animal medicine demands restraint.' },
                  { k:'Two doors, one record', v:'Your patient file moves between Jumeirah and Marina seamlessly — no re-telling your pet\'s history.' },
                ].map((c,i) => (
                  <div key={i} style={{padding:'18px 0', borderBottom: i < 4 ? '1px solid var(--line)' : 'none'}}>
                    <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:500, marginBottom:4}}>— {c.k}</div>
                    <div style={{fontSize:14, color:'var(--slate)', lineHeight:1.55}}>{c.v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:0, alignItems:'stretch'}}>
            <div style={{padding:'0 32px 0 0', borderRight:'1px solid rgba(255,255,255,.15)'}}>
              <div className="creds" style={{color:'rgba(255,255,255,.5)', marginBottom:14}}>YEAR FOUNDED</div>
              <div className="display" style={{fontSize:96, color:'#fff', lineHeight:1}}>'09</div>
              <div style={{fontSize:14, color:'rgba(255,255,255,.6)', marginTop:14}}>Jumeirah flagship opened. <span style={{fontStyle:'italic'}}>Year unverified — client to confirm.</span></div>
            </div>
            <div style={{padding:'0 32px', borderRight:'1px solid rgba(255,255,255,.15)'}}>
              <div className="creds" style={{color:'rgba(255,255,255,.5)', marginBottom:14}}>HOSPITAL LICENCE</div>
              <div className="display" style={{fontSize:48, color:'#fff', lineHeight:1.05, fontWeight:500}}>Reportedly the first<br/>vet facility in Dubai<br/>licensed as a <em style={{color:'#FCE4DD'}}>hospital.</em></div>
              <div style={{fontSize:13, color:'rgba(255,255,255,.6)', marginTop:14, fontStyle:'italic'}}>Third-party claim — exact licence wording to be confirmed with client before publishing as fact.</div>
            </div>
            <div style={{padding:'0 0 0 32px'}}>
              <div className="creds" style={{color:'rgba(255,255,255,.5)', marginBottom:14}}>REGULATED BY</div>
              <div style={{display:'flex', flexDirection:'column', gap:16}}>
                <div>
                  <div style={{fontFamily:'var(--font-display)', fontSize:24, color:'#fff'}}>RCVS</div>
                  <div style={{fontSize:13, color:'rgba(255,255,255,.6)'}}>Royal College of Veterinary Surgeons — UK qualifying body for our British vets.</div>
                </div>
                <div>
                  <div style={{fontFamily:'var(--font-display)', fontSize:24, color:'#fff'}}>SAVC</div>
                  <div style={{fontSize:13, color:'rgba(255,255,255,.6)'}}>South African Veterinary Council — qualifying body for our South African colleagues.</div>
                </div>
                <div>
                  <div style={{fontFamily:'var(--font-display)', fontSize:24, color:'#fff'}}>MOCCAE / DM</div>
                  <div style={{fontSize:13, color:'rgba(255,255,255,.6)'}}>UAE practice licences — held by each vet. Numbers pending publication.</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { TeamPage, VetModal, LocationsPage, EmergencyPage, AboutPage });