/* CityPage — דף נחיתה עירוני (SEO מקומי). כל התוכן מגיע מ-window.CITY שמוגדר ב-<head> של דף העיר,
   וה-JSON-LD המקביל (Service + FAQPage) יושב סטטית באותו head — קריא לסורקים גם בלי JS. */
function CityPage() {
  const { SectionHeader, Button, Badge, Accordion } = window.DS;
  const C = window.CITY || { name: '', intro: [], areas: [], nearby: [], faq: [] };
  const wa = 'https://wa.me/972543312367?text=' + encodeURIComponent('היי שלום, אני מ' + C.name + ' ואשמח להצעת מחיר לכספת');

  return (
    <main className="city-page" data-screen-label={'City / ' + C.name}>
      {/* הירו בסגנון מסך הבית — במה לבנה, כותרת ענק, צ'קליסט וכפתורים זהים */}
      <section className="hero city-hero">
        <div className="hero-red">
          <div className="hero-red-inner">
            <nav className="crumb" aria-label="פירורי לחם"><a href="index.html">ראשי</a><span>/</span><span>{'פורץ כספות ב' + C.name}</span></nav>
            <h1 className="hero-headline" data-reveal>פורץ כספות<br /><span className="accent">{'ב' + C.name + '.'}</span></h1>
            <ul className="hero-checklist" data-reveal data-reveal-delay=".06">
              <li><span className="hero-check-badge"><window.LIcon name="check" size={14} /></span><strong>עוסק בכספות בלבד</strong></li>
              <li><span className="hero-check-badge"><window.LIcon name="check" size={14} /></span>ללא גרימת נזק</li>
              <li><span className="hero-check-badge"><window.LIcon name="check" size={14} /></span>{C.eta}</li>
            </ul>
            <p className="city-hero-desc" data-reveal data-reveal-delay=".1">{C.headDesc}</p>
            <window.HeroVideoCard delay=".14" />
            <div className="hero-reviews-cta" data-reveal data-reveal-delay=".18">
              <Button variant="whatsapp" size="lg" href={wa} target="_blank" icon={<img src="https://cdn.simpleicons.org/whatsapp/white" alt="" width="18" height="18" />}>שלחו תמונה בוואטסאפ</Button>
              <span className="urgent-wrap">
                <Button variant="primary" size="lg" href="tel:0543312367" icon={<span className="urgent-dot"></span>}>לשירותי חירום התקשרו עכשיו</Button>
              </span>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container city-intro">
          <div data-reveal>
            {C.intro.map((p, i) => <p key={i}>{p}</p>)}
            <p style={{ fontWeight: 700, color: 'var(--gray-900)' }}>חשוב לדעת: אני עוסק בכספות בלבד — לא מנעולנות ולא דלתות. תחום אחד, ברמה הכי גבוהה.</p>
          </div>
          <div className="city-intro-photo" data-reveal data-reveal-delay=".08">
            <img src={'assets/photos/' + C.photo} alt={'שלום בעבודה — שירות כספות ב' + C.name} loading="lazy" />
          </div>
        </div>
      </section>

      {/* תעודות — אותה רצועה מדף הבית */}
      <window.CertsBand />

      {/* חוגת השירותים הכהה מדף הבית */}
      <window.ServicesDial
        title={<React.Fragment>שירותי כספות <span style={{ color: 'var(--maroon-500)' }}>{'ב' + C.name}</span></React.Fragment>}
        description={'מהבית הפרטי ועד העסק — כל שירותי הכספות ב' + C.name + ' ובסביבה.'} />

      {/* טופס לידים — אותה רצועה מדף הבית */}
      <window.LeadFormBand />

      <section className="section" style={{ background: 'var(--gray-100, #F3F3F5)', paddingBlock: 'clamp(48px, 6vw, 72px)' }}>
        <div className="container">
          <div data-reveal><SectionHeader align="center" title={'איפה אני עובד ב' + C.name + ' ובסביבה'} /></div>
          <div className="city-chips" data-reveal>
            {C.areas.map((a) => <span className="city-chip" key={a}>{a}</span>)}
          </div>
          <div className="city-nearby" data-reveal>
            <span>אזורים נוספים:</span>
            {C.nearby.map((n) => <a key={n.file} href={n.file}>{'פורץ כספות ב' + n.label}</a>)}
            <a href="contact.html">כל הארץ — צרו קשר</a>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ maxWidth: 820 }}>
          <div data-reveal><SectionHeader align="center" title={'שאלות נפוצות — ' + C.name} /></div>
          <div style={{ marginTop: 32 }} data-reveal>
            <Accordion items={C.faq} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 14, flexWrap: 'wrap', marginTop: 40 }} data-reveal>
            <Button variant="whatsapp" size="lg" href={wa} target="_blank" icon={<img src="https://cdn.simpleicons.org/whatsapp/white" alt="" width="18" height="18" />}>הודעה בוואטסאפ</Button>
            <Button size="lg" href="contact.html">קבלו הצעה</Button>
          </div>
        </div>
      </section>

      {/* CTA — אותה רצועה מדף הבית */}
      <window.CTABand title={'פורץ כספות ב' + C.name + ' — מחיר סגור מראש, בלי הפתעות'} />
    </main>
  );
}

Object.assign(window, { CityPage });
