// More pages: Catering, Iftar, About, Order

const { useState: useState_p2, useEffect: useEffect_p2 } = React;

// ─────────────────────────────────────────────────────────────
// CATERING
// ─────────────────────────────────────────────────────────────
function CateringPage() {
  const [step, setStep] = useState_p2(1);
  const [form, setForm] = useState_p2({
    date: '', headcount: '', budget: '', branch: 'karama', service: 'dropoff', message: '', name: '', phone: '',
  });
  const set = (k, v) => setForm(f => ({...f, [k]: v}));
  const services = [
    { id: 'dropoff', name: 'Drop-off catering', desc: 'Hot food in chafing dishes. Disposables included. We deliver, you serve.', from: 'from AED 80 / head' },
    { id: 'station', name: 'Live stations',     desc: 'Tandoor, tawa, chaat, jalebi. Our chefs on site. Includes 1 captain.',     from: 'from AED 140 / head' },
    { id: 'full',    name: 'Full event',        desc: 'Stations + decor, tables, A/V, shamiana, floral. Turnkey.',                from: 'quoted per event' },
  ];
  const tiers = [
    { n: 25, lbl: 'Family majlis' },
    { n: 50, lbl: 'Office iftar' },
    { n: 100, lbl: 'Engagement' },
    { n: 200, lbl: 'Wedding' },
  ];

  return (
    <div className="page-fade">
      {/* Hero */}
      <section style={{position: 'relative', height: 540, marginTop: -77, overflow: 'hidden'}} data-photo="catering · live tandoor" data-photo-dark>
        <img src="media/catering-services.jpg"
             onError={(e)=>e.currentTarget.dataset.failed='1'}
             style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.55)'}} />
        <div style={{position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,27,23,0.5) 0%, rgba(31,27,23,0.2) 40%, rgba(31,27,23,0.85) 100%)'}} />
        <div className="container" style={{position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 64, color: '#fff'}}>
          <div className="eyebrow" style={{color: 'rgba(255,255,255,0.7)'}}>Catering · UAE-wide</div>
          <h1 className="display" style={{fontSize: 'clamp(64px, 10vw, 144px)', lineHeight: 0.92, margin: '12px 0 0', color: '#fff'}}>
            Live tandoor.<br/>
            <span className="display-italic">For 25 to 2,000.</span>
          </h1>
        </div>
      </section>

      {/* Intro */}
      <section className="container" style={{padding: '96px 0', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96}}>
        <div>
          <div className="eyebrow" style={{color: 'var(--ink-3)'}}>01 · What we do</div>
          <h2 className="display" style={{fontSize: 48, marginTop: 12, lineHeight: 1.05}}>
            Forty years of feeding<br/>
            <span className="display-italic">the room.</span>
          </h2>
        </div>
        <div>
          <p style={{fontSize: 19, lineHeight: 1.6, color: 'var(--ink-2)', maxWidth: 640}}>
            Delhi Darbar has been catering Dubai weddings, iftars, corporate dinners, and
            family majlises since the 1980s. The kitchen scales — same biryani, same
            tawa, same hand-flipped roomali, just more pots.
          </p>
          <div className="flex items-center gap-6 flex-wrap" style={{marginTop: 32, color: 'var(--ink-3)'}}>
            <Stat label="Min. headcount" big="25" />
            <Stat label="Max. served at once" big="2,000+" />
            <Stat label="Lead time" big="48 hrs" />
            <Stat label="Service area" big="UAE" />
          </div>
        </div>
      </section>

      {/* Services */}
      <section className="container" style={{padding: '24px 0 96px 0'}}>
        <SectionHeader no="02" eyebrow="Service tiers" title={<>Three ways we <span className="display-italic">show up.</span></>} />
        <div style={{marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24}}>
          {services.map(s => (
            <div key={s.id} style={{padding: 32, border: '1px solid var(--rule)', background: 'var(--cream)'}}>
              <div className="display" style={{fontSize: 32}}>{s.name}</div>
              <div className="eyebrow" style={{color: 'var(--ink-3)', marginTop: 6}}>{s.from}</div>
              <div style={{height: 1, background: 'var(--rule)', margin: '20px 0'}} />
              <p style={{fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6}}>{s.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Stations strip */}
      <section style={{background: 'var(--ink)', color: '#fff', padding: '96px 0'}}>
        <div className="container">
          <SectionHeader no="03" eyebrow="Live stations" title={<>On-site, on <span className="display-italic">the night.</span></>} />
          <div style={{marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 1, background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.18)'}}>
            {['Tandoor', 'Tawa', 'Chaat', 'Jalebi', 'Roomali', 'Live BBQ'].map(name => (
              <div key={name} style={{background: 'var(--ink)', padding: '36px 24px', textAlign: 'center'}}>
                <div className="display-italic" style={{fontSize: 24}}>{name}</div>
              </div>
            ))}
          </div>
          <p style={{textAlign: 'center', fontSize: 14, color: 'rgba(255,255,255,0.6)', marginTop: 32, fontFamily: 'var(--mono)'}}>
            Plus: decor / shamiana, tables, A/V, lighting, floral, balloon arrangements. Transport billed separately.
          </p>
        </div>
      </section>

      {/* Inquiry form */}
      <section style={{padding: '96px 0', borderBottom: '1px solid var(--rule)'}} id="enquiry">
        <div className="container" style={{display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'start'}}>
          <div style={{position: 'sticky', top: 120}}>
            <div className="eyebrow" style={{color: 'var(--ink-3)'}}>04 · Request a quote</div>
            <h2 className="display" style={{fontSize: 56, marginTop: 12, lineHeight: 1}}>
              <span className="display-italic">Tell us about</span><br/>
              the event.
            </h2>
            <p style={{fontSize: 16, color: 'var(--ink-3)', marginTop: 24, maxWidth: 360, lineHeight: 1.6}}>
              We’ll come back within one working day with a written quote, sample menu, and a tasting slot at Karama.
            </p>
            <div style={{marginTop: 32, padding: 24, background: 'var(--ink)', color: '#fff'}}>
              <div className="eyebrow" style={{color: 'rgba(255,255,255,0.55)', marginBottom: 8}}>Or call directly</div>
              <a href="tel:+971504511786" className="num display" style={{fontSize: 28, color: '#fff'}}>+971 50 4511 786</a>
              <div style={{fontSize: 12, color: 'rgba(255,255,255,0.65)', marginTop: 4}}>Catering hotline · 9am – 9pm</div>
              <a href="https://wa.me/971504511786?text=Hi%20Delhi%20Darbar%2C%20I'd%20like%20a%20catering%20quote" target="_blank" rel="noopener" className="btn btn--ghost-light btn--sm" style={{marginTop: 18}}>WhatsApp →</a>
            </div>
          </div>

          {/* Multi-step form */}
          <div>
            {/* Progress */}
            <div className="flex items-center gap-3" style={{marginBottom: 32}}>
              {[1,2,3].map(i => (
                <React.Fragment key={i}>
                  <div className="flex items-center gap-3">
                    <span style={{
                      width: 26, height: 26, border: '1px solid var(--ink)',
                      background: step >= i ? 'var(--ink)' : 'transparent',
                      color: step >= i ? 'var(--ivory)' : 'var(--ink)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 12, fontFamily: 'var(--mono)',
                    }}>{i}</span>
                    <span className="eyebrow" style={{color: step >= i ? 'var(--ink)' : 'var(--ink-3)'}}>
                      {i === 1 ? 'Event' : i === 2 ? 'Headcount' : 'Contact'}
                    </span>
                  </div>
                  {i < 3 && <span style={{flex: 1, height: 1, background: 'var(--rule)'}} />}
                </React.Fragment>
              ))}
            </div>

            <div style={{background: 'var(--cream)', border: '1px solid var(--rule)', padding: 36}}>
              {step === 1 && (
                <div className="grid gap-6">
                  <div>
                    <label className="label">Service type</label>
                    <div className="grid gap-2" style={{gridTemplateColumns: 'repeat(3, 1fr)'}}>
                      {services.map(s => (
                        <button key={s.id} type="button" onClick={() => set('service', s.id)}
                                style={{
                                  padding: 16, textAlign: 'left',
                                  border: '1px solid ' + (form.service === s.id ? 'var(--ink)' : 'var(--rule)'),
                                  background: form.service === s.id ? '#fff' : 'transparent',
                                }}>
                          <div style={{fontFamily: 'var(--serif)', fontSize: 19}}>{s.name}</div>
                          <div className="eyebrow" style={{color: 'var(--ink-3)', marginTop: 4}}>{s.from}</div>
                        </button>
                      ))}
                    </div>
                  </div>

                  <div className="grid gap-4" style={{gridTemplateColumns: '1fr 1fr'}}>
                    <div>
                      <label className="label">Event date</label>
                      <input className="input" type="date" value={form.date} onChange={e => set('date', e.target.value)} />
                    </div>
                    <div>
                      <label className="label">Nearest branch (for tasting)</label>
                      <select className="select" value={form.branch} onChange={e => set('branch', e.target.value)}>
                        {window.DD.BRANCHES.map(b => <option key={b.id} value={b.id}>{b.long}</option>)}
                      </select>
                    </div>
                  </div>

                  <div className="flex justify-between" style={{marginTop: 8}}>
                    <span />
                    <button className="btn btn--primary" onClick={() => setStep(2)}>Next: headcount →</button>
                  </div>
                </div>
              )}

              {step === 2 && (
                <div className="grid gap-6">
                  <div>
                    <label className="label">Headcount</label>
                    <div className="grid gap-2" style={{gridTemplateColumns: 'repeat(4, 1fr)', marginBottom: 12}}>
                      {tiers.map(t => (
                        <button key={t.n} type="button" onClick={() => set('headcount', String(t.n))}
                                style={{
                                  padding: 16, textAlign: 'center',
                                  border: '1px solid ' + (form.headcount === String(t.n) ? 'var(--ink)' : 'var(--rule)'),
                                  background: form.headcount === String(t.n) ? '#fff' : 'transparent',
                                }}>
                          <div className="display num" style={{fontSize: 32}}>{t.n}+</div>
                          <div className="eyebrow" style={{color: 'var(--ink-3)', marginTop: 4}}>{t.lbl}</div>
                        </button>
                      ))}
                    </div>
                    <input className="input" type="number" placeholder="Or enter exact number" value={form.headcount} onChange={e => set('headcount', e.target.value)} />
                  </div>

                  <div>
                    <label className="label">Budget per head (AED)</label>
                    <div className="grid gap-2" style={{gridTemplateColumns: 'repeat(4, 1fr)'}}>
                      {['60-80', '80-120', '120-180', '180+'].map(b => (
                        <button key={b} type="button" onClick={() => set('budget', b)}
                                style={{
                                  padding: 14,
                                  border: '1px solid ' + (form.budget === b ? 'var(--ink)' : 'var(--rule)'),
                                  background: form.budget === b ? '#fff' : 'transparent',
                                  fontFamily: 'var(--sans)', fontSize: 14,
                                }}>{b}</button>
                      ))}
                    </div>
                  </div>

                  <div className="flex justify-between" style={{marginTop: 8}}>
                    <button className="btn" onClick={() => setStep(1)}>← Back</button>
                    <button className="btn btn--primary" onClick={() => setStep(3)}>Next: contact →</button>
                  </div>
                </div>
              )}

              {step === 3 && (
                <div className="grid gap-6">
                  <div className="grid gap-4" style={{gridTemplateColumns: '1fr 1fr'}}>
                    <div>
                      <label className="label">Your name</label>
                      <input className="input" value={form.name} onChange={e => set('name', e.target.value)} />
                    </div>
                    <div>
                      <label className="label">Phone (UAE)</label>
                      <input className="input" placeholder="+971 50 0000 000" value={form.phone} onChange={e => set('phone', e.target.value)} />
                    </div>
                  </div>
                  <div>
                    <label className="label">Anything we should know? (Dietary, theme, venue)</label>
                    <textarea className="input" rows="4" value={form.message} onChange={e => set('message', e.target.value)} />
                  </div>

                  <div style={{padding: 16, background: 'var(--ivory)', border: '1px solid var(--rule)'}}>
                    <div className="eyebrow" style={{color: 'var(--ink-3)', marginBottom: 6}}>Summary</div>
                    <div style={{fontSize: 14}}>
                      <strong>{services.find(s => s.id === form.service)?.name}</strong>
                      {form.date && <> · {form.date}</>}
                      {form.headcount && <> · {form.headcount} guests</>}
                      {form.budget && <> · AED {form.budget}/head</>}
                      <> · tasting at {window.DD.BRANCHES.find(b => b.id === form.branch)?.name}</>
                    </div>
                  </div>

                  <div className="flex justify-between" style={{marginTop: 8}}>
                    <button className="btn" onClick={() => setStep(2)}>← Back</button>
                    <button className="btn btn--primary" onClick={(e) => { e.preventDefault(); setStep(4); }}>Send enquiry →</button>
                  </div>
                </div>
              )}

              {step === 4 && (
                <div style={{textAlign: 'center', padding: '32px 0'}}>
                  <div style={{
                    width: 64, height: 64, margin: '0 auto', borderRadius: '50%',
                    border: '1.5px solid var(--cardamom)', color: 'var(--cardamom)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 28,
                  }}>✓</div>
                  <h3 className="display" style={{fontSize: 36, marginTop: 24}}>Enquiry received.</h3>
                  <p style={{fontSize: 16, color: 'var(--ink-3)', marginTop: 12, maxWidth: 360, marginLeft: 'auto', marginRight: 'auto'}}>
                    Our catering desk will message you on {form.phone || 'your number'} within one working day.
                  </p>
                  <button className="btn" style={{marginTop: 32}} onClick={() => { setStep(1); setForm({date:'',headcount:'',budget:'',branch:'karama',service:'dropoff',message:'',name:'',phone:''}); }}>Submit another →</button>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// IFTAR
// ─────────────────────────────────────────────────────────────
function IftarPage() {
  return (
    <div className="page-fade">
      {/* Hero photo */}
      <section style={{position: 'relative', height: 520, marginTop: -77, overflow: 'hidden'}} data-photo="iftar · samosas + chai overhead" data-photo-dark>
        <img src="media/samosas.jpg"
             onError={(e)=>e.currentTarget.dataset.failed='1'}
             style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.55)'}} alt="" />
        <div style={{position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,27,23,0.5) 0%, rgba(31,27,23,0.2) 40%, rgba(31,27,23,0.85) 100%)'}} />
        <div className="container" style={{position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 56, color: '#fff'}}>
          <div className="eyebrow" style={{color: 'rgba(255,255,255,0.7)'}}>Ramadan 2026</div>
          <h1 className="display" style={{fontSize: 'clamp(56px, 9vw, 132px)', lineHeight: 0.92, margin: '12px 0 0', color: '#fff'}}>
            Iftar packs<br/>
            <span className="display-italic">from AED 20.</span>
          </h1>
        </div>
      </section>

      <section className="container" style={{padding: '64px 0 24px 0'}}>
        <p style={{fontSize: 18, color: 'var(--ink-3)', maxWidth: 580, lineHeight: 1.6}}>
          Two pre-packed iftar boxes, ready by Maghrib. Order by 4pm same-day; or in advance for groups.
          Pickup at any branch, delivery via Talabat.
        </p>
      </section>

      <section className="container" style={{padding: '40px 0 96px 0'}}>
        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32}}>
          {window.DD.IFTAR_PACKS.map((p, i) => (
            <article key={i} style={{
              background: i === 1 ? 'var(--ink)' : 'var(--cream)',
              color: i === 1 ? '#fff' : 'var(--ink)',
              border: '1px solid ' + (i === 1 ? 'var(--ink)' : 'var(--rule)'),
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{height: 280, position: 'relative', overflow: 'hidden', borderBottom: '1px solid ' + (i === 1 ? 'rgba(255,255,255,0.18)' : 'var(--rule)')}}
                   data-photo={i === 0 ? "iftar box · contents overhead" : "biryani iftar combo · overhead"}>
                <img src={i === 0 ? 'media/samosas.jpg' : 'media/biryani-family-pack.jpg'}
                     onError={(e)=>e.currentTarget.dataset.failed='1'}
                     style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} alt="" />
                {p.flag && (
                  <div style={{position: 'absolute', top: 16, right: 16, zIndex: 2}}>
                    <Tag color="saffron">{p.flag}</Tag>
                  </div>
                )}
              </div>
              <div style={{padding: 48}}>
              <div className="eyebrow" style={{color: i === 1 ? 'rgba(255,255,255,0.55)' : 'var(--ink-3)'}}>Pack 0{i + 1}</div>
              <h3 className="display" style={{fontSize: 44, marginTop: 12, color: i === 1 ? '#fff' : 'var(--ink)'}}>{p.name}</h3>

              <div className="flex items-baseline gap-2" style={{marginTop: 24, color: i === 1 ? '#fff' : 'var(--ink)'}}>
                <span style={{fontSize: 14, color: i === 1 ? 'rgba(255,255,255,0.7)' : 'var(--ink-3)'}}>AED</span>
                <span className="display num" style={{fontSize: 96, lineHeight: 1}}>{p.price}</span>
                <span style={{fontSize: 14, color: i === 1 ? 'rgba(255,255,255,0.7)' : 'var(--ink-3)'}}>per head</span>
              </div>

              <div style={{height: 1, background: i === 1 ? 'rgba(255,255,255,0.2)' : 'var(--rule)', margin: '32px 0'}} />

              <div className="eyebrow" style={{color: i === 1 ? 'rgba(255,255,255,0.6)' : 'var(--ink-3)', marginBottom: 16}}>What’s in the box</div>
              <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12}}>
                {p.contents.map((c, j) => (
                  <li key={j} className="flex items-start gap-3" style={{fontFamily: 'var(--serif)', fontSize: 18}}>
                    <span style={{
                      marginTop: 7, width: 6, height: 6, transform: 'rotate(45deg)',
                      background: i === 1 ? 'var(--accent)' : 'var(--cta)', flexShrink: 0,
                    }} />
                    {c}
                  </li>
                ))}
              </ul>

              <a href="https://wa.me/971504511786?text=Hi%2C%20I'd%20like%20to%20pre-order%20Iftar%20packs"
                 target="_blank" rel="noopener"
                 className={i === 1 ? 'btn btn--ghost-light' : 'btn btn--primary'}
                 style={{marginTop: 40}}>Pre-order on WhatsApp →</a>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section style={{background: 'var(--cream)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '96px 0'}}>
        <div className="container" style={{textAlign: 'center'}}>
          <Ornament label="Ordering for a group" />
          <h2 className="display" style={{fontSize: 'clamp(36px, 4.5vw, 56px)', marginTop: 32, lineHeight: 1.1}}>
            More than 20 packs?<br/>
            <span className="display-italic">Call ahead.</span>
          </h2>
          <p style={{fontSize: 17, color: 'var(--ink-3)', maxWidth: 520, margin: '24px auto 0', lineHeight: 1.6}}>
            Office iftars, charity boxes, mosque distributions. We pack from each branch with 6 hours notice.
            Delivery across Dubai — ask.
          </p>
          <div className="flex items-center justify-center gap-3" style={{marginTop: 32}}>
            <a href="tel:+971504511786" className="btn btn--primary">Call +971 50 4511 786</a>
            <a href="#" onClick={(e)=>{e.preventDefault(); window.DDNav.go('catering');}} className="btn">Or full catering →</a>
          </div>
        </div>
      </section>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ABOUT
// ─────────────────────────────────────────────────────────────
function AboutPage() {
  return (
    <div className="page-fade">
      {/* Hero photo */}
      <section style={{position: 'relative', height: 560, marginTop: -77, overflow: 'hidden'}} data-photo="about · spice market overhead" data-photo-dark>
        <img src="media/hero-delhi-darbar-dubai.jpg"
             onError={(e)=>e.currentTarget.dataset.failed='1'}
             style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'brightness(0.5)'}} alt="" />
        <div style={{position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(31,27,23,0.45) 0%, rgba(31,27,23,0.15) 35%, rgba(31,27,23,0.85) 100%)'}} />
        <div className="container" style={{position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 64, color: '#fff'}}>
          <div className="eyebrow" style={{color: 'rgba(255,255,255,0.7)'}}>About</div>
          <h1 className="display" style={{fontSize: 'clamp(56px, 9vw, 132px)', lineHeight: 0.92, margin: '12px 0 0', color: '#fff', maxWidth: 1100}}>
            A Bombay kitchen, <span className="display-italic">forty-two years</span> in Dubai.
          </h1>
        </div>
      </section>

      <section className="container" style={{padding: '64px 0', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, alignItems: 'start'}}>
        <div style={{position: 'sticky', top: 120, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-3)', letterSpacing: '0.06em'}}>
          <div className="eyebrow" style={{color: 'var(--ink)', marginBottom: 12, fontFamily: 'var(--sans)'}}>The Lockup</div>
          Mumbai’s Best Biryani.<br/>
          Since 1973.<br/>
          In the UAE since 1984.
        </div>
        <div>
          <p style={{fontFamily: 'var(--serif)', fontSize: 28, lineHeight: 1.5, color: 'var(--ink)'}}>
            The family’s first biryani came out of a small Bombay kitchen in 1946. By 1973
            they were on Grant Road — the room that gave the lockup. In 1984 the eldest
            son crossed the Gulf, leased a unit on Za’abeel Road, and started cooking the
            same recipe for the Indian families who’d already crossed before him.
          </p>
          <p style={{fontSize: 17, color: 'var(--ink-2)', marginTop: 24, lineHeight: 1.7}}>
            Forty-two years later, the same kitchen runs three rooms in Dubai — Karama,
            Al Barsha 1, and JLT — and one of the highest-rated delivery operations in
            the city. The Mansuri family is now into a fourth generation. The dum biryani
            is still sealed at the pot.
          </p>
        </div>
      </section>

      {/* Timeline */}
      <section className="container" style={{padding: '64px 0 96px 0'}}>
        <SectionHeader no="01" eyebrow="The story" title={<>From Bombay <span className="display-italic">to Dubai.</span></>} />

        <div style={{marginTop: 64, borderTop: '1px solid var(--rule)'}}>
          {window.DD.TIMELINE.map((t, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '180px 1fr 1.4fr',
              gap: 48, padding: '40px 0',
              borderBottom: '1px solid var(--rule)',
              alignItems: 'baseline',
            }}>
              <div className="display num" style={{fontSize: 56, lineHeight: 1}}>{t.year}</div>
              <div style={{paddingTop: 8}}>
                <div className="eyebrow" style={{color: 'var(--ink-3)'}}>City</div>
                <div className="display" style={{fontSize: 22, marginTop: 4}}>{t.city}</div>
              </div>
              <div style={{fontSize: 18, color: 'var(--ink-2)', lineHeight: 1.55, paddingTop: 8}}>{t.text}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Photo strip between timeline and pull quote */}
      <section className="container" style={{padding: '0 0 96px 0'}}>
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16}}>
          <div style={{height: 380, position: 'relative', overflow: 'hidden'}} data-photo="karama · 1984 archival">
            <img src="media/tripadvisor-karama-hero.jpg" alt=""
                 onError={(e)=>e.currentTarget.dataset.failed='1'}
                 style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
          </div>
          <div style={{height: 380, position: 'relative', overflow: 'hidden'}} data-photo="kitchen · biryani pot at dum stage">
            {/* intentional gap — client to supply this re-shoot */}
          </div>
          <div style={{height: 380, position: 'relative', overflow: 'hidden'}} data-photo="biryani · lid lift">
            <img src="media/biryani-barsha.jpg" alt=""
                 onError={(e)=>e.currentTarget.dataset.failed='1'}
                 style={{position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover'}} />
          </div>
        </div>
      </section>

      {/* Pull quote */}
      <section style={{background: 'var(--ink)', color: '#fff', padding: '120px 0'}}>
        <div className="container" style={{textAlign: 'center'}}>
          <Ornament label="On the kitchen" dark />
          <p className="display-italic" style={{
            fontSize: 'clamp(36px, 5vw, 64px)',
            lineHeight: 1.25, marginTop: 40, maxWidth: 900, marginLeft: 'auto', marginRight: 'auto',
            color: '#fff',
          }}>
            “We didn’t change the recipe to suit Dubai. We changed the volume.”
          </p>
          <div className="eyebrow" style={{color: 'rgba(255,255,255,0.55)', marginTop: 32}}>
            — Mansuri family, on opening Karama
          </div>
        </div>
      </section>

      {/* Family + Jaffer Bhai's */}
      <section className="container" style={{padding: '120px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64}}>
        <div>
          <SectionHeader no="02" eyebrow="The family" title={<>The Mansuri <span className="display-italic">name.</span></>} />
          <p style={{fontSize: 17, color: 'var(--ink-2)', marginTop: 28, lineHeight: 1.7}}>
            Four generations of Mansuris have run the kitchens. The Dubai operation
            is now in the hands of the third, with the fourth on the floor. Sister
            brand <em>Jaffer Bhai’s</em> (Mumbai 2002, Dubai 2017) is run by a cousin.
          </p>
        </div>
        <div>
          <SectionHeader no="03" eyebrow="Halal kitchen" title={<>What’s <span className="display-italic">not</span> in the kitchen.</>} />
          <ul style={{listStyle: 'none', padding: 0, margin: '28px 0 0', display: 'grid', gap: 12}}>
            {['No alcohol — ever', 'No pork — ever', 'Vegetarian section runs the full menu', 'Spice levels adjusted to order'].map(t => (
              <li key={t} className="flex items-center gap-3" style={{fontFamily: 'var(--serif)', fontSize: 19}}>
                <span style={{width: 6, height: 6, transform: 'rotate(45deg)', background: 'var(--cardamom)'}} />
                {t}
              </li>
            ))}
          </ul>
        </div>
      </section>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// ORDER PAGE
// ─────────────────────────────────────────────────────────────
function OrderPage({ onOrder }) {
  return (
    <div className="page-fade">
      <section className="container" style={{padding: '64px 0 32px 0'}}>
        <div className="eyebrow" style={{color: 'var(--ink-3)'}}>Order Direct</div>
        <h1 className="display" style={{fontSize: 'clamp(56px, 9vw, 132px)', lineHeight: 0.95, margin: '20px 0 0'}}>
          One tap, hot biryani.<br/>
          <span className="display-italic">Pick your branch.</span>
        </h1>
        <p style={{fontSize: 18, color: 'var(--ink-3)', marginTop: 24, maxWidth: 580}}>
          Three Dubai branches, three delivery apps. Pick the room nearest you;
          we’ll fan you out to the platform that delivers fastest to your area.
        </p>
      </section>

      <section className="container" style={{padding: '32px 0 96px 0'}}>
        {window.DD.BRANCHES.map((b, i) => (
          <div key={b.id} style={{
            padding: '40px 0',
            borderTop: '1px solid var(--rule)',
            display: 'grid', gridTemplateColumns: '180px 1fr 2fr', gap: 32, alignItems: 'center',
          }}>
            <div style={{height: 140, 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'}} />
              )}
            </div>
            <div>
              <span style={{fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)'}}>0{i + 1}</span>
              <h2 className="display" style={{fontSize: 40, lineHeight: 1, marginTop: 8}}>{b.name}</h2>
              <div style={{fontSize: 13, color: 'var(--ink-3)', marginTop: 8}}>{b.landmark}</div>
              <div style={{marginTop: 14}}><OpenNow branch={b} /></div>
              <div style={{fontSize: 12, color: 'var(--ink-3)', marginTop: 12, fontFamily: 'var(--mono)'}}>
                Delivers: {b.delivers.join(', ')}
              </div>
            </div>
            <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12}}>
              {window.DD.PLATFORMS.map(p => (
                <a key={p.id} href={b[p.id]} target="_blank" rel="noopener"
                   style={{
                     padding: '24px 20px',
                     border: '1px solid var(--rule)',
                     background: p.primary ? 'var(--ink)' : 'var(--cream)',
                     color: p.primary ? '#fff' : 'var(--ink)',
                   }}>
                  <div className="display" style={{fontSize: 24}}>{p.name}</div>
                  <div className="eyebrow" style={{color: p.primary ? 'rgba(255,255,255,0.7)' : 'var(--ink-3)', marginTop: 6}}>{p.tag}</div>
                  <div style={{fontSize: 11, fontFamily: 'var(--mono)', marginTop: 12, color: p.primary ? 'var(--accent)' : 'var(--cta)'}}>OPEN ↗</div>
                </a>
              ))}
            </div>
          </div>
        ))}
      </section>

      <section style={{background: 'var(--cream)', borderTop: '1px solid var(--rule)', padding: '64px 0', textAlign: 'center'}}>
        <div className="container">
          <Ornament label="Or skip the app" />
          <h2 className="display" style={{fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 32, lineHeight: 1.15}}>
            Message the kitchen on <span className="display-italic">WhatsApp.</span>
          </h2>
          <a href="https://wa.me/971504511786" target="_blank" rel="noopener" className="btn btn--primary btn--lg" style={{marginTop: 32}}>
            +971 50 4511 786 →
          </a>
        </div>
      </section>
    </div>
  );
}

window.DDPages2 = { CateringPage, IftarPage, AboutPage, OrderPage };