// Ravi Restaurant — Press page + SZR Reservation form

function PressPage({ onNav }) {
  const press = window.RAVI.PRESS;
  return (
    <div className="route-fade">
      <section className="section" style={{ paddingTop: 160 }}>
        <div className="container">
          <div className="eyebrow">Press</div>
          <h1 style={{ marginTop: 16 }}>
            Bourdain. Adidas.<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--register-accent)' }}>The AP wire.</em>
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: '60ch' }}>
            Forty-seven years of earned media — and until today, no place to read it. Every story, in one wall.
          </p>
        </div>
      </section>

      <section className="section-tight" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="press-grid">
            {press.map((p, i) => (
              <a key={i} href={p.href || '#'} target="_blank" rel="noreferrer"
                 className={`press-card ${p.feature ? 'feature' : ''}`}>
                <div className="tag">{p.tag} · {p.date}</div>
                <div className="outlet">{p.outlet}</div>
                <div className="headline">{p.headline}</div>
                {p.note && <div style={{ fontSize: 14, opacity: 0.8, marginTop: 8 }}>{p.note}</div>}
                <div className="date" style={{ marginTop: 'auto' }}>Read more <Icon name="external" size={12} /></div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="sneaker-callout">
            <div>
              <div className="eyebrow" style={{ color: 'var(--ravi-green-neon)' }}>The single biggest visual asset Ravi owns</div>
              <h2 style={{ marginTop: 12, color: '#fff' }}>
                A canteen in Satwa.<br/>
                <em style={{ fontStyle: 'italic', color: 'var(--ravi-green-neon)' }}>A global sneaker drop.</em>
              </h2>
              <p style={{ marginTop: 18, maxWidth: '56ch', opacity: 0.85 }}>
                Adidas Originals&rsquo; &ldquo;Adilicious&rdquo; series picked eleven community restaurants from the entire world. The Superstar Ravi was the only entry from the Gulf, India and Pakistan. Hand-drawn map of the river on the insole. Six Ravi dishes printed on the tongue — English on one side, Arabic on the other. AED 549 retail. Gone within hours of dropping.
              </p>
              <div style={{ marginTop: 24, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, color: 'var(--ravi-green-neon)' }}>
                &ldquo;The proudest moment of my life.&rdquo; — Hameed
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              <div>
                <div className="stat">AED 549</div>
                <div className="note-flag" style={{ opacity: 0.8, marginTop: 4 }}>Retail · sold out in hours</div>
              </div>
              <div>
                <div className="stat">AED 44K</div>
                <div className="note-flag" style={{ opacity: 0.8, marginTop: 4 }}>Resale on the secondary market</div>
              </div>
              <div>
                <div className="stat">11</div>
                <div className="note-flag" style={{ opacity: 0.8, marginTop: 4 }}>Restaurants picked worldwide</div>
              </div>
              <div>
                <div className="stat">1</div>
                <div className="note-flag" style={{ opacity: 0.8, marginTop: 4 }}>From the Gulf · India · Pakistan</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--register-tint)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64 }} className="press-cta-grid">
            <style>{` @media (max-width: 900px) { .press-cta-grid { grid-template-columns: 1fr !important; } } `}</style>
            <div>
              <div className="eyebrow">For media</div>
              <h2 style={{ marginTop: 8 }}>Press kit, founder portraits and high-res photography on request.</h2>
            </div>
            <div>
              <p style={{ marginTop: 0, fontSize: 18 }}>
                Email <a className="body-link" href="mailto:officialravirestaurants@gmail.com">officialravirestaurants@gmail.com</a> for the press kit, founder bios, branch fact sheets, and a release-cleared photo library across Satwa and SZR.
              </p>
              <div className="ctas" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 18 }}>
                <a className="btn btn-primary" href="mailto:officialravirestaurants@gmail.com">Request the press kit</a>
                <a className="btn btn-ghost" href="https://www.instagram.com/ravirestaurantsuae/" target="_blank" rel="noreferrer">Follow on Instagram</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ---------- SZR Reservation ----------

function ReservePage({ onNav, setRegister }) {
  React.useEffect(() => { setRegister('szr'); }, []);

  const [form, setForm] = React.useState({
    name: '', phone: '', email: '',
    date: '', time: '20:00', party: 2, notes: '',
  });
  const [errors, setErrors] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const today = (() => {
    const d = new Date(); d.setDate(d.getDate() + 1);
    return d.toISOString().slice(0, 10);
  })();
  React.useEffect(() => { if (!form.date) update('date', today); }, []);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = '1';
    if (!/^[+\d\s\-()]{7,}$/.test(form.phone)) e.phone = '1';
    if (!form.date) e.date = '1';
    if (!form.time) e.time = '1';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const waHref = () => {
    const lines = [
      `Hi Ravi — I&rsquo;d like to book a table at SZR.`,
      `Name: ${form.name}`,
      `Party: ${form.party}`,
      `Date: ${form.date}`,
      `Time: ${form.time}`,
      form.notes ? `Notes: ${form.notes}` : null,
    ].filter(Boolean).join('\n');
    return 'https://wa.me/971589650044?text=' + encodeURIComponent(lines);
  };

  const times = ['12:30','13:00','13:30','14:00','14:30','15:00','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00'];

  return (
    <div className="route-fade">
      <section className="section" style={{ paddingTop: 160 }}>
        <div className="container">
          <div className="eyebrow">Sheikh Zayed Road · Reserve</div>
          <h1 style={{ marginTop: 16 }}>
            A table opposite the<br />
            <em style={{ fontStyle: 'italic', color: 'var(--register-accent)' }}>Museum of the Future.</em>
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: '60ch' }}>
            Indoor and outdoor seating. Smart casual. We&rsquo;ll confirm by WhatsApp within an hour. The same nihari you know from Satwa, plated more carefully.
          </p>
        </div>
      </section>

      <section className="section-tight" style={{ paddingTop: 16 }}>
        <div className="container">
          <div className="reservation">
            {!submitted ? (
              <form className="form-card" onSubmit={submit}>
                <h3 style={{ marginBottom: 24 }}>Your reservation</h3>

                <div className="field-row">
                  <div className={`field ${errors.name ? 'error' : ''}`}>
                    <label>Full name</label>
                    <input type="text" value={form.name} onChange={e => update('name', e.target.value)} placeholder="e.g. Waheed Chaudary" />
                  </div>
                  <div className={`field ${errors.phone ? 'error' : ''}`}>
                    <label>Phone (for confirmation)</label>
                    <input type="tel" value={form.phone} onChange={e => update('phone', e.target.value)} placeholder="+971 …" />
                  </div>
                </div>

                <div className="field">
                  <label>Email (optional)</label>
                  <input type="email" value={form.email} onChange={e => update('email', e.target.value)} placeholder="you@example.com" />
                </div>

                <div className="field-row">
                  <div className={`field ${errors.date ? 'error' : ''}`}>
                    <label>Date</label>
                    <input type="date" min={today} value={form.date} onChange={e => update('date', e.target.value)} />
                  </div>
                  <div className={`field ${errors.time ? 'error' : ''}`}>
                    <label>Time</label>
                    <select value={form.time} onChange={e => update('time', e.target.value)}>
                      {times.map(t => <option key={t}>{t}</option>)}
                    </select>
                  </div>
                </div>

                <div className="field">
                  <label>Party size</label>
                  <div className="party-picker">
                    {[1,2,3,4,5,6,7,8].map(n => (
                      <button type="button" key={n}
                        className={form.party === n ? 'active' : ''}
                        onClick={() => update('party', n)}>{n}</button>
                    ))}
                    <button type="button" className={form.party === 9 ? 'active' : ''} onClick={() => update('party', 9)} style={{ width: 'auto', padding: '0 14px' }}>9+</button>
                  </div>
                </div>

                <div className="field">
                  <label>Anything we should know?</label>
                  <textarea rows="3" value={form.notes} onChange={e => update('notes', e.target.value)} placeholder="Birthday, allergies, dietary preferences, outdoor preference…" />
                </div>

                <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap', alignItems: 'center' }}>
                  <button type="submit" className="btn btn-primary">Request the table <Icon name="arrow" size={14} /></button>
                  <a className="btn btn-ghost" href={waHref()} target="_blank" rel="noreferrer">
                    <Icon name="wa" size={14} />Send via WhatsApp instead
                  </a>
                </div>

                <div style={{ marginTop: 24, fontSize: 12, opacity: 0.6, fontFamily: 'var(--font-mono)' }}>
                  Confirmation within 60 minutes during opening hours. SZR opens 12:30–15:30 and 19:00–23:30.
                </div>
              </form>
            ) : (
              <div className="form-success">
                <div className="eyebrow" style={{ color: 'var(--ravi-green-neon)' }}>Request received</div>
                <h2 style={{ marginTop: 16, color: '#fff' }}>
                  Thank you, {form.name.split(' ')[0]}.<br />
                  <em style={{ fontStyle: 'italic', color: 'var(--ravi-green-neon)' }}>We&rsquo;ll be in touch within the hour.</em>
                </h2>
                <p style={{ marginTop: 24, opacity: 0.85 }}>
                  We&rsquo;ve sent your request to the SZR host station and to <span style={{ fontFamily: 'var(--font-mono)' }}>officialravirestaurants@gmail.com</span>. A confirmation will follow by WhatsApp on {form.phone}.
                </p>
                <div style={{ marginTop: 24, padding: 20, background: 'rgba(255,255,255,0.08)', borderRadius: 4 }}>
                  <div className="eyebrow" style={{ opacity: 0.7 }}>Your request</div>
                  <div style={{ marginTop: 8, fontFamily: 'var(--font-display)', fontSize: 24 }}>
                    {form.party} {form.party === 1 ? 'guest' : 'guests'} · {form.date} · {form.time}
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 12, marginTop: 24, flexWrap: 'wrap' }}>
                  <button className="btn btn-light" onClick={() => onNav('home')}>Back to home</button>
                  <button className="btn btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.3)' }} onClick={() => { setSubmitted(false); setForm({ name:'', phone:'', email:'', date: today, time:'20:00', party: 2, notes:''}); }}>Make another</button>
                </div>
              </div>
            )}

            <div>
              <div style={{ position: 'relative', aspectRatio: '4/5', overflow: 'hidden', borderRadius: 4 }}>
                <img src="media/szr-placeholder.svg" alt="Sheikh Zayed Road — photoshoot pending" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ marginTop: 24 }}>
                <div className="eyebrow">The room</div>
                <h3 style={{ marginTop: 8 }}>Marble · walnut · indoor and outdoor seating.</h3>
                <p style={{ opacity: 0.85, marginTop: 12 }}>
                  Opposite the Museum of the Future on Sheikh Zayed Road. Valet from 18:00. Smart casual — long sleeves, closed shoes for men after sunset; the room runs at 22°C.
                </p>
                <dl style={{ display: 'grid', gap: 12, marginTop: 24 }}>
                  <div>
                    <div className="eyebrow"><Icon name="pin" size={12} /> Address</div>
                    <div style={{ marginTop: 4 }}>Sheikh Zayed Road, opposite the Museum of the Future, Dubai</div>
                  </div>
                  <div>
                    <div className="eyebrow"><Icon name="clock" size={12} /> Hours</div>
                    <div style={{ marginTop: 4 }}>Lunch 12:30 – 15:30 · Dinner 19:00 – 23:30</div>
                  </div>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PressPage, ReservePage });