/* global React, BVH_D, RenderTitle */
const { useState: useStateH, useEffect: useEffectH } = React;
const DH = window.BVH_DATA;

function HomePage({ setRoute, location, setLocation, openVet }) {
  return (
    <div className="page-enter">
      <HeroSection setRoute={setRoute} location={location} setLocation={setLocation} />
      <TrustStrip />
      <ServicesSection setRoute={setRoute} />
      <AboutBand />
      <TeamSection openVet={openVet} setRoute={setRoute} />
      <ConditionsSection />
      <LocationsBand setRoute={setRoute} location={location} setLocation={setLocation} />
      <CtaBand setRoute={setRoute} />
    </div>
  );
}

function HeroSection({ setRoute, location, setLocation }) {
  const cur = DH.locations.find(l => l.id === location);
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="eyebrow">
              <span className="num">01</span>
              BRITISH VETERINARY HOSPITAL · DUBAI
            </div>
            <h1 className="display">
              Worried about<br/>
              your pet?<br/>
              We're <em>open.</em>
            </h1>
            <p className="lede">
              A British-qualified hospital team with a fully-equipped ICU, on-site imaging, surgery and 24/7 emergency care — across two Dubai locations.
            </p>

            <div className="hero-actions" style={{marginTop:36}}>
              <button className="btn btn-primary btn-lg" onClick={() => setRoute("book")}>
                Book an appointment →
              </button>
              <a className="btn btn-emergency btn-lg" href={`tel:${DH.hospital.phoneMain.replace(/\s/g,'')}`}>
                <span className="dot dot-pulse"></span>
                Emergency · {DH.hospital.phoneMain}
              </a>
            </div>

            <div className="hero-trust">
              <div className="item"><strong>RCVS-led</strong> British/international team</div>
              <div className="item"><strong>ICU</strong> on site</div>
              <div className="item"><strong>24/7</strong> emergency & critical care</div>
              <div className="item"><strong>Digital X-ray</strong> · 4D ultrasound · endoscopy</div>
              <div className="item"><strong>Two locations</strong> — Jumeirah & Marina</div>
            </div>
          </div>

          <div>
            <div className="hero-photo">
              <img src="media/vet-dr-sara-with-dog.webp" alt="Dr Sara Elliott at the hospital" />
              <div className="photo-meta">
                <span style={{width:6, height:6, background:'#fff', borderRadius:'50%'}}></span>
                FIG. 01 — DR SARA ELLIOTT, CLINICAL DIRECTOR · MRCVS
              </div>
            </div>
            <div style={{
              display:'grid', gridTemplateColumns:'1fr 1fr', gap:1,
              marginTop:16, background:'var(--line)', border:'1px solid var(--line)',
            }}>
              <div style={{background:'var(--paper)', padding:'16px 18px'}}>
                <div className="creds">CURRENTLY SHOWING</div>
                <div style={{fontFamily:'var(--font-display)', fontSize:18, marginTop:6}}>{cur.short}</div>
                <div style={{fontSize:12, color:'var(--slate)', marginTop:2}}>{cur.hoursLine}</div>
              </div>
              <div style={{background:'var(--paper)', padding:'16px 18px'}}>
                <div className="creds">SWITCH</div>
                <div style={{marginTop:6}}>
                  {DH.locations.map(l => (
                    <button
                      key={l.id}
                      onClick={() => setLocation(l.id)}
                      style={{
                        marginRight:8,
                        padding:'4px 10px',
                        borderRadius:100,
                        border:'1px solid '+(l.id===location?'var(--vet)':'var(--line-strong)'),
                        background: l.id===location?'var(--vet)':'transparent',
                        color: l.id===location?'#fff':'var(--ink)',
                        fontSize:12,
                      }}
                    >{l.short}</button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  return (
    <section className="trust-strip">
      <div className="wrap">
        {DH.trustNumbers.map((t,i) => (
          <div className="trust-cell" key={i}>
            <div className="num">{t.num}</div>
            <div className="label">{t.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ServicesSection({ setRoute }) {
  // Featured 6 in a 2-row grid: 6+6, 4+4+4
  const featured = DH.services.slice(0,6);
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="num">02</span>WHAT WE TREAT</div>
            <h2 className="display">Nine services.<br/><em>One</em> continuous team.</h2>
          </div>
          <div>
            <p className="lede">
              Routine wellness through to ICU. Every case is owned by a named vet from arrival to discharge — no handing-off between branches, no anonymous specialists.
            </p>
            <button className="btn btn-ghost btn-sm" style={{marginTop:16}} onClick={() => setRoute("services")}>
              See all nine services →
            </button>
          </div>
        </div>

        <div className="services-grid">
          {/* Row 1: 6/6 — the two flagships */}
          <ServiceCard svc={DH.services[0]} cols={6} setRoute={setRoute} />
          <ServiceCard svc={DH.services[5]} cols={6} setRoute={setRoute} />
          {/* Row 2: 4/4/4 */}
          <ServiceCard svc={DH.services[1]} cols={4} setRoute={setRoute} />
          <ServiceCard svc={DH.services[2]} cols={4} setRoute={setRoute} />
          <ServiceCard svc={DH.services[3]} cols={4} setRoute={setRoute} />
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ svc, cols, setRoute }) {
  return (
    <div className={`svc-card col-${cols}`} onClick={() => setRoute({type:'service', id:svc.id})}>
      {svc.tag && <span className="svc-flag" style={{background: svc.tag === 'URGENT' ? 'var(--emergency)' : 'var(--vet)'}}>{svc.tag}</span>}
      <span className="svc-arrow">↗</span>
      <div className="svc-num">— {svc.num}</div>
      <div className="svc-photo"><img src={svc.img} alt={svc.name} /></div>
      <h3>{svc.name}</h3>
      <p>{svc.blurb}</p>
    </div>
  );
}

function AboutBand() {
  return (
    <section className="section dark">
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1.2fr', gap:80, alignItems:'center'}}>
          <div style={{aspectRatio:'4/5', background:'var(--paper-2)', overflow:'hidden', borderRadius:6, position:'relative'}}>
            <img src="media/facility-operating-theatre.webp" alt="Operating theatre" style={{width:'100%', height:'100%', objectFit:'cover'}} />
            <div style={{position:'absolute', bottom:16, left:16, background:'rgba(14,26,46,0.85)', padding:'8px 12px', borderRadius:4, fontFamily:'var(--font-mono)', fontSize:10, color:'#fff', letterSpacing:'.12em', textTransform:'uppercase'}}>
              FIG. 02 — OPERATING THEATRE · JUMEIRAH HOSPITAL
            </div>
          </div>
          <div>
            <div className="eyebrow"><span className="num">03</span>WHY OWNERS TRUST US</div>
            <h2 className="display" style={{fontSize:'clamp(40px, 5vw, 72px)', margin:'14px 0 24px', color:'var(--paper)'}}>
              Hospital <em>standards.</em><br/>Family warmth.
            </h2>
            <p style={{fontSize:18, color:'rgba(251,249,244,.8)', lineHeight:1.6, maxWidth:'55ch'}}>
              We're not a clinic with a treatment room — we're a fully licensed veterinary hospital with intensive care on site, six credentialled vets, and an answer-the-phone-at-3am promise we've kept for over fifteen years.
            </p>
            <div style={{marginTop:36, display:'grid', gridTemplateColumns:'1fr 1fr', gap:32, maxWidth:600}}>
              {[
                { k: "Hospital — not clinic", v: "Licensed with surgery, hospitalisation and ICU on site." },
                { k: "British-qualified vets", v: "RCVS-led team, plus internationally-qualified colleagues." },
                { k: "Named-vet care", v: "You speak to the vet who's actually treating your pet." },
                { k: "Two doors, one record", v: "Switch between Jumeirah & Marina — your file follows." },
              ].map((it,i) => (
                <div key={i}>
                  <div className="creds" style={{color:'#B7C0E8', marginBottom:6}}>— 0{i+1}</div>
                  <div style={{fontFamily:'var(--font-display)', fontSize:20, color:'#fff', marginBottom:6, fontWeight:500}}>{it.k}</div>
                  <div style={{fontSize:14, color:'rgba(251,249,244,.7)', lineHeight:1.5}}>{it.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TeamSection({ openVet, setRoute }) {
  const featured = DH.vets.slice(0,3);
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="num">04</span>MEET YOUR VETS</div>
            <h2 className="display">Named vets.<br/>Real <em>credentials.</em></h2>
          </div>
          <div>
            <p className="lede">
              Six veterinarians, qualified at Cambridge, Glasgow, Pretoria, Lisbon and Harare. Every profile shows training, country of qualification and special interests — published verbatim. <span style={{color:'var(--ink)'}}>MOCCAE licence numbers pending client supply.</span>
            </p>
            <button className="btn btn-ghost btn-sm" style={{marginTop:16}} onClick={() => setRoute("team")}>
              See all six vets →
            </button>
          </div>
        </div>

        <div className="vets-grid">
          {featured.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 className="vet-name">{v.name}</div>
              <div className="vet-role">{v.role} · {v.country}</div>
              <div className="creds" style={{marginTop:6}}>{v.creds}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ConditionsSection() {
  return (
    <section className="section paper-2">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="num">05</span>FROM THE CLINICAL JOURNAL</div>
            <h2 className="display">Conditions<br/>we explain<br/><em>in plain</em> English.</h2>
          </div>
          <div>
            <p className="lede">
              We write up the conditions we see most, in language an anxious owner can read at 11pm. No jargon walls, no scare copy — just what's going on, what we'd do, and what to watch for.
            </p>
          </div>
        </div>

        <div>
          {DH.conditions.map((c,i) => (
            <div className="cond-row" key={i}>
              <div className="meta">— {String(i+1).padStart(2,'0')}</div>
              <div className="name">{c.name.includes('—') ? <>{c.name.split('—')[0]}<em>—{c.name.split('—')[1]}</em></> : c.name}</div>
              <div className="desc">{c.desc}</div>
              <div className="meta">{c.meta}</div>
              <div className="ix" style={{textAlign:'right'}}>{c.code} →</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LocationsBand({ setRoute, location, setLocation }) {
  return (
    <section className="section sky">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="num">06</span>FIND YOUR NEAREST</div>
            <h2 className="display">Two doors.<br/><em>One</em> standard.</h2>
          </div>
          <div>
            <p className="lede">
              Jumeirah is our flagship hospital — surgery, ICU and imaging. Marina is our neighbourhood clinic — consultations, vaccinations, dental, and MyVet wellness plans. Your patient record is shared between both.
            </p>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
          {DH.locations.map(l => (
            <div
              key={l.id}
              className={`loc-card ${l.id===location?'active':''}`}
              onClick={() => { setLocation(l.id); setRoute({type:'location', id:l.id}); }}
            >
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:16}}>
                <div>
                  <div className="creds" style={{marginBottom:8}}>
                    {l.isFlagship ? "FLAGSHIP HOSPITAL · ICU" : "NEIGHBOURHOOD CLINIC"}
                  </div>
                  <div className="loc-name">{l.name}</div>
                </div>
                {l.id===location && <span className="tag vet">SELECTED</span>}
              </div>
              <div className="loc-addr">{l.addressLine1}<br/>{l.addressLine2}</div>

              <div style={{marginTop:8}}>
                <div className="loc-row">
                  <span className="label">PHONE</span>
                  <span>{l.phone}</span>
                </div>
                <div className="loc-row">
                  <span className="label">HOURS</span>
                  <span>{l.hoursLine}<br/><span style={{color:'var(--slate)', fontSize:12}}>{l.hoursNote}</span></span>
                </div>
                <div className="loc-row" style={{borderBottom:0}}>
                  <span className="label">ON SITE</span>
                  <span style={{display:'flex', gap:6, flexWrap:'wrap'}}>
                    {l.facilities.slice(0,4).map(f => <span key={f} className="tag">{f}</span>)}
                  </span>
                </div>
              </div>

              <div style={{display:'flex', gap:10}}>
                <button className="btn btn-primary btn-sm" onClick={(e) => { e.stopPropagation(); setRoute({type:'location', id:l.id}); }}>
                  View location →
                </button>
                <a className="btn btn-ghost btn-sm" href={`tel:${l.phone.replace(/\s/g,'')}`} onClick={(e) => e.stopPropagation()}>
                  Call {l.phone}
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBand({ setRoute }) {
  return (
    <section className="section" style={{background:'var(--vet)', color:'#fff', padding:'80px 0'}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:80, alignItems:'center'}}>
          <div>
            <div className="eyebrow" style={{color:'rgba(255,255,255,.6)'}}><span className="num" style={{color:'#B7C0E8'}}>07</span>WHEN YOU'RE READY</div>
            <h2 className="display" style={{color:'#fff', fontSize:'clamp(36px, 4.5vw, 64px)', margin:'14px 0 24px'}}>
              Booking takes <em>two minutes.</em><br/>Worth more than that.
            </h2>
            <p style={{fontSize:18, color:'rgba(255,255,255,.8)', lineHeight:1.6, maxWidth:'55ch'}}>
              Pick a location, tell us about your pet, choose a time. We confirm by WhatsApp within the hour during opening times — or immediately if it's urgent.
            </p>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            <button className="btn btn-lg" style={{background:'#fff', color:'var(--vet)'}} onClick={() => setRoute("book")}>
              Book an appointment →
            </button>
            <a className="btn btn-lg btn-whatsapp" href={DH.hospital.waLink}>
              WhatsApp on {DH.hospital.whatsapp}
            </a>
            <a className="btn btn-lg btn-emergency" href={`tel:${DH.hospital.phoneMain.replace(/\s/g,'')}`}>
              <span className="dot dot-pulse"></span>
              24/7 Emergency
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });