// Ravi Restaurant — Page: Home, Our Story, Visit
const { useState: useStateP1, useEffect: useEffectP1, useMemo: useMemoP1 } = React;

function HomePage({ onNav, register, setRegister }) {
  return (
    <div className="route-fade">
      <Hero register={register} setRegister={setRegister} onNav={onNav} />

      <DishMarquee />

      <section className="section">
        <div className="container">
          <div className="story-block">
            <div>
              <div className="eyebrow">Since 1978</div>
              <h2>A canteen<br /><em style={{ fontStyle: 'italic', color: 'var(--register-accent)' }}>that became a home.</em></h2>
            </div>
            <div className="copy">
              <p style={{ fontSize: 18, lineHeight: 1.65, marginTop: 0 }}>
                Chaudary Abdul Hameed arrived from Wazirabad, Punjab in 1970. Eight years and a few odd jobs later, with AED 27,000 borrowed from his brother and fifteen staff, he opened a small room in Al Satwa to feed the South Asian construction workers building the rest of the city. He named it after the River Ravi.
              </p>
              <p style={{ fontSize: 18, lineHeight: 1.65 }}>
                Forty-seven years on, the same family runs six rooms across Dubai. The Satwa flagship still has plastic tablecloths and a kitchen the diners can see — turning 400 to 500 covers a day from fifty seats. The newest room sits opposite the Museum of the Future on Sheikh Zayed Road, opened January 2026. Marble floors. Walnut chairs. The same nihari.
              </p>
              <div className="pull-quote">
                <q>It has become more than just a restaurant — it has become a home that many grew up with.</q>
                <cite>— Chaudary Abdul Hameed, founder</cite>
              </div>
              <button className="btn btn-ghost" onClick={() => onNav('story')}>Read the full story <Icon name="arrow" size={14} /></button>
            </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', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow">The signature four</div>
              <h2 style={{ marginTop: 8 }}>What we&rsquo;re known for.</h2>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => onNav('menu')}>See the full menu <Icon name="arrow" size={14} /></button>
          </div>
          <SignatureDishes onNav={onNav} />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="eyebrow" style={{ textAlign: 'center' }}>The earned-media wall</div>
          <h2 style={{ textAlign: 'center', marginTop: 12, marginBottom: 48 }}>
            Forty-seven years.<br />
            <em style={{ fontStyle: 'italic', color: 'var(--register-accent)' }}>One unmanaged press archive.</em>
          </h2>
          <PressStrip />
          <div style={{ textAlign: 'center', marginTop: 32 }}>
            <button className="btn btn-ghost" onClick={() => onNav('press')}>Open the press wall <Icon name="arrow" size={14} /></button>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="eyebrow">Six rooms · One kitchen</div>
              <h2 style={{ marginTop: 8 }}>Pick your Ravi.</h2>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => onNav('branches')}>All branches <Icon name="arrow" size={14} /></button>
          </div>
          <div className="branch-picker">
            {window.RAVI.BRANCHES.map(b => (
              <BranchPill key={b.slug} b={b} onClick={() => onNav('branch/' + b.slug)} />
            ))}
          </div>
        </div>
      </section>

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

      <section className="section">
        <div className="container">
          <div className="sneaker-callout">
            <div>
              <div className="eyebrow" style={{ color: 'var(--ravi-green-neon)' }}>June 2022 · Adidas Originals</div>
              <h2 style={{ marginTop: 12, color: '#fff' }}>The only restaurant from the region<br/><em style={{ color: 'var(--ravi-green-neon)', fontStyle: 'italic' }}>on a global sneaker drop.</em></h2>
              <p style={{ marginTop: 18, maxWidth: '56ch', opacity: 0.8 }}>
                Adidas&rsquo; &ldquo;Adilicious&rdquo; series picked eleven community restaurants worldwide. Ravi was the one from the Gulf, India and Pakistan. The Superstar Ravi shipped with a hand-drawn map of the river on the insole and our dishes printed on the tongue — Chicken Biryani, Karak Chai — in English on one side, Arabic on the other.
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
                <button className="btn btn-light" onClick={() => onNav('press')}>Read the press story</button>
              </div>
            </div>
            <div>
              <div className="stat">AED 549</div>
              <div className="note-flag" style={{ marginTop: 8, opacity: 0.8 }}>Retail · sold out in hours</div>
              <div style={{ marginTop: 24 }} className="stat">AED 44K</div>
              <div className="note-flag" style={{ marginTop: 8, opacity: 0.8 }}>Resale on the secondary market</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--register-tint)' }}>
        <div className="container">
          <div className="story-block">
            <div>
              <div className="eyebrow">The room at SZR</div>
              <h2>Same family.<br /><em style={{ fontStyle: 'italic', color: 'var(--register-accent)' }}>A little more finesse.</em></h2>
            </div>
            <div className="copy">
              <p style={{ fontSize: 18, marginTop: 0 }}>
                In January 2026 the Chaudarys opened their first fine-dining room — marble floors, walnut chairs, indoor and outdoor seating opposite the Museum of the Future. The menu is the same nihari, karahi and biryani; the plating is calmer; the table linen is no longer plastic. Same green over the door.
              </p>
              <div className="ctas" style={{ marginTop: 18, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => { setRegister('szr'); onNav('reserve'); }}>Reserve a table</button>
                <button className="btn btn-ghost" onClick={() => onNav('branch/sheikh-zayed-road')}>See the room</button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function SignatureDishes({ onNav }) {
  const dishes = [
    { name: 'Chicken Biryani', urdu: 'چکن بریانی', price: 'AED 28', img: 'media/biryani-1.jpg', note: 'The signature. Printed on the Adidas tongue.' },
    { name: 'Mutton Karahi', urdu: 'مٹن کڑاہی', price: 'AED 38', img: 'media/karahi-1.jpg', note: 'Mutton from Pakistan, dry karahi at the pass.' },
    { name: 'Nihari', urdu: 'نهاری', price: 'AED 28', img: 'media/nihari-1.jpg', note: 'Slow-cooked overnight. Breakfast headliner.' },
    { name: 'Chicken Tikka', urdu: 'چکن تکہ', price: 'AED 22', img: 'media/karahi-4.jpg', note: '“My tikka is the best in Dubai.” — the founder.' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }} className="signature-grid">
      <style>{`
        @media (max-width: 900px) { .signature-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 520px) { .signature-grid { grid-template-columns: 1fr !important; } }
      `}</style>
      {dishes.map((d, i) => (
        <div key={i} style={{ cursor: 'pointer' }} onClick={() => onNav('menu')}>
          <div style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden', background: '#222', borderRadius: 4 }}>
            <img src={d.img} alt={d.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 700ms ease' }}
              onMouseEnter={e => e.target.style.transform = 'scale(1.04)'}
              onMouseLeave={e => e.target.style.transform = 'scale(1)'} />
          </div>
          <div style={{ marginTop: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 24 }}>{d.name}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em' }}>{d.price}</div>
          </div>
          <div style={{ fontFamily: 'var(--font-arabic)', direction: 'rtl', opacity: 0.55, fontSize: 16, marginTop: 2 }}>{d.urdu}</div>
          <div style={{ marginTop: 8, fontSize: 14, opacity: 0.75 }}>{d.note}</div>
        </div>
      ))}
    </div>
  );
}

function StoryPage({ onNav }) {
  return (
    <div className="route-fade">
      <section className="section" style={{ paddingTop: 160 }}>
        <div className="container">
          <div className="eyebrow">Our Story</div>
          <h1 style={{ marginTop: 16, maxWidth: '14ch' }}>
            From a sandy lot in Satwa <em style={{ fontStyle: 'italic', color: 'var(--register-accent)' }}>to the Museum of the Future.</em>
          </h1>
          <p className="lede" style={{ marginTop: 32, maxWidth: '60ch' }}>
            The Chaudary family arrived from Wazirabad with a brother&rsquo;s loan and zero food-industry experience. Fifty-four years later they run six rooms across Dubai. This is how.
          </p>
        </div>
      </section>

      <section className="section-tight" style={{ paddingTop: 24 }}>
        <div className="container">
          <div className="montage montage-6">
            <figure className="span-2 row-2"><img src="media/exterior-satwa-1.jpg" alt="Satwa fascia" /></figure>
            <figure className="span-2"><img src="media/signage-1.jpg" alt="Signage" /></figure>
            <figure className="span-2"><img src="media/crowd-2.jpg" alt="Packed Satwa room" /></figure>
            <figure className="span-3"><img src="media/karahi-2.jpg" alt="Karahi at the pass" /></figure>
            <figure className="span-3"><img src="media/karahi-4.jpg" alt="Karahi" /></figure>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
          <div>
            <div className="eyebrow">Timeline</div>
            <h2 style={{ marginTop: 8 }}>Forty-seven years, four generations of staff.</h2>
          </div>
          <div className="timeline">
            <div className="timeline-item">
              <div className="year">1970</div>
              <h3>Hameed arrives in the UAE.</h3>
              <p>Chaudary Abdul Hameed leaves Wazirabad, Punjab. Works odd jobs around the new city — including a stint at Toyota — saving and watching the Satwa lot fill up with construction lorries and South Asian workers eating from whatever they could find.</p>
            </div>
            <div className="timeline-item">
              <div className="year">1978</div>
              <h3>Ravi opens in Al Satwa.</h3>
              <p>Hameed borrows AED 27,000 from his brother and opens a fifteen-staff room on a sandy stretch of Al Dhiyafa Road. He names it after the River Ravi, which runs through Lahore and his home district. Karak chai costs AED 2.</p>
            </div>
            <div className="timeline-item">
              <div className="year">2010</div>
              <h3>Anthony Bourdain films at Satwa.</h3>
              <p>The international food-travel discovery that takes Ravi from an expat insider tip to a name tourists arrive in Dubai already knowing.</p>
            </div>
            <div className="timeline-item">
              <div className="year">2019–2020</div>
              <h3>The pandemic and the second generation.</h3>
              <p>Waheed (US-educated, the managing director), Waqar and Waseem keep the restaurant alive through 2020. &ldquo;The UAE is home to us — inshallah, we will bounce back.&rdquo;</p>
            </div>
            <div className="timeline-item">
              <div className="year">June 2022</div>
              <h3>The Adidas drop.</h3>
              <p>Adidas Originals picks eleven community restaurants worldwide for the &ldquo;Adilicious&rdquo; series. Ravi is the only one from the Gulf, India and Pakistan. AED 549 retail. Sold out in hours. Resold for AED 44,000. Hameed calls it &ldquo;the proudest moment of my life.&rdquo;</p>
            </div>
            <div className="timeline-item">
              <div className="year">July 2022</div>
              <h3>AP wire syndicates the story globally.</h3>
              <p>&ldquo;Popular Pakistani restaurant stands test of time in Dubai&rdquo; runs in The Washington Post, WRAL, Borneo Bulletin and others.</p>
            </div>
            <div className="timeline-item">
              <div className="year">January 2026</div>
              <h3>Sheikh Zayed Road opens.</h3>
              <p>The first fine-dining Ravi in forty-seven years. Marble floors. Walnut chairs. Indoor and outdoor seating opposite the Museum of the Future. Same nihari. Same karahi. Same family.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ravi-ink)', color: 'var(--ravi-paper)' }}>
        <div className="container">
          <div className="eyebrow" style={{ color: 'var(--ravi-green-neon)' }}>Quotes from the founder</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 24 }} className="quote-grid">
            <style>{` @media (max-width: 900px) { .quote-grid { grid-template-columns: 1fr !important; } } `}</style>
            {window.RAVI.QUOTES.map((q, i) => (
              <div key={i}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontStyle: 'italic', fontWeight: 300, lineHeight: 1.25 }}>&ldquo;{q.text}&rdquo;</div>
                <div style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', opacity: 0.6, textTransform: 'uppercase' }}>{q.author}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="eyebrow">Who has eaten here</div>
          <h2 style={{ marginTop: 8, maxWidth: '20ch' }}>Where a cabbie and a CEO sit at the same table.</h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: '60ch' }}>
            The Satwa room has fed taxi drivers, off-duty chefs, expat families, Snoop Dogg, Ryan Tedder, Rishi Kapoor, John Abraham, and the Pakistan national cricket team — usually all in the same week.
          </p>
          <div className="tag-row" style={{ marginTop: 24 }}>
            {window.RAVI.CELEBRITY_DINERS.map((c, i) => <span key={i} className="chip">{c}</span>)}
          </div>
        </div>
      </section>
    </div>
  );
}

function VisitPage({ onNav }) {
  return (
    <div className="route-fade">
      <section className="section" style={{ paddingTop: 160 }}>
        <div className="container">
          <div className="eyebrow">Visit</div>
          <h1 style={{ marginTop: 16 }}>Come hungry.</h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: '60ch' }}>
            Six rooms. Six addresses. One halal kitchen. Here&rsquo;s everything you need before you walk in.
          </p>
        </div>
      </section>

      <section className="section-tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="visit-grid">
            <div className="visit-card">
              <div className="num">01</div>
              <h3>How to arrive</h3>
              <p>Satwa is taxi territory — street parking is paid RTA only and tight. Karama has BurJuman&rsquo;s paid lot across the road. Al Nahda has building parking. SZR has valet from 18:00.</p>
            </div>
            <div className="visit-card">
              <div className="num">02</div>
              <h3>Dress code</h3>
              <p>Satwa, Karama, Al Nahda, Al Rigga: come as you are — overalls and suits at the same table is the point. Sheikh Zayed Road: smart casual.</p>
            </div>
            <div className="visit-card">
              <div className="num">03</div>
              <h3>What we serve</h3>
              <p>Pakistani · Punjabi · Mughlai. No Continental, no Chinese, no fusion. Halal certified. Vegetarian and vegan friendly across every section.</p>
            </div>
            <div className="visit-card">
              <div className="num">04</div>
              <h3>Languages</h3>
              <p>Urdu, Punjabi, Hindi, Arabic, English — at every counter, every shift, since 1978.</p>
            </div>
            <div className="visit-card">
              <div className="num">05</div>
              <h3>Accessibility</h3>
              <p>Satwa is a single ground floor, doorway 86 cm — usable with assistance. Karama, Al Nahda and SZR have step-free entry and accessible washrooms.</p>
            </div>
            <div className="visit-card">
              <div className="num">06</div>
              <h3>Cards & cash</h3>
              <p>Cards accepted at every branch. Cash welcome. WhatsApp orders to <span style={{ fontFamily: 'var(--font-mono)' }}>+971 58 965 0044</span>.</p>
            </div>
          </div>

          <div className="price-flag" style={{ marginTop: 48 }}>
            <span style={{ fontWeight: 600 }}>Note:</span>
            <span>Prices on this site are indicative. The single most important content gap in this launch is that no official menu PDF exists online anywhere. The family will photograph the printed menu on the next Satwa visit and publish AED prices per dish for every section.</span>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage, StoryPage, VisitPage });
