/* authors.jsx — the editorial sections: Manifesto, Chapter Teaser, Book Inside,
   Meet the Author, Author's Letter, Bat Mitzvah, Two Creating Meaning, Press bar.
   All copy and images come from window.CONTENT (editable at /admin). */

const { useState: useStateAU, useEffect: useEffAU, useRef: useRefAU } = React;

/* ─────────── 01 — Manifesto / philosophy ─────────── */
function Manifesto({ palette }){
  const c = HOME.manifesto || {};
  return (
    <section data-screen-label="03 Manifesto" className="pad-y" style={{ background: palette.ink, color: palette.bg, position:"relative", overflow:"hidden" }}>
      <div aria-hidden="true" style={{ position:"absolute", insetInlineStart:"-10%", top:"-20%", width:520, height:520, background: palette.accent, borderRadius:"50% 38% 60% 42% / 50% 50% 60% 50%", opacity:.18, filter:"blur(20px)" }}/>
      <div aria-hidden="true" style={{ position:"absolute", insetInlineEnd:"-8%", bottom:"-30%", width:420, height:420, background: palette.gold, borderRadius:"50% 60% 38% 50% / 60% 42% 50% 50%", opacity:.12, filter:"blur(24px)" }}/>
      <div className="container" style={{ position:"relative", textAlign:"center", maxWidth:920 }}>
        <Reveal>
          <Eyebrow palette={palette} color={palette.gold}>{c.eyebrow}</Eyebrow>
        </Reveal>
        <Reveal delay={120} y={20}>
          <blockquote className="display" style={{ fontSize:"clamp(36px, 5.5vw, 76px)", lineHeight:1.08, margin:"22px auto 18px", fontWeight:600, maxWidth:"18ch" }}>
            <span style={{ color: palette.gold, fontStyle:"italic", fontWeight:500 }}>{c.quoteTop}</span><br/>
            {c.quoteMid} <span style={{ fontStyle:"italic", color: palette.gold, fontWeight:500 }}>{c.quoteAccent}</span>
          </blockquote>
        </Reveal>
        <Reveal delay={280}>
          <p style={{ fontSize:"clamp(15px, 1.3vw, 18px)", lineHeight:1.7, color: `${palette.bg}d0`, maxWidth:"60ch", margin:"24px auto 0" }}>
            {c.text}
          </p>
        </Reveal>
        <div style={{ display:"flex", gap:14, justifyContent:"center", marginTop:36, flexWrap:"wrap" }}>
          {(c.words || []).map((w,i)=>(
            <Reveal key={i} delay={400 + i*80}>
              <span className="display" style={{ fontSize:18, fontWeight:500, opacity:.85, borderBottom:`1px solid ${palette.gold}66`, paddingBottom:2 }}>
                {w}
              </span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────── 02 — Chapter teaser (TOC preview) ─────────── */
function ChapterTeaser({ palette }){
  const c = HOME.chapters || {};
  const items = c.items || [];
  return (
    <section data-screen-label="06 Chapters" className="pad-y" style={{ background: palette.surface }}>
      <div className="container">
        <div style={{ display:"grid", gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1.2fr)", gap:48, alignItems:"end", marginBottom:36 }} className="ch-head">
          <div>
            <Eyebrow palette={palette}>{c.eyebrow}</Eyebrow>
            <h2 className="display" style={{ fontSize:"clamp(34px, 4.5vw, 56px)", margin:"14px 0 0", lineHeight:1.05 }}>
              {c.title} <span style={{ color: palette.accent, fontStyle:"italic", fontWeight:500 }}>{c.titleAccent}</span>
            </h2>
          </div>
          <p style={{ fontSize:16, lineHeight:1.65, color: palette.ink2, margin:0, maxWidth:"56ch" }}>
            {c.intro}
          </p>
        </div>
        <ol className="chapters" style={{ listStyle:"none", padding:0, margin:0, display:"grid", gridTemplateColumns:"1fr 1fr", gap:0, border:`1px solid ${palette.line}`, borderRadius:6, overflow:"hidden", background: palette.bg }}>
          {items.map((ch,i)=>(
            <li key={i} style={{
              padding:"22px 26px",
              borderBottom: (i < items.length-2) ? `1px solid ${palette.line}` : "none",
              borderInlineEnd: (i % 2 === 0) ? `1px solid ${palette.line}` : "none",
              display:"flex", gap:18, alignItems:"baseline",
            }}>
              <span className="latin" style={{ fontSize:13, fontWeight:700, color: palette.accent, letterSpacing:".15em", minWidth:32 }}>{ch.n}</span>
              <div style={{ flex:1 }}>
                <div style={{ display:"flex", justifyContent:"space-between", alignItems:"baseline", gap:12 }}>
                  <div className="display" style={{ fontSize:18, fontWeight:600 }}>חודש {parseInt(ch.n,10) || i+1}: {ch.t}</div>
                  {ch.p && <div className="latin" style={{ fontSize:11, color: palette.ink2, fontWeight:600, opacity:.7, flexShrink:0 }}>עמ׳ {ch.p}</div>}
                </div>
                <div style={{ fontSize:13.5, color: palette.ink2, lineHeight:1.55, marginTop:4 }}>{ch.d}</div>
              </div>
            </li>
          ))}
        </ol>
        {c.summaryTitle && (
          <div style={{ display:"flex", alignItems:"center", justifyContent:"space-between", marginTop:18, padding:"14px 22px", background: palette.bg, border:`1px solid ${palette.line}`, borderRadius:6, gap:16, flexWrap:"wrap" }}>
            <div style={{ display:"flex", alignItems:"baseline", gap:14 }}>
              <span className="latin" style={{ fontSize:13, fontWeight:700, color: palette.accent, letterSpacing:".15em" }}>★</span>
              <div className="display" style={{ fontSize:17, fontWeight:600 }}>{c.summaryTitle}</div>
            </div>
            {c.summaryPage && <div className="latin" style={{ fontSize:11, color: palette.ink2, fontWeight:600, opacity:.7 }}>עמ׳ {c.summaryPage}</div>}
          </div>
        )}
        <style>{`
          @media (max-width: 760px){
            .ch-head{ grid-template-columns: 1fr !important; align-items: start !important; }
            .chapters{ grid-template-columns: 1fr !important; }
            .chapters > li{ border-inline-end: none !important; }
            .chapters > li:not(:last-child){ border-bottom: 1px solid ${palette.line} !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ─────────── 03 — Book inside: skills + sample page peek ─────────── */
function BookInside({ palette }){
  const c = HOME.bookInside || {};
  const skills = c.skills || [];
  return (
    <section data-screen-label="07 Inside" className="pad-y" style={{ background: palette.bg, position:"relative" }}>
      <div className="container">
        <div className="inside-grid" style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:64, alignItems:"start" }}>
          <div>
            <Eyebrow palette={palette}>{c.eyebrow}</Eyebrow>
            <h2 className="display" style={{ fontSize:"clamp(32px, 4vw, 50px)", margin:"14px 0 22px", lineHeight:1.1 }}>
              {c.title} <span style={{ color: palette.accent, fontStyle:"italic", fontWeight:500 }}>{c.titleAccent}</span>
            </h2>
            <p style={{ fontSize:16.5, lineHeight:1.7, color: palette.ink2, marginTop:0, marginBottom:24 }}>
              {c.intro}
            </p>
            <div style={{ display:"grid", gridTemplateColumns:"repeat(2, 1fr)", gap:0, border:`1px solid ${palette.line}`, borderRadius:6, overflow:"hidden", background: palette.surface }} className="skills-grid">
              {skills.map((s,i)=>(
                <div key={i} style={{
                  padding:"16px 18px",
                  borderInlineEnd: (i % 2 === 0) ? `1px solid ${palette.line}` : "none",
                  borderBottom: (i < skills.length-2) ? `1px solid ${palette.line}` : "none",
                }}>
                  <div style={{ display:"flex", gap:10, alignItems:"baseline" }}>
                    <span style={{ flexShrink:0, width:16, height:16, borderRadius:999, background: palette.accent, display:"grid", placeItems:"center", color: palette.bg, marginTop:2 }}>
                      <IconCheck size={10} stroke={palette.bg} strokeWidth={2.6}/>
                    </span>
                    <div>
                      <div className="display" style={{ fontSize:14.5, fontWeight:600 }}>{s.t}</div>
                      <div style={{ fontSize:12.5, color: palette.ink2, lineHeight:1.5, marginTop:2 }}>{s.d}</div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display:"flex", gap:12, marginTop:26, flexWrap:"wrap" }}>
              {c.ctaLabel && <PrimaryBtn palette={palette} href={c.ctaHref || "/sample"}>{c.ctaLabel}</PrimaryBtn>}
              {c.ghostLabel && <GhostBtn palette={palette} href={c.ghostHref || "/book"}>{c.ghostLabel}</GhostBtn>}
            </div>
          </div>
          <div style={{ position:"relative", display:"grid", placeItems:"center" }}>
            <SamplePage palette={palette}/>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .inside-grid{ grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 460px){
          .skills-grid{ grid-template-columns: 1fr !important; }
          .skills-grid > div{ border-inline-end: none !important; border-bottom: 1px solid ${palette.line} !important; }
          .skills-grid > div:last-child{ border-bottom: none !important; }
        }
      `}</style>
    </section>
  );
}

function SamplePage({ palette }){
  const s = C("home.bookInside.sample", {});
  return (
    <div style={{ position:"relative", filter:"drop-shadow(0 30px 50px rgba(28,24,21,.22))" }}>
      <div style={{ width: 380, maxWidth: "100%", background: palette.surface, padding: "44px 44px 48px", borderRadius:"3px 8px 8px 3px", border:`1px solid ${palette.line}`, position:"relative" }}>
        {/* spine shadow */}
        <div aria-hidden="true" style={{ position:"absolute", insetInlineEnd:0, top:0, bottom:0, width:18, background:`linear-gradient(${document.dir==="rtl"?"-90deg":"90deg"}, transparent, rgba(0,0,0,.08))` }}/>
        <div className="latin" style={{ fontSize:10, letterSpacing:".28em", color: palette.accent, fontWeight:700 }}>{s.kicker}</div>
        <h3 className="display" style={{ fontSize:26, margin:"10px 0 14px", lineHeight:1.15 }}>
          {s.title} <span style={{ fontStyle:"italic", color: palette.accent }}>{s.titleAccent}</span> {s.titleEnd}
        </h3>
        <p style={{ fontSize:13.5, lineHeight:1.7, color: palette.ink2, margin:"0 0 12px" }}>
          {s.p1}
        </p>
        <p style={{ fontSize:13.5, lineHeight:1.7, color: palette.ink2, margin:"0 0 18px" }}>
          {s.p2}
        </p>
        {/* exercise card */}
        <div style={{ background: palette.rose, color: palette.accent2, padding:"18px 20px", borderRadius:6, border:`1px solid ${palette.line}` }}>
          <div style={{ display:"flex", alignItems:"center", gap:8, marginBottom:10 }}>
            <span style={{ width:22, height:22, borderRadius:999, background: palette.accent, color: palette.bg, fontSize:11, fontWeight:700, display:"grid", placeItems:"center" }}>✎</span>
            <span style={{ fontSize:11, letterSpacing:".18em", textTransform:"uppercase", fontWeight:700, color: palette.accent }}>{s.exerciseLabel}</span>
          </div>
          <div className="display" style={{ fontSize:15, fontWeight:600, marginBottom:10 }}>{s.exerciseTitle}</div>
          {[1,2,3].map(i=>(
            <div key={i} style={{ display:"flex", alignItems:"baseline", gap:10, marginTop:8 }}>
              <span style={{ fontSize:11, fontWeight:700, color: palette.accent2 }}>{i}.</span>
              <span style={{ flex:1, borderBottom:`1px dashed ${palette.accent2}55`, height:14 }}/>
            </div>
          ))}
        </div>
        <div style={{ display:"flex", justifyContent:"space-between", marginTop:22, fontSize:11, color: palette.ink2, opacity:.7 }}>
          <span>{s.footerLeft}</span>
          <span>{s.footerRight}</span>
        </div>
      </div>
    </div>
  );
}

/* ─────────── 04 — Meet the Author ─────────── */
function AuthorPortrait({ palette, name, accent, src }){
  return (
    <div style={{ width:"100%", aspectRatio:"4/5", borderRadius:6, overflow:"hidden", position:"relative", background: palette.surface }}>
      <img src={src} alt={`תמונה של ${name}`} style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition:"center top", display:"block" }}/>
      <div style={{ position:"absolute", insetInlineStart:0, bottom:0, padding:"24px 18px 16px", background:`linear-gradient(0deg, ${palette.ink}cc, transparent)`, color: palette.bg, width:"100%" }}>
        <div style={{ fontSize:13, fontWeight:600 }}>{name}</div>
      </div>
    </div>
  );
}

function AuthorCard({ palette, name, role, bio, creds, accent, src }){
  const initials = String(name || "").split(/\s/).filter(Boolean).map(w => w[0]).join("");
  return (
    <article style={{ background: palette.surface, borderRadius:8, overflow:"hidden", border:`1px solid ${palette.line}`, display:"grid", gridTemplateColumns:"minmax(160px, 1fr) minmax(0, 1.5fr)" }} className="auth-card">
      {src ? (
        <AuthorPortrait palette={palette} name={name} accent={accent} src={src}/>
      ) : (
        <div style={{ position:"relative", aspectRatio:"4/5", background: accent, color: palette.bg, padding:"28px 26px", display:"flex", flexDirection:"column", justifyContent:"flex-end", overflow:"hidden" }}>
          <div aria-hidden="true" style={{ position:"absolute", insetInlineEnd:-20, top:-30, fontFamily:"Frank Ruhl Libre, serif", fontSize:280, lineHeight:1, color: palette.bg, opacity:.08, fontWeight:800 }}>{initials}</div>
          <div style={{ position:"relative", fontSize:13, fontWeight:600 }}>{name}</div>
        </div>
      )}
      <div style={{ padding:"26px 28px" }}>
        <Eyebrow palette={palette} color={accent}>מחברת</Eyebrow>
        <h3 className="display" style={{ fontSize:26, margin:"10px 0 4px", fontWeight:700 }}>{name}</h3>
        <div style={{ fontSize:13.5, color: palette.ink2, marginBottom:14 }}>{role}</div>
        <p style={{ fontSize:14.5, lineHeight:1.65, color: palette.ink2, margin:"0 0 16px" }}>{bio}</p>
        <div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
          {(creds || []).map((c,i)=><Chip key={i} palette={palette} tone="gold">{c}</Chip>)}
        </div>
      </div>
      <style>{`
        @media (max-width: 560px){
          .auth-card{ grid-template-columns: 1fr !important; }
        }
      `}</style>
    </article>
  );
}

function MeetAuthors({ palette }){
  const c = HOME.author || {};
  const card = c.card || {};
  return (
    <section id="about" data-screen-label="08 Author" className="pad-y" style={{ background: palette.bg }}>
      <div className="container">
        <div style={{ display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:48, alignItems:"end", marginBottom:36 }} className="auth-head">
          <div>
            <Eyebrow palette={palette}>{c.eyebrow}</Eyebrow>
            <h2 className="display" style={{ fontSize:"clamp(34px, 4.5vw, 56px)", margin:"14px 0 0", lineHeight:1.05 }}>
              {c.title} <span style={{ color: palette.accent, fontStyle:"italic", fontWeight:500 }}>{c.titleAccent}</span>
            </h2>
          </div>
          <p style={{ fontSize:16, lineHeight:1.7, color: palette.ink2, margin:0, maxWidth:"56ch" }}>
            {c.intro}
          </p>
        </div>

        {c.quote && (
          <Reveal>
          <figure style={{ margin:"0 0 36px", padding:"40px 44px", background: palette.surface, borderRadius:8, border:`1px solid ${palette.line}`, position:"relative" }}>
            <span aria-hidden="true" style={{ position:"absolute", insetInlineStart:24, top:16, color: palette.accent, opacity:.4 }}><IconQuote size={40} fill={palette.accent}/></span>
            <blockquote className="display" style={{ fontSize:"clamp(20px, 2.2vw, 28px)", lineHeight:1.45, fontWeight:500, margin:"0 0 18px", maxWidth:"58ch", paddingInlineStart:20, color: palette.ink }}>
              {rt(c.quote, palette.accent)}
            </blockquote>
            <figcaption style={{ display:"flex", alignItems:"center", gap:10, paddingInlineStart:20, color: palette.ink2 }}>
              <span style={{ width:32, height:1, background: palette.ink2 }}/>
              <span style={{ fontSize:13.5 }}><strong style={{color: palette.ink}}>{c.quoteName}</strong> · {c.quoteRole}</span>
            </figcaption>
          </figure>
          </Reveal>
        )}

        <div className="auth-grid-single" style={{ display:"grid", gridTemplateColumns:"minmax(0, 720px)", justifyContent:"center" }}>
          <AuthorCard
            palette={palette}
            name={card.name}
            accent={palette.accent}
            src={productImageSrc(card.image)}
            role={card.role}
            bio={card.bio}
            creds={card.creds}
          />
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .auth-head{ grid-template-columns: 1fr !important; align-items:start !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────── 04b — Author's letter (Sigalit's voice) ─────────── */
function AuthorLetter({ palette }){
  const c = HOME.letter || {};
  // Gold surface — ties to the "fruits / growth" metaphor of the poem itself
  const goldBg   = palette.gold;
  const inkOnGold = palette.accent2; // deepest contrast against gold
  const accentOnGold = palette.ink;  // ink for emphasis words
  const ink2OnGold = palette.accent2; // muted on gold for chrome
  const lines = c.poem || [];
  return (
    <section data-screen-label="13 Letter" style={{ background: goldBg, color: inkOnGold, position:"relative", overflow:"hidden", padding:"clamp(64px, 9vw, 120px) 0" }}>
      {/* organic shapes */}
      <div aria-hidden="true" style={{ position:"absolute", insetInlineEnd:"-10%", top:"-15%", width:520, height:520, borderRadius:"50% 38% 60% 42% / 50% 50% 60% 50%", background: palette.accent, opacity:.15, filter:"blur(20px)" }}/>
      <div aria-hidden="true" style={{ position:"absolute", insetInlineStart:"-12%", bottom:"-20%", width:460, height:460, borderRadius:"50% 60% 38% 50% / 60% 42% 50% 50%", background: palette.accent2, opacity:.10, filter:"blur(28px)" }}/>
      {/* big background tree, faint */}
      <div aria-hidden="true" style={{ position:"absolute", insetInlineStart:"-4%", top:"55%", transform:"translateY(-50%)", opacity:.18 }}>
        <TreeMark palette={palette} size={380} color={inkOnGold}/>
      </div>

      <div className="container" style={{ position:"relative" }}>
        <div className="letter-grid" style={{ display:"grid", gridTemplateColumns:"auto 1fr", gap:56, alignItems:"start" }}>
          <div style={{ display:"flex", flexDirection:"column", gap:18, alignItems:"center", minWidth:180 }}>
            <TreeMark palette={palette} size={140} color={inkOnGold}/>
            <div style={{ textAlign:"center" }}>
              <div className="eyebrow" style={{ color: inkOnGold, opacity:.75 }}>{c.sideKicker}</div>
              <div className="display" style={{ fontSize:18, fontWeight:700, marginTop:8, color: inkOnGold }}>{c.sideName}</div>
              <div style={{ fontSize:12, color: ink2OnGold, opacity:.7, marginTop:4 }}>{c.sideRole}</div>
            </div>
          </div>
          <div>
            <Reveal>
              <div className="eyebrow" style={{ color: inkOnGold, opacity:.7, display:"inline-flex", alignItems:"center", gap:10, marginBottom:14 }}>
                <span style={{ width:24, height:1, background: inkOnGold, opacity:.7 }}/>
                {c.kicker}
              </div>
              <h2 className="display" style={{ fontSize:"clamp(34px, 5vw, 64px)", margin:"0 0 32px", lineHeight:1.04, fontWeight:700, color: inkOnGold, maxWidth:"14ch" }}>
                {c.title}
                <br/>
                <span style={{ fontStyle:"italic", fontWeight:500, color: palette.bg, background: inkOnGold, padding:"0 14px", display:"inline-block", transform:"rotate(-1deg)" }}>{c.titleAccent}</span>
              </h2>
            </Reveal>
            <Reveal delay={120}>
              <div className="body-serif" style={{ fontSize:"clamp(17px, 1.5vw, 21px)", lineHeight:1.78, color: inkOnGold, fontWeight:500, maxWidth:"54ch" }}>
                {lines.map((line, i)=>(
                  <div key={i} style={{ minHeight: line ? "auto" : "0.6em" }}>
                    {rt(line, accentOnGold, true)}
                  </div>
                ))}
              </div>
            </Reveal>
            {c.closing && (
              <Reveal delay={260}>
                <div style={{ display:"flex", alignItems:"center", gap:14, marginTop:36, paddingTop:24, borderTop:`1px solid ${inkOnGold}33` }}>
                  <span style={{ width:46, height:1, background: inkOnGold, opacity:.6 }}/>
                  <div style={{ fontSize:14, color: inkOnGold, opacity:.85, fontStyle:"italic", fontFamily:'"Frank Ruhl Libre", serif' }}>
                    {c.closing}
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px){
          .letter-grid{ grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────── 05 — Bat Mitzvah ─────────── */
function BatMitzvah({ palette }){
  const c = HOME.batMitzvah || {};
  return (
    <section data-screen-label="09 Bat Mitzvah" className="pad-y" style={{ background: palette.bg }}>
      <div className="container">
        <div className="bm-wrap" style={{
          position:"relative", overflow:"hidden",
          borderRadius:10, padding:"56px 56px",
          background: `linear-gradient(${document.dir==="rtl"?"-90deg":"90deg"}, ${palette.accent2}, ${palette.accent2}f0)`,
          color: palette.bg,
        }}>
          <div aria-hidden="true" style={{ position:"absolute", insetInlineEnd:-100, top:-80, width:340, height:340, background: palette.gold, borderRadius:"50%", opacity:.18, filter:"blur(20px)" }}/>
          <div aria-hidden="true" style={{ position:"absolute", insetInlineStart:"45%", bottom:-120, width:280, height:280, background: palette.accent, borderRadius:"50%", opacity:.22, filter:"blur(30px)" }}/>

          <div style={{ position:"relative", display:"grid", gridTemplateColumns:"1.3fr auto", gap:48, alignItems:"center" }} className="bm-grid">
            <div>
              <div className="latin" style={{ fontSize:12, letterSpacing:".32em", color: palette.gold, fontWeight:700, marginBottom:12 }}>{c.kicker}</div>
              <h2 className="display" style={{ fontSize:"clamp(34px, 4.5vw, 60px)", margin:"0 0 18px", lineHeight:1.05, color: palette.bg }}>
                {c.title}<br/>
                <span style={{ color: palette.gold, fontStyle:"italic", fontWeight:500 }}>{c.titleAccent}</span>
              </h2>
              <p style={{ fontSize:16.5, lineHeight:1.7, opacity:.92, margin:"0 0 26px", maxWidth:"48ch" }}>
                {c.text}
              </p>
              <div style={{ display:"flex", gap:24, marginBottom:30, flexWrap:"wrap" }}>
                {(c.cards || []).map((card,i)=>(
                  <div key={i} style={{ minWidth:140, paddingInlineStart:14, borderInlineStart:`1px solid ${palette.gold}77` }}>
                    <div style={{ fontSize:11, opacity:.65, marginBottom:2 }}>{card.t}</div>
                    <div style={{ fontSize:13.5, fontWeight:500, lineHeight:1.4, marginBottom:6 }}>{card.d}</div>
                    <div className="display" style={{ fontSize:20, color: palette.gold, fontWeight:700 }}>{card.p}</div>
                  </div>
                ))}
              </div>
              <div style={{ display:"flex", gap:12, flexWrap:"wrap" }}>
                <a href={c.ctaHref || "/bat-mitzvah"} style={{ background: palette.gold, color: palette.accent2, border:0, padding:"15px 28px", borderRadius:999, fontSize:15, fontWeight:700 }}>{c.ctaLabel}</a>
                <a href={whatsappLink(c.ghostWaMessage)} style={{ background:"transparent", color: palette.bg, border:`1.5px solid ${palette.bg}`, padding:"14px 26px", borderRadius:999, fontSize:15, fontWeight:600 }}>{c.ghostLabel}</a>
              </div>
            </div>
            <div style={{ position:"relative" }}>
              <GiftBoxIllustration palette={palette}/>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .bm-wrap{ padding: 36px 28px !important; }
          .bm-grid{ grid-template-columns: 1fr !important; }
          .bm-grid > div:last-child{ display:none !important; }
        }
      `}</style>
    </section>
  );
}

function GiftBoxIllustration({ palette }){
  return (
    <svg viewBox="0 0 280 280" width="280" height="280" style={{ filter:"drop-shadow(0 30px 50px rgba(0,0,0,.3))" }} aria-hidden="true">
      {/* box body */}
      <rect x="40" y="100" width="200" height="160" rx="4" fill={palette.bg}/>
      <rect x="40" y="100" width="200" height="160" rx="4" fill={palette.rose} opacity=".35"/>
      {/* lid */}
      <rect x="30" y="80" width="220" height="40" rx="4" fill={palette.gold}/>
      {/* vertical ribbon */}
      <rect x="125" y="80" width="30" height="180" fill={palette.accent}/>
      {/* horizontal ribbon */}
      <rect x="30" y="92" width="220" height="18" fill={palette.accent}/>
      {/* bow */}
      <g transform="translate(140 80)">
        <ellipse cx="-22" cy="0" rx="22" ry="14" fill={palette.accent} transform="rotate(-18)"/>
        <ellipse cx="22" cy="0" rx="22" ry="14" fill={palette.accent} transform="rotate(18)"/>
        <circle r="8" fill={palette.gold}/>
        <ellipse cx="-22" cy="0" rx="14" ry="6" fill={palette.accent2} opacity=".25" transform="rotate(-18)"/>
        <ellipse cx="22" cy="0" rx="14" ry="6" fill={palette.accent2} opacity=".25" transform="rotate(18)"/>
      </g>
      {/* book peeking out */}
      <g transform="translate(60 130) rotate(-6)">
        <rect width="60" height="90" rx="3" fill={palette.accent2}/>
        <text x="30" y="40" textAnchor="middle" fill={palette.bg} fontFamily="Frank Ruhl Libre, serif" fontSize="9" fontWeight="700">מנהיגות</text>
        <text x="30" y="54" textAnchor="middle" fill={palette.bg} fontFamily="Frank Ruhl Libre, serif" fontSize="9" fontWeight="700">מלידה</text>
        <circle cx="30" cy="72" r="6" stroke={palette.gold} strokeWidth="1" fill="none"/>
      </g>
      {/* cards */}
      <g transform="translate(180 140) rotate(8)">
        <rect width="46" height="64" rx="3" fill={palette.bg}/>
        <rect x="6" y="8" width="34" height="3" fill={palette.accent}/>
        <rect x="6" y="16" width="28" height="2" fill={palette.ink} opacity=".4"/>
        <rect x="6" y="22" width="32" height="2" fill={palette.ink} opacity=".4"/>
        <circle cx="23" cy="46" r="8" fill={palette.rose}/>
      </g>
    </svg>
  );
}

/* ─────────── 06 — Two Creating Meaning (sister initiative) ─────────── */
function TwoCreatingMeaning({ palette }){
  const c = HOME.workshops || {};
  const img1 = productImageSrc(c.image1);
  const img2 = productImageSrc(c.image2);
  return (
    <section id="workshops" data-screen-label="13 Workshops" className="pad-y" style={{ background: palette.surface }}>
      <div className="container">
        <div className="tcm-grid" style={{ display:"grid", gridTemplateColumns:"1fr 1.2fr", gap:56, alignItems:"center" }}>
          <div style={{ position:"relative" }}>
            <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:14 }}>
              {img1 && <img src={img1} alt={c.title || ""} style={{ width:"100%", aspectRatio:"4/5", objectFit:"cover", objectPosition:"center top", borderRadius:4, display:"block" }}/>}
              {img2 && <img src={img2} alt={c.title || ""} style={{ width:"100%", aspectRatio:"4/5", objectFit:"cover", objectPosition:"center top", borderRadius:4, display:"block", marginTop:36 }}/>}
            </div>
            <div style={{ position:"absolute", insetInlineEnd:-16, bottom:-16, background: palette.bg, padding:"14px 18px", borderRadius:6, border:`1px solid ${palette.line}`, boxShadow:"0 20px 40px -20px rgba(0,0,0,.18)" }}>
              <div className="latin" style={{ fontSize:10, letterSpacing:".22em", color: palette.accent, fontWeight:700 }}>{c.badgeKicker}</div>
              <div className="display" style={{ fontSize:18, fontWeight:700, marginTop:4 }}>{c.badgeTitle}</div>
            </div>
          </div>
          <div>
            <Eyebrow palette={palette}>{c.eyebrow}</Eyebrow>
            <h2 className="display" style={{ fontSize:"clamp(30px, 4vw, 50px)", margin:"14px 0 18px", lineHeight:1.1 }}>
              {c.title} <span style={{ color: palette.accent, fontStyle:"italic", fontWeight:500 }}>{c.titleAccent}</span>
            </h2>
            <p style={{ fontSize:16, lineHeight:1.7, color: palette.ink2, marginTop:0 }}>
              {c.text}
            </p>
            <div style={{ display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:18, margin:"28px 0" }}>
              {(c.items || []).map((it,i)=>(
                <div key={i} style={{ borderTop:`1px solid ${palette.line}`, paddingTop:14 }}>
                  <div className="display" style={{ fontSize:16, fontWeight:600, marginBottom:6 }}>{it.t}</div>
                  <div style={{ fontSize:13, color: palette.ink2, lineHeight:1.55 }}>{it.d}</div>
                </div>
              ))}
            </div>
            <div style={{ display:"flex", gap:12, flexWrap:"wrap" }}>
              {c.ctaLabel && <PrimaryBtn palette={palette} href={c.ctaHref || "/workshops"}>{c.ctaLabel}</PrimaryBtn>}
              {c.ghostLabel && <GhostBtn palette={palette} href={c.ghostHref || "/contact"}>{c.ghostLabel}</GhostBtn>}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          .tcm-grid{ grid-template-columns: 1fr !important; gap: 56px !important; }
        }
      `}</style>
    </section>
  );
}

/* ─────────── 07 — Practical trust signals ─────────── */
function PressBar({ palette }){
  const items = C("home.press.items", []);
  if (!items.length) return null;
  return (
    <section data-screen-label="14 Trust" style={{ background: palette.bg, borderTop:`1px solid ${palette.line}`, borderBottom:`1px solid ${palette.line}` }}>
      <div className="container" style={{ padding:"36px 24px" }}>
        <div className="press-grid" style={{ display:"grid", gridTemplateColumns:`repeat(${items.length}, 1fr)`, gap:0 }}>
          {items.map((p,i)=>(
            <div key={i} style={{
              padding:"12px 16px",
              borderInlineEnd: i<items.length-1 ? `1px solid ${palette.line}` : "none",
              display:"flex", flexDirection:"column", alignItems:"flex-start", gap:4,
            }}>
              <div className="display" style={{ fontSize:"clamp(26px, 3vw, 38px)", color: palette.accent, fontWeight:700, lineHeight:1 }}>{p.n}</div>
              <div style={{ fontSize:13, color: palette.ink2, fontWeight:500 }}>{p.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 760px){
          .press-grid{ grid-template-columns: 1fr 1fr !important; gap:0 !important; }
          .press-grid > div{ border-inline-end:none !important; border-bottom: 1px solid ${palette.line}; padding: 16px 18px !important; }
          .press-grid > div:nth-child(2n-1){ border-inline-end: 1px solid ${palette.line} !important; }
          .press-grid > div:nth-last-child(-n+2){ border-bottom: none !important; }
        }
      `}</style>
    </section>
  );
}

/* publish */
Object.assign(window, {
  Manifesto, ChapterTeaser, BookInside, MeetAuthors, AuthorLetter, BatMitzvah, TwoCreatingMeaning, PressBar,
});
