// Catering, Karachi Grill, Order, Press

// ============ CATERING ============
function CateringPage({ setPage }) {
  const [form, setForm] = React.useState({ event: "Wedding", heads: 100, date: "", branch: "Karama One", name: "", phone: "", notes: "" });
  const [submitted, setSubmitted] = React.useState(false);
  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const valid = form.name.trim() && form.phone.trim() && form.date;
  return (
    <main className="catering">
      <section className="catering__hero">
        <div className="container catering__hero-grid">
          <div>
            <div className="kicker kicker--cream">Catering · Bulk · Family Packs</div>
            <h1 className="h1 catering__h">100,000 meals a day.<br/>Yours just needs to be on the schedule.</h1>
            <p className="lead lead--cream">Weddings, labour camps, corporate floors, family weekends — we cook for all of them.</p>
            <div className="catering__stats">
              <Stat n="100K" l="meals / day" />
              <Stat n="22" l="branches feeding in" />
              <Stat n="ISO" l="9001 · 22000 · HACCP" />
            </div>
          </div>
          <div className="catering__cuts">
            <div className="cut cut--1"><img src="assets/biryani-mutton.jpg" alt="" /></div>
            <div className="cut cut--2"><img src="assets/karahi-tikka.jpg" alt="" /></div>
            <div className="cut cut--3"><img src="assets/chicken-tikka.jpg" alt="" /></div>
            <div className="cut cut--4"><img src="assets/paratha.jpg" alt="" /></div>
          </div>
        </div>
      </section>

      <section className="section section--cream">
        <div className="container">
          <SectionHead kicker="Family packs · price-anchored" title="Pricing you can hand to a relative on WhatsApp." sub="No surprises. Per-branch availability." />
          <div className="pack-grid">
            <PackCard title="Royal Mix Grill" subtitle="4 pax · BBQ assortment" price={102} bullets={["Mix of kebabs, tikka, wings", "Two breads, salad, raita", "From any BBQ-enabled branch"]} />
            <PackCard title="Peshawari Karahi" subtitle="1 kg · mutton" price={123} bullets={["Bone-in slow-cook karahi", "Add roti / naan per head", "Group of 4–5"]} />
            <PackCard title="Peshawari Karahi" subtitle="1 kg · chicken" price={110} bullets={["Tomato-base peshawari", "Add roti / naan per head", "Group of 4–5"]} />
            <PackCard title="KDR Combo Tray" subtitle="Per head · single tray" price={"26 – 31"} bullets={["Rice / biryani / curry + sides", "Built for delivery & camps", "Mix combos in one order"]} />
          </div>
          <p className="fine">Bulk pricing for 50+ heads is quoted per event. Use the form below.</p>
        </div>
      </section>

      <section className="section">
        <div className="container catering__form-grid">
          <div>
            <div className="kicker">Enquiry · we reply within 24 hours</div>
            <h2 className="h2">Tell us what you're feeding.</h2>
            <p className="lead">A real person at the Al Qusais head office reads every form. We confirm the menu, branch, and timing — not a chatbot.</p>
            <ul className="reasons">
              <li><span className="reasons__dot"></span> Central kitchen, ISO-certified, HACCP — auditable food safety.</li>
              <li><span className="reasons__dot"></span> Logistics from Al Qusais Industrial 3 to anywhere in the UAE.</li>
              <li><span className="reasons__dot"></span> Halal, naturally. Vegetarian trays on request.</li>
              <li><span className="reasons__dot"></span> Labour-camp pricing schedules available on request.</li>
            </ul>
          </div>
          <form className="form" onSubmit={(e) => { e.preventDefault(); if (valid) setSubmitted(true); }}>
            {submitted ? (
              <div className="form__success">
                <div className="form__success-mark">✓</div>
                <h3>Thank you, {form.name.split(" ")[0]}.</h3>
                <p>We'll call <strong>{form.phone}</strong> within 24 hours to confirm.</p>
                <button type="button" className="btn btn--ghost" onClick={() => { setSubmitted(false); setForm({ event: "Wedding", heads: 100, date: "", branch: "Karama One", name: "", phone: "", notes: "" }); }}>Submit another enquiry</button>
              </div>
            ) : (
              <>
                <div className="form__row form__row--2">
                  <label>Event type
                    <select value={form.event} onChange={e => update("event", e.target.value)}>
                      <option>Wedding</option><option>Corporate</option><option>Labour camp</option><option>Family / Aqeeqah</option><option>Party services</option><option>Other</option>
                    </select>
                  </label>
                  <label>Headcount
                    <input type="number" min="20" max="5000" value={form.heads} onChange={e => update("heads", e.target.value)} />
                  </label>
                </div>
                <div className="form__row form__row--2">
                  <label>Event date
                    <input type="date" value={form.date} onChange={e => update("date", e.target.value)} required />
                  </label>
                  <label>Closest branch
                    <select value={form.branch} onChange={e => update("branch", e.target.value)}>
                      {window.BRANCHES.filter(b => !b.isGrill).map(b => <option key={b.id}>{b.name}</option>)}
                    </select>
                  </label>
                </div>
                <div className="form__row form__row--2">
                  <label>Your name<input value={form.name} onChange={e => update("name", e.target.value)} required /></label>
                  <label>Phone<input type="tel" placeholder="+971 …" value={form.phone} onChange={e => update("phone", e.target.value)} required /></label>
                </div>
                <label>Anything else?<textarea rows="3" placeholder="Menu preferences, delivery time, halal-only confirmation…" value={form.notes} onChange={e => update("notes", e.target.value)}></textarea></label>
                <button className="btn btn--primary btn--lg" type="submit" disabled={!valid}>Send enquiry <ArrowIcon /></button>
                <div className="form__fine">By submitting, you agree to be contacted by Karachi Darbar Group on the number you provided.</div>
              </>
            )}
          </form>
        </div>
      </section>
    </main>
  );
}

function PackCard({ title, subtitle, price, bullets }) {
  return (
    <article className="pack">
      <div className="pack__head">
        <h3>{title}</h3>
        <div className="pack__sub">{subtitle}</div>
      </div>
      <div className="pack__price">AED <b>{price}</b></div>
      <ul>{bullets.map((b, i) => <li key={i}>{b}</li>)}</ul>
    </article>
  );
}

// ============ KARACHI GRILL ============
function GrillPage() {
  return (
    <main className="grill">
      <section className="grill__hero">
        <div className="container">
          <div className="kicker kicker--cream">Sister brand · Jumeirah</div>
          <h1 className="h1 grill__h">Same kitchen DNA.<br/>A different room.</h1>
          <p className="lead lead--cream">Karachi Grill is our fusion Indo-Pak fine-dining sibling, at Villa 290 on Jumeirah Beach Road. Built for a different evening, by the same family.</p>
          <a className="btn btn--gold btn--lg" href="https://www.karachigrilluae.com/" target="_blank" rel="noreferrer">Visit karachigrilluae.com <ArrowIcon /></a>
        </div>
      </section>

      <section className="section">
        <div className="container grill__grid">
          <div className="grill__card grill__card--big">
            <img src="assets/tripadvisor-in-dubai.jpg" alt="Karachi Grill dining room" />
            <div className="grill__cap">Villa 290 · the room at night</div>
          </div>
          <div className="grill__card"><img src="assets/karahi-tikka.jpg" alt="" /><div className="grill__cap">Tikka karahi, plated</div></div>
          <div className="grill__card"><img src="assets/storefront-2.jpg" alt="" /><div className="grill__cap">Banquette seating</div></div>
          <div className="grill__card"><img src="assets/biryani-chicken-tikka.jpg" alt="" /><div className="grill__cap">Tikka biryani</div></div>
          <div className="grill__card"><img src="assets/chicken-tikka.jpg" alt="" /><div className="grill__cap">Charcoal tikka</div></div>
          <div className="grill__card"><img src="assets/namkeen-roast.jpg" alt="" /><div className="grill__cap">Namkeen roast</div></div>
          <div className="grill__card"><img src="assets/gulab-jamun.jpg" alt="" /><div className="grill__cap">Gulab jamun</div></div>
        </div>
      </section>

      <section className="section section--cream">
        <div className="container grill__info">
          <div>
            <div className="kicker">Visit</div>
            <h2 className="h2">Villa 290, Jumeirah Beach Road.</h2>
            <p className="lead">Open daily 12:00 PM – 12:00 AM. Reservations recommended Thursdays and Fridays.</p>
            <div className="grill__cta">
              <a className="btn btn--primary" href="tel:+97143440011"><PhoneIcon /> +971 4 344 0011</a>
              <a className="btn btn--ghost" href="mailto:cro@karachigrilluae.com">cro@karachigrilluae.com</a>
            </div>
          </div>
          <div className="map-mock map-mock--big">
            <div className="map-mock__grid"></div>
            <div className="map-mock__pin"><PinIcon /></div>
            <div className="map-mock__caption">Jumeirah 2 · Villa 290 · Beach Road</div>
          </div>
        </div>
      </section>
    </main>
  );
}

// ============ ORDER ============
function OrderPage({ setPage }) {
  const platforms = [
    { name: "Talabat", tag: "Best coverage", color: "#ff5a00", desc: "All 22 branches. Around 1,000 ratings averaging 4.0.", href: "https://www.talabat.com/uae/karachi-darbar" },
    { name: "Deliveroo", tag: "Fastest in Bur Dubai", color: "#00ccbc", desc: "Karama and Fahidi flagships, plus Al Nahda.", href: "https://deliveroo.ae" },
    { name: "Zomato", tag: "Tables & delivery", color: "#e23744", desc: "Listings across Dubai and Sharjah branches.", href: "https://www.zomato.com" },
    { name: "Careem", tag: "Loyalty stack", color: "#0e1c40", desc: "Use Careem Plus credits at most outlets.", href: "https://www.careem.com" },
    { name: "EazyDiner", tag: "Karachi Grill", color: "#1e5b8c", desc: "Reservations and offers at our sister brand.", href: "https://www.eazydiner.com" },
  ];
  return (
    <main className="order">
      <section className="order__hero">
        <div className="container">
          <div className="kicker">Order online · Five platforms · 22 branches</div>
          <h1 className="h1">Pick a platform.<br/>We're on most of them.</h1>
          <p className="lead">Native online ordering is in Phase 2. For now, here's everywhere you can already tap a button.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="order-grid">
            {platforms.map(p => (
              <a key={p.name} className="ord" href={p.href} target="_blank" rel="noreferrer">
                <div className="ord__tag">{p.tag}</div>
                <div className="ord__name" style={{color: p.color}}>{p.name}</div>
                <p className="ord__desc">{p.desc}</p>
                <div className="ord__cta">Open {p.name} <ArrowIcon /></div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--cream">
        <div className="container order-callout">
          <div>
            <div className="kicker kicker--gold">Bulk and family</div>
            <h2 className="h2">Feeding 20+? Skip the app.</h2>
            <p className="lead">WhatsApp the head office. We'll route it to the closest branch and quote per head.</p>
          </div>
          <a className="btn btn--primary btn--lg" href="https://wa.me/97142673131"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.4 5L2 22l5.2-1.4c1.5.8 3.1 1.3 4.8 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg> WhatsApp bulk order</a>
        </div>
      </section>
    </main>
  );
}

// ============ PRESS ============
function PressPage() {
  return (
    <main className="press">
      <section className="press__hero">
        <div className="container">
          <div className="kicker">Press · Reviews · Ratings</div>
          <h1 className="h1">Fifty-two years on the record.</h1>
          <p className="lead">A small selection of what people say. The shortlist; not the highlight reel.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="press-cards">
            {window.PRESS.map((p, i) => (
              <figure key={i} className="press-card">
                <div className="press-card__num">0{i + 1}</div>
                <blockquote>"{p.quote}"</blockquote>
                <figcaption>— {p.outlet} · {p.year}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--cream">
        <div className="container">
          <SectionHead kicker="By the numbers" title="What scale looks like in public." />
          <div className="press-stats">
            <BigStat n="4.8 / 5" l="Tripadvisor — Muteena branch" sub="The 24-hour flagship in Old Deira." />
            <BigStat n="~1,000" l="Talabat ratings, group-wide" sub="Averaging 4.0 / 5 across 22 outlets." />
            <BigStat n="52 yrs" l="continuously operating" sub="One Deira restaurant became a three-emirate group." />
            <BigStat n="22 branches" l="across Dubai, Sharjah, Ajman" sub="Plus Karachi Grill in Jumeirah." />
          </div>
        </div>
      </section>
    </main>
  );
}

function BigStat({ n, l, sub }) {
  return (
    <div className="bigstat">
      <div className="bigstat__n">{n}</div>
      <div className="bigstat__l">{l}</div>
      <div className="bigstat__sub">{sub}</div>
    </div>
  );
}

Object.assign(window, { CateringPage, GrillPage, OrderPage, PressPage });