/* global React, BVH_D */
/* Services hub + service detail */
const DS = window.BVH_DATA;
const { useState: useStateS } = React;

function ServicesPage({ setRoute }) {
  const [filter, setFilter] = useStateS("all");
  const groups = {
    all: DS.services,
    urgent: DS.services.filter(s => s.tag === "URGENT" || s.id === "hospitalisation-icu"),
    preventive: DS.services.filter(s => ["vaccinations","microchipping","dental"].includes(s.id)),
    surgical: DS.services.filter(s => ["surgery","dental","diagnostics-imaging"].includes(s.id)),
    relocation: DS.services.filter(s => ["pet-relocation","boarding","microchipping"].includes(s.id)),
  };
  const list = groups[filter];

  return (
    <div className="page-enter">
      <section className="section" style={{paddingBottom:0}}>
        <div className="wrap">
          <div className="section-head" style={{marginBottom:32}}>
            <div>
              <div className="eyebrow"><span className="num">02</span>SERVICES — FULL HOSPITAL</div>
              <h2 className="display">A full hospital,<br/><em>under one</em> roof.</h2>
            </div>
            <div>
              <p className="lede">
                Nine services that cover wellness through critical care. Pick a category, or browse all — every page is written conservatively, without guaranteed-outcome language. No public prices: we quote per case after consultation.
              </p>
            </div>
          </div>

          <div className="chips" style={{marginBottom:40}}>
            {[
              { k:'all',         label:'All nine' },
              { k:'urgent',      label:'Emergency & ICU' },
              { k:'surgical',    label:'Surgical & imaging' },
              { k:'preventive',  label:'Preventive & dental' },
              { k:'relocation',  label:'Travel & boarding' },
            ].map(c => (
              <button key={c.k} className={`chip ${filter===c.k?'active':''}`} onClick={() => setFilter(c.k)}>{c.label}</button>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)'}}>
            {list.map(svc => (
              <div key={svc.id} className="svc-card" onClick={() => setRoute({type:'service', id:svc.id})} style={{gridColumn: 'span 1', minHeight:380}}>
                {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>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function ServiceDetail({ id, setRoute }) {
  const svc = DS.services.find(s => s.id === id);
  if (!svc) return null;
  const others = DS.services.filter(s => s.id !== id).slice(0,3);

  return (
    <div className="page-enter">
      <section className="section" style={{paddingBottom:48}}>
        <div className="wrap">
          <button onClick={() => setRoute("services")} className="creds" style={{marginBottom:24, display:'inline-flex', gap:6}}>← All services</button>
          <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:80, alignItems:'end'}}>
            <div>
              <div className="eyebrow">
                <span className="num">{svc.num}</span>
                SERVICE — {svc.name.toUpperCase()}
              </div>
              <h1 className="display" style={{fontSize:'clamp(48px, 6vw, 96px)', margin:'24px 0 28px'}}>
                {svc.name.split(' ').map((w,i,arr) => (
                  <React.Fragment key={i}>
                    {i === arr.length - 1 ? <em>{w}</em> : w}
                    {i < arr.length - 1 && ' '}
                  </React.Fragment>
                ))}
              </h1>
              <p className="lede">{svc.blurb}</p>

              <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
                <button className="btn btn-primary" onClick={() => setRoute("book")}>Book this service →</button>
                <a className="btn btn-ghost" href={DS.hospital.waLink}>Ask on WhatsApp</a>
                {svc.id === 'emergency-critical-care' && (
                  <a className="btn btn-emergency" href={`tel:${DS.hospital.phoneMain.replace(/\s/g,'')}`}>
                    <span className="dot dot-pulse"></span>
                    Call now · {DS.hospital.phoneMain}
                  </a>
                )}
              </div>
            </div>
            <div>
              <div className="hero-photo">
                <img src={svc.img} alt={svc.name} />
                <div className="photo-meta">
                  <span style={{width:6, height:6, background:'#fff', borderRadius:'50%'}}></span>
                  FIG. {svc.num} — {svc.name.toUpperCase()}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section paper-2">
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:80}}>
            <div>
              <div className="eyebrow"><span className="num">A</span>WHO IT'S FOR</div>
              <h3 className="display" style={{fontSize:36, margin:'14px 0 0', fontWeight:500}}>The right cases.</h3>
            </div>
            <div>
              <p style={{fontSize:19, lineHeight:1.6, color:'var(--ink)'}}>{svc.forWho}</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:80}}>
            <div>
              <div className="eyebrow"><span className="num">B</span>WHAT TO EXPECT</div>
              <h3 className="display" style={{fontSize:36, margin:'14px 0 0', fontWeight:500}}>Step by step.</h3>
            </div>
            <ol style={{listStyle:'none', padding:0, margin:0, counterReset:'step'}}>
              {svc.expect.map((e,i) => (
                <li key={i} style={{display:'grid', gridTemplateColumns:'60px 1fr', gap:24, padding:'24px 0', borderTop:'1px solid var(--line)'}}>
                  <span className="creds" style={{color:'var(--vet)'}}>STEP {String(i+1).padStart(2,'0')}</span>
                  <span style={{fontSize:18, lineHeight:1.5}}>{e}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </section>

      <section className="section paper-2">
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap:80}}>
            <div>
              <div className="eyebrow"><span className="num">C</span>AFTERCARE</div>
              <h3 className="display" style={{fontSize:36, margin:'14px 0 0', fontWeight:500}}>What follows.</h3>
            </div>
            <div>
              <p style={{fontSize:19, lineHeight:1.6, color:'var(--ink)'}}>{svc.aftercare}</p>
              <div style={{marginTop:24, padding:'16px 20px', border:'1px dashed var(--line-strong)', borderRadius:6, fontSize:14, color:'var(--slate)', maxWidth:600}}>
                <span className="creds" style={{color:'var(--ink)'}}>NOTE</span><br/>
                <span style={{marginTop:6, display:'inline-block'}}>We don't publish guaranteed-outcome claims or fixed prices. Every estimate is per case, signed and shared with you before treatment starts.</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="eyebrow"><span className="num">D</span>OTHER SERVICES</div>
          <h3 className="display" style={{fontSize:36, margin:'14px 0 40px', fontWeight:500}}>Often booked alongside.</h3>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:1, background:'var(--line)', border:'1px solid var(--line)'}}>
            {others.map(s => (
              <div key={s.id} className="svc-card" onClick={() => setRoute({type:'service', id:s.id})}>
                <span className="svc-arrow">↗</span>
                <div className="svc-num">— {s.num}</div>
                <div className="svc-photo"><img src={s.img} alt={s.name} /></div>
                <h3>{s.name}</h3>
                <p>{s.blurb}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ServicesPage, ServiceDetail });