// Café Moses — website components

const { useState } = React;

// ---------------- Icon (Lucide subset, 1.6px stroke) ----------------
function Icon({ name, size = 18, style }) {
  const paths = {
    coffee: <><path d="M17 8h1a4 4 0 0 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><path d="M6 2v2M10 2v2M14 2v2"/></>,
    leaf: <><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/></>,
    cart: <><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></>,
    pin: <><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    search: <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    phone: <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.37 1.9.71 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.58 2.81.71A2 2 0 0 1 22 16.92z"/>,
    arrow: <><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    minus: <line x1="5" y1="12" x2="19" y2="12"/>,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name]}
    </svg>
  );
}

// ---------------- Nav ----------------
function Nav({ current, onNav, cartCount = 0 }) {
  const [open, setOpen] = useState(false);
  const items = [
    { key: 'home',  label: 'בית' },
    { key: 'menu',  label: 'התפריט' },
    { key: 'story', label: 'הסיפור שלנו' },
    { key: 'beans', label: 'פולים' },
    { key: 'visit', label: 'הסניפים' },
  ];
  const go = (key) => { setOpen(false); onNav(key); };
  return (
    <nav className="nav">
      <div className="nav-logo" onClick={() => go('home')} style={{ cursor: 'pointer' }}>
        <img src="./assets/logo-stamp.png" alt="קפה מוזס" />
        <div>
          <div className="name">קפה מוזס</div>
          <div className="sub">— Est · Roastery —</div>
        </div>
      </div>

      <div className="nav-links">
        {items.map(it => (
          <a key={it.key} className={current === it.key ? 'active' : ''} onClick={() => go(it.key)}>
            {it.label}
          </a>
        ))}
      </div>

      <div className="nav-cta">
        <button className="btn btn-ghost btn-sm" onClick={() => go('cart')}>
          <Icon name="cart" size={16} />
          <span style={{ marginRight: 4 }}>סל ({cartCount})</span>
        </button>
        <button className="btn btn-primary btn-sm nav-order-btn" onClick={() => go('cart')}>הזמנה לאיסוף</button>
      </div>

      <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="תפריט">
        <span /><span /><span />
      </button>

      {open && (
        <div className="nav-mobile-menu">
          {items.map(it => (
            <a key={it.key} className={current === it.key ? 'active' : ''} onClick={() => go(it.key)}>
              {it.label}
            </a>
          ))}
          <button className="btn btn-primary" style={{ marginTop: 8, width: '100%' }} onClick={() => go('cart')}>
            הזמנה לאיסוף
          </button>
        </div>
      )}
    </nav>
  );
}

// ---------------- Hero ----------------
function Hero({ onNav }) {
  return (
    <section className="hero page">
      <img className="hero-watermark" src="./assets/logo-stamp.png" alt="" aria-hidden="true" />
      <div className="hero-content">
        <span className="stamp">— מ-1947 · ירושלים —</span>
        <h1>
          <span className="hero-serif-title">קפה על רמה</span><br />
          מאת מקצוענים.
        </h1>
        <p className="sub">בית קפה וקלייה ירושלמי. פולי ערביקה אתיופים, נטחנים טריים מדי בוקר. בואו לשבת.</p>
        <div className="actions">
          <button className="btn btn-primary btn-lg" onClick={() => onNav('menu')}>לתפריט המלא</button>
          <button className="btn btn-secondary btn-lg" onClick={() => onNav('story')}>הסיפור שלנו</button>
        </div>
        <div className="hero-meta">
          <div className="item"><div className="k">79</div><div className="v">שנים</div></div>
          <div className="item"><div className="k">12</div><div className="v">פולים</div></div>
          <div className="item"><div className="k">06:30</div><div className="v">פותחים</div></div>
        </div>
      </div>

      <div className="hero-art">
        <model-viewer
          class="hero-model"
          src="./assets/cappuccino.glb"
          auto-rotate
          auto-rotate-delay="0"
          rotation-per-second="30deg"
          camera-controls
          disable-zoom
          min-camera-orbit="auto 20deg auto"
          max-camera-orbit="auto 90deg auto"
          shadow-intensity="1.2"
          exposure="1.1"
          camera-orbit="15deg 75deg 2.5m"
        />
        <div className="hero-capo-float">
          <img src="./assets/slider-8.jpg" alt="קפוצ׳ינו" />
        </div>
      </div>
    </section>
  );
}

// ---------------- Menu data ----------------
const MENU_ITEMS = [
  { cat: 'espresso', stamp: 'אספרסו',      name: 'אספרסו בית',         desc: 'בלנד הבית שלנו — תערובת ברזיל ואתיופיה, גוף מלא וקרמה אגוזית.',  price: '₪12', badge: 'קלאסי',     img: 'https://images.unsplash.com/photo-1510591509098-f4fdc6d0ff04?w=160&q=80' },
  { cat: 'espresso', stamp: 'אספרסו',      name: 'הפוך גדול',           desc: 'דאבל אספרסו, חלב מוקצף לאט בכוס חרס. עם או בלי סוכר.',          price: '₪18', badge: 'הכי נמכר', img: './assets/slider-9.png' },
  { cat: 'espresso', stamp: 'אספרסו',      name: 'מקיאטו',              desc: 'אספרסו בודד עם נגיעת חלב מוקצף, הגשה במזכוכית.',                 price: '₪14',                    img: 'https://images.unsplash.com/photo-1572442388796-11668a67e53d?w=160&q=80' },
  { cat: 'pourover', stamp: 'V60 · פילטר', name: 'יירגצ׳ף אתיופי',     desc: 'פרחוני, נגיעות אפרסק, סיומת מתוקה ארוכה. 250 מ״ל.',            price: '₪22', badge: 'אורגינוס', img: 'https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=160&q=80' },
  { cat: 'pourover', stamp: 'V60 · פילטר', name: 'גואטמלה אנטיגואה',   desc: 'גוף עשיר, קקאו וקרמל, מינרליות עדינה. 250 מ״ל.',               price: '₪22',                    img: 'https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=160&q=80' },
  { cat: 'pourover', stamp: 'קולד ברו',    name: 'קולד ברו הבית',       desc: 'מחולחל 16 שעות בקור. עמוק, חלק, ללא חמיצות.',                   price: '₪19', badge: 'קר',        img: 'https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=160&q=80' },
  { cat: 'pastry',   stamp: 'מהמאפייה',    name: 'בורקס גבינה בולגרית', desc: 'בצק עלים פריך, גבינה מלוחה, שומשום שחור.',                      price: '₪16',                    img: './assets/borekas.webp' },
  { cat: 'pastry',   stamp: 'מהמאפייה',    name: 'קרואסון שקדים',       desc: 'אפוי הבוקר, מילוי שקדים, אבקת סוכר.',                           price: '₪18', badge: 'חם',        img: './assets/slider-11.png' },
  { cat: 'pastry',   stamp: 'מהמאפייה',    name: 'באבקה שוקולד',        desc: 'שוקולד בלגי כפול, בצק חמאה, מוגש פרוס.',                        price: '₪22',                    img: 'https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=160&q=80' },
];

// ---------------- MenuCard ----------------
function MenuCard({ item, onAdd }) {
  const [added, setAdded] = useState(false);
  const handleAdd = () => {
    onAdd();
    setAdded(true);
    setTimeout(() => setAdded(false), 1200);
  };
  return (
    <div className={`menu-card${added ? ' menu-card--added' : ''}`} onClick={handleAdd}>
      {added && <div className="menu-card-toast">✓ נוסף לסל</div>}
      <div className="menu-card-top">
        <span className="stamp">— {item.stamp} —</span>
        {item.img && (
          <img className="menu-card-thumb" src={item.img} alt={item.name} loading="lazy" />
        )}
      </div>
      <div className="name">{item.name}</div>
      <div className="desc">{item.desc}</div>
      <div className="row">
        <span className="price">{item.price}</span>
        {item.badge && <span className="badge">{item.badge}</span>}
      </div>
    </div>
  );
}

// ---------------- MenuPage ----------------
function MenuPage({ onAdd }) {
  const [tab, setTab] = useState('all');
  const tabs = [
    { k: 'all',      label: 'הכל' },
    { k: 'espresso', label: 'אספרסו' },
    { k: 'pourover', label: 'פילטר וקר' },
    { k: 'pastry',   label: 'מהמאפייה' },
  ];
  const items = tab === 'all' ? MENU_ITEMS : MENU_ITEMS.filter(i => i.cat === tab);
  return (
    <section className="section page">
      <div className="section-head">
        <div>
          <span className="stamp">— התפריט · עונתי —</span>
          <h2>מה מוזגים היום</h2>
        </div>
        <div className="actions">
          <button className="btn btn-ghost btn-sm">
            <Icon name="search" size={14} />
            <span style={{ marginRight: 4 }}>חיפוש</span>
          </button>
        </div>
      </div>
      <div className="menu-tabs">
        {tabs.map(t => (
          <button key={t.k} className={'chip ' + (tab === t.k ? 'active' : '')} onClick={() => setTab(t.k)}>
            <span className="dot" />
            {t.label}
          </button>
        ))}
      </div>
      <div className="menu-grid">
        {items.map((it, i) => (
          <MenuCard key={i} item={it} onAdd={() => onAdd(it)} />
        ))}
      </div>
    </section>
  );
}

// ---------------- ImageSlider ----------------
function ImageSlider() {
  const images = [
    // Local photos from Downloads
    { src: './assets/slider-latte.png',  alt: 'לאטה ארט' },
    { src: './assets/slider-8.jpg',      alt: 'קפוצ׳ינו עם קינמון' },
    { src: './assets/slider-10.png',     alt: 'בית קפה ירושלמי' },
    { src: './assets/slider-11.png',     alt: 'קרואסון שוקולד' },
    { src: './assets/slider-7.jpg',      alt: 'לימונדה עם נענע' },
    { src: './assets/slider-9.png',      alt: 'לאטה ארט' },
    // Curated Unsplash — coffee & café atmosphere
    { src: 'https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=600&q=80', alt: 'פולי קפה' },
    { src: 'https://images.unsplash.com/photo-1453614512568-c4024d13c247?w=600&q=80', alt: 'קפה וספר' },
    { src: 'https://images.unsplash.com/photo-1511920170033-f8396924c348?w=600&q=80', alt: 'פנים בית קפה' },
    { src: 'https://images.unsplash.com/photo-1504630083234-14187a9df0f5?w=600&q=80', alt: 'מאפה ובוקר' },
    { src: 'https://images.unsplash.com/photo-1507914372368-b2b085b925a1?w=600&q=80', alt: 'הכנת קפה' },
  ];
  // Duplicate for seamless loop
  const all = [...images, ...images];
  return (
    <section className="slider-section">
      <div className="slider-head">
        <h2>הגלריה שלנו</h2>
      </div>
      <div className="slider-track-wrap">
        <div className="slider-track">
          {all.map((img, i) => (
            <div className="slider-item" key={i}>
              <img src={img.src} alt={img.alt} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- StoryStrip ----------------
function StoryStrip({ onNav }) {
  return (
    <section className="story">
      <div className="inner">
        <div className="seal">
          <img src="./assets/logo-stamp.png" alt="" />
        </div>
        <div>
          <span className="stamp">— הסיפור שלנו —</span>
          <h2>שלושה דורות של קלייה.</h2>
          <p>סבא מוזס פתח את החנות הראשונה ברחוב יפו ב-1947, עם מקלה אחת ושק פולים מאדיס אבבה. שבעים ותשע שנים אחר כך — אותו מקום, אותם פולים, אותו ריח של בוקר.</p>
          <p>אנחנו קולים כל יום, בעיר. לא קונים תערובות מוכנות. לא ממהרים.</p>
          <button className="btn btn-accent" onClick={() => onNav('story')}>קראו את הסיפור</button>
        </div>
      </div>
    </section>
  );
}

// ---------------- StoryPage ----------------
function StoryPage() {
  return (
    <section className="story-page page">
      <span className="stamp accent">— פרק 01 · המקלה הראשונה —</span>
      <div className="lead">סבא מוזס הגיע<br />עם שק אחד.</div>
      <p>ב-1947 פתח אבי-סבא את החנות הקטנה ברחוב יפו, ירושלים. הוא הביא איתו מקלה אחת מנחושת, שק של 60 קילו פולים אתיופים, ומתכון לקלייה שלמד באדיס אבבה אצל סוחר ארמני.</p>
      <p>המקום היה קטן. המקלה רעדה כל פעם שעבר רכב ברחוב. אבל הפולים — הפולים יצאו טוב.</p>
      <blockquote className="pull">
        "לא ממהרים. הקפה לא ממהר, אנחנו לא ממהרים."<br />
        — משה (מוזס) רוזנברג, 1962
      </blockquote>
      <p>שלושה דורות אחר כך, אנחנו עדיין באותו רחוב. המקלה חדשה (מהשמינית, בעצם), אבל המתכון — אותו מתכון. שעה ועשרים דקות. רק פולי ערביקה. בלי תערובות, בלי קיצורי דרך.</p>
      <p>בואו לשבת. תזמינו הפוך גדול. תקראו את העיתון. אנחנו פתוחים מ-6:30.</p>
    </section>
  );
}

// ---------------- CartPage ----------------
const FREE_SHIPPING = 80;
function CartPage({ cart, onQty, onNav }) {
  const subtotal = cart.reduce((s, i) => s + parseFloat(i.price.replace('₪', '')) * i.qty, 0);
  const toFree = Math.max(0, FREE_SHIPPING - subtotal);
  const progress = Math.min(100, (subtotal / FREE_SHIPPING) * 100);

  return (
    <section className="cart-page page">
      <div>
        <span className="stamp">— הזמנה לאיסוף —</span>
        <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 40, color: 'var(--brown-900)', margin: '8px 0 16px', fontWeight: 900 }}>הסל שלך</h2>

        {/* Free shipping bar */}
        <div className="free-ship-bar">
          <div className="free-ship-track">
            <div className="free-ship-fill" style={{ width: `${progress}%` }} />
          </div>
          {toFree > 0
            ? <p className="free-ship-msg">עוד <b>₪{toFree.toFixed(0)}</b> למשלוח חינם</p>
            : <p className="free-ship-msg free-ship-done">🎉 זכית במשלוח חינם!</p>
          }
        </div>

        {cart.length === 0 ? (
          <div style={{ background: 'var(--cream-50)', borderRadius: 20, padding: 40, textAlign: 'center', border: '1px solid rgba(60,36,23,0.06)', marginTop: 24 }}>
            <Icon name="coffee" size={36} style={{ margin: '0 auto', color: 'var(--brown-400)' }} />
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: 18, color: 'var(--brown-700)', margin: '12px 0 16px' }}>הסל שלך ריק. בואו נמלא אותו.</p>
            <button className="btn btn-primary" onClick={() => onNav('menu')}>לתפריט</button>
          </div>
        ) : (
          <div className="cart-list">
            {cart.map((it, i) => (
              <div className="cart-item" key={i}>
                <div className="thumb"><Icon name="coffee" size={26} /></div>
                <div className="info">
                  <div className="name">{it.name}</div>
                  <div className="opt">₪{(parseFloat(it.price.replace('₪','')) * it.qty).toFixed(0)} סה״כ</div>
                </div>
                <div className="qty">
                  <button onClick={(e) => { e.stopPropagation(); onQty(i, -1); }} title={it.qty === 1 ? 'הסר' : 'פחות'}>
                    <Icon name="minus" size={12} />
                  </button>
                  <span>{it.qty}</span>
                  <button onClick={(e) => { e.stopPropagation(); onQty(i, 1); }}>
                    <Icon name="plus" size={12} />
                  </button>
                </div>
                <div className="price">{it.price}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      <aside className="summary">
        <h3>לסיכום</h3>
        <div className="summary-row"><span>סכום ביניים</span><span>₪{subtotal.toFixed(0)}</span></div>
        <div className="summary-row"><span>משלוח</span><span>{toFree === 0 ? 'חינם 🎉' : `₪15`}</span></div>
        <div className="pickup">
          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          <div>מוכן לאיסוף בעוד <b style={{ color: 'var(--brown-900)' }}>12 דקות</b> · רחוב יפו 41</div>
        </div>
        <div className="summary-row total">
          <span>לתשלום</span>
          <span>₪{(subtotal + (toFree > 0 ? 15 : 0)).toFixed(0)}</span>
        </div>
        <button className="btn btn-accent" disabled={cart.length === 0}>לתשלום ולאיסוף ←</button>
        {cart.length > 0 && (
          <button className="btn btn-ghost" style={{ marginTop: 8, width: '100%' }} onClick={() => onNav('menu')}>המשך בקניות</button>
        )}
      </aside>
    </section>
  );
}

// ---------------- BeansPage ----------------
function BeansPage() {
  const beans = [
    {
      origin: 'יירגצ׳ף, אתיופיה',
      name: 'ייר — הפרחוני',
      notes: 'אפרסק · ורדים · תה לבן',
      roast: 'קלייה בהירה',
      process: 'שטיפה',
      desc: 'הפול האיקוני של המקלה שלנו. גדל על גובה 1,900 מטר, נקטף ביד, ומעובד בשיטת שטיפה מסורתית. הסיומת ארוכה ומתוקה — כמו תה פרחוני של בוקר.',
    },
    {
      origin: 'אנטיגואה, גואטמלה',
      name: 'גוואטה — הכבד',
      notes: 'קקאו מריר · קרמל · עץ אלון',
      roast: 'קלייה בינונית-כהה',
      process: 'לשטיפה',
      desc: 'מהאדמה הוולקנית של אנטיגואה. גוף עשיר ושמנוני שעומד יפה בחלב — הבסיס לאספרסו הבית ולהפוך שלנו. קלוי עמוק יותר מהאתיופי, עם חמיצות רכה ומינרליות.',
    },
    {
      origin: 'הואילה, קולומביה',
      name: 'הואילה — האיזון',
      notes: 'שוקולד חלב · אגוז לוז · דובדבן',
      roast: 'קלייה בינונית',
      process: 'דבש',
      desc: 'פול עגול ומאוזן. עיבוד דבש — בין שטיפה לטבעי — נותן לו מתיקות נעימה בלי להכביד. מצוין כפילטר V60 לאלו שרוצים ריח קפה קלאסי עם גוף.',
    },
    {
      origin: 'בלו מאונטיין, ג׳מייקה',
      name: 'בלו — הנדיר',
      notes: 'חמאה · ונילה · פיסטוק',
      roast: 'קלייה בהירה',
      process: 'שטיפה',
      desc: 'אחד הפולים היקרים בעולם, ומסיבה טובה. גדל בגובה 2,200 מטר, מוגן מהשמש על ידי עבים. חלק ועדין מאוד — כמעט ללא מרירות. זמין בכמות מוגבלת בלבד.',
      badge: 'מוגבל',
    },
  ];

  return (
    <section className="beans-page page">
      <div className="beans-hero">
        <span className="stamp">— מ-1947 · הקלייה שלנו —</span>
        <h1>פולים שאנחנו<br />מאמינים בהם.</h1>
        <p className="sub">אנחנו לא קונים תערובות מוכנות. כל פול שמגיע אלינו — בא ממגדל שאנחנו מכירים, נקלה כאן בירושלים, ומגיע אליכם בתוך שלושה ימים מהקלייה.</p>
      </div>

      <div className="beans-process">
        <div className="process-step">
          <div className="step-num">01</div>
          <h4>בחירת המקור</h4>
          <p>אנחנו מבקרים את המטעים אחת לשנה. שותים עם המגדלים. בוחרים בעצמנו.</p>
        </div>
        <div className="process-step">
          <div className="step-num">02</div>
          <h4>קלייה בעיר</h4>
          <p>המקלה עובדת שש ימים בשבוע. קלייה בהתאמה אישית לכל פול — 18 עד 22 דקות.</p>
        </div>
        <div className="process-step">
          <div className="step-num">03</div>
          <h4>טרי תמיד</h4>
          <p>פולים נשלחים בתוך 72 שעות מהקלייה. לא מחסנים. לא מחכים.</p>
        </div>
      </div>

      <div className="beans-grid">
        {beans.map((b, i) => (
          <div className="bean-card" key={i}>
            {b.badge && <span className="bean-badge">{b.badge}</span>}
            <div className="bean-origin">{b.origin}</div>
            <h3 className="bean-name">{b.name}</h3>
            <div className="bean-notes">{b.notes}</div>
            <p className="bean-desc">{b.desc}</p>
            <div className="bean-meta">
              <span>{b.roast}</span>
              <span>·</span>
              <span>עיבוד {b.process}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------------- BranchesPage ----------------
function BranchesPage() {
  const branches = [
    {
      name: 'יפו 41 · ירושלים',
      label: 'הסניף הראשי',
      address: 'רחוב יפו 41, ירושלים',
      desc: 'המקום המקורי. פתחנו כאן ב-1947 ולא זזנו. יש כאן גם מקלה פעילה — אפשר לראות את הקלייה מהבר.',
      hours: ['א׳–ה׳ · 06:30–22:00', 'ו׳ · 06:30–14:00', 'שבת · סגור'],
      phone: '02-555-1947',
      badge: 'מ-1947',
    },
    {
      name: 'בן יהודה 12 · ירושלים',
      label: 'מרכז העיר',
      address: 'רחוב בן יהודה 12, ירושלים',
      desc: 'פתחנו כאן ב-2003. קצת יותר קטן, אותו קפה. פופולרי מאוד בקרב סטודנטים מהאוניברסיטה.',
      hours: ['א׳–ה׳ · 07:00–21:00', 'ו׳ · 07:00–14:00', 'שבת · סגור'],
      phone: '02-555-2003',
    },
    {
      name: 'אבן גבירול 88 · תל אביב',
      label: 'תל אביב',
      address: 'רחוב אבן גבירול 88, תל אביב',
      desc: 'הסניף הצפוני. פתחנו ב-2019 אחרי שנים של לחץ מלקוחות מת״א. אותם פולים, אותו מתכון — רק ים.',
      hours: ['א׳–ה׳ · 07:00–22:00', 'ו׳ · 07:00–15:00', 'שבת · 09:00–15:00'],
      phone: '03-555-2019',
      badge: 'פתוח בשבת',
    },
  ];

  return (
    <section className="branches-page page">
      <div className="branches-hero">
        <span className="stamp">— שלושה מקומות, קפה אחד —</span>
        <h1>הסניפים שלנו.</h1>
        <p className="sub">ירושלים ותל אביב. בכל מקום — אותם פולים שנקלו אצלנו בירושלים, אותו מתכון, אותה כוס חרס.</p>
      </div>

      <div className="branches-list">
        {branches.map((b, i) => (
          <div className="branch-card" key={i}>
            <div className="branch-num">0{i + 1}</div>
            <div className="branch-body">
              <div className="branch-top">
                <span className="stamp">{b.label}</span>
                {b.badge && <span className="bean-badge">{b.badge}</span>}
              </div>
              <h3>{b.name}</h3>
              <p>{b.desc}</p>
              <div className="branch-details">
                <div className="branch-hours">
                  <div className="detail-label">שעות פתיחה</div>
                  {b.hours.map((h, j) => <div key={j}>{h}</div>)}
                </div>
                <div className="branch-contact">
                  <div className="detail-label">צור קשר</div>
                  <div><Icon name="phone" size={13} style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 6 }} />{b.phone}</div>
                  <div><Icon name="pin" size={13} style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 6 }} />{b.address}</div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------------- Footer ----------------
function Footer() {
  return (
    <footer className="footer">
      <div className="inner">
        <div className="brand">
          <img src="./assets/logo-stamp.png" alt="" style={{ width: 60 }} />
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: 14, color: 'var(--brown-200)', marginTop: 16, lineHeight: 1.6 }}>
            בית קפה וקלייה ירושלמי, מ-1947. כל הפולים נקלים בעיר.
          </p>
        </div>
        <div>
          <h4>הסניפים</h4>
          <ul>
            <li><a>יפו 41 · ירושלים</a></li>
            <li><a>בן יהודה 12</a></li>
            <li><a>אבן גבירול 88 · ת״א</a></li>
          </ul>
        </div>
        <div>
          <h4>שעות פתיחה</h4>
          <ul>
            <li><a>א׳-ה׳ · 06:30–22:00</a></li>
            <li><a>ו׳ · 06:30–14:00</a></li>
            <li><a>שבת · סגור</a></li>
          </ul>
        </div>
        <div>
          <h4>הישארו בקשר</h4>
          <ul>
            <li><a><Icon name="instagram" size={14} style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 6 }} />@kafemoses</a></li>
            <li><a><Icon name="phone" size={14} style={{ display: 'inline', verticalAlign: 'middle', marginLeft: 6 }} />02-555-1947</a></li>
          </ul>
        </div>
      </div>
      <div className="bottom">
        <span>© 2026 קפה מוזס · כל הזכויות שמורות</span>
        <span>— Roasted since dawn —</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Nav, Hero, MenuCard, MenuPage, ImageSlider, StoryStrip, StoryPage, BeansPage, BranchesPage, CartPage, Footer, MENU_ITEMS });