/* global React */
/* Shared chrome: TopStrip, Nav, Footer, EmergencyPill, LocationSwitcher */

const { useState, useEffect, useRef } = React;

const D = window.BVH_DATA;

function TopStrip() {
  return (
    <div className="topstrip">
      <div className="wrap">
        <span className="em">
          <span className="dot dot-pulse"></span>
          24/7 EMERGENCY — call <a href={`tel:${D.hospital.phoneMain.replace(/\s/g,'')}`} style={{marginLeft:6, textDecoration:'underline', textUnderlineOffset:3}}>{D.hospital.phoneMain}</a>
        </span>
        <span style={{display:'flex', gap:18, alignItems:'center'}}>
          <span>RCVS-LED · ICU ON SITE · DUBAI</span>
          <span style={{opacity:.4}}>·</span>
          <a href="#">EN</a>
          <span style={{opacity:.4}}>·</span>
          <a href="#" style={{opacity:.6}}>عربي</a>
        </span>
      </div>
    </div>
  );
}

function Nav({ route, setRoute, location, setLocation }) {
  const links = [
    { id: "home",      label: "Home" },
    { id: "services",  label: "Services" },
    { id: "team",      label: "Team" },
    { id: "locations", label: "Locations" },
    { id: "emergency", label: "Emergency" },
    { id: "about",     label: "About" },
  ];

  return (
    <nav className="nav">
      <div className="wrap">
        <button className="nav-logo" onClick={() => setRoute("home")}>
          <span className="mark">B<span style={{fontSize:10,verticalAlign:'super',letterSpacing:0}}>V</span></span>
          <span className="word">
            British Veterinary Hospital
            <small>EST. JUMEIRAH · DUBAI</small>
          </span>
        </button>
        <div className="nav-links">
          {links.map(l => (
            <button
              key={l.id}
              className={route === l.id ? "active" : ""}
              onClick={() => setRoute(l.id)}
            >
              {l.label}
            </button>
          ))}
        </div>
        <div className="nav-cta">
          <LocationSwitcher location={location} setLocation={setLocation} />
          <button className="btn btn-primary btn-sm" onClick={() => setRoute("book")}>
            Book appointment
          </button>
        </div>
      </div>
    </nav>
  );
}

function LocationSwitcher({ location, setLocation, big }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  const current = D.locations.find(l => l.id === location);
  return (
    <div ref={ref} style={{position:'relative'}}>
      <button className="loc-pill" onClick={() => setOpen(o => !o)}>
        <span className="dot"></span>
        {big ? `Showing ${current.short}` : current.short}
        <span style={{opacity:.5, marginLeft:4}}>▾</span>
      </button>
      {open && (
        <div style={{
          position:'absolute',
          top:'calc(100% + 8px)',
          right: 0,
          background:'var(--paper)',
          border:'1px solid var(--line-strong)',
          borderRadius:8,
          minWidth:280,
          padding:8,
          boxShadow:'0 12px 40px rgba(14,26,46,.15)',
          zIndex: 60,
        }}>
          {D.locations.map(l => (
            <button
              key={l.id}
              onClick={() => { setLocation(l.id); setOpen(false); }}
              style={{
                display:'block',
                width:'100%',
                textAlign:'left',
                padding:'12px 14px',
                borderRadius:5,
                background: l.id === location ? 'var(--paper-2)' : 'transparent',
              }}
            >
              <div style={{fontWeight:500, fontSize:14}}>{l.name}</div>
              <div style={{color:'var(--slate)', fontSize:12, marginTop:2}}>{l.addressLine1}</div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--vet)', marginTop:6}}>
                {l.hoursLine}
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function EmergencyPill() {
  return (
    <div className="emergency-pill">
      <a className="em-call" href={`tel:${D.hospital.phoneMain.replace(/\s/g,'')}`}>
        <span className="pulse"></span>
        24/7 Emergency · {D.hospital.phoneMain}
      </a>
      <a className="em-wa" href={D.hospital.waLink} target="_blank" rel="noreferrer">
        <span style={{fontSize:14}}>✓</span>
        WhatsApp us
      </a>
    </div>
  );
}

function Footer({ setRoute }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1fr 1fr', gap:48}}>
          <div>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:20}}>
              <span style={{width:44, height:44, background:'#fff', borderRadius:6, display:'grid', placeItems:'center', color:'var(--vet)', fontFamily:'var(--font-display)', fontWeight:700, fontSize:20, letterSpacing:'-.05em'}}>B<span style={{fontSize:12, verticalAlign:'super'}}>V</span></span>
              <div>
                <div style={{fontFamily:'var(--font-display)', fontSize:18, color:'#fff'}}>British Veterinary Hospital</div>
                <div style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.14em', color:'rgba(251,249,244,.5)', textTransform:'uppercase', marginTop:4}}>RCVS-LED · DUBAI</div>
              </div>
            </div>
            <p style={{fontSize:14, color:'rgba(251,249,244,.7)', lineHeight:1.6, maxWidth:'34ch'}}>
              British-standard veterinary hospital with fully-equipped ICU and 24/7 emergency care, across two Dubai locations.
            </p>
            <div style={{marginTop:24, display:'flex', gap:10}}>
              <a href="#" className="tag" style={{borderColor:'rgba(255,255,255,.2)', color:'rgba(255,255,255,.85)'}}>Instagram</a>
              <a href="#" className="tag" style={{borderColor:'rgba(255,255,255,.2)', color:'rgba(255,255,255,.85)'}}>Facebook</a>
            </div>
          </div>

          <div>
            <h4>Hospital</h4>
            <a onClick={() => setRoute("services")}>All services</a>
            <a onClick={() => setRoute("team")}>The team</a>
            <a onClick={() => setRoute("locations")}>Locations</a>
            <a onClick={() => setRoute("about")}>About</a>
            <a onClick={() => setRoute("emergency")}>Emergency</a>
          </div>

          <div>
            <h4>Services</h4>
            {D.services.slice(0,6).map(s => (
              <a key={s.id} onClick={() => setRoute({type:'service', id:s.id})}>{s.name}</a>
            ))}
          </div>

          <div>
            <h4>Contact</h4>
            <a href={`tel:${D.hospital.phoneMain.replace(/\s/g,'')}`}>{D.hospital.phoneMain}</a>
            <a href={`tel:${D.hospital.phoneAlt.replace(/\s/g,'')}`}>{D.hospital.phoneAlt}</a>
            <a href={D.hospital.waLink}>WhatsApp {D.hospital.whatsapp}</a>
            <a href={`mailto:${D.hospital.email}`}>{D.hospital.email}</a>
          </div>

          <div>
            <h4>Locations</h4>
            {D.locations.map(l => (
              <a key={l.id} onClick={() => setRoute({type:'location', id:l.id})}>{l.name}</a>
            ))}
          </div>
        </div>

        <div className="legal">
          <span>© 2026 British Veterinary Hospital LLC · Dubai Municipality / MOCCAE licence — pending client confirmation</span>
          <span>Privacy · Terms · Accessibility</span>
        </div>
      </div>
    </footer>
  );
}

/* small util — render a title array with <em>...</em> markers */
function RenderTitle({ chunks }) {
  return (
    <h2 className="display">
      {chunks.map((c, i) => (
        <React.Fragment key={i}>
          {c.includes('<em>')
            ? <em>{c.replace(/<\/?em>/g,'')}</em>
            : c}
          {i < chunks.length-1 && ' '}
        </React.Fragment>
      ))}
    </h2>
  );
}

Object.assign(window, { TopStrip, Nav, LocationSwitcher, EmergencyPill, Footer, RenderTitle, BVH_D: D });