// SERVICES overview + single SERVICE template (switchable by id).
function ServicesPage(){
  const { nav } = React.useContext(AppCtx);
  return (
    <div className="page">
      <div className="sec" style={{ paddingBottom:8 }}>
        <Kicker>השירותים</Kicker>
        <h1 className="h-display" style={{ fontSize:34, marginBottom:12 }}>כל מה שאפשר<br/>לצלם בסטודיו.</h1>
        <p className="lede">משפחה, ילדים, ימי הולדת, חלאקה, סטים עונתיים וצילומי חוץ — כל סשן בקצב שלכם, בליווי אישי של שירה.</p>
      </div>

      <div className="sec tight">
        <div className="svc-list">
          {SERVICES.map((s,i) => (
            <button key={s.id} className="svc-row" onClick={() => nav('service', s.id)}>
              <span className="idx">{String(i+1).padStart(2,'0')}</span>
              <span>
                <span className="nm">{s.name}</span>
                <span className="desc">{s.short}</span>
              </span>
              {s.secondary
                ? <span className="tag">משלים</span>
                : <span className="arr">{Ic.arrowL({ s:18 })}</span>}
            </button>
          ))}
        </div>
      </div>

      <div className="sec warm" style={{ textAlign:'center' }}>
        <div className="kick" style={{ marginBottom:10 }}>לא בטוחים מה מתאים?</div>
        <h2 className="h-sec" style={{ marginBottom:16 }}>נתאם יחד את הסשן<br/>שמתאים לכם.</h2>
        <WAButton variant="btn-rose" />
        <div className="note-after">{PHONE_DISPLAY} · מענה אישי של שירה</div>
      </div>

      <Footer />
    </div>
  );
}

function ServicePage({ id }){
  const { nav } = React.useContext(AppCtx);
  const s = SERVICES.find(x => x.id === id) || SERVICES[0];
  const others = SERVICES.filter(x => x.id !== s.id).slice(0,4);
  return (
    <div className="page">
      {/* HERO */}
      <div className="hero">
        <PhotoPlaceholder h={440} tag="HERO" label={'תמונת נושא — ' + s.name} />
        <div className="hero-scrim"></div>
        <button className="hero-kick" style={{ display:'inline-flex', alignItems:'center', gap:7, background:'none', border:'none', cursor:'pointer' }}
          onClick={() => nav('services')}>
          {Ic.arrowR({ s:14, c:'#fbf8f2' })} השירותים
        </button>
        <div className="hero-cap">
          <div className="kick" style={{ color:'#e9cfc7', marginBottom:9 }}>{s.kicker}</div>
          <h1 className="h-display" style={{ fontSize:36 }}>{s.name}</h1>
          <p className="lede">{s.lede}</p>
        </div>
      </div>

      {/* ABOUT */}
      <div className="sec">
        <SectionHead kicker="על הסשן" />
        <p className="body" style={{ fontSize:15.5 }}>{s.about}</p>
      </div>

      {/* INCLUDES */}
      <div className="sec paper2">
        <h2 className="h-sub" style={{ marginBottom:18 }}>מה כולל הסשן</h2>
        <ul className="incl">
          {s.includes.map((it,i) => (
            <li key={i}><span className="ck">{Ic.check({ s:16 })}</span>{it}</li>
          ))}
        </ul>
      </div>

      {/* WARM NOTE */}
      <div className="sec warm">
        <ShiraNote quote="הדבר הכי חשוב לי הוא שתרגישו בנוח. כשאתם נינוחים — גם הילדים, וגם התמונות, פשוט נכונים יותר." />
      </div>

      {/* MINI GALLERY (B) */}
      <div className="sec">
        <div className="sec-head"><span className="kick" style={{ alignSelf:'center' }}>מתוך הגלריה</span><span className="line"></span></div>
        <div className="gal-grid">
          {Array.from({ length:s.gallery }).map((_,i) => (
            <PhotoPlaceholder key={i} variant="light"
              h={i % 3 === 0 ? 190 : 140} tag="IMG" label={s.name.replace('צילומי ','')} />
          ))}
        </div>
      </div>

      {/* CTA */}
      <div className="sec paper2" style={{ textAlign:'center' }}>
        <div className="kick" style={{ marginBottom:10 }}>אהבתם?</div>
        <h2 className="h-sec" style={{ marginBottom:16 }}>בואו נתאם<br/>{s.name}.</h2>
        <WAButton variant="btn-rose" service={s.id} />
        <div className="note-after">{PHONE_DISPLAY}</div>
      </div>

      {/* OTHER SERVICES */}
      <div className="sec">
        <div className="sec-head"><span className="kick" style={{ alignSelf:'center' }}>שירותים נוספים</span><span className="line"></span></div>
        <div className="svc-list">
          {others.map((o,i) => (
            <button key={o.id} className="svc-row" onClick={() => nav('service', o.id)}>
              <span className="idx">{String(i+1).padStart(2,'0')}</span>
              <span><span className="nm">{o.name}</span></span>
              <span className="arr">{Ic.arrowL({ s:18 })}</span>
            </button>
          ))}
        </div>
      </div>

      <Footer />
    </div>
  );
}
Object.assign(window, { ServicesPage, ServicePage });