/* ============================================================
   bezikaron — лендинг. Структура из ТЗ, сверху вниз.
   onOrder(packageId?) → разовый чекаут; onSubscribe(planId?) → подписка.
   ============================================================ */

function Landing({ onOrder, lastOrder, onCabinet }) {
  const D = window.DATA;
  return (
    <div>
      <TopBar onOrder={onOrder} lastOrder={lastOrder} onCabinet={onCabinet} />
      <Hero onOrder={onOrder} />
      <ServicesBlock />
      <BeforeAfterBlock />
      <HowItWorks />
      <TrustBlock />
      <FarAwayBlock onOrder={onOrder} />
      <ContactsFooter />
    </div>
  );
}

// ---------- Шапка таб-экранов ----------
function TabHeader({ title, lead }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      padding: '50px 22px 16px',
      background: 'color-mix(in oklch, var(--bg) 88%, transparent)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--line-soft)',
    }}>
      <Wordmark compact />
      <h1 className="t-h2" style={{ marginTop: 12 }}>{title}</h1>
      {lead && <p className="t-small" style={{ marginTop: 5 }}>{lead}</p>}
    </div>
  );
}

// ---------- Экран «Уход» (разовый каталог) ----------
function CareScreen({ onOrder, onGoSub }) {
  return (
    <div>
      <TabHeader title="טיפול חד-פעמי" lead="בחרו את סוג המצבה ואת רמת הטיפול. המחיר סופי." />
      <PackagesBlock onOrder={onOrder} headless />
      <Section style={{ paddingTop: 0 }}>
        <button onClick={onGoSub} className="card" style={{
          width: '100%', textAlign: 'start', cursor: 'pointer',
          padding: 18, display: 'flex', alignItems: 'center', gap: 14,
          background: 'var(--accent-tint)', border: '1px solid color-mix(in oklch, var(--accent) 28%, transparent)',
        }}>
          <IconDisc name="calendar" size={46} />
          <div style={{ flex: 1 }}>
            <h3 className="t-h3" style={{ fontSize: 18 }}>צריכים טיפול כל השנה?</h3>
            <p className="t-small" style={{ marginTop: 3 }}>מנוי: טיפול אחת לרבעון ודוחות תמונות, ללא מעורבות מצדכם.</p>
          </div>
          <Icon name="arrow" size={20} style={{ color: 'var(--accent-deep)', flexShrink: 0 }} />
        </button>
      </Section>
    </div>
  );
}

// ---------- Экран «Подписка» ----------
function SubscriptionScreen({ onSubscribe }) {
  const D = window.DATA;
  return (
    <div>
      <TabHeader title="טיפול לאורך כל השנה" lead="אנחנו משגיחים על המקום כל השנה — ללא מעורבות מצדכם." />
      <SubscriptionBlock onSubscribe={onSubscribe} headless />
      <Section style={{ paddingTop: 4 }}>
        <div className="card" style={{ padding: 20 }}>
          <div className="t-eyebrow" style={{ marginBottom: 14 }}>מה כלול בטיפול</div>
          <CheckList items={D.trust.reasons} />
        </div>
      </Section>
    </div>
  );
}

// ---------- Шапка ----------
function TopBar({ onOrder, lastOrder, onCabinet }) {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 30,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '50px 22px 13px',
      background: 'color-mix(in oklch, var(--bg) 88%, transparent)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--line-soft)',
    }}>
      <Wordmark compact />
      {lastOrder ? (
        <button className="chip" style={{ cursor: 'pointer', background: 'var(--accent-tint)', borderColor: 'transparent', color: 'var(--accent-deep)' }} onClick={onCabinet}>
          <Icon name="doc" size={15} /> ההזמנה שלי
        </button>
      ) : (
        <button className="chip" style={{ cursor: 'pointer' }} onClick={() => onOrder()}>
          <Icon name="leaf" size={15} /> להזמין טיפול
        </button>
      )}
    </div>
  );
}

function Wordmark({ light, compact }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <img src="assets/logo-bezikaron.png" alt="bezikaron" draggable={false} style={{
        height: 32, width: 'auto', display: 'block', flexShrink: 0,
        filter: light ? 'brightness(0) invert(1)' : 'none',
      }} />
      {!compact && <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--accent)', alignSelf: 'center' }} />}
      {!compact && <span style={{ fontSize: 13, color: light ? 'rgba(255,255,255,0.8)' : 'var(--ink-faint)', fontWeight: 600 }}>טיפול בזיכרון</span>}
    </div>
  );
}

// ---------- Первый экран ----------
function Hero({ onOrder }) {
  return (
    <Section style={{ paddingTop: 34, paddingBottom: 30 }}>
      <div className="fade-up">
        <h1 className="t-display" style={{ fontSize: 38, marginBottom: 16 }}>
          טיפול מסור<br />בזיכרון יקיריכם
        </h1>
        <p className="t-lead" style={{ marginBottom: 26, maxWidth: 360 }}>
          שומרים על הקברים נקיים ומסודרים — בקפידה, בכבוד ועם דוח תמונות. אין צורך להגיע לשום מקום.
        </p>
        <button className="btn btn-primary" onClick={() => onOrder()}>
          להזמין טיפול לקבר
          <Icon name="arrow" size={20} stroke={2} />
        </button>
        <div style={{ display: 'flex', gap: 16, marginTop: 18, flexWrap: 'wrap', color: 'var(--ink-soft)' }}>
          {['מ-79 ₪ לחודש', 'דוח עם תמונות', 'תשלום אונליין'].map((t, i) => (
            <span key={i} style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 14, fontWeight: 600 }}>
              <Icon name="check" size={15} stroke={2} style={{ color: 'var(--accent-deep)' }} /> {t}
            </span>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ---------- Что входит в уход ----------
function ServicesBlock() {
  const D = window.DATA;
  return (
    <Section tint>
      <Eyebrow>מה אנחנו עושים</Eyebrow>
      <h2 className="t-h2" style={{ marginBottom: 6 }}>טיפול מלא בזיכרון</h2>
      <p className="t-lead" style={{ marginBottom: 22 }}>בקפידה, במקצועיות ובשקיפות — מניקוי ועד דוחות עם תמונות.</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {D.services.map((s) => (
          <div key={s.id} className="card card-lift" style={{ padding: 18, display: 'flex', gap: 15, alignItems: 'flex-start' }}>
            <div style={{
              width: 52, height: 52, borderRadius: 15, flexShrink: 0,
              background: 'var(--accent-tint)', color: 'var(--accent-deep)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={s.ic} size={27} />
            </div>
            <div style={{ flex: 1 }}>
              <h3 className="t-h3" style={{ fontSize: 18, marginBottom: 5 }}>{s.title}</h3>
              <p className="t-small">{s.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ---------- Переключатель типа памятника ----------
function MonumentToggle({ value, onChange }) {
  const types = window.DATA.monumentTypes;
  return (
    <div style={{ display: 'flex', gap: 6, background: 'var(--surface-2)', padding: 5, borderRadius: 'var(--r)', border: '1px solid var(--line)', marginBottom: 18 }}>
      {types.map((m) => {
        const on = value === m.id;
        return (
          <button key={m.id} onClick={() => onChange(m.id)} style={{
            flex: 1, border: 'none', cursor: 'pointer', borderRadius: 11, padding: '9px 4px',
            background: on ? 'var(--surface)' : 'transparent',
            boxShadow: on ? 'var(--shadow-soft)' : 'none',
            color: on ? 'var(--ink)' : 'var(--ink-soft)',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, transition: 'all .15s ease',
          }}>
            <span style={{ fontWeight: 700, fontSize: 14 }}>{m.label}</span>
            <span style={{ fontSize: 11, color: on ? 'var(--ink-faint)' : 'var(--ink-faint)', fontWeight: 600 }}>{m.hint}</span>
          </button>
        );
      })}
    </div>
  );
}

// ---------- Карточки уровней подписки ----------
function SubTierCards({ type, value, onChange }) {
  const sub = window.DATA.subscription;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {sub.tiers.map((t) => {
        const on = value === t.id;
        const m = t.price[type];
        return (
          <button key={t.id} onClick={() => onChange(t.id)} style={{
            position: 'relative', width: '100%', textAlign: 'start', cursor: 'pointer',
            padding: 18, borderRadius: 'var(--r-lg)',
            background: on ? 'var(--accent-tint)' : 'var(--surface)',
            border: on ? '1.5px solid var(--accent)' : '1.5px solid var(--line)',
            boxShadow: on ? 'none' : 'var(--shadow-soft)',
            display: 'flex', flexDirection: 'column', transition: 'all .15s ease',
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              {/* радио */}
              <span style={{
                width: 24, height: 24, borderRadius: 999, flexShrink: 0, marginTop: 2,
                border: on ? '7px solid var(--accent)' : '2px solid var(--line)',
                background: 'var(--surface)', transition: 'border .15s ease',
              }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <span className="t-h3" style={{ fontSize: 19 }}>{t.name}</span>
                  {t.popular && (
                    <span style={{
                      fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
                      color: 'var(--accent-deep)', background: 'var(--accent-tint)',
                      padding: '3px 9px', borderRadius: 999,
                      border: on ? '1px solid color-mix(in oklch, var(--accent) 35%, transparent)' : 'none',
                    }}>נבחר לרוב</span>
                  )}
                </div>
              </div>
              <div style={{ textAlign: 'end', flexShrink: 0 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
                  <span className="faint" style={{ fontSize: 12, fontWeight: 600 }}>מ-</span>
                  <span className="t-price" style={{ fontSize: 22 }}>{window.fmt(m)}</span>
                </div>
                <div className="faint" style={{ fontSize: 12, fontWeight: 600 }}>₪/חודש</div>
              </div>
            </div>
            <p className="t-small" style={{ marginTop: 10, marginInlineStart: 36 }}>{t.summary}</p>
            <div style={{ marginTop: 12, marginInlineStart: 36 }}>
              <CheckList items={t.features} />
            </div>
          </button>
        );
      })}
    </div>
  );
}

// ---------- Выбор способа оплаты подписки (год / месяц) ----------
function BillingOptions({ type, tier, value, onChange }) {
  const s = window.PRICE.sub(type, tier, value);
  const opts = [
    { id: 'year', label: 'מראש לשנה', perMonth: s.yearPerMonth, best: true,
      charge: `תשלום אחד של ${window.fmt(s.yearTotal)} ₪ בשנה` },
    { id: 'month', label: 'חודשי', perMonth: s.monthlyPerMonth, best: false,
      charge: `${window.fmt(s.monthlyPerMonth)} ₪ בכל חודש` },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      {opts.map((o) => {
        const on = value === o.id;
        return (
          <button key={o.id} onClick={() => onChange(o.id)} style={{
            position: 'relative', width: '100%', textAlign: 'start', cursor: 'pointer',
            padding: '15px 16px', borderRadius: 'var(--r)',
            background: on ? 'var(--accent-tint)' : 'var(--surface)',
            border: on ? '1.5px solid var(--accent)' : '1.5px solid var(--line)',
            boxShadow: on ? 'none' : 'var(--shadow-soft)',
            display: 'flex', alignItems: 'center', gap: 13, transition: 'all .15s ease',
          }}>
            {/* радио */}
            <span style={{
              width: 24, height: 24, borderRadius: 999, flexShrink: 0,
              border: on ? '7px solid var(--accent)' : '2px solid var(--line)',
              background: 'var(--surface)', transition: 'border .15s ease',
            }} />
            {/* лейбл + детали списания */}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <span className="t-body" style={{ fontWeight: 700 }}>{o.label}</span>
                {o.best && (
                  <span style={{
                    fontSize: 11.5, fontWeight: 700, letterSpacing: '0.02em',
                    color: 'var(--on-accent)', background: 'var(--accent-deep)',
                    padding: '3px 8px', borderRadius: 999,
                  }}>−{s.savePct}% · {window.fmt(s.save)} ₪</span>
                )}
              </div>
              <p className="t-small" style={{ marginTop: 3 }}>{o.charge}</p>
            </div>
            {/* цена в месяц */}
            <div style={{ textAlign: 'end', flexShrink: 0 }}>
              {o.best && (
                <div style={{ fontSize: 13, color: 'var(--ink-faint)', textDecoration: 'line-through', lineHeight: 1 }}>
                  {window.fmt(s.monthlyPerMonth)} ₪
                </div>
              )}
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 3, marginTop: o.best ? 2 : 0 }}>
                <span className="t-price" style={{ fontSize: 21 }}>{window.fmt(o.perMonth)}</span>
                <span className="faint" style={{ fontSize: 12, fontWeight: 600 }}>₪/חודש</span>
              </div>
            </div>
          </button>
        );
      })}
    </div>
  );
}

// ---------- Пакеты ухода ----------
function PackagesBlock({ onOrder, headless }) {
  const D = window.DATA;
  const [type, setType] = React.useState('single');
  return (
    <Section id="packages" style={headless ? { paddingTop: 24, paddingBottom: 24 } : {}}>
      {!headless && (
        <>
          <Eyebrow>טיפול חד-פעמי</Eyebrow>
          <h2 className="t-h2" style={{ marginBottom: 8 }}>בחרו את רמת הטיפול</h2>
          <p className="t-lead" style={{ marginBottom: 18 }}>המחיר סופי. אפשר להזמין אונליין תוך כמה דקות.</p>
        </>
      )}

      <MonumentToggle value={type} onChange={setType} />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {D.packages.map((pkg) => (
          <div key={pkg.id} className="card" style={{
            padding: 20, position: 'relative',
            borderColor: pkg.popular ? 'color-mix(in oklch, var(--accent) 50%, var(--line))' : 'var(--line)',
            boxShadow: pkg.popular ? '0 2px 4px rgba(51,53,47,0.05), 0 12px 34px color-mix(in oklch, var(--accent) 18%, transparent)' : 'var(--shadow-card)',
          }}>
            {pkg.popular && (
              <span style={{
                position: 'absolute', top: 18, insetInlineEnd: 20,
                fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
                color: 'var(--accent-deep)', background: 'var(--accent-tint)', padding: '5px 11px', borderRadius: 999,
              }}>נבחר לרוב</span>
            )}
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4 }}>
              <h3 className="t-h3">{pkg.name}</h3>
            </div>
            <p className="t-small" style={{ marginBottom: 14 }}>{pkg.summary}</p>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 16 }}>
              <span className="t-price">{window.fmt(pkg.price[type])} ₪</span>
              <span className="faint" style={{ fontSize: 14 }}>חד-פעמי</span>
            </div>
            <div style={{ marginBottom: 18 }}>
              {pkg.base && (
                <p className="t-small" style={{ marginBottom: 11, fontWeight: 700, color: 'var(--ink)' }}>
                  כל מה שכלול ב«{window.PRICE.pkgName(pkg.base)}», בתוספת:
                </p>
              )}
              <CheckList items={pkg.includes} />
            </div>
            <button className={pkg.popular ? 'btn btn-primary' : 'btn btn-ghost'} onClick={() => onOrder(pkg.id, type)}>
              להזמין טיפול
            </button>
          </div>
        ))}
      </div>
      <p className="t-small" style={{ marginTop: 16, display: 'flex', gap: 9, alignItems: 'flex-start' }}>
        <Icon name="help" size={17} style={{ color: 'var(--bronze-deep)', flexShrink: 0, marginTop: 1 }} />
        {D.typeNote}
      </p>
    </Section>
  );
}

// ---------- До / после ----------
function BeforeAfterBlock() {
  const pairs = [
    { id: 'marble', label: 'שיש', before: 'uploads/Single_Before_2.jpg', after: 'uploads/Single_After_2.jpg' },
    { id: 'stone',  label: 'אבן בהירה', before: 'uploads/Single_Before_4.jpg', after: 'uploads/Single_After_4.jpg' },
    { id: 'granite', label: 'גרניט · כפול', before: 'uploads/Double_Before_2.jpg', after: 'uploads/Double_After_2.jpg' },
  ];
  return (
    <Section tint>
      <Eyebrow>לפני ואחרי</Eyebrow>
      <h2 className="t-h2" style={{ marginBottom: 20 }}>רואים כל פרט של הטיפול</h2>
      <BeforeAfter pairs={pairs} />
    </Section>
  );
}

// ---------- Как это работает ----------
function HowItWorks() {
  const D = window.DATA;
  return (
    <Section>
      <Eyebrow>איך זה עובד</Eyebrow>
      <h2 className="t-h2" style={{ marginBottom: 24 }}>ארבעה שלבים פשוטים</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        {D.steps.map((s, i) => (
          <div key={s.n} style={{ display: 'flex', gap: 16 }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div style={{
                width: 40, height: 40, borderRadius: 999, flexShrink: 0,
                border: '1.5px solid var(--accent)', color: 'var(--accent-deep)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 18,
                background: 'var(--surface)',
              }}>{s.n}</div>
              {i < D.steps.length - 1 && <div style={{ width: 1.5, flex: 1, background: 'var(--line)', minHeight: 26 }} />}
            </div>
            <div style={{ paddingBottom: i < D.steps.length - 1 ? 22 : 0, paddingTop: 6 }}>
              <h3 className="t-h3" style={{ fontSize: 19, marginBottom: 5 }}>{s.title}</h3>
              <p className="t-small">{s.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ---------- Доверие ----------
function TrustBlock() {
  const D = window.DATA;
  return (
    <Section tint>
      <Eyebrow>למה בוחרים בבזיכרון</Eyebrow>
      {/* по всей стране + основатели */}
      <div className="card" style={{ padding: 22, marginBottom: 14 }}>
        <div style={{ fontFamily: 'var(--font-head)', fontWeight: 600, fontSize: 28, color: 'var(--accent-deep)' }}>{D.trust.yearsLabel}</div>
        <p className="t-small" style={{ marginTop: 4 }}>{D.trust.yearsDesc}</p>
        <div className="divider" style={{ margin: '16px 0' }} />
        <p className="t-small" style={{ color: 'var(--ink)' }}>{D.trust.founders}</p>
      </div>

      {/* почему выбирают — реальные причины */}
      <div className="card" style={{ padding: 20, marginBottom: 14 }}>
        <CheckList items={D.trust.reasons} />
      </div>

      {/* тихие блоки доверия */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 22 }}>
        {D.trust.points.map((pt, i) => (
          <div key={i} className="card" style={{ padding: 16, display: 'flex', gap: 14 }}>
            <IconDisc name={['shield', 'lock', 'doc'][i]} size={44} />
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 4 }}>
                <h3 className="t-h3" style={{ fontSize: 18 }}>{pt.title}</h3>
              </div>
              <p className="t-small">{pt.desc}</p>
            </div>
          </div>
        ))}
      </div>

      {/* пресса — реальные публикации */}
      <p className="t-small" style={{ marginBottom: 12, fontWeight: 700, color: 'var(--ink)' }}>כתבו עלינו</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 22 }}>
        {D.press.map((p) => (
          <a key={p.outlet} href={p.url} target="_blank" rel="noopener" className="card" style={{
            padding: 16, display: 'flex', gap: 14, alignItems: 'center', textDecoration: 'none', color: 'var(--ink)',
          }}>
            <span style={{ width: 64, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <img src={p.logo} alt={p.outlet} draggable={false} style={{ height: 30, maxWidth: 64, width: 'auto', objectFit: 'contain' }} />
            </span>
            <span style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }} />
            <span className="t-small" style={{ flex: 1, color: 'var(--ink-soft)' }}>{p.title}</span>
            <Icon name="arrow" size={16} style={{ color: 'var(--ink-faint)', flexShrink: 0 }} />
          </a>
        ))}
      </div>

      {/* отзывы */}
      <p className="t-small" style={{ marginBottom: 12, fontWeight: 700, color: 'var(--ink)' }}>חוות דעת</p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {D.reviews.map((r, i) => (
          <div key={i} className="card" style={{ padding: 18 }}>
            <p className="t-body" style={{ fontStyle: 'italic', color: 'var(--ink)', marginBottom: 12 }}>«{r.text}»</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 34, height: 34, borderRadius: 999, background: 'var(--bronze-tint)', color: 'var(--bronze-deep)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontFamily: 'var(--font-head)' }}>{r.name[0]}</div>
              <span className="t-small" style={{ fontWeight: 700, color: 'var(--ink)' }}>{r.name}</span>
              <span className="faint" style={{ fontSize: 14 }}>· {r.place}</span>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ---------- Вы далеко ----------
function FarAwayBlock({ onOrder }) {
  return (
    <Section>
      <div className="card" style={{ padding: 24, background: 'var(--accent-tint)', border: '1px solid color-mix(in oklch, var(--accent) 30%, transparent)' }}>
        <IconDisc name="heart" size={48} />
        <h2 className="t-h2" style={{ fontSize: 24, margin: '14px 0 8px' }}>לא יכולים להגיע?</h2>
        <p className="t-body" style={{ marginBottom: 18 }}>
          אנחנו נעשה הכול בעצמנו ונשלח לכם תמונות. בכל מקום שתהיו — הזיכרון יישאר מטופח.
        </p>
        <button className="btn btn-primary" onClick={() => onOrder()}>להזמין טיפול מרחוק</button>
      </div>
    </Section>
  );
}

// ---------- Подписка ----------
function SubscriptionBlock({ onSubscribe, headless }) {
  const D = window.DATA;
  const sub = D.subscription;
  const [type, setType] = React.useState('single');
  const [tier, setTier] = React.useState('extended');
  const [period, setPeriod] = React.useState('year');
  return (
    <Section tint={!headless} id="subscription" style={headless ? { paddingTop: 20, paddingBottom: 14 } : {}}>
      {!headless && (
        <>
          <Eyebrow>שלב שני — לפי בחירה</Eyebrow>
          <h2 className="t-h2" style={{ marginBottom: 8 }}>{sub.title}</h2>
          <p className="t-lead" style={{ marginBottom: 22 }}>{sub.lead}</p>
        </>
      )}

      <span className="field-label">סוג המצבה</span>
      <MonumentToggle value={type} onChange={setType} />

      <span className="field-label">רמת הטיפול</span>
      <SubTierCards type={type} value={tier} onChange={setTier} />

      <p className="t-small" style={{ margin: '12px 2px 0', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
        <Icon name="heart" size={16} style={{ color: 'var(--accent-deep)', flexShrink: 0, marginTop: 1 }} />
        {sub.sharedNote}
      </p>

      <div style={{ height: 1, background: 'var(--line)', margin: '20px 0 4px' }} />

      <span className="field-label">אופן התשלום</span>
      <BillingOptions type={type} tier={tier} value={period} onChange={setPeriod} />

      <button className="btn btn-primary" style={{ marginTop: 18 }} onClick={() => onSubscribe(tier, period, type)}>להירשם למנוי</button>
      <p className="t-small" style={{ marginTop: 12, textAlign: 'center' }}>{sub.cancelNote}</p>
    </Section>
  );
}

// ---------- Контакты ----------
function ContactsFooter() {
  const D = window.DATA;
  const c = D.contacts;
  const Item = ({ icon, label, value, href }) => (
    <a href={href || '#'} style={{
      display: 'flex', alignItems: 'center', gap: 13, padding: '14px 0',
      textDecoration: 'none', color: 'var(--ink)', borderBottom: '1px solid var(--line)',
    }}>
      <IconDisc name={icon} size={42} tone="bronze" />
      <div style={{ flex: 1 }}>
        <div className="faint" style={{ fontSize: 13, fontWeight: 600 }}>{label}</div>
        <div className="t-body" style={{ fontWeight: 700 }}>{value}</div>
      </div>
      <Icon name="arrow" size={18} style={{ color: 'var(--ink-faint)' }} />
    </a>
  );
  return (
    <footer style={{ padding: '34px 22px 40px', background: 'var(--ink)', color: 'var(--on-accent)' }}>
      <Wordmark light />
      <p style={{ marginTop: 14, marginBottom: 22, fontFamily: 'var(--font-head)', fontSize: 19, lineHeight: 1.4, color: 'rgba(251,250,246,0.92)' }}>
        {D.trust.slogan}
      </p>
      <div style={{ background: 'rgba(251,250,246,0.04)', borderRadius: 'var(--r-lg)', padding: '4px 18px', border: '1px solid rgba(251,250,246,0.1)' }}>
        <div style={{ '--ink': '#FBFAF6', '--ink-faint': 'rgba(251,250,246,0.5)', '--line': 'rgba(251,250,246,0.1)', '--bronze-tint': 'rgba(168,137,92,0.22)' }}>
          <Item icon="phone" label="טלפון" value={c.phone} href={c.phoneHref} />
          <Item icon="mail" label="דוא״ל" value={c.email} href={`mailto:${c.email}`} />
          <div style={{ borderBottom: 'none' }}><Item icon="chat" label="WhatsApp" value={c.whatsapp} href="#" /></div>
        </div>
      </div>

      {/* приложение — ссылки на реальные магазины */}
      <p style={{ marginTop: 22, marginBottom: 10, fontSize: 14, fontWeight: 600, color: 'rgba(251,250,246,0.7)' }}>זמין באפליקציה</p>
      <div style={{ display: 'flex', gap: 10 }}>
        {[{ ic: 'apple', t1: 'הורידו ב-', t2: 'App Store', href: D.appStore }, { ic: 'play', t1: 'זמין ב-', t2: 'Google Play', href: D.googlePlay }].map((s) => (
          <a key={s.t2} href={s.href} target="_blank" rel="noopener" style={{
            flex: 1, display: 'flex', alignItems: 'center', gap: 10, padding: '11px 14px',
            borderRadius: 12, border: '1px solid rgba(251,250,246,0.22)', background: 'rgba(251,250,246,0.06)',
            color: 'var(--on-accent)', textDecoration: 'none',
          }}>
            <Icon name={s.ic} size={24} />
            <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15 }}>
              <span style={{ fontSize: 10, opacity: 0.7 }}>{s.t1}</span>
              <span style={{ fontSize: 15, fontWeight: 700 }}>{s.t2}</span>
            </span>
          </a>
        ))}
      </div>

      <p style={{ marginTop: 24, fontSize: 13, color: 'rgba(251,250,246,0.4)' }}>2026 © All Funeral Services · {c.site}</p>
    </footer>
  );
}

Object.assign(window, { Landing, MonumentToggle, CareScreen, SubscriptionScreen, TabHeader, BillingOptions, SubTierCards });
