// All pages: Home, Menu, Branches, BranchDetail, Catering, Iftar, About, Order

const { useState: useState_p, useEffect: useEffect_p, useMemo: useMemo_p } = React;

// ─────────────────────────────────────────────────────────────
// HOME
// ─────────────────────────────────────────────────────────────
function Home({ onOrder }) {
  return (
    <div className="page-fade">
      {/* Hero — full bleed */}
      <section style={{
        position: 'relative', height: '100vh', minHeight: 620, maxHeight: 920,
        marginTop: -77, // pull under transparent nav
        display: 'flex', flexDirection: 'column',
        overflow: 'hidden',
        background: '#1F1B17',
      }}>
        <img src="media/biryani-barsha.jpg"
             alt=""
             onError={(e)=>e.currentTarget.style.display='none'}
             style={{
               position: 'absolute', inset: 0,
               width: '100%', height: '100%', objectFit: 'cover',
               filter: 'brightness(0.42) saturate(1.05)',
             }} />
        {/* Vertical scrim — keeps text legible on bright photos */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(20,16,13,0.78) 0%, rgba(20,16,13,0.3) 35%, rgba(20,16,13,0.5) 72%, rgba(20,16,13,0.95) 100%)',
          pointerEvents: 'none',
        }} />
        {/* Left-side wash — anchors copy column */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(90deg, rgba(20,16,13,0.55) 0%, rgba(20,16,13,0.1) 60%, rgba(20,16,13,0) 100%)',
          pointerEvents: 'none',
        }} />

        {/* Vertical edge annotation */}
        <div style={{
          position: 'absolute', left: 14, top: 140,
          writingMode: 'vertical-rl', transform: 'rotate(180deg)',
          fontFamily: 'var(--mono)', fontSize: 10,
          letterSpacing: '0.32em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.5)',
          zIndex: 2, pointerEvents: 'none',
        }}>
          Karama · Al Barsha · JLT — three rooms, one kitchen
        </div>

        {/* TOP ROW — masthead block */}
        <div className="container" style={{position: 'relative', width: '100%', paddingTop: 100}}>
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            borderTop: '1px solid rgba(255,255,255,0.3)',
            borderBottom: '1px solid rgba(255,255,255,0.3)',
            padding: '10px 0',
            color: 'rgba(255,255,255,0.78)',
            fontFamily: 'var(--mono)', fontSize: 10,
            letterSpacing: '0.22em', textTransform: 'uppercase',
          }}>
            <div className="flex items-center" style={{gap: 18}}>
              <span>The Darbar Edition</span>
              <span style={{opacity: 0.4}}>|</span>
              <span>Vol. 42 · No. 01</span>
            </div>
            <div className="flex items-center" style={{gap: 18}}>
              <span>Ramadan 2026</span>
              <span style={{opacity: 0.4}}>|</span>
              <span>AED edition</span>
              <span style={{opacity: 0.4}}>|</span>
              <span>Dubai</span>
            </div>
          </div>
        </div>

        {/* MIDDLE — flex grow pushes title block to vertical centre */}
        <div className="container" style={{
          position: 'relative', width: '100%',
          flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center',
          paddingTop: 32, paddingBottom: 32,
          color: '#fff',
        }}>
          <div className="eyebrow" style={{color: 'rgba(255,255,255,0.85)', marginBottom: 18}}>
            <span style={{borderRight: '1px solid rgba(255,255,255,0.35)', paddingRight: 12, marginRight: 12}}>Est. Bombay 1946</span>
            <span style={{borderRight: '1px solid rgba(255,255,255,0.35)', paddingRight: 12, marginRight: 12}}>Mumbai 1973</span>
            <span>Dubai since 1984</span>
          </div>

          <h1 className="display" style={{
            fontSize: 'clamp(48px, 7.4vw, 108px)',
            lineHeight: 0.96,
            margin: 0,
            maxWidth: 960,
            color: '#fff',
            textShadow: '0 2px 40px rgba(0,0,0,0.4)',
          }}>
            Mumbai’s Best <span className="display-italic">Biryani</span>.<br/>
            Delivered hot<br/>
            across Dubai.
          </h1>

          {/* Deck / subhead */}
          <div style={{
            marginTop: 22, maxWidth: 580,
            fontFamily: 'var(--serif)', fontStyle: 'italic',
            fontSize: 19, lineHeight: 1.45,
            color: 'rgba(255,255,255,0.9)',
            borderLeft: '1px solid rgba(255,255,255,0.4)',
            paddingLeft: 18,
          }}>
            Three rooms in Dubai. One kitchen since 1984. The mutton biryani comes sealed at the pot — cut at the table, served lid-lifted.
          </div>

          <div style={{marginTop: 32, display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 16}}>
            <button onClick={onOrder} className="btn btn--primary btn--lg">
              <span style={{width: 6, height: 6, borderRadius: '50%', background: '#fff'}} />
              Order Direct
            </button>
            <a href="#/menu" onClick={(e)=>{e.preventDefault(); window.DDNav.go('menu');}} className="btn btn--ghost-light btn--lg">See the menu →</a>

            <div style={{
              marginLeft: 16, paddingLeft: 24,
              borderLeft: '1px solid rgba(255,255,255,0.3)',
              color: 'rgba(255,255,255,0.85)',
            }}>
              <div className="eyebrow" style={{color: 'rgba(255,255,255,0.55)', marginBottom: 4}}>Price from</div>
              <div className="display num" style={{fontSize: 26, color: '#fff'}}>Biryani AED 36</div>
            </div>
          </div>
        </div>

        {/* BOTTOM ROW — pull quote + meta strip */}
        <div className="container" style={{position: 'relative', width: '100%', paddingBottom: 32, paddingTop: 16}}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end',
            borderTop: '1px solid rgba(255,255,255,0.18)',
            paddingTop: 20,
          }}>
            <div style={{display: 'flex', alignItems: 'center', gap: 16, color: 'rgba(255,255,255,0.55)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', flexWrap: 'wrap'}}>
              <span>↓ Scroll for the menu</span>
              <span style={{opacity: 0.4}}>·</span>
              <span>Halal kitchen</span>
              <span style={{opacity: 0.4}}>·</span>
              <span>No alcohol, no pork</span>
              <span style={{opacity: 0.4}}>·</span>
              <span>Open till midnight</span>
            </div>
            <div style={{textAlign: 'right'}}>
              <div className="display-italic" style={{fontSize: 17, color: 'rgba(255,255,255,0.92)', lineHeight: 1.4}}>
                “The only one in Dubai that tastes like home. Forty years and still the same kitchen.”
              </div>
              <div className="eyebrow" style={{color: 'rgba(255,255,255,0.55)', marginTop: 10}}>
                — Faiza R. · Talabat · 5★
              </div>
            </div>
          </div>
        </div>

        <div className="photo-credit">media/biryani-barsha.jpg</div>
      </section>

      {/* Trust strip */}
      <TrustStrip />

      {/* Lockup statement */}
      <section className="container" style={{padding: '120px 0 80px 0', textAlign: 'center'}}>
        <Ornament label="The Lockup" />
        <p className="display" style={{
          fontSize: 'clamp(36px, 4.2vw, 56px)',
          lineHeight: 1.15,
          maxWidth: 960,
          margin: '40px auto 0',
        }}>
          Mumbai’s Best Biryani. <span className="display-italic">Since 1973.</span><br/>
          In the UAE since 1984.
        </p>
        <p style={{fontSize: 17, color: 'var(--ink-3)', maxWidth: 580, margin: '32px auto 0', lineHeight: 1.6}}>
          Three rooms in Dubai. One recipe lockup, four generations old. Forty-plus years of feeding Karama, Al Barsha, and JLT — mostly on the same plate.
        </p>
      </section>

      {/* Signatures grid */}
      <section style={{padding: '40px 0 120px 0'}}>
        <div className="container">
          <SectionHeader no="01" eyebrow="What to order" title={<>The five things <span className="display-italic">people order most.</span></>} />
        </div>
        <div className="container" style={{marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24}}>
          {[
            { n: 'Mutton Dum Biryani',   p: 'from AED 43', img: 'media/biryani-barsha.jpg',    span: 6, tall: true,  tag: '#1 weekend order' },
            { n: 'Butter Chicken',        p: 'AED 61',      img: 'media/butter-chicken-1.jpg',  span: 3, tall: true,  tag: 'Signature' },
            { n: 'Chicken Tikka',         p: 'AED 50',      img: 'media/hero-banner-1.jpg',     span: 3, tall: true,  tag: 'Best-seller' },
            { n: 'Tawa Mutton',           p: 'Ask kitchen', img: 'media/food-platter-1.jpg',    span: 6, tall: false, tag: 'House' },
            { n: 'Roomali Roti',          p: 'AED 8',       img: 'media/food-barsha-2.jpg',     span: 6, tall: false, tag: 'Talabat best-seller' },
          ].map((d, i) => (
            <a key={i} href="#/menu" onClick={(e)=>{e.preventDefault(); window.DDNav.go('menu');}}
               style={{
                 gridColumn: `span ${d.span}`,
                 height: d.tall ? 540 : 320,
                 position: 'relative', overflow: 'hidden',
                 display: 'block',
               }}
               data-photo={d.n.toLowerCase()} data-photo-dark>
              <img src={d.img} alt={d.n}
                   onError={(e)=>e.currentTarget.dataset.failed='1'}
                   style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
                transition: 'transform 400ms ease',
              }} onMouseEnter={(e)=>e.currentTarget.style.transform='scale(1.04)'} onMouseLeave={(e)=>e.currentTarget.style.transform='scale(1)'} />
              <div style={{position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(31,27,23,0.78) 0%, rgba(31,27,23,0) 50%)'}} />
              <div style={{position: 'absolute', left: 0, right: 0, bottom: 0, padding: 24, color: '#fff'}}>
                <div style={{marginBottom: 10}}><Tag light>{d.tag}</Tag></div>
                <div className="display" style={{fontSize: d.tall ? 30 : 24, color: '#fff'}}>{d.n}</div>
                <div className="num" style={{fontSize: 13, marginTop: 4, color: 'rgba(255,255,255,0.85)', letterSpacing: '0.04em'}}>{d.p}</div>
              </div>
            </a>
          ))}
        </div>

        <div className="container" style={{marginTop: 48, textAlign: 'center'}}>
          <a href="#/menu" onClick={(e)=>{e.preventDefault(); window.DDNav.go('menu');}} className="btn">See full menu →</a>
        </div>
      </section>

      {/* Branches preview */}
      <section style={{background: 'var(--cream)', padding: '120px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)'}}>
        <div className="container">
          <div className="flex items-end justify-between flex-wrap gap-6" style={{marginBottom: 56}}>
            <SectionHeader no="02" eyebrow="Three rooms in Dubai" title={<>The branches — <span className="display-italic">pick the one nearest you.</span></>} />
            <a href="#/branches" onClick={(e)=>{e.preventDefault(); window.DDNav.go('branches');}} className="btn btn--sm">All branches →</a>
          </div>

          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24}}>
            {window.DD.BRANCHES.map(b => (
              <a key={b.id} href="#" onClick={(e)=>{e.preventDefault(); window.DDNav.go('branch:'+b.id);}}
                 style={{background: 'var(--ivory)', border: '1px solid var(--rule)', padding: 0, display: 'block'}}>
                <div style={{height: 280, position: 'relative', overflow: 'hidden', borderBottom: '1px solid var(--rule)'}}>
                {b.cover ? <>
                  <img src={b.cover} alt={b.name}
                       onError={(e)=>e.currentTarget.dataset.failed='1'}
                       style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
                </> : <PhotoPlaceholder label="JLT EXTERIOR" height={280} />}
                </div>
                <div style={{padding: 28}}>
                  <div className="flex items-center justify-between" style={{marginBottom: 8}}>
                    <Tag>{b.flag}</Tag>
                    <span className="num" style={{fontSize: 13, color: 'var(--ink-3)'}}>0{window.DD.BRANCHES.indexOf(b) + 1}</span>
                  </div>
                  <div className="display" style={{fontSize: 32, marginTop: 8}}>{b.name}</div>
                  <div style={{fontSize: 13, color: 'var(--ink-3)', marginTop: 6}}>{b.landmark}</div>
                  <div style={{margin: '20px 0', height: 1, background: 'var(--rule)'}} />
                  <div className="num" style={{fontSize: 14}}>{b.phone}</div>
                  <div style={{marginTop: 6}}><OpenNow branch={b} /></div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Catering teaser */}
      <section className="container" style={{padding: '120px 0', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 96, alignItems: 'center'}}>
        <div style={{height: 540, position: 'relative', overflow: 'hidden'}} data-photo="catering · live tandoor">
          <img src="media/catering-services.jpg" alt="Catering"
               onError={(e)=>e.currentTarget.dataset.failed='1'}
               style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
          <div className="photo-credit">media/catering-services.jpg</div>
        </div>
        <div>
          <div className="eyebrow" style={{color: 'var(--ink-3)'}}>03 · Catering</div>
          <h2 className="display" style={{fontSize: 'clamp(40px, 4.5vw, 64px)', marginTop: 14, lineHeight: 1.05}}>
            Live tandoor.<br/>
            <span className="display-italic">Hand-flipped roomali.</span><br/>
            For 25 to 2,000.
          </h2>
          <p style={{fontSize: 17, color: 'var(--ink-2)', marginTop: 28, lineHeight: 1.6, maxWidth: 480}}>
            Forty years of feeding Indian weddings, corporate iftars and family majlises across the Emirates.
            Live BBQ. Tawa station. Chaat counter. Jalebi at the end.
          </p>
          <div className="flex items-center gap-3" style={{marginTop: 32}}>
            <a href="#/catering" onClick={(e)=>{e.preventDefault(); window.DDNav.go('catering');}} className="btn btn--primary">Request a quote →</a>
            <a href="tel:+971504511786" className="btn">Call +971 50 4511 786</a>
          </div>
        </div>
      </section>

      {/* Reviews */}
      <section style={{background: 'var(--ink)', color: '#fff', padding: '120px 0'}}>
        <div className="container">
          <div style={{textAlign: 'center'}}>
            <Ornament label="What People Say" dark />
            <div className="num display" style={{fontSize: 72, marginTop: 32}}>4.6<span style={{color: 'var(--accent)'}}>★</span></div>
            <div className="eyebrow" style={{color: 'rgba(255,255,255,0.6)', marginTop: 8}}>1,000+ ratings on Talabat · verified</div>
          </div>
          <div style={{marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 56}}>
            {window.DD.REVIEWS.map((r, i) => (
              <div key={i} style={{borderLeft: '1px solid rgba(255,255,255,0.18)', paddingLeft: 28}}>
                <div className="display-italic" style={{fontSize: 24, lineHeight: 1.35, color: '#fff'}}>“{r.quote}”</div>
                <div className="eyebrow" style={{marginTop: 24, color: 'rgba(255,255,255,0.6)'}}>{r.who} — {r.src}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// MENU
// ─────────────────────────────────────────────────────────────
function MenuPage() {
  const [active, setActive] = useState_p('biryani');
  const [filter, setFilter] = useState_p('all'); // all | veg | nonveg

  useEffect_p(() => {
    const onScroll = () => {
      let current = window.DD.MENU[0].id;
      for (const cat of window.DD.MENU) {
        const el = document.getElementById('cat-' + cat.id);
        if (el && el.getBoundingClientRect().top < 200) current = cat.id;
      }
      setActive(current);
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const filterDishes = (dishes) => {
    if (filter === 'veg')    return dishes.filter(d => d.veg);
    if (filter === 'nonveg') return dishes.filter(d => !d.veg);
    return dishes;
  };

  return (
    <div className="page-fade">
      {/* Masthead */}
      <section className="container" style={{padding: '64px 0 48px 0'}}>
        <div className="eyebrow" style={{color: 'var(--ink-3)'}}>The Menu</div>
        <h1 className="display" style={{fontSize: 'clamp(56px, 9vw, 132px)', lineHeight: 0.95, margin: '20px 0 0'}}>
          What’s on <span className="display-italic">the table.</span>
        </h1>
        <p style={{fontSize: 18, color: 'var(--ink-3)', marginTop: 24, maxWidth: 640}}>
          The full kitchen — biryani, tandoor, Mughlai curry, Indo-Chinese, vegetarian, breads, desserts.
          AED prices below. Daily specials marked by day.
        </p>
      </section>

      <div style={{borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', position: 'sticky', top: 76, zIndex: 20, background: 'var(--ivory)'}}>
        <div className="container" style={{padding: '14px 0', display: 'flex', alignItems: 'center', gap: 24, overflowX: 'auto'}}>
          <div className="flex items-center gap-1" style={{flex: 1, overflowX: 'auto'}}>
            {window.DD.MENU.map(cat => (
              <a key={cat.id} href={'#cat-' + cat.id}
                 onClick={(e) => { e.preventDefault(); document.getElementById('cat-' + cat.id).scrollIntoView({block: 'start'}); }}
                 style={{
                   padding: '8px 14px',
                   fontSize: 12, letterSpacing: '0.08em',
                   color: active === cat.id ? 'var(--ink)' : 'var(--ink-3)',
                   borderBottom: active === cat.id ? '1px solid var(--ink)' : '1px solid transparent',
                   whiteSpace: 'nowrap', fontWeight: 500,
                 }}>{cat.name}</a>
            ))}
          </div>
          <div className="flex items-center gap-2" style={{borderLeft: '1px solid var(--rule)', paddingLeft: 16}}>
            {[['all', 'All'], ['veg', '\u2022 Veg'], ['nonveg', 'Non-veg']].map(([id, lbl]) => (
              <button key={id} onClick={() => setFilter(id)}
                      className="eyebrow"
                      style={{
                        padding: '6px 10px',
                        border: '1px solid ' + (filter === id ? 'var(--ink)' : 'var(--rule)'),
                        background: filter === id ? 'var(--ink)' : 'transparent',
                        color: filter === id ? 'var(--ivory)' : (id === 'veg' ? 'var(--cardamom)' : 'var(--ink-2)'),
                      }}>{lbl}</button>
            ))}
          </div>
        </div>
      </div>

      <div className="container" style={{padding: '48px 0 120px 0'}}>
        {window.DD.MENU.map((cat, idx) => {
          const dishes = filterDishes(cat.dishes);
          if (!dishes.length) return null;
          return (
            <section key={cat.id} id={'cat-' + cat.id} style={{padding: '64px 0', borderTop: idx === 0 ? 'none' : '1px solid var(--rule)'}}>
              <div style={{display: 'grid', gridTemplateColumns: cat.cover ? '1fr 1.4fr' : '1fr', gap: 64, alignItems: 'start'}}>
                <div>
                  <div className="flex items-center gap-3">
                    <span style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)'}}>0{idx + 1}</span>
                    <span className="eyebrow" style={{color: 'var(--ink-3)'}}>{cat.sub}</span>
                  </div>
                  <h2 className="display" style={{fontSize: 56, margin: '12px 0 0', lineHeight: 1}}>{cat.name}</h2>
                  {cat.note && <p style={{fontSize: 15, color: 'var(--ink-3)', marginTop: 20, lineHeight: 1.55, maxWidth: 360}}>{cat.note}</p>}
                  {cat.cover && (
                    <div style={{marginTop: 32, height: 280, position: 'relative', overflow: 'hidden'}} data-photo={cat.name.toLowerCase()}>
                      <img src={cat.cover} alt={cat.name}
                           onError={(e)=>e.currentTarget.dataset.failed='1'}
                           style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
                    </div>
                  )}
                </div>
                <div>
                  {dishes.map((d, i) => <DishRow key={i} dish={d} />)}
                </div>
              </div>
            </section>
          );
        })}

        <div style={{marginTop: 80, padding: 48, background: 'var(--cream)', border: '1px solid var(--rule)', textAlign: 'center'}}>
          <div className="eyebrow" style={{color: 'var(--ink-3)'}}>Allergen, halal & spice notes</div>
          <p style={{fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, marginTop: 12, lineHeight: 1.5}}>
            No alcohol. No pork. Halal kitchen.<br/>
            Spice levels: ask your server. Most curries can be made mild on request.
          </p>
        </div>
      </div>
    </div>
  );
}

function DishRow({ dish }) {
  const tagColor = dish.tag === 'Signature' || dish.tag === 'Best-seller' || dish.tag === 'Talabat best-seller' ? 'cardamom' : 'ink';
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto',
      gap: 16, padding: '20px 0',
      borderBottom: '1px solid var(--rule-soft)',
    }}>
      <div>
        <div className="flex items-baseline gap-3 flex-wrap">
          {dish.veg && <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 14, height: 14, border: '1.5px solid var(--cardamom)',
          }}>
            <span style={{width: 6, height: 6, borderRadius: '50%', background: 'var(--cardamom)'}} />
          </span>}
          <span style={{fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500}}>{dish.n}</span>
          {dish.tag && <Tag color={tagColor}>{dish.tag}</Tag>}
        </div>
        {dish.d && <p style={{fontSize: 14, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.5, maxWidth: 480}}>{dish.d}</p>}
      </div>
      <div className="num" style={{fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 500, whiteSpace: 'nowrap', alignSelf: 'baseline'}}>
        {dish.p == null ? <span style={{fontSize: 13, color: 'var(--ink-3)', fontStyle: 'italic', fontFamily: 'var(--serif)'}}>seasonal</span> :
          dish.pHi ? <>{dish.p}<span style={{color: 'var(--ink-3)'}}>–</span>{dish.pHi}</> : dish.p}
        {dish.p != null && <span style={{fontSize: 11, color: 'var(--ink-3)', marginLeft: 6, letterSpacing: '0.1em'}}>AED</span>}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BRANCHES
// ─────────────────────────────────────────────────────────────
function BranchesPage() {
  return (
    <div className="page-fade">
      <section className="container" style={{padding: '64px 0 80px 0'}}>
        <div className="eyebrow" style={{color: 'var(--ink-3)'}}>Branches · Dubai</div>
        <h1 className="display" style={{fontSize: 'clamp(56px, 9vw, 132px)', lineHeight: 0.95, margin: '20px 0 0'}}>
          Three rooms.<br/>
          <span className="display-italic">One kitchen.</span>
        </h1>
        <p style={{fontSize: 18, color: 'var(--ink-3)', marginTop: 24, maxWidth: 580}}>
          Karama is the flagship since 1984. Al Barsha 1 came next. JLT runs as an express
          format for the towers crowd. All three deliver across their neighbourhoods.
        </p>
      </section>

      <div className="container" style={{paddingBottom: 120}}>
        {window.DD.BRANCHES.map((b, i) => (
          <article key={b.id} style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr',
            gap: 64, padding: '64px 0',
            borderTop: '1px solid var(--rule)',
            alignItems: 'center',
          }}>
            <div style={{order: i % 2 === 0 ? 1 : 2}}>
              <div style={{height: 480, position: 'relative', overflow: 'hidden'}} data-photo={`${b.name.toLowerCase()} · branch`}>
                {b.cover ? <img src={b.cover} alt={b.name}
                                onError={(e)=>e.currentTarget.dataset.failed='1'}
                                style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
                        : <PhotoPlaceholder label="JLT EXTERIOR + INTERIOR" height={480} />}
              </div>
            </div>
            <div style={{order: i % 2 === 0 ? 2 : 1}}>
              <div className="flex items-center gap-3">
                <span style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)'}}>0{i + 1}</span>
                <Tag>{b.flag}</Tag>
              </div>
              <h2 className="display" style={{fontSize: 64, margin: '12px 0 0', lineHeight: 0.95}}>{b.name}</h2>
              <div style={{fontSize: 17, color: 'var(--ink-2)', marginTop: 20, maxWidth: 460, lineHeight: 1.55}}>{b.blurb}</div>

              <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 36}}>
                <div>
                  <div className="eyebrow" style={{color: 'var(--ink-3)', marginBottom: 4}}>Address</div>
                  <div style={{fontSize: 13, lineHeight: 1.5}}>{b.address}</div>
                </div>
                <div className="flex flex-col gap-4">
                  <div>
                    <div className="eyebrow" style={{color: 'var(--ink-3)', marginBottom: 4}}>Hours</div>
                    <OpenNow branch={b} />
                  </div>
                  <div>
                    <div className="eyebrow" style={{color: 'var(--ink-3)', marginBottom: 4}}>Phone</div>
                    <a href={b.tel} className="num" style={{fontSize: 16}}>{b.phone}</a>
                  </div>
                </div>
              </div>

              <div className="flex items-center gap-2 flex-wrap" style={{marginTop: 32}}>
                <a href={'#/branch:' + b.id} onClick={(e)=>{e.preventDefault(); window.DDNav.go('branch:'+b.id);}} className="btn">Branch page →</a>
                <a href={b.talabat} target="_blank" rel="noopener" className="btn btn--primary">Order on Talabat ↗</a>
                <a href={b.tel} className="btn btn--sm">Call</a>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// BRANCH DETAIL
// ─────────────────────────────────────────────────────────────
function BranchDetail({ branchId, onOrder }) {
  const b = window.DD.BRANCHES.find(x => x.id === branchId);
  if (!b) return null;
  const [photoIdx, setPhotoIdx] = useState_p(0);

  return (
    <div className="page-fade">
      {/* Hero */}
      <section style={{position: 'relative', height: '70vh', minHeight: 560, marginTop: -77, overflow: 'hidden'}} data-photo={`${b.name.toLowerCase()} · branch hero`} data-photo-dark>
        {b.cover ? (
          <img src={b.cover} alt={b.name}
               onError={(e)=>e.currentTarget.dataset.failed='1'}
               style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
            filter: 'brightness(0.7)',
          }} />
        ) : null}
        <div style={{position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,27,23,0.4) 0%, rgba(31,27,23,0.1) 30%, rgba(31,27,23,0.8) 100%)'}} />

        <div className="container" style={{position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 64, color: '#fff'}}>
          <a href="#/branches" onClick={(e)=>{e.preventDefault(); window.DDNav.go('branches');}} className="eyebrow" style={{color: 'rgba(255,255,255,0.7)', marginBottom: 20}}>← All branches</a>
          <div className="flex items-center gap-4">
            <Tag light>{b.flag}</Tag>
            <OpenNow branch={b} dark />
          </div>
          <h1 className="display" style={{fontSize: 'clamp(64px, 10vw, 144px)', lineHeight: 0.92, margin: '16px 0 0', color: '#fff'}}>
            Delhi Darbar <span className="display-italic">{b.name}</span>
          </h1>
          <div style={{fontSize: 18, color: 'rgba(255,255,255,0.85)', marginTop: 12}}>{b.landmark}</div>
        </div>
      </section>

      {/* Quick actions */}
      <section style={{borderBottom: '1px solid var(--rule)', background: 'var(--cream)'}}>
        <div className="container" style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0}}>
          {[
            { label: 'Call branch',  big: b.phone,     href: b.tel,                    cta: 'Tap to call' },
            { label: 'WhatsApp',     big: 'Message us', href: `https://wa.me/971504511786?text=Hi%20Delhi%20Darbar%20${b.name}`, cta: 'Open WhatsApp ↗' },
            { label: 'Order on Talabat', big: '4.6★ 1,000+', href: b.talabat, cta: 'Open Talabat ↗' },
            { label: 'Get directions',  big: 'On the map', href: `https://maps.google.com/?q=${b.lat},${b.lng}`, cta: 'Open Maps ↗' },
          ].map((a, i) => (
            <a key={i} href={a.href} target={a.href.startsWith('http') ? '_blank' : undefined} rel="noopener"
               style={{
                 padding: '28px 32px',
                 borderLeft: i === 0 ? 'none' : '1px solid var(--rule)',
                 color: 'var(--ink)',
                 transition: 'background 160ms',
               }}
               onMouseEnter={(e)=>e.currentTarget.style.background='var(--ivory)'}
               onMouseLeave={(e)=>e.currentTarget.style.background='transparent'}>
              <div className="eyebrow" style={{color: 'var(--ink-3)'}}>{a.label}</div>
              <div className="display" style={{fontSize: 24, marginTop: 6}}>{a.big}</div>
              <div className="eyebrow" style={{color: 'var(--cta)', marginTop: 8}}>{a.cta} →</div>
            </a>
          ))}
        </div>
      </section>

      {/* Body */}
      <section className="container" style={{padding: '96px 0', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80}}>
        <div>
          <SectionHeader no="01" eyebrow="The Room" title={<>About <span className="display-italic">{b.name}.</span></>} />
          <p style={{fontSize: 18, color: 'var(--ink-2)', marginTop: 24, lineHeight: 1.6, maxWidth: 560}}>{b.blurb}</p>
          <p style={{fontSize: 17, color: 'var(--ink-3)', marginTop: 14, lineHeight: 1.6, maxWidth: 560}}>
            {b.id === 'karama' && 'The Karama flagship has been on Za’abeel Road since 1984. The room is loud, the kitchen louder. Friday lunches are a queue out the door. The biryani comes to the table sealed; staff cut the lid in front of you.'}
            {b.id === 'al-barsha' && 'Al Barsha 1 is the quieter, family-friendly room. Ground floor of Eros House, opposite Jashanmal. The takeaway counter on the right runs hot from 6pm onwards.'}
            {b.id === 'jlt' && 'JLT Express is the weekday-lunch format. Counter service, half the menu, in and out in twenty minutes. Cluster D, lake level, next to Almas Tower.'}
          </p>

          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 48}}>
            <Stat label="Seating" big={b.seating} />
            <Stat label="Parking" big={b.parking} />
            <Stat label="Delivery zones" big={b.delivers.join(', ')} small />
            <Stat label="Hours" big={b.hours} />
          </div>
        </div>

        <div>
          <div style={{position: 'sticky', top: 120}}>
            <div className="eyebrow" style={{color: 'var(--ink-3)'}}>Full address</div>
            <div style={{fontSize: 17, marginTop: 8, lineHeight: 1.5}}>{b.address}</div>

            {/* "Map" — stylised */}
            <div style={{marginTop: 28, height: 280, border: '1px solid var(--rule)', position: 'relative', overflow: 'hidden', background: 'var(--cream)'}}>
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: `
                  linear-gradient(rgba(31,27,23,0.06) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(31,27,23,0.06) 1px, transparent 1px)
                `,
                backgroundSize: '24px 24px',
              }} />
              <div style={{
                position: 'absolute', inset: 0,
                backgroundImage: `
                  linear-gradient(rgba(31,27,23,0.12) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(31,27,23,0.12) 1px, transparent 1px)
                `,
                backgroundSize: '120px 120px',
              }} />
              {/* Roads */}
              <div style={{position: 'absolute', top: '40%', left: 0, right: 0, height: 6, background: 'rgba(31,27,23,0.18)'}} />
              <div style={{position: 'absolute', top: 0, bottom: 0, left: '55%', width: 6, background: 'rgba(31,27,23,0.18)'}} />
              <div style={{position: 'absolute', top: '70%', left: '20%', right: 0, height: 3, background: 'rgba(31,27,23,0.12)'}} />

              {/* Pin */}
              <div style={{position: 'absolute', top: '38%', left: '53%', transform: 'translate(-50%, -100%)'}}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50% 50% 50% 0',
                  background: 'var(--cta)', transform: 'rotate(-45deg)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  border: '2px solid var(--ivory)',
                }}>
                  <div style={{width: 10, height: 10, borderRadius: '50%', background: 'var(--ivory)'}} />
                </div>
              </div>
              <div style={{position: 'absolute', bottom: 10, left: 12, fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-3)'}}>
                {b.lat.toFixed(4)}, {b.lng.toFixed(4)}
              </div>
              <div style={{position: 'absolute', top: 10, right: 12, fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-3)'}}>
                ↑ N
              </div>
            </div>
            <a href={`https://maps.google.com/?q=${b.lat},${b.lng}`} target="_blank" rel="noopener" className="btn btn--sm" style={{marginTop: 16}}>Open in Google Maps ↗</a>
          </div>
        </div>
      </section>

      {/* Photos */}
      {b.photos.length > 0 ? (
        <section style={{borderTop: '1px solid var(--rule)', background: 'var(--cream)', padding: '96px 0'}}>
          <div className="container">
            <SectionHeader no="02" eyebrow="The room" title={<>What it <span className="display-italic">looks like.</span></>} />
            <div style={{marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16}}>
              <div style={{gridColumn: 'span 2', gridRow: 'span 2', height: 600, position: 'relative', overflow: 'hidden'}} data-photo={`${b.name.toLowerCase()} · gallery`}>
                <img src={b.photos[photoIdx]} alt=""
                     onError={(e)=>e.currentTarget.dataset.failed='1'}
                     style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
              </div>
              {b.photos.slice(0, 8).map((p, i) => (
                <button key={i} onClick={() => setPhotoIdx(i)} style={{
                  height: 292, position: 'relative', overflow: 'hidden', padding: 0,
                  border: i === photoIdx ? '2px solid var(--ink)' : '1px solid var(--rule)',
                }} data-photo={`photo ${i + 1}`}>
                  <img src={p} alt=""
                       onError={(e)=>e.currentTarget.dataset.failed='1'}
                       style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: i === photoIdx ? 0.5 : 1}} />
                </button>
              ))}
            </div>
          </div>
        </section>
      ) : (
        <section style={{borderTop: '1px solid var(--rule)', background: 'var(--cream)', padding: '96px 0'}}>
          <div className="container">
            <SectionHeader no="02" eyebrow="Photo gap" title={<>Client to <span className="display-italic">supply.</span></>} />
            <div style={{marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16}}>
              {['Exterior — daytime', 'Interior — evening', 'Signature dish plating'].map(l => (
                <PhotoPlaceholder key={l} label={l} height={320} />
              ))}
            </div>
            <p style={{marginTop: 24, fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)'}}>
              media-manifest.md: JLT branch photography not in current asset bank. Re-shoot recommended before launch.
            </p>
          </div>
        </section>
      )}

      {/* Order CTA */}
      <section style={{padding: '96px 0', background: 'var(--ink)', color: '#fff', textAlign: 'center'}}>
        <div className="container">
          <Ornament label="Hungry" dark />
          <h2 className="display" style={{fontSize: 'clamp(40px, 5vw, 72px)', marginTop: 32}}>
            Order from <span className="display-italic">{b.name}.</span>
          </h2>
          <div className="flex items-center justify-center gap-3 flex-wrap" style={{marginTop: 40}}>
            <a href={b.talabat} target="_blank" rel="noopener" className="btn btn--primary btn--lg">Talabat — fastest →</a>
            <a href={b.deliveroo} target="_blank" rel="noopener" className="btn btn--ghost-light btn--lg">Deliveroo</a>
            <a href={b.careem} target="_blank" rel="noopener" className="btn btn--ghost-light btn--lg">Careem</a>
          </div>
        </div>
      </section>
    </div>
  );
}

function Stat({ label, big, small }) {
  return (
    <div style={{borderTop: '1px solid var(--rule)', paddingTop: 14}}>
      <div className="eyebrow" style={{color: 'var(--ink-3)', marginBottom: 6}}>{label}</div>
      <div className="display" style={{fontSize: small ? 17 : 22, lineHeight: 1.25, fontFamily: small ? 'var(--sans)' : 'var(--serif)', fontWeight: small ? 400 : 500}}>{big}</div>
    </div>
  );
}

window.DDPages1 = { Home, MenuPage, BranchesPage, BranchDetail, DishRow, Stat };
