// Ravi Restaurant — Menu page + Branches list + Branch detail

function MenuPage({ onNav }) {
  const sections = window.RAVI.MENU;
  const [active, setActive] = React.useState(sections[0].id);

  React.useEffect(() => {
    const onScroll = () => {
      const tops = sections.map(s => {
        const el = document.getElementById('menu-' + s.id);
        return [s.id, el ? el.getBoundingClientRect().top : Infinity];
      });
      const inView = tops.filter(([, t]) => t < 200).sort((a, b) => b[1] - a[1])[0];
      if (inView) setActive(inView[0]);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const jump = (id) => {
    const el = document.getElementById('menu-' + id);
    if (!el) return;
    const y = el.getBoundingClientRect().top + window.scrollY - 140;
    window.scrollTo({ top: y, behavior: 'smooth' });
  };

  return (
    <div className="route-fade">
      <section className="section" style={{ paddingTop: 160, paddingBottom: 24 }}>
        <div className="container">
          <div className="eyebrow">Menu</div>
          <h1 style={{ marginTop: 16 }}>
            Pakistani · Punjabi · Mughlai.<br />
            <em style={{ fontStyle: 'italic', color: 'var(--register-accent)' }}>No fusion, no Continental, no Chinese.</em>
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: '60ch' }}>
            One menu, every branch. Sheikh Zayed Road plates it more carefully — the recipes are identical. Mains AED 15–35. Mutton from Pakistan. Bread from the clay oven all day.
          </p>
          <div className="price-flag" style={{ marginTop: 32, maxWidth: 720 }}>
            <span style={{ fontWeight: 600 }}>Indicative prices.</span>
            <span>No official menu PDF exists online; prices below are reconstructed from press, Tripadvisor and aggregator listings. Updated AED prices land after the Satwa menu photoshoot.</span>
          </div>
        </div>
      </section>

      <div className="container">
        <div className="menu-toc">
          {sections.map(s => (
            <button key={s.id} className={active === s.id ? 'active' : ''} onClick={() => jump(s.id)}>{s.title}</button>
          ))}
        </div>
      </div>

      <div className="container">
        {sections.map(section => (
          <section id={'menu-' + section.id} className="menu-section" key={section.id}>
            <div className="menu-section-head">
              <h2>{section.title}</h2>
              {section.sub && <div className="sub">{section.sub}</div>}
            </div>
            <div className="dish-list">
              {section.items.map((d, i) => (
                <div className="dish-row" key={i}>
                  <div className="name">
                    {d.signature && <span className="star" title="Signature" />}
                    <span>{d.name}</span>
                    {d.urdu && <span className="urdu">{d.urdu}</span>}
                  </div>
                  <div className="price">AED {d.price}</div>
                  {d.note && <div className="note">{d.note}</div>}
                </div>
              ))}
            </div>
          </section>
        ))}
      </div>

      <section className="section">
        <div className="container">
          <div className="find-near">
            <div>
              <div className="eyebrow" style={{ color: 'var(--ravi-green-neon)' }}>Order in</div>
              <h2 style={{ marginTop: 12 }}>The whole menu, delivered.</h2>
              <p style={{ opacity: 0.85 }}>Talabat carries every section, UAE-wide. Best-sellers: Tandoori Roti, Daal Fry, Chana, Naan.</p>
            </div>
            <div>
              <a className="btn btn-light" href="https://www.talabat.com/uae/ravi-restaurant" target="_blank" rel="noreferrer">
                Open Talabat <Icon name="external" size={14} />
              </a>
              <a className="btn btn-ghost" style={{ marginLeft: 10, color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }} href="https://wa.me/971589650044" target="_blank" rel="noreferrer">
                Order via WhatsApp
              </a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function BranchesPage({ onNav }) {
  return (
    <div className="route-fade">
      <section className="section" style={{ paddingTop: 160 }}>
        <div className="container">
          <div className="eyebrow">Branches</div>
          <h1 style={{ marginTop: 16, maxWidth: '14ch' }}>
            Six rooms.<br />
            <em style={{ fontStyle: 'italic', color: 'var(--register-accent)' }}>One family.</em>
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: '64ch' }}>
            The fifteen-plus aggregator listings disagree on our hours and addresses. Here are the canonical five — verified with the family, one number per branch.
          </p>
        </div>
      </section>

      <section className="section-tight" style={{ paddingTop: 0 }}>
        <div className="container" style={{ display: 'grid', gap: 24 }}>
          {window.RAVI.BRANCHES.map(b => (
            <BranchCard key={b.slug} b={b} onNav={onNav} />
          ))}
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <FindNearest onNav={onNav} />
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="eyebrow">Not us</div>
          <h2 style={{ marginTop: 8, maxWidth: '20ch' }}>The Ravi name gets copied.</h2>
          <p className="lede" style={{ marginTop: 16, maxWidth: '60ch' }}>
            If it isn&rsquo;t one of the rooms above, it isn&rsquo;t the Chaudary family. We list only family-operated outlets.
          </p>
          <div className="tag-row" style={{ marginTop: 24 }}>
            {['Baithal Ravi (Satwa)', 'Ravi Darbar (Karama)', 'Pak Ravi (Karama)', 'Ravi Palace (Al Barsha)'].map((c, i) =>
              <span key={i} className="chip" style={{ opacity: 0.6, textDecoration: 'line-through' }}>{c}</span>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

function BranchDetailPage({ slug, onNav, setRegister }) {
  const b = window.RAVI.BRANCHES.find(x => x.slug === slug);
  React.useEffect(() => {
    if (b && b.register === 'szr') setRegister('szr');
    else setRegister('satwa');
  }, [slug]);

  if (!b) {
    return (
      <div className="route-fade" style={{ paddingTop: 200, textAlign: 'center' }}>
        <h2>Branch not found.</h2>
        <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={() => onNav('branches')}>← All branches</button>
      </div>
    );
  }

  const isSzr = b.register === 'szr';

  return (
    <div className="route-fade">
      <section style={{ paddingTop: 96, position: 'relative' }}>
        <div style={{ position: 'relative', height: '70vh', minHeight: 480, background: '#111' }}>
          <img src={b.img} alt={b.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.86 }} />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.7))' }} />
          <div style={{ position: 'relative', height: '100%', display: 'flex', alignItems: 'flex-end', color: '#fff' }}>
            <div className="container" style={{ paddingBottom: 56, width: '100%' }}>
              <div className="eyebrow" style={{ color: 'var(--ravi-green-neon)' }}>{b.flag || 'Ravi Restaurant'}</div>
              <h1 style={{ marginTop: 12, color: '#fff' }}>{b.name}</h1>
              <p className="lede" style={{ marginTop: 16, maxWidth: '50ch', color: 'rgba(255,255,255,0.85)' }}>{b.tagline}</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64 }} className="branch-grid">
            <style>{` @media (max-width: 900px) { .branch-grid { grid-template-columns: 1fr !important; } } `}</style>
            <div>
              <p style={{ fontSize: 20, lineHeight: 1.6 }}>{b.blurb}</p>

              <hr className="rule" />

              <dl style={{ display: 'grid', gap: 24, margin: 0 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6 }}><Icon name="pin" size={12} /> Address</div>
                  <div style={{ fontSize: 18 }}>{b.address}</div>
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6 }}><Icon name="phone" size={12} /> Phone</div>
                  <div style={{ fontSize: 18 }}>
                    <a className="body-link" href={`tel:${b.phone.replace(/\s/g,'')}`}>{b.phone}</a>
                    {b.phoneAlt && <> · <a className="body-link" href={`tel:${b.phoneAlt.replace(/\s/g,'')}`}>{b.phoneAlt}</a></>}
                  </div>
                  {b.whatsapp && <div style={{ marginTop: 4, fontSize: 14, opacity: 0.7 }}>WhatsApp {b.whatsapp}</div>}
                </div>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6 }}><Icon name="clock" size={12} /> Hours</div>
                  <div style={{ fontSize: 18 }}>{b.hours}</div>
                  {b.hoursNote && <div style={{ marginTop: 4, fontSize: 14, opacity: 0.7 }}>{b.hoursNote}</div>}
                </div>
                {b.seats && (
                  <div>
                    <div className="eyebrow" style={{ marginBottom: 6 }}>Volume</div>
                    <div style={{ fontSize: 18 }}>{b.seats} seats · {b.covers}</div>
                  </div>
                )}
              </dl>

              <div className="ctas" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 32 }}>
                <a className="btn btn-primary" href={b.mapsHref} target="_blank" rel="noreferrer"><Icon name="pin" size={16} />Get Directions</a>
                {b.talabat && <a className="btn btn-ghost" href={b.talabat} target="_blank" rel="noreferrer">Order on Talabat <Icon name="external" size={14} /></a>}
                {isSzr && <button className="btn btn-ghost" onClick={() => onNav('reserve')}>Reserve a table <Icon name="arrow" size={14} /></button>}
              </div>
            </div>
            <div>
              <img src={b.interior} alt="Inside" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: 4, background: '#111' }} />
              <div style={{ marginTop: 24, padding: 0, background: 'var(--register-tint)', borderRadius: 4, overflow: 'hidden', border: '1px solid rgba(0,0,0,0.08)' }}>
                <div style={{ position: 'relative', aspectRatio: '16/10', background: 'linear-gradient(135deg, rgba(60,179,113,0.10), rgba(255,255,255,0.32))' }}>
                  <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px)', backgroundSize: '28px 28px' }} />
                  <div style={{ position: 'absolute', left: '50%', top: '48%', transform: 'translate(-50%, -50%)', width: 42, height: 42, borderRadius: 999, background: 'var(--ravi-green-neon)', boxShadow: '0 0 0 12px rgba(60,179,113,0.18)', display: 'grid', placeItems: 'center', color: '#fff' }}>
                    <Icon name="pin" size={18} />
                  </div>
                  <div style={{ position: 'absolute', left: 16, bottom: 16, right: 16, display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center', background: 'rgba(255,255,255,0.88)', padding: '12px 14px', borderRadius: 4 }}>
                    <div>
                      <div className="eyebrow" style={{ marginBottom: 4 }}>Map location</div>
                      <div style={{ fontSize: 13, opacity: 0.78 }}>{b.address}</div>
                    </div>
                    <a className="btn btn-ghost btn-sm" href={b.mapsHref} target="_blank" rel="noreferrer" style={{ whiteSpace: 'nowrap' }}>Open Maps</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--register-tint)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
            <h3 style={{ fontSize: 32 }}>Other Ravi rooms</h3>
            <button className="btn btn-ghost btn-sm" onClick={() => onNav('branches')}>All branches</button>
          </div>
          <div className="branch-picker">
            {window.RAVI.BRANCHES.filter(x => x.slug !== b.slug).map(x => (
              <BranchPill key={x.slug} b={x} onClick={() => onNav('branch/' + x.slug)} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { MenuPage, BranchesPage, BranchDetailPage });