// HOME — A editorial foundation, C warm note, B gallery teaser.
function HomePage(){
  const { nav } = React.useContext(AppCtx);
  const featured = SERVICES.filter(s => !s.secondary).slice(0,5);
  return (
    <div className="page">
      {/* HERO */}
      <div className="hero">
        <PhotoPlaceholder h={498} tag="HERO"
          label="תמונת נושא — משפחה בסטודיו, אור רך, רגע אמיתי" />
        <div className="hero-scrim"></div>
        <div className="hero-kick">סטודיו בוטיק לצילום · יבנה</div>
        <div className="hero-cap">
          <h1 className="h-display">רגעים שנשארים<br/>הרבה אחרי הסשן.</h1>
          <p className="lede">צילומי משפחה וילדים אצל שירה בן דוד — בסבלנות, בקצב שלכם, עד שהתמונה מרגישה נכון.</p>
        </div>
      </div>

      <div className="sec tight">
        <WAButton />
        <div className="note-after">{PHONE_DISPLAY} · מענה אישי של שירה</div>
      </div>

      {/* WARM NOTE (C) */}
      <div className="sec warm">
        <Kicker>מילה אישית</Kicker>
        <ShiraNote quote="אני לא ממהרת. נותנת לכם ולילדים זמן להתרגל, משחקת, ומחכה לרגעים האמיתיים — וכך הסשן מרגיש כמו בילוי, לא כמו צילום." />
      </div>

      {/* SERVICES OVERVIEW (A) */}
      <div className="sec">
        <SectionHead idx="01" kicker="השירותים" />
        <h2 className="h-sec" style={{ marginBottom:6 }}>מה מצלמים בסטודיו</h2>
        <p className="body" style={{ margin:'0 0 14px' }}>כל סשן נבנה סביבכם — סטים, תאורה ורקעים מקצועיים, ויחס אישי לכל גיל.</p>
        <div className="svc-list">
          {featured.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>
              <span className="arr">{Ic.arrowL({ s:18 })}</span>
            </button>
          ))}
        </div>
        <button className="link-more" style={{ marginTop:20 }} onClick={() => nav('services')}>
          <span className="u">לכל השירותים</span>{Ic.arrowL({ s:15 })}
        </button>
      </div>

      {/* GALLERY TEASER (B) */}
      <div className="sec paper2">
        <div style={{ textAlign:'center', marginBottom:18 }}>
          <div className="kick" style={{ marginBottom:9 }}>תיק עבודות</div>
          <h2 className="h-sec">הגלריה</h2>
        </div>
        <div className="gal-grid">
          <PhotoPlaceholder variant="light" h={180} tag="IMG" label="משפחה" />
          <PhotoPlaceholder variant="light" h={130} tag="IMG" label="ילדים" />
          <PhotoPlaceholder variant="light" h={130} tag="IMG" label="גיל שנה" />
          <PhotoPlaceholder variant="light" h={180} tag="IMG" label="חוץ" />
        </div>
        <div style={{ textAlign:'center', marginTop:18 }}>
          <button className="link-more" onClick={() => nav('gallery')}>
            <span className="u">לצפייה בכל הגלריה</span>{Ic.arrowL({ s:15 })}
          </button>
        </div>
      </div>

      {/* WHY / VALUE TEASER */}
      <div className="sec">
        <SectionHead idx="02" kicker="למה פינק ליידי" />
        <h2 className="h-sec" style={{ marginBottom:18 }}>לא רק תמונות —<br/>חוויה שנעים לחזור אליה.</h2>
        <ul className="incl">
          <li><span className="ck">{Ic.check({ s:16 })}</span>סטודיו מאובזר: תאורה, רקעים, סטים, תלבושות ואביזרים</li>
          <li><span className="ck">{Ic.check({ s:16 })}</span>סבלנות אינסופית — עובדים עד שהתוצאה מרגישה נכון</li>
        </ul>
        <button className="link-more" style={{ marginTop:20 }} onClick={() => nav('about')}>
          <span className="u">להכיר את שירה</span>{Ic.arrowL({ s:15 })}
        </button>
      </div>

      {/* CLOSING CTA */}
      <div className="sec warm" style={{ textAlign:'center' }}>
        <div className="kick" style={{ marginBottom:10 }}>מתחילים?</div>
        <h2 className="h-sec" style={{ marginBottom:16 }}>בודקים זמינות,<br/>בלי התחייבות.</h2>
        <p className="body" style={{ margin:'0 auto 20px', maxWidth:300 }}>כותבים לשירה בוואטסאפ, מספרים מה בא לכם לצלם, ומתאמים תאריך שמתאים לכם.</p>
        <WAButton variant="btn-rose" />
        <div className="note-after">{PHONE_DISPLAY}</div>
      </div>

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