/* site.jsx — the public site (client design, Oct 2026).

   Every text, picture, link and price comes from window.CONTENT (content.js),
   so everything here is editable from /admin. Markup and class names follow the
   client's approved HTML; the styles live in site.css.

   Long texts use a tiny markup, the same one explained in the admin panel:
     blank line      new paragraph          ## / ###   heading
     - item          bullet list            1. item    numbered list
     > line          quote                  !> line    highlighted question
     ?? text         question (bold, pink)  => text    path line
     **bold**  *italic*  [text](link)                                       */

const { useState: useSiteState, useEffect: useSiteEffect, useRef: useSiteRef } = React;

/* ─────────── links ─────────── */
function waUrl(message){
  const num = C("site.whatsapp", "");
  return "https://wa.me/" + num + (message ? "?text=" + encodeURIComponent(message) : "");
}
function resolveHref(h){
  h = String(h || "").trim();
  if (/^wa:/i.test(h)) return waUrl(h.slice(3).trim());
  return h;
}
function linkProps(h){
  const url = resolveHref(h);
  return /^https?:/i.test(url) ? { href: url, target: "_blank", rel: "noopener noreferrer" } : { href: url };
}
function Btn({ b, cls = "btn btn-primary", arrow = true }){
  if (!b || !b.label) return null;
  return <a className={cls} {...linkProps(b.href)}>{b.label}{arrow && <span aria-hidden="true">←</span>}</a>;
}

/* ─────────── text markup ─────────── */
const INLINE_RE = /(\*\*[^*]+?\*\*|\*[^*\n]+?\*|\[[^\]]+\]\([^)]+\)|\n)/g;
function inl(text){
  if (text == null || text === "") return null;
  const parts = String(text).split(INLINE_RE);
  return parts.map((p, i) => {
    if (!p) return null;
    if (p === "\n") return <br key={i}/>;
    if (p.startsWith("**") && p.endsWith("**") && p.length > 4) return <strong key={i}>{p.slice(2, -2)}</strong>;
    if (p.startsWith("*") && p.endsWith("*") && p.length > 2) return <em key={i}>{p.slice(1, -1)}</em>;
    const m = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(p);
    if (m) return <a key={i} {...linkProps(m[2])}>{m[1]}</a>;
    return p;
  });
}
/* single-line display text (headings): newlines become line breaks, no markup needed */
const lines = (t) => inl(t);

function Doc({ text, pClass }){
  if (!text) return null;
  const blocks = String(text).replace(/\r/g, "").split(/\n\s*\n/).map((b) => b.trim()).filter(Boolean);
  return blocks.map((b, i) => {
    const ls = b.split("\n");
    const every = (re) => ls.every((l) => re.test(l));
    if (/^### /.test(b)) return <h3 key={i}>{inl(b.slice(4))}</h3>;
    if (/^## /.test(b)) return <h2 key={i}>{inl(b.slice(3))}</h2>;
    if (every(/^- /)) return <ul key={i} className="bullet-list blog-needs">{ls.map((l, j) => <li key={j}>{inl(l.slice(2))}</li>)}</ul>;
    if (every(/^\d+\. /)) return <ol key={i}>{ls.map((l, j) => <li key={j}>{inl(l.replace(/^\d+\. /, ""))}</li>)}</ol>;
    if (every(/^!> ?/)) return <blockquote key={i} className="blog-key-question">{ls.map((l, j) => <p key={j}>{inl(l.replace(/^!> ?/, ""))}</p>)}</blockquote>;
    if (every(/^> ?/)) return <blockquote key={i}>{ls.map((l, j) => <p key={j}>{inl(l.replace(/^> ?/, ""))}</p>)}</blockquote>;
    if (/^\?\? /.test(b)) return <p key={i} className="question">{inl(b.slice(3))}</p>;
    if (/^=> /.test(b)) return <p key={i} className="path">{inl(b.slice(3))}</p>;
    return <p key={i} className={pClass}>{inl(b)}</p>;
  });
}

/* ─────────── shared pieces ─────────── */
function Img({ src, alt, className, eager }){
  if (!src) return null;
  return <img src={window.productImageSrc ? window.productImageSrc(src) : src} alt={alt || ""} className={className}
    loading={eager ? "eager" : "lazy"} decoding="async"/>;
}

function Bread({ here, parent }){
  const home = C("site.homePage") === "index" ? "/" : "/home";
  return (
    <div className="bread">
      <a href={home}>עמוד הבית</a>
      {parent && <> / <a href={parent.href}>{parent.label}</a></>}
      {here && <> / {here}</>}
    </div>
  );
}

function PageHero({ title, text, here }){
  return (
    <section className="page-hero"><div className="container">
      <Bread here={here || title}/>
      <h1 tabIndex={-1}>{lines(title)}</h1>
      {text && <p>{inl(text)}</p>}
    </div></section>
  );
}

function SectionHeader({ eyebrow, title, text, eyeline }){
  if (!eyebrow && !title && !text) return null;
  return (
    <div className="section-header">
      {eyebrow && (eyeline ? <p className="eyeline">{eyebrow}</p> : <div className="eyebrow">{eyebrow}</div>)}
      {title && <h2>{lines(title)}</h2>}
      {text && <p>{inl(text)}</p>}
    </div>
  );
}

function Numbers({ items }){
  return (
    <div className="numbers">
      {(items || []).map((n, i) => <div className="number" key={i}><strong>{n.n}</strong><span>{n.l}</span></div>)}
    </div>
  );
}

function FaqList({ items }){
  return (
    <div className="faq-list">
      {(items || []).map((f, i) => <details key={i}><summary>{f.q}</summary><p>{inl(f.a)}</p></details>)}
    </div>
  );
}

function FaqSection({ head, items, id = "faq" }){
  return (
    <section className="section section-faq" id={id}><div className="container reading">
      {head.eyebrow && <div className="eyebrow">{head.eyebrow}</div>}
      <h2>{head.title}</h2>
      {head.note && <p className="faq-note">{head.note}</p>}
      <FaqList items={items}/>
    </div></section>
  );
}

function Gallery({ items, className = "new-gallery", zoom }){
  return (
    <div className={className}>
      {(items || []).map((g, i) => (
        <figure key={i} onClick={zoom ? () => zoom(g) : undefined} style={zoom ? { cursor: "zoom-in" } : undefined}>
          <Img src={g.image} alt={g.alt}/>
          {g.caption && <figcaption>{g.caption}</figcaption>}
        </figure>
      ))}
    </div>
  );
}

/* one <dialog> for every "click to enlarge" picture */
function useLightbox(){
  const ref = useSiteRef(null);
  const [pic, setPic] = useSiteState(null);
  useSiteEffect(() => { if (pic && ref.current && !ref.current.open) ref.current.showModal(); }, [pic]);
  const close = () => { if (ref.current) ref.current.close(); setPic(null); };
  const box = (
    <dialog ref={ref} id="workshop-photo-zoom" aria-label="תמונה בהגדלה" onClose={() => setPic(null)}
      onClick={(e) => { if (e.target === ref.current) close(); }}>
      <button id="workshop-photo-close" type="button" onClick={close}>סגירה ✕</button>
      {pic && <img id="workshop-photo-large" src={window.productImageSrc(pic.image)} alt={pic.alt || ""}/>}
    </dialog>
  );
  return [setPic, box];
}

function BookReviews({ id }){
  const r = C("reviews", {});
  const f = r.featured || {};
  return (
    <section className="section section-sand" id={id}><div className="container">
      <h2>{r.bookTitle}</h2>
      {f.name && (
        <div className="book-review-feature"><article className="recommendation">
          {f.label && <p className="label">{f.label}</p>}
          <h3>{f.name}</h3>
          {f.role && <p className="role">{inl(f.role)}</p>}
          <div className="copy">
            <Doc text={f.text}/>
            {f.ending && <p className="ending">{inl(f.ending)}</p>}
          </div>
        </article></div>
      )}
      <div className="book-review-grid">
        {(r.book || []).map((b, i) => (
          <article className="book-review" key={i}>
            <h3>{b.name}</h3>
            {b.role && <p className="review-role">{b.role}</p>}
            <p>{inl(b.text)}</p>
          </article>
        ))}
      </div>
    </div></section>
  );
}

function WorkshopReviews({ id, screensId }){
  const w = C("reviews.workshop", {});
  const s = C("reviews.screens", {});
  return (
    <>
      {w.image && (
        <section className="section testimonial-section" id={id}><div className="container">
          <SectionHeader eyebrow={w.eyebrow} title={w.title} text={w.text}/>
          <figure className="testimonial-card new-recommendations" style={{ maxWidth: "100%", margin: 0 }}>
            <Img src={w.image} alt={w.alt} eager/>
          </figure>
        </div></section>
      )}
      {(s.items || []).length > 0 && (
        <section className="section section-sand" id={screensId}><div className="container">
          <SectionHeader title={s.title} text={s.text}/>
          <div className="workshop-reviews-grid">
            {s.items.map((g, i) => <figure className="workshop-review" key={i}><Img src={g.image} alt={g.alt}/></figure>)}
          </div>
        </div></section>
      )}
    </>
  );
}

function Cta({ c, plainBtn }){
  if (!c) return null;
  return (
    <section className="section-cta"><div className="container">
      <h2>{lines(c.title)}</h2>
      {c.text && <p>{inl(c.text)}</p>}
      <Btn b={c.button} cls={plainBtn ? "btn" : "btn btn-primary"}/>
    </div></section>
  );
}

/* ═══════════════ pages ═══════════════ */

function HomePage(){
  const p = C("pages.home", {});
  const h = p.hero || {};
  const split = (s, imageFirst) => {
    const text = (
      <div className="block-text">
        {s.eyebrow && <div className="eyebrow">{s.eyebrow}</div>}
        <h2>{lines(s.title)}</h2>
        <Doc text={s.text}/>
        <Btn b={s.button}/>
      </div>
    );
    const pic = <div className="photo-frame"><Img src={s.image} alt={s.alt}/></div>;
    return imageFirst ? <>{pic}{text}</> : <>{text}{pic}</>;
  };
  const cardList = (list) => (
    <div className="cards">
      {(list || []).map((c, i) => (
        <article className="card" key={i}>
          {c.image && <div className="card-img"><Img src={c.image} alt={c.alt}/></div>}
          <div className="card-body">
            {c.icon && <div className="mini-icon" aria-hidden="true">{c.icon}</div>}
            <h3>{c.title}</h3>
            <p>{inl(c.text)}</p>
            {c.linkLabel && <a className="text-link" {...linkProps(c.href)}>{c.linkLabel}</a>}
          </div>
        </article>
      ))}
    </div>
  );
  return (
    <>
      <section className="hero"><div className="container hero-grid">
        <div className="hero-copy">
          {h.eyebrow && <div className="eyebrow">{h.eyebrow}</div>}
          <h1 tabIndex={-1}>{h.title}{h.titleAccent && <><br/><span>{h.titleAccent}</span></>}</h1>
          {h.tagline && <p className="hero-tagline">{h.tagline}</p>}
          <p>{inl(h.text)}</p>
          <div className="btn-row">
            {(h.buttons || []).map((b, i) => <Btn key={i} b={b} cls={i === 0 ? "btn btn-primary" : "btn btn-secondary"}/>)}
          </div>
          <div className="micro-proof">
            {(h.proof || []).map((m, i) => <div key={i}><strong>{m.title}</strong><small>{m.sub}</small></div>)}
          </div>
        </div>
        <div className="hero-visual">
          <span aria-hidden="true" className="hero-dot"></span>
          <Img src={h.image} alt={h.alt} eager/>
          {h.sticker && <span className="hero-sticker">{h.sticker}</span>}
        </div>
      </div></section>

      <section className="section section-white"><div className="container">
        <SectionHeader {...(p.intro || {})}/>
        {cardList((p.intro || {}).cards)}
      </div></section>

      <section className="section section-sand"><div className="container split">{split(p.batMitzvah || {}, false)}</div></section>
      <section className="section"><div className="container split">{split(p.book || {}, true)}</div></section>

      <section className="section section-white"><div className="container">
        <SectionHeader eyebrow={(p.numbers || {}).eyebrow} title={(p.numbers || {}).title} text={(p.numbers || {}).text}/>
        <Numbers items={(p.numbers || {}).items}/>
      </div></section>

      <section className="section section-white"><div className="container">
        <SectionHeader eyebrow={(p.products || {}).eyebrow} title={(p.products || {}).title} text={(p.products || {}).text}/>
        {cardList((p.products || {}).cards)}
      </div></section>

      <Cta c={p.cta}/>
    </>
  );
}

function AboutPage(){
  const p = C("pages.about", {});
  const cert = p.certificates || {};
  const [zoom, box] = useLightbox();
  return (
    <>
      <PageHero title={p.title} text={p.text} here={p.breadcrumb}/>
      <section className="section section-white"><div className="container reading">
        <Img src={p.portrait} alt={p.portraitAlt} className="sigi-about-portrait"/>
        <Doc text={p.body}/>
      </div></section>
      {((p.courses || {}).items || []).length > 0 && (
        <section className="section section-white" id="professional-courses"><div className="container">
          <SectionHeader title={p.courses.title}/>
          <Gallery items={p.courses.items} className="courses-gallery"/>
        </div></section>
      )}
      <section className="section section-sand" id="professional-certificates"><div className="container">
        <div className="section-header">
          <h2>{cert.title}</h2>
          {cert.text && <p>{inl(cert.text)}</p>}
          {cert.hint && <p className="tiny">{cert.hint}</p>}
        </div>
        <div className="cert-gallery">
          {(cert.items || []).map((c, i) => (
            <figure className="cert-card" key={i}>
              <button type="button" className="cert-open" aria-label={"הגדלת " + (c.caption || "")} onClick={() => zoom(c)}>
                <Img src={c.image} alt={c.alt || c.caption} className="certificate-edited"/>
              </button>
              <figcaption>{c.caption}</figcaption>
            </figure>
          ))}
        </div>
        {(cert.extra || []).length > 0 && <Gallery items={cert.extra} className="new-photo-grid course-completion-gallery"/>}
      </div></section>
      {box}
    </>
  );
}

function BookPage(){
  const p = C("pages.book", {});
  const h = p.hero || {}, a = p.about || {}, m = p.more || {}, box = m.box || {}, t = p.modelingTeaser || {};
  return (
    <>
      <section className="page-hero"><div className="container">
        <Bread here={h.title}/>
        <div className="product-intro-layout single-book-intro">
          <div className="product-intro-copy"><h1 tabIndex={-1}>{lines(h.title)}</h1><p>{inl(h.text)}</p></div>
          <figure className="product-intro-photo"><Img src={h.image} alt={h.alt} eager/></figure>
        </div>
      </div></section>

      {p.statement && (
        <section className="section section-sand"><div className="container">
          <blockquote className="book-statement"><p>{inl(p.statement)}</p></blockquote>
        </div></section>
      )}

      <section className="section section-white"><div className="container split">
        <div className="new-photo-grid" style={{ gridTemplateColumns: "minmax(0,1fr)", maxWidth: 520, marginInline: "auto", width: "100%" }}>
          <figure><Img src={a.image} alt={a.alt}/>{a.caption && <figcaption>{a.caption}</figcaption>}</figure>
        </div>
        <div className="block-text">
          {a.eyebrow && <div className="eyebrow">{a.eyebrow}</div>}
          <h2>{lines(a.title)}</h2>
          <Doc text={a.text}/>
          <Btn b={a.button}/>
        </div>
      </div></section>

      <section className="section"><div className="container reading">
        {m.eyebrow && <div className="eyebrow">{m.eyebrow}</div>}
        <h2>{lines(m.title)}</h2>
        <Doc text={m.text}/>
        {(box.title || box.text) && (
          <div className="placeholder">
            {box.title && <h3>{box.title}</h3>}
            {box.text && <p>{inl(box.text)}</p>}
            {box.linkLabel && <a className="text-link" {...linkProps(box.href)}>{box.linkLabel}</a>}
          </div>
        )}
        <Doc text={m.textAfter}/>
      </div></section>

      <section className="section section-white"><div className="container"><Numbers items={p.numbers}/></div></section>

      <FaqSection head={p.faq || {}} items={C("faq.book", [])}/>

      {((p.gallery || {}).items || []).length > 0 && (
        <section className="section section-white"><div className="container">
          <h2>{p.gallery.title}</h2>
          <Gallery items={p.gallery.items}/>
        </div></section>
      )}

      {t.title && (
        <section className="section section-white modeling-teaser"><div className="container">
          {t.eyebrow && <p className="eyeline">{t.eyebrow}</p>}
          <h2>{t.title}</h2>
          <p>{inl(t.text)}</p>
          <Btn b={t.button} arrow={false}/>
        </div></section>
      )}

      <BookReviews id="book-recommendations"/>
    </>
  );
}

function BatMitzvahPage(){
  const p = C("pages.batMitzvah", {});
  const h = p.hero || {}, ph = p.photos || {};
  const [zoom, box] = useLightbox();
  return (
    <div className="workshop-page">
      <section className="page-hero workshop-page"><div className="container">
        <Bread here={h.title}/>
        <h1 tabIndex={-1}>{lines(h.title)}</h1>
        {h.text && <p className="workshop-opening">{inl(h.text)}</p>}
      </div></section>

      <section className="section section-white"><div className="container reading">
        <Doc text={p.body}/>
        {p.button && p.button.label && <div className="workshop-actions"><Btn b={p.button} arrow={false}/></div>}
      </div></section>

      <WorkshopReviews id="workshop-reviews" screensId="workshops-new-reviews"/>

      <FaqSection head={p.faq || {}} items={C("faq.workshop", [])}/>

      {((p.gallery || {}).items || []).length > 0 && (
        <section className="section section-white"><div className="container">
          <h2>{p.gallery.title}</h2>
          <Gallery items={p.gallery.items} className="new-gallery workshop-gallery"/>
        </div></section>
      )}

      {(ph.items || []).length > 0 && (
        <section className="section section-white" id="workshop-photo-gallery"><div className="container">
          <SectionHeader eyebrow={ph.eyebrow} eyeline title={ph.title} text={ph.text}/>
          <div className="workshop-photo-grid">
            {ph.items.map((g, i) => (
              <button type="button" className="workshop-photo-open" key={i} aria-label={"הגדלת רגע מהסדנה " + (i + 1)} onClick={() => zoom(g)}>
                <Img src={g.image} alt={g.alt}/>
              </button>
            ))}
          </div>
        </div></section>
      )}
      {box}
    </div>
  );
}

function LecturesPage(){
  const p = C("pages.lectures", {});
  return (
    <>
      <PageHero title={p.title} text={p.text} here={p.breadcrumb}/>
      <section className="section section-white"><div className="container reading"><Doc text={p.intro}/></div></section>
      <section className="section section-sand"><div className="container reading"><Doc text={p.parents}/></div></section>
      <section className="section section-white"><div className="container reading"><Doc text={p.teams}/></div></section>
      <Cta c={p.cta} plainBtn/>
      {((p.photos || {}).items || []).length > 0 && (
        <section className="section section-white"><div className="container">
          <h2>{p.photos.title}</h2>
          <Gallery items={p.photos.items} className="new-photo-grid"/>
        </div></section>
      )}
    </>
  );
}

function ProductsPage(){
  const p = C("pages.products", {});
  return (
    <div data-page="products">
      <PageHero title={p.title} text={p.text} here={p.breadcrumb}/>
      <section className="section section-white"><div className="container">
        {p.intro && <div className="section-header"><p>{inl(p.intro)}</p></div>}
        {p.shipping && <p className="shipping-note">{inl(p.shipping)}</p>}
        <div className="product-grid">
          {C("products", []).filter((x) => !x.hidden).map((x, i) => (
            <article className="card" key={i}>
              <div className="card-img"><Img src={x.image} alt={x.alt || x.title}/></div>
              <div className="card-body">
                <div className="product-copy">
                  {x.title && <h3>{x.title}</h3>}
                  {x.text && <p>{inl(x.text)}</p>}
                </div>
                <div className="product-purchase">
                  {x.price && <p className="product-price">{x.price}</p>}
                  {(x.offers || []).filter(Boolean).map((o, j) => <p className="product-offer" key={j}>{o}</p>)}
                  <Btn b={x.button}/>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div></section>
    </div>
  );
}

function GroupPage(){
  const p = C("pages.group", {});
  const h = p.hero || {}, m = p.more || {};
  return (
    <>
      <section className="page-hero"><div className="container">
        <Bread here={p.breadcrumb || h.title}/>
        <div className="product-intro-layout group-book-intro">
          <div className="product-intro-copy"><h1 tabIndex={-1}>{lines(h.title)}</h1><p>{inl(h.text)}</p></div>
          <figure className="product-intro-photo"><Img src={h.image} alt={h.alt} eager/></figure>
        </div>
      </div></section>
      <section className="section section-white"><div className="container reading"><Doc text={p.intro}/></div></section>
      <section className="section section-sand"><div className="container">
        <div className="group-book-grid">
          {(p.packs || []).map((k, i) => (
            <article className="group-book-card" key={i}>
              <div className="group-book-photo"><Img src={k.image} alt={k.alt}/></div>
              <div className="group-book-details">
                <h2>{k.title}</h2>
                <p className="group-total">{k.total}</p>
                {k.per && <p>{k.per}</p>}
                <Btn b={k.button}/>
              </div>
            </article>
          ))}
        </div>
        {p.shipping && <p className="group-shipping">{inl(p.shipping)}</p>}
      </div></section>
      {m.title && (
        <section className="section section-white"><div className="container reading">
          <h2>{m.title}</h2>
          <p>{inl(m.text)}</p>
          <Btn b={m.button} arrow={false}/>
        </div></section>
      )}
    </>
  );
}

function FaqPage(){
  const p = C("pages.faq", {});
  return (
    <>
      <PageHero title={p.title} text={p.text} here={p.breadcrumb}/>
      <section className="section section-white"><div className="container">
        <div className="section-header"><h2>{p.workshopTitle}</h2>{p.workshopNote && <p>{p.workshopNote}</p>}</div>
        <FaqList items={C("faq.workshop", [])}/>
      </div></section>
      <section className="section"><div className="container">
        <div className="section-header"><h2>{p.bookTitle}</h2></div>
        <FaqList items={C("faq.book", [])}/>
      </div></section>
    </>
  );
}

function ReviewsPage(){
  const p = C("pages.reviews", {});
  return (
    <div data-page="reviews">
      <PageHero title={p.title} text={p.text} here={p.breadcrumb}/>
      <BookReviews id="all-book-recommendations"/>
      <WorkshopReviews id="all-workshop-reviews" screensId="all-workshops-new-reviews"/>
    </div>
  );
}

function BlogPage(){
  const p = C("pages.blog", {});
  return (
    <div data-page="blog">
      <PageHero title={p.title} text={p.text} here={p.breadcrumb}/>
      <section className="section section-white"><div className="container">
        {C("blog.posts", []).filter((x) => !x.hidden).map((x, i) => (
          <article className="blog-story-card" key={i}>
            {x.cardEyebrow && <span className="eyeline">{x.cardEyebrow}</span>}
            <h2><a href={"/blog/" + x.slug}>{x.cardTitle || x.title}</a></h2>
            <p>{inl(x.excerpt)}</p>
            <a className="btn btn-primary" href={"/blog/" + x.slug}>{x.cardButton || "לקריאה"} <span aria-hidden="true">←</span></a>
          </article>
        ))}
      </div></section>
    </div>
  );
}

function BlogPostPage({ post }){
  const blog = C("blog", {});
  return (
    <>
      <section className="page-hero"><div className="container blog-reading">
        <Bread parent={{ href: "/blog", label: C("pages.blog.title", "בלוג") }}/>
        {post.eyebrow && <span className="eyeline">{post.eyebrow}</span>}
        <h1 tabIndex={-1}>{lines(post.title)}</h1>
        {post.subtitle && <p>{inl(post.subtitle)}</p>}
        {post.byline && <p className="blog-byline">{post.byline}</p>}
      </div></section>
      <section className="section section-white"><article className="container blog-reading personal-blog">
        <Doc text={post.body}/>
        <div className="blog-end">
          {blog.signature && <p>{blog.signature}</p>}
          <a className="text-link" href="/blog">{blog.backLabel || "בחזרה לבלוג"}</a>
        </div>
      </article></section>
    </>
  );
}

function ContactPage(){
  const p = C("pages.contact", {});
  const n = p.note || {};
  const phoneHref = "tel:" + String(p.phone || "").replace(/[^\d+]/g, "");
  return (
    <>
      <PageHero title={p.title} text={p.text} here={p.breadcrumb}/>
      <section className="section section-white"><div className="container reading">
        <h2>{p.heading}</h2>
        <p>{inl(p.body)}</p>
        <div className="btn-row">
          {(p.buttons || []).map((b, i) => <Btn key={i} b={b} cls={i === 0 ? "btn btn-primary" : "btn btn-secondary"}/>)}
        </div>
        {p.phone && <p><strong>{p.phoneLabel}:</strong> <a dir="ltr" href={phoneHref}>{p.phone}</a></p>}
        {(n.title || n.text) && <div className="side-note">{n.title && <h3>{n.title}</h3>}<p>{inl(n.text)}</p></div>}
      </div></section>
    </>
  );
}

function ModelingPage(){
  const p = C("pages.modeling", {});
  const panel = (x) => x && x.title ? <section className="panel"><h2>{x.title}</h2><Doc text={x.text}/></section> : null;
  return (
    <div id="modeling-content">
      <p className="bread"><a href="/book">{C("pages.book.hero.title", "הספר")}</a> / {p.bread}</p>
      <div className="hero">
        {p.eyebrow && <p className="eyebrow">{p.eyebrow}</p>}
        <h1 tabIndex={-1}>{p.title}</h1>
        {p.premise && <blockquote className="modeling-premise">{p.premise}</blockquote>}
        {p.intro && <p className="intro modeling-premise-explanation">{inl(p.intro)}</p>}
      </div>
      {panel(p.what)}
      <h2>{p.peopleTitle}</h2>
      {p.peopleText && <p>{inl(p.peopleText)}</p>}
      {(p.people || []).map((x, i) => (
        <article key={i}>
          <div className="profile">
            <figure>
              <Img src={x.image} alt={x.name} className="modeling-photo"/>
              {x.credit && <figcaption>{x.credit}</figcaption>}
            </figure>
            <div>
              <p className="eyebrow">{x.name}</p>
              <h2>{x.title}</h2>
              <Doc text={x.text}/>
            </div>
          </div>
          {x.stepsTitle && <h3>{x.stepsTitle}</h3>}
          {x.steps && <p className="path">{x.steps}</p>}
          {x.question && <p className="question">{inl(x.question)}</p>}
        </article>
      ))}
      {panel(p.own)}
      {panel(p.turn)}
      {p.end && p.end.title && <section className="hero"><h2>{p.end.title}</h2><p>{inl(p.end.text)}</p></section>}
      <p><Btn b={p.button} arrow={false}/></p>
    </div>
  );
}

/* ═══════════════ layout ═══════════════ */

function SiteHeader({ page }){
  const s = C("site", {});
  const home = s.homePage === "index" ? "/" : "/home";
  return (
    <header className="site-header">
      <div className="container masthead">
        <a className="brand" href={home} aria-label={(s.brandName || "") + " – " + (s.brandSub || "") + ", לעמוד הבית"}>
          {s.logo && <img className="brand-graphic" src={window.productImageSrc(s.logo)} alt="" width="74" height="62"/>}
          <span className="brand-text"><strong>{s.brandName}</strong><small>{s.brandSub}</small></span>
        </a>
        {s.headerCta && s.headerCta.label && <a className="header-cta" {...linkProps(s.headerCta.href)}>{s.headerCta.label}</a>}
      </div>
      <div className="nav-track" role="region" aria-label="תפריט האתר – ניתן לגלול אופקית">
        <nav className="container nav-list" aria-label="ניווט ראשי">
          {C("nav.links", []).map((l, i) => {
            const current = pageForPath(l.href) === page;
            return <a key={i} {...linkProps(l.href)} aria-current={current ? "page" : undefined}>{l.label}</a>;
          })}
        </nav>
      </div>
    </header>
  );
}

function SiteFooter(){
  const f = C("footer", {});
  const col = (title, links) => (
    <div>
      <h3>{title}</h3>
      <ul>{(links || []).map((l, i) => <li key={i}><a {...linkProps(l.href)}>{l.label}</a></li>)}</ul>
    </div>
  );
  return (
    <footer className="site-footer"><div className="container">
      <div className="footer-grid">
        <div>
          <div className="footer-brand">{f.brand}</div>
          {f.sub && <p>{f.sub}</p>}
          {f.text && <p>{inl(f.text)}</p>}
        </div>
        {col(f.col1Title, f.col1Links)}
        {col(f.col2Title, f.col2Links)}
      </div>
      {(f.bottom || f.credit) && (
        <div className="footer-end">{f.bottom}{f.bottom && f.credit ? " · " : ""}{f.credit}</div>
      )}
    </div></footer>
  );
}

/* ═══════════════ routing ═══════════════ */

const PAGE_COMPONENTS = {
  "index": HomePage, "about": AboutPage, "book": BookPage, "bat-mitzvah": BatMitzvahPage,
  "lectures": LecturesPage, "products": ProductsPage, "group": GroupPage, "faq": FaqPage,
  "reviews": ReviewsPage, "blog": BlogPage, "contact": ContactPage, "modeling": ModelingPage,
};
const PAGE_ALIASES = { "home": "index", "index": "index", "workshops": "lectures", "shop": "products" };

/* "/book" -> "book", "/" -> the landing page chosen in /admin, "/blog/x" -> "blog/x" */
function pageForPath(path){
  const p = String(path || "/").split(/[?#]/)[0].replace(/\/+$/, "") || "/";
  if (p === "/") return C("site.homePage", "bat-mitzvah");
  const parts = p.replace(/^\//, "").split("/");
  if (parts[0] === "blog" && parts[1]) return "blog/" + decodeURIComponent(parts[1]);
  const name = PAGE_ALIASES[parts[0]] || parts[0];
  return PAGE_COMPONENTS[name] ? name : "index";
}

function pageTitle(page){
  if (page.startsWith("blog/")) {
    const post = C("blog.posts", []).find((x) => "blog/" + x.slug === page);
    return post ? post.title : "";
  }
  const map = {
    "index": "pages.home.hero.title", "book": "pages.book.hero.title", "bat-mitzvah": "pages.batMitzvah.hero.title",
    "group": "pages.group.hero.title", "modeling": "pages.modeling.title",
  };
  return C(map[page] || "pages." + page + ".title", "");
}

function setMeta(sel, attr, value){
  let el = document.head.querySelector(sel);
  if (!el) {
    el = document.createElement("meta");
    const m = /\[(name|property)="([^"]+)"\]/.exec(sel);
    if (m) el.setAttribute(m[1], m[2]);
    document.head.appendChild(el);
  }
  el.setAttribute(attr, value);
}

function Site({ path }){
  const page = pageForPath(path);
  useSiteEffect(() => {
    const t = String(pageTitle(page) || "").replace(/\s+/g, " ").trim();
    const suffix = C("site.titleSuffix", "");
    document.title = t ? t + " | " + suffix : suffix;
    setMeta('meta[name="description"]', "content", C("site.seoDescription", ""));
    setMeta('meta[property="og:title"]', "content", document.title);
    const og = C("site.ogImage") || C("pages.book.hero.image");
    if (og) setMeta('meta[property="og:image"]', "content", new URL(window.productImageSrc(og), location.origin).href);
    const h1 = document.querySelector("main h1");
    if (h1 && window.__sitePainted) h1.focus({ preventScroll: true });
    window.__sitePainted = true;
  }, [page]);

  let body;
  if (page.startsWith("blog/")) {
    const post = C("blog.posts", []).find((x) => "blog/" + x.slug === page);
    body = post ? <BlogPostPage post={post}/> : <BlogPage/>;
  } else {
    const Page = PAGE_COMPONENTS[page] || HomePage;
    body = <Page/>;
  }
  return (
    <>
      <a className="skip" href="#main">דילוג לתוכן המרכזי</a>
      <SiteHeader page={page}/>
      <main id="main" key={page}>{body}</main>
      <SiteFooter/>
    </>
  );
}

Object.assign(window, { Site, pageForPath, SITE_PAGES: Object.keys(PAGE_COMPONENTS) });