/* Chef Ronen Philosof — marketing site sections. */
const DS = window.ChefRonenPhilosofDesignSystem_fabd18;
const {
  SectionHeading, CategoryTile, Medallion, Divider, WhatsAppFab,
  A11yToolbar, SkipLink, CartProvider,
  SideCart, WhatsAppOrderButton, WA_DISPLAY, WA_TEL,
} = DS;
/* Lowercase helpers are not exposed on the namespace — read them off CartProvider. */
const { useCart, cartSummary } = CartProvider;

const A = 'assets/';
const MED = A + 'icons/medallions/';

/**
 * Resolve the ordering page relative to whichever tree this page lives in.
 * `ui_kits/marketing/` → `../ordering/`, `templates/marketing-site/` →
 * `../ordering-flow/`. Hardcoding one of them 404s in the other tree.
 */
function orderingUrl() { return 'ordering.html'; }

const Ico = (p, size = 20) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
    strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">{p}</svg>
);
const Icons = {
  phone: (s) => Ico(<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92Z"/>, s),
  mail: (s) => Ico(<><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></>, s),
  pin: (s) => Ico(<><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>, s),
  clock: (s) => Ico(<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>, s),
  bag: (s) => Ico(<><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></>, s),
  chevron: (s) => Ico(<path d="m6 9 6 6 6-6"/>, s),
  instagram: (s) => Ico(<><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></>, s),
};

/* ---- Reveal on scroll (respects reduced motion / stop-motion) ---- */
function Reveal({ children, delay = 0, as = 'div', style = {} }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
      || document.documentElement.getAttribute('data-stop-motion') === 'on';
    if (reduced) { setSeen(true); return; }
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.unobserve(el); } });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} style={{
      opacity: seen ? 1 : 0,
      transform: seen ? 'none' : 'translateY(26px)',
      transition: `opacity var(--dur-reveal) var(--ease-emphasis) ${delay}ms, transform var(--dur-reveal) var(--ease-emphasis) ${delay}ms`,
      ...style,
    }}>{children}</Tag>
  );
}

/* ============================ NAV ============================ */
const NAV_LINKS = [
  { label: 'בית', href: '#top' },
  { label: 'הסיפור שלנו', href: '#story' },
  { label: 'תפריט', href: '#categories' },
  { label: 'הזמנות אונליין', href: 'ORDER' },
  { label: 'נקודות מכירה', href: '#sales-points' },
  { label: 'יצירת קשר', href: '#contact' },
];

function Nav({ onOrder, onOpenCart }) {
  const { lines } = useCart();
  const { count } = cartSummary(lines);
  return (
    <>
      <div style={{ background: 'var(--charcoal-900)', textAlign: 'center', padding: '7px 16px' }}>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', color: 'var(--text-on-dark-muted)' }}>
          טלפון להזמנות:{' '}
          <a href={WA_TEL} style={{ color: 'var(--brass-400)', fontWeight: 'var(--weight-bold)' }}>{WA_DISPLAY}</a>
        </span>
      </div>
      <header style={{ position: 'sticky', top: 0, zIndex: 200, background: 'var(--brass-500)',
        borderBottom: '1px solid rgba(0,0,0,0.22)' }}>
        <nav aria-label="ניווט ראשי" style={{ maxWidth: 'var(--container-max)', margin: '0 auto',
          padding: '10px var(--gutter)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
          <a href="#top" aria-label="רונן פילוסוף שף — לראש הדף" style={{ display: 'inline-flex', flex: '0 0 auto' }}>
            <img src={A + 'brand/logo-white.live.svg'} alt="רונן פילוסוף · שף"
              style={{ height: 46, filter: 'brightness(0)' }} />
          </a>
          <ul style={{ display: 'flex', alignItems: 'center', gap: 4, listStyle: 'none', margin: 0, padding: 0 }}>
            {NAV_LINKS.map((l) => (
              <li key={l.label}>
                <a href={l.href === 'ORDER' ? '#' : l.href}
                  onClick={l.href === 'ORDER' ? (e) => { e.preventDefault(); onOrder(); } : undefined}
                  style={{ display: 'inline-flex', alignItems: 'center', minHeight: 44, padding: '0 13px',
                    fontFamily: 'var(--font-body)', fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-sm)',
                    color: 'var(--black)', textDecoration: 'none', borderRadius: 'var(--radius-sm)',
                    transition: 'background var(--dur-fast) var(--ease-standard)' }}
                  onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.10)'}
                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>{l.label}</a>
              </li>
            ))}
          </ul>
          <button type="button" onClick={onOpenCart} aria-label={`פתח את ההזמנה — ${count} פריטים`}
            style={{ flex: '0 0 auto', position: 'relative', display: 'inline-flex', alignItems: 'center', gap: 8,
              minHeight: 44, padding: '9px 15px', background: 'var(--black)', color: 'var(--brass-400)',
              border: 'none', borderRadius: 'var(--radius-sm)', cursor: 'pointer',
              fontFamily: 'var(--font-body)', fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-sm)' }}>
            {Icons.bag(19)}
            {count > 0 && <span aria-hidden="true" style={{ minWidth: 22, height: 22, padding: '0 6px',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--brass-500)',
              color: 'var(--black)', borderRadius: 999, fontSize: 12, fontWeight: 900 }}>{count}</span>}
          </button>
        </nav>
      </header>
    </>
  );
}

/* ============================ HERO ============================ */
function Hero({ onOrder }) {
  const [off, setOff] = React.useState(0);
  React.useEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) return;
    const onScroll = () => setOff(Math.min(window.scrollY, 700));
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="top" aria-labelledby="hero-title"
      style={{ position: 'relative', minHeight: 'min(88vh, 760px)', display: 'flex',
        alignItems: 'center', justifyContent: 'center', overflow: 'hidden', textAlign: 'center' }}>
      <div style={{ position: 'absolute', inset: 0, zIndex: 0 }}>
        <img src={A + 'photos/hero-steak.live.svg'} alt=""
          style={{ width: '100%', height: '100%', objectFit: 'cover',
            transform: `translateY(${off * 0.16}px) scale(1.08)`, filter: 'brightness(0.5)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'var(--scrim-hero)' }} />
      </div>

      <div style={{ position: 'relative', zIndex: 1, padding: '80px var(--gutter)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
        <Reveal>
          <img src={A + 'brand/logo-white.live.svg'} alt="רונן פילוסוף · שף"
            style={{ width: 'clamp(200px, 26vw, 300px)', height: 'auto' }} />
        </Reveal>
        <Reveal delay={140}>
          <h1 id="hero-title" style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--weight-black)',
            fontSize: 'clamp(1.75rem, 4.6vw, 3.25rem)', letterSpacing: 'var(--tracking-display)',
            color: 'var(--white)', margin: 0, lineHeight: 1.15 }}>
            אוכל מעולה, בשר מצוין
          </h1>
        </Reveal>
        <Reveal delay={260}>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(1rem, 1.8vw, 1.25rem)',
            color: 'var(--text-on-dark-muted)', margin: 0, maxWidth: '46ch', lineHeight: 1.7 }}>
            מעדניית בוטיק ושף לאירועים פרטיים. נתחים נבחרים, יישון והקפדה על כל פרט — מסורת של ארבעה דורות.
          </p>
        </Reveal>
        <Reveal delay={380}>
          <button type="button" onClick={onOrder}
            style={{ minHeight: 58, padding: '18px 36px', marginTop: 8, cursor: 'pointer',
              background: 'var(--brass-500)', color: 'var(--black)', border: 'none',
              borderRadius: 'var(--radius-sm)', fontFamily: 'var(--font-body)',
              fontWeight: 'var(--weight-bold)', fontSize: 'var(--text-md)',
              letterSpacing: 'var(--tracking-wide)',
              transition: 'background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out)' }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--brass-400)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--brass-500)'; e.currentTarget.style.transform = 'none'; }}>
            לתפריט ההזמנות
          </button>
        </Reveal>
      </div>

      <a href="#categories" aria-label="גלול לקטגוריות"
        style={{ position: 'absolute', bottom: 22, left: '50%', transform: 'translateX(-50%)', zIndex: 1,
          color: 'var(--brass-300)', display: 'inline-flex', padding: 10 }}>
        <span style={{ animation: 'philBounce 2.4s var(--ease-in-out) infinite', display: 'inline-flex' }}>{Icons.chevron(26)}</span>
      </a>
    </section>
  );
}

/* ============================ CATEGORIES (brass) ============================ */
function Categories({ onOrder }) {
  return (
    <section id="categories" aria-labelledby="categories-title"
      style={{ position: 'relative', background: 'var(--brass-500)',
        padding: 'var(--section-y) 0', overflow: 'hidden' }}>
      {/* huge low-opacity engraved fork & knife watermark */}
      <img src={A + 'icons/medallions/equipment-knives.live.svg'} alt="" aria-hidden="true"
        style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          height: 'min(112%, 720px)', opacity: 0.07, pointerEvents: 'none', filter: 'brightness(0)' }} />

      <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: '0 var(--gutter)' }}>
        <Reveal>
          <SectionHeading surface="brass" as="h2" id="categories-title" size="xl"
            title="להזמנות" divider="rule"
            subtitle={`לאירועים פרטיים והזמנות ניתן לחייג גם למספר: ${WA_DISPLAY}`} />
        </Reveal>

        <ul className="cat-grid" style={{ listStyle: 'none', margin: '52px 0 0', padding: 0,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '34px 20px' }}>
          {window.MENU.map((c, i) => (
            <li key={c.id}>
              <Reveal delay={(i % 4) * 80}>
                <CategoryTile icon={MED + c.icon} label={c.name}
                  count={`${c.items.length} פריטים`}
                  href="#" onClick={(e) => { e.preventDefault(); onOrder(); }} />
              </Reveal>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ============================ STORY (charcoal) ============================ */
function Story() {
  const [off, setOff] = React.useState(0);
  React.useEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) return;
    const onScroll = () => {
      const el = document.getElementById('story');
      if (!el) return;
      const r = el.getBoundingClientRect();
      setOff(Math.max(-40, Math.min(40, (window.innerHeight / 2 - r.top - r.height / 2) * 0.06)));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section id="story" aria-labelledby="story-title"
      style={{ background: 'var(--charcoal-700)', padding: 'var(--section-y) 0' }}>
      <div className="story-grid" style={{ maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: '0.85fr 1fr',
        gap: 'clamp(32px, 5vw, 72px)', alignItems: 'center' }}>
        <Reveal>
          <div style={{ position: 'relative', paddingBottom: 54, paddingInlineStart: 34 }}>
            <img src={A + 'photos/ronen-plating.live.svg'} alt="רונן פילוסוף מסדר מנות במטבח"
              style={{ width: '100%', borderRadius: 'var(--radius-md)', display: 'block',
                boxShadow: 'var(--shadow-lg)' }} />
            <img src={A + 'photos/vintage-father-son.live.svg'}
              alt="תמונה עתיקה במסגרת אליפטית: אב מחזיק את בנו"
              style={{ position: 'absolute', bottom: 0, insetInlineStart: 0, width: 'clamp(120px, 15vw, 172px)',
                transform: `translateY(${off}px)`, filter: 'drop-shadow(0 14px 30px rgba(0,0,0,0.55))',
                transition: 'transform 120ms linear' }} />
          </div>
        </Reveal>

        <div>
          <Reveal>
            <SectionHeading align="start" surface="dark" as="h2" id="story-title" size="giant"
              title="הרבה יותר" titleLine2="מקבב..." divider="rule" />
          </Reveal>
          <div style={{ marginTop: 30, maxWidth: 'var(--measure)', display: 'flex', flexDirection: 'column', gap: 20 }}>
            <Reveal delay={90}>
              <p style={{ fontFamily: 'var(--font-body)', fontWeight: 'var(--weight-bold)',
                fontSize: 'var(--text-md)', lineHeight: 1.85, color: 'var(--white)', margin: 0 }}>
                הסיפור הזה מתחיל בשנת 1948, ב"מסעדת הבלקן" המשפחתית שלנו ביפו.
              </p>
            </Reveal>
            <Reveal delay={170}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
                lineHeight: 'var(--leading-loose)', color: 'var(--text-on-dark-muted)', margin: 0 }}>
                כמו אבא שלי, גם אני למעשה גדלתי בתוך המטבח הזה. כילד בן שש או שבע, הייתי מסתובב בין הסירים, מנסה לעזור, טועם, ולומד את הקצב של המקום. כולם ידעו שבזמן שאבא הכין את הבשר אסור היה להפריע לו, אבל הסקרנות שלי ניצחה. רציתי להבין מה הופך את הקבב הבולגרי שלנו למשהו שאנשים מוכנים לעמוד בשבילו בתור.
              </p>
            </Reveal>
            <Reveal delay={250}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
                lineHeight: 'var(--leading-loose)', color: 'var(--text-on-dark-muted)', margin: 0 }}>
                המתכון הזה מעולם לא נכתב על נייר. הוא עבר בעל פה, מדור לדור. למרות שכבר עבדתי לצד אבא והכנתי איתו בשר במשך שנים, את הסוד האמיתי ואת הנגיעות הקטנות של המתכון – אבא גילה לי רק כשהתבגרתי.
              </p>
            </Reveal>
            <Reveal delay={330}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
                lineHeight: 'var(--leading-loose)', color: 'var(--text-on-dark-muted)', margin: 0 }}>
                מסעדת הבלקן ביפו כבר סגרה את דלתותיה לפני מעל עשור, אבל התשוקה למטבח ולבשר רק הלכה וגדלה.
              </p>
            </Reveal>
            <Reveal delay={410}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
                lineHeight: 'var(--leading-loose)', color: 'var(--text-on-dark-muted)', margin: 0 }}>
                יצאתי למסע קולינרי משלי. עברתי בין מטבחים, חקרתי טכניקות עבודה, עומקים של טעמים, ועבודה מדויקת עם חומרי גלם ונתחי בשר שונים. הלמידה הזו בנתה את ארגז הכלים שלי כשף, אבל הלב שלי תמיד נשאר מחובר לשורשים ולבית.
              </p>
            </Reveal>
            <Reveal delay={490}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
                lineHeight: 'var(--leading-loose)', color: 'var(--text-on-dark-muted)', margin: 0 }}>
                כיום, כדור שלישי למסורת הזו וכשף פרטי, אני מחבר בין שני העולמות: הניסיון הקולינרי שצברתי לאורך השנים, יחד עם אותו קבב בולגרי אסלי מבית "מסעדת הבלקן" ונתחי בשר מעולים שאני בוחר ומכין בקפידה.
              </p>
            </Reveal>
            <Reveal delay={570}>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-base)',
                lineHeight: 'var(--leading-loose)', color: 'var(--text-on-dark-muted)', margin: 0 }}>
                בסוף, זה לא רק אוכל. זה המסע שלי, זיכרונות הילדות, והרבה מאוד הלב והנשמה של המשפחה.
              </p>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ SALES POINTS ============================ */
/* The businesses that carry Ronen's meat — brass band, circular logo marks. */
const SALES_POINTS = [
  { logo: 'yeda-habesarim.live.svg', name: 'ידע הבשרים', bg: '#B02318' },
  { logo: 'rina.live.svg', name: 'רנה ביסטרו', bg: '#FFFFFF' },
  { logo: 'marketo.live.svg', name: 'מרקטו', bg: '#2B2B2B' },
  { logo: 'yanas.live.svg', name: 'חומוס יאנס', bg: '#FFFFFF' },
];

function SalesPoints() {
  return (
    <section id="sales-points" aria-labelledby="sales-title"
      style={{ position: 'relative', background: 'var(--brass-500)',
        padding: 'var(--section-y) 0', overflow: 'hidden' }}>
      <img src={A + 'illustrations/pantry.live.svg'} alt="" aria-hidden="true"
        style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          height: 'min(120%, 640px)', opacity: 0.10, pointerEvents: 'none', filter: 'brightness(0)' }} />

      <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: '0 var(--gutter)' }}>
        <Reveal>
          <SectionHeading surface="brass" as="h2" id="sales-title" size="xl"
            title="נקודות מכירה" divider="none"
            subtitle="את הבשרים שלנו אפשר למצוא גם במקומות האלה." />
        </Reveal>

        <ul className="sales-grid" style={{ listStyle: 'none', margin: '52px 0 0', padding: 0,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '28px 20px' }}>
          {SALES_POINTS.map((p, i) => (
            <li key={p.name}>
              <Reveal delay={(i % 4) * 80}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
                  <span style={{ width: 'clamp(110px, 13vw, 150px)', aspectRatio: 1, borderRadius: '50%',
                    background: p.bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    overflow: 'hidden', boxShadow: '0 10px 26px rgba(0,0,0,0.18)' }}>
                    <img src={A + 'logos/' + p.logo} alt={p.name}
                      style={{ width: '82%', height: '82%', objectFit: 'contain' }} />
                  </span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                    <span aria-hidden="true" style={{ color: 'var(--white)', display: 'inline-flex' }}>{Icons.pin(17)}</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 'var(--weight-bold)',
                      fontSize: 'var(--text-base)', color: 'var(--white)',
                      letterSpacing: 'var(--tracking-display)' }}>”{p.name}”</span>
                  </span>
                </div>
              </Reveal>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* ============================ INSTAGRAM ============================ */
/* The four most recent posts from the owner's public account (@chefphilosof),
   saved into assets/photos/instagram/. Add more by dropping files there and
   listing them here. */
const INSTAGRAM = [
  { src: 'ig-1.live.svg', alt: 'נתח בשר צלוי פרוס לרודות על מגש' },
  { src: 'ig-2.live.svg', alt: 'שולחן ערוך במגוון סלטים, קרפצ׳יו וקבב' },
  { src: 'ig-3.live.svg', alt: 'נתחי טי-בון טריים על לוח עץ עם סכין קצבים' },
  { src: 'ig-4.live.svg', alt: 'סלט עגבניות שרי ומוצרלה' },
];
const IG_HANDLE = 'chefphilosof';

function InstagramGallery() {
  const [lightbox, setLightbox] = React.useState(null);
  const closeRef = React.useRef(null);

  React.useEffect(() => {
    if (lightbox === null) return;
    const onKey = (e) => { if (e.key === 'Escape') setLightbox(null); };
    document.addEventListener('keydown', onKey);
    const t = setTimeout(() => closeRef.current && closeRef.current.focus(), 40);
    return () => { document.removeEventListener('keydown', onKey); clearTimeout(t); };
  }, [lightbox]);

  return (
    <section aria-labelledby="insta-title" style={{ background: 'var(--charcoal-800)', padding: 'var(--section-y) 0 0' }}>
      <div style={{ textAlign: 'center', padding: '0 var(--gutter) 34px' }}>
        <Reveal>
          <a id="insta-title" href={`https://www.instagram.com/${IG_HANDLE}/`}
            target="_blank" rel="noopener noreferrer"
            style={{ fontFamily: 'var(--font-body)', fontWeight: 'var(--weight-bold)',
              fontSize: 'var(--text-xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase',
              color: 'var(--brass-400)', display: 'inline-flex', alignItems: 'center', gap: 9,
              textDecoration: 'none', minHeight: 44 }}>
            {Icons.instagram(16)} @{IG_HANDLE}
          </a>
        </Reveal>
      </div>
      <ul className="insta-grid" style={{ listStyle: 'none', margin: 0, padding: 0,
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 2 }}>
        {INSTAGRAM.map((item, i) => (
          <li key={item.src} style={{ aspectRatio: '1', position: 'relative', overflow: 'hidden', background: 'var(--charcoal-700)' }}>
            <button type="button" onClick={() => setLightbox(i)}
              aria-label={`הגדל תמונה: ${item.alt}`}
              style={{ width: '100%', height: '100%', padding: 0, border: 'none', background: 'none', cursor: 'pointer', display: 'block' }}>
              <img src={A + 'photos/instagram/' + item.src} alt={item.alt} loading="lazy"
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                  transition: 'transform var(--dur-slow) var(--ease-out), filter var(--dur-base) var(--ease-standard)' }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.filter = 'brightness(1.08)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.filter = 'none'; }} />
            </button>
          </li>
        ))}
      </ul>

      {lightbox !== null && (
        <div role="dialog" aria-modal="true" aria-label="תמונה מוגדלת"
          onClick={() => setLightbox(null)}
          style={{ position: 'fixed', inset: 0, zIndex: 950, background: 'rgba(0,0,0,0.92)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 30,
            animation: 'philFade var(--dur-base) var(--ease-out)' }}>
          <img src={A + 'photos/instagram/' + INSTAGRAM[lightbox].src} alt={INSTAGRAM[lightbox].alt}
            style={{ maxWidth: '92%', maxHeight: '88%', objectFit: 'contain', borderRadius: 'var(--radius-md)' }} />
          <button ref={closeRef} type="button" onClick={() => setLightbox(null)} aria-label="סגור תמונה"
            style={{ position: 'absolute', top: 22, insetInlineEnd: 22, width: 48, height: 48,
              background: 'transparent', color: 'var(--white)', border: '1px solid var(--border-hairline)',
              borderRadius: 'var(--radius-sm)', cursor: 'pointer', fontSize: 22 }}>✕</button>
        </div>
      )}
    </section>
  );
}

/* ============================ CONTACT ============================ */
function Contact() {
  const rows = [
    { icon: Icons.phone, label: 'טלפון וואטסאפ', value: WA_DISPLAY, href: WA_TEL },
    { icon: Icons.mail, label: 'אימייל', value: 'chef.philosof@gmail.com', href: 'mailto:chef.philosof@gmail.com' },
    { icon: Icons.pin, label: 'אזור פעילות', value: 'תל אביב–יפו והמרכז', href: null },
    { icon: Icons.clock, label: 'שעות מענה', value: "א'–ה' 09:00–20:00 · ו' 08:00–15:00", href: null },
  ];
  return (
    <section id="contact" aria-labelledby="contact-title"
      style={{ background: 'var(--slate-700)', padding: 'var(--section-y) 0' }}>
      <div className="contact-grid" style={{ maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: '0 var(--gutter)', display: 'grid', gridTemplateColumns: '1fr 1fr',
        gap: 'clamp(32px, 5vw, 64px)', alignItems: 'center' }}>
        <Reveal>
          <SectionHeading align="start" as="h2" id="contact-title" size="xl" title="יצירת קשר"
            subtitle="להזמנות, שאלות על נתחים או אירוע פרטי — הדרך הכי מהירה היא וואטסאפ." divider="rule" />
          <ul style={{ listStyle: 'none', margin: '30px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {rows.map((r) => {
              const inner = (
                <>
                  <span aria-hidden="true" style={{ flex: '0 0 auto', width: 46, height: 46, borderRadius: '50%',
                    border: '1px solid var(--border-brass)', display: 'inline-flex', alignItems: 'center',
                    justifyContent: 'center', color: 'var(--brass-400)' }}>{r.icon()}</span>
                  <span style={{ display: 'flex', flexDirection: 'column' }}>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-xs)',
                      letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase',
                      color: 'var(--text-on-dark-muted)' }}>{r.label}</span>
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)',
                      color: 'var(--white)', marginTop: 3 }}>{r.value}</span>
                  </span>
                </>
              );
              return (
                <li key={r.label}>
                  {r.href ? (
                    <a href={r.href} style={{ display: 'flex', alignItems: 'center', gap: 16, minHeight: 44,
                      padding: '13px 12px', borderRadius: 'var(--radius-md)', textDecoration: 'none',
                      transition: 'background var(--dur-fast) var(--ease-standard)' }}
                      onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
                      onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>{inner}</a>
                  ) : (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '13px 12px' }}>{inner}</div>
                  )}
                </li>
              );
            })}
          </ul>
        </Reveal>
        <Reveal delay={140}>
          <div style={{ position: 'relative', borderRadius: 'var(--radius-md)', overflow: 'hidden',
            aspectRatio: '4 / 3' }}>
            <img src={A + 'photos/contact-spread.live.svg'} alt="שולחן ערוך לאירוע פרטי: סלטים, קרפציו, קבב ומעדנים"
              style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'var(--scrim-bottom)' }} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================ FOOTER ============================ */
function Footer() {
  return (
    <footer style={{ background: 'var(--charcoal-900)', padding: '46px var(--gutter) 32px', textAlign: 'center' }}>
      <img src={A + 'brand/logo-white.live.svg'} alt="רונן פילוסוף · שף" style={{ height: 52, opacity: 0.92 }} />
      <div style={{ margin: '22px auto', maxWidth: 240 }}><Divider variant="diamond" /></div>
      <ul style={{ listStyle: 'none', margin: '0 0 16px', padding: 0, display: 'flex',
        flexWrap: 'wrap', gap: '4px 22px', justifyContent: 'center' }}>
        <li><a href={WA_TEL} style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', color: 'var(--brass-400)' }}>{WA_DISPLAY}</a></li>
        <li><a href="mailto:chef.philosof@gmail.com" style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', color: 'var(--brass-400)' }}>chef.philosof@gmail.com</a></li>
        <li><a href="accessibility.html" style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)', color: 'var(--brass-400)' }}>הצהרת נגישות</a></li>
      </ul>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-xs)',
        color: 'var(--text-on-dark-dim)', margin: 0 }}>
        © 2026 רונן פילוסוף · שף — כל הזכויות שמורות
      </p>
    </footer>
  );
}

/* ============================ PAGE ============================ */
function SiteBody() {
  const { lines, setQty, clear } = useCart();
  const [cartOpen, setCartOpen] = React.useState(false);
  const goOrder = () => { window.location.href = orderingUrl(); };
  return (
    <>
      <SkipLink />
      <Nav onOrder={goOrder} onOpenCart={() => setCartOpen(true)} />
      <main id="main">
        <Hero onOrder={goOrder} />
        <Categories onOrder={goOrder} />
        <Story />
        <SalesPoints />
        <InstagramGallery />
        <Contact />
      </main>
      <Footer />
      <SideCart open={cartOpen} onClose={() => setCartOpen(false)}
        lines={lines} setQty={setQty} clear={clear} assetBase="" />
      <WhatsAppFab />
      <A11yToolbar statementHref="accessibility.html" />
    </>
  );
}

function MarketingRoot() {
  return <CartProvider><SiteBody /></CartProvider>;
}

Object.assign(window, {
  MarketingRoot, SiteBody, Nav, Hero, Categories, Story, SalesPoints, InstagramGallery, Contact, Footer, Reveal, MktIcons: Icons,
});
