// ABOUT Shira · VALUE/pricing · CONTACT
function AboutPage(){
  const { nav } = React.useContext(AppCtx);
  return (
    <div className="page">
      <div className="sec" style={{ paddingBottom:18 }}>
        <Kicker>על שירה</Kicker>
        <h1 className="h-display" style={{ fontSize:34 }}>הצלמת שמאחורי<br/>פינק ליידי.</h1>
      </div>

      <PhotoPlaceholder h={400} tag="PORTRAIT" label="פורטרט — שירה בן דוד בסטודיו" />

      <div className="sec">
        <p className="body" style={{ fontSize:15.5, marginTop:0 }}>
          שמי שירה בן דוד, ואני מצלמת משפחות וילדים כבר כמעט עשור. לאורך השנים גיליתי שהתמונות הכי יפות לא מגיעות מהוראות — הן מגיעות מרגעים אמיתיים, כשמשפחה מרגישה בנוח.
        </p>
        <p className="body">
          לכן אני לא ממהרת. נותנת לילדים זמן, משחקת איתם, ומכירה את המשפחה לפני שאני מרימה מצלמה. הרבה מהמשפחות שמגיעות אליי הגיעו בהמלצה — וזו המחמאה הכי גדולה שאני מכירה.
        </p>
      </div>

      <div className="sec paper2">
        <SectionHead kicker="הגישה שלי" />
        <ul className="incl">
          <li><span className="ck">{Ic.check({ s:16 })}</span>סבלנות לפני הכל — עובדים עד שהתמונה מרגישה נכון</li>
          <li><span className="ck">{Ic.check({ s:16 })}</span>אווירה רגועה ואישית, בלי לחץ ובלי בלגן</li>
          <li><span className="ck">{Ic.check({ s:16 })}</span>סטודיו מקצועי ומאובזר לכל סוגי הסשנים</li>
          <li><span className="ck">{Ic.check({ s:16 })}</span>יחס אישי מהפנייה הראשונה ועד התמונות</li>
        </ul>
      </div>

      <div className="sec warm">
        <ShiraNote quote="בשבילי כל משפחה היא סיפור. התפקיד שלי הוא פשוט להיות שם ברגע הנכון — ולתת לו להישאר." />
      </div>

      <div className="trust">
        <div><div className="n">כמעט עשור</div><div className="l">של ניסיון</div></div>
        <div><div className="n">יבנה</div><div className="l">והסביבה</div></div>
        <div><div className="n">בהמלצה</div><div className="l">הרבה משפחות</div></div>
      </div>

      <div className="sec" style={{ textAlign:'center' }}>
        <h2 className="h-sec" style={{ marginBottom:16 }}>נעים להכיר —<br/>בואו נצלם.</h2>
        <WAButton variant="btn-rose" />
        <div className="note-after">{PHONE_DISPLAY}</div>
        <button className="link-more" style={{ marginTop:18 }} onClick={() => nav('gallery')}>
          <span className="u">לצפייה בעבודות</span>{Ic.arrowL({ s:15 })}
        </button>
      </div>

      <Footer />
    </div>
  );
}

function ValuePage(){
  const values = [
    { n:'01', h:'כישרון וניסיון', p:'כמעט עשור של צילום משפחה וילדים — עין מנוסה שיודעת לתפוס את הרגע הנכון.' },
    { n:'02', h:'סבלנות אמיתית', p:'הסשן לא מתוזמן בלחץ. עובדים עד שכולם נינוחים והתוצאה מרגישה אמיתית.' },
    { n:'03', h:'סטודיו ברמה גבוהה', p:'תאורה מקצועית, רקעים, סטים, תלבושות ואביזרים — הכל מוכן ומותאם לכם.' },
    { n:'04', h:'חוויה משפחתית', p:'לא רק תמונות — בילוי נעים שכיף לחזור אליו, וזו הסיבה שממליצים עלינו.' },
  ];
  return (
    <div className="page">
      <div className="sec" style={{ paddingBottom:16 }}>
        <Kicker>מחירים וערך</Kicker>
        <h1 className="h-display" style={{ fontSize:34 }}>מחיר הוגן.<br/>ערך אמיתי.</h1>
        <p className="lede" style={{ marginTop:14 }}>המחירים בפינק ליידי הוגנים ונגישים — אבל מה שבאמת מקבלים הוא ניסיון, סבלנות, סטודיו איכותי וחוויה שנשארת.</p>
      </div>

      <div className="sec tight">
        <div className="value-list">
          {values.map(v => (
            <div className="value-item" key={v.n}>
              <span className="vn">{v.n}</span>
              <div><h3>{v.h}</h3><p className="body" style={{ marginBottom:0 }}>{v.p}</p></div>
            </div>
          ))}
        </div>
      </div>

      <div className="sec paper2">
        <h2 className="h-sub" style={{ marginBottom:18 }}>מה כלול בכל סשן</h2>
        <ul className="incl">
          <li><span className="ck">{Ic.check({ s:16 })}</span>ייעוץ והכוונה לפני הסשן — מה ללבוש ואיך להתכונן</li>
          <li><span className="ck">{Ic.check({ s:16 })}</span>שימוש מלא בסטים, רקעים, תלבושות ואביזרים</li>
          <li><span className="ck">{Ic.check({ s:16 })}</span>צילום רגוע בליווי אישי, ללא הגבלת לחץ זמן</li>
          <li><span className="ck">{Ic.check({ s:16 })}</span>עריכה ומבחר תמונות נבחרות</li>
        </ul>
      </div>

      <div className="sec">
        <SectionHead kicker="איך זה עובד" />
        <div className="steps">
          <div className="step"><span className="sn">1</span><div><h3>פנייה בוואטסאפ</h3><p className="body" style={{ marginBottom:0 }}>כותבים לשירה, מספרים מה בא לכם לצלם ומתי בערך.</p></div></div>
          <div className="step"><span className="sn">2</span><div><h3>תיאום והצעה אישית</h3><p className="body" style={{ marginBottom:0 }}>שירה מתאמת תאריך, מסבירה על הסשן ומוסרת הצעת מחיר אישית.</p></div></div>
          <div className="step"><span className="sn">3</span><div><h3>הסשן בסטודיו</h3><p className="body" style={{ marginBottom:0 }}>מגיעים, נהנים, ומצלמים בקצב רגוע עד שהתוצאה נכונה.</p></div></div>
          <div className="step"><span className="sn">4</span><div><h3>בחירת התמונות</h3><p className="body" style={{ marginBottom:0 }}>מקבלים מבחר תמונות נבחרות ובוחרים את האהובות עליכם.</p></div></div>
        </div>
      </div>

      <div className="sec">
        <div className="price-note">
          <b>למה אין כאן מחירון קבוע?</b><br/>
          כל סשן שונה — סוג הצילום, מספר המשתתפים והסט שתבחרו משפיעים על המחיר. לכן שירה מוסרת הצעת מחיר אישית והוגנת בוואטסאפ, בלי התחייבות.
        </div>
      </div>

      <div className="sec warm" style={{ textAlign:'center' }}>
        <h2 className="h-sec" style={{ marginBottom:16 }}>קבלו הצעה אישית.</h2>
        <WAButton variant="btn-rose" label="בדיקת זמינות ומחיר" />
        <div className="note-after">{PHONE_DISPLAY} · מענה אישי של שירה</div>
      </div>

      <Footer />
    </div>
  );
}

function ContactPage(){
  return (
    <div className="page">
      <div className="sec" style={{ paddingBottom:16 }}>
        <Kicker>יצירת קשר</Kicker>
        <h1 className="h-display" style={{ fontSize:34 }}>נשמח לשמוע<br/>מכם.</h1>
        <p className="lede" style={{ marginTop:14 }}>הדרך הכי נוחה היא וואטסאפ — שירה עונה אישית בהקדם האפשרי.</p>
      </div>

      <div className="sec tight">
        <WAButton variant="btn-rose" />
        <div style={{ height:8 }}></div>
        <a className="btn btn-ghost btn-round" href={'tel:0509019390'} style={{ textDecoration:'none' }}>
          {Ic.phone({ s:18 })} חיוג · {PHONE_DISPLAY}
        </a>
      </div>

      <div className="sec">
        <div className="contact-row">
          <span className="ic">{Ic.chat({ s:20 })}</span>
          <div><div className="k">WHATSAPP</div><div className="v">{PHONE_DISPLAY}</div></div>
        </div>
        <div className="contact-row">
          <span className="ic">{Ic.clock({ s:20 })}</span>
          <div><div className="k">זמינות</div><div className="v he">בתיאום מראש</div></div>
        </div>
        <div className="contact-row">
          <span className="ic">{Ic.pin({ s:20 })}</span>
          <div><div className="k">הסטודיו</div><div className="v he">יבנה · הכתובת המדויקת תישלח עם תיאום הסשן</div></div>
        </div>
        <div className="contact-row" style={{ borderBottom:'none' }}>
          <span className="ic">{Ic.inst({ s:20 })}</span>
          <div><div className="k">אינסטגרם</div><div className="v">@pinklady_photos</div></div>
        </div>
      </div>

      <div className="sec paper2">
        <PhotoPlaceholder h={150} variant="" tag="MAP"
          label="מפה / אזור יבנה — תוטמע עם הכתובת המדויקת" style={{ borderRadius:4 }} />
      </div>

      <div className="sec warm" style={{ textAlign:'center' }}>
        <h2 className="h-sec" style={{ marginBottom:14 }}>מוכנים להתחיל?</h2>
        <p className="body" style={{ margin:'0 auto 20px', maxWidth:280 }}>כמה שאלות קצרות ונכין לכם הודעה מסודרת לשירה.</p>
        <WAButton variant="btn-rose" label="בדיקת זמינות בוואטסאפ" />
      </div>

      <Footer />
    </div>
  );
}
Object.assign(window, { AboutPage, ValuePage, ContactPage });