// ============================================================
// Aroos Damascus — Branches + Reserve + Late-Night screens
// ============================================================

const BRANCH_PHOTOS = {
  "muraqqabat": "media/exterior-deira-1.jpg",
  "sheikh-zayed": "media/interior-1.jpg",
  "sharjah": "media/interior-2.jpg",
};

function BranchesScreen({ setRoute }) {
  const { lang } = useLang();

  return (
    <>
      <section className="menu-hero container">
        <span className="eyebrow">{lang === "en" ? "Branches" : "الفروع"}</span>
        <h1 className="display" style={{ marginTop: 16 }}>
          {lang === "en" ? "Three houses, one kitchen." : "ثلاثة بيوت، مطبخ واحد."}
          <span className="alt-locale">
            {lang === "en" ? "ثلاثة بيوت، مطبخ واحد." : "Three houses, one kitchen."}
          </span>
        </h1>
        <p className="lede" style={{ marginTop: 24, maxWidth: "44ch", marginInline: "auto" }}>
          {lang === "en"
            ? "Same hummus, same charcoal, same hours — give or take Sharjah's Friday prayer split."
            : "نفس الحمّص، نفس الفحم، نفس الساعات — إلا فترتي يوم الجمعة في الشارقة."}
        </p>
      </section>

      <BranchesMapBand />

      <div className="container">
        <div className="branch-grid">
          {BRANCHES.map((b) => (
            <article className="branch-card" key={b.id}>
              <div className="photo" style={{ backgroundImage: `url(${BRANCH_PHOTOS[b.id]})` }}>
                <BranchOpenPill branch={b} />
              </div>
              <div className="body">
                <div>
                  <h3 className="display">{pick(b.name, lang)}</h3>
                  <span className="tagline">{pick(b.tagline, lang)}</span>
                </div>

                <div className="branch-meta">
                  <div className="row">
                    <MapPinIcon />
                    <span>{pick(b.address, lang)}</span>
                  </div>
                  <div className="row">
                    <ClockIcon />
                    <span>{pick(b.hours.label, lang)}</span>
                  </div>
                  <div className="row">
                    <PhoneIcon />
                    <a href={`tel:${b.phone.direct.replace(/[^\d+]/g, "")}`}>
                      {b.phone.direct}
                    </a>
                  </div>
                  <div className="row">
                    <MetroIcon />
                    <span>{pick(b.metro, lang)}</span>
                  </div>
                  <div className="row">
                    <CarIcon />
                    <span>{pick(b.parking, lang)}</span>
                  </div>
                </div>

                {b.hours.friSplit && (
                  <div style={{
                    padding: "10px 12px",
                    background: "rgba(124,31,31,0.06)",
                    border: "1px solid rgba(124,31,31,0.18)",
                    borderRadius: 6,
                    fontSize: 12.5,
                    lineHeight: 1.5,
                  }}>
                    <strong style={{ color: "var(--red-damascus)" }}>{lang === "en" ? "Friday split:" : "يوم الجمعة بفترتين:"}</strong>{" "}
                    {b.hours.schedule.slice(1).map((row, i) => (
                      <span key={i}>{pick(row.d, lang)} {row.h}{i === 0 ? " · " : ""}</span>
                    ))}
                  </div>
                )}

                <div className="actions">
                  <button className="btn primary sm" onClick={() => setRoute("reserve")}>
                    {pick(COPY.cta.reserve, lang)}
                  </button>
                  <a className="btn ghost sm" href={`https://www.google.com/maps/search/?api=1&query=${b.coords.lat},${b.coords.lng}`} target="_blank" rel="noreferrer">
                    {pick(COPY.cta.directions, lang)}
                  </a>
                  {b.talabat && (
                    <a className="btn gold sm" href={`https://www.talabat.com/uae/restaurant/${b.talabat}`} target="_blank" rel="noreferrer">
                      Talabat
                    </a>
                  )}
                </div>
              </div>
            </article>
          ))}
        </div>

        {/* Branch comparison strip */}
        <div style={{ marginTop: 80 }}>
          <div className="divider-star"><RubElHizb /></div>
          <h2 className="display" style={{ textAlign: "center", marginTop: 32 }}>
            {lang === "en" ? "Which branch tonight?" : "أي فرع الليلة؟"}
          </h2>
          <p className="lede" style={{ textAlign: "center", maxWidth: "44ch", marginInline: "auto", marginTop: 16 }}>
            {lang === "en"
              ? "Same menu, different mood — pick by where you're starting from."
              : "نفس القائمة، أجواء مختلفة — اختر بحسب مكانك."}
          </p>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 16,
            marginTop: 40,
            fontSize: 14,
          }}>
            {[
              {
                title: { en: "Coming from Bur Dubai?", ar: "من بر دبي؟" },
                rec: { en: "Al Muraqqabat (flagship)", ar: "المرقّبات (الفرع الأم)" },
                why: { en: "Best patio, latest kitchen, walking distance from Salah Al Din metro.", ar: "أجمل رصيف، أطول ساعات، على بُعد سيراً من مترو صلاح الدين." },
              },
              {
                title: { en: "Coming from Marina?", ar: "من المارينا؟" },
                rec: { en: "Sheikh Zayed Road", ar: "شارع الشيخ زايد" },
                why: { en: "Easy parking, fastest from Downtown / Marina, closes at 02:00.", ar: "مواقف سهلة، وأقرب فرع من الداون تاون والمارينا، يُغلق الثانية فجراً." },
              },
              {
                title: { en: "Coming from Sharjah?", ar: "من الشارقة؟" },
                rec: { en: "Al Qasimia", ar: "القاسمية" },
                why: { en: "Local landline, free building parking, Friday split kitchen.", ar: "خط أرضي محلي، موقف مجاني، مطبخ الجمعة بفترتين." },
              },
            ].map((row, i) => (
              <div key={i} style={{
                background: "var(--parchment)",
                padding: "20px 22px",
                border: "1px solid var(--parchment-deep)",
                borderRadius: 4,
              }}>
                <div style={{
                  fontFamily: "var(--font-sans)",
                  fontSize: 11,
                  letterSpacing: "0.15em",
                  textTransform: "uppercase",
                  color: "var(--olive)",
                  marginBottom: 8,
                }}>{pick(row.title, lang)}</div>
                <div className="display" style={{ fontSize: 22, color: "var(--red-damascus)" }}>{pick(row.rec, lang)}</div>
                <p style={{ marginTop: 10, color: "var(--ink-60)", fontSize: 13.5 }}>{pick(row.why, lang)}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}

// ============================================================
// Reserve screen
// ============================================================

function ReserveScreen({ setRoute }) {
  const { lang } = useLang();
  const [form, setForm] = useState({
    branch: "muraqqabat",
    date: "",
    time: "",
    party: 4,
    name: "",
    phone: "",
    email: "",
    notes: "",
  });
  const [submitted, setSubmitted] = useState(null);

  const slots = [
    "12:00", "12:30", "13:00", "13:30", "14:00", "14:30",
    "18:00", "18:30", "19:00", "19:30", "20:00", "20:30",
    "21:00", "21:30", "22:00", "22:30", "23:00", "23:30",
  ];

  const setField = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const canSubmit = form.date && form.time && form.name.trim() && form.phone.trim();

  const onSubmit = (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    setSubmitted({ ...form });
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // Default date = tonight
  useEffect(() => {
    if (!form.date) {
      const d = new Date();
      const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
      setField("date", iso);
    }
  }, []);

  if (submitted) {
    const branchName = pick(BRANCHES.find((b) => b.id === submitted.branch).name, lang);
    return (
      <div className="container" style={{ paddingTop: 140, paddingBottom: 120, maxWidth: 720 }}>
        <div className="success-card">
          <div className="check">✓</div>
          <span className="eyebrow">{lang === "en" ? "Confirmed" : "تم التأكيد"}</span>
          <h2 className="display" style={{ marginTop: 14, fontSize: 40 }}>
            {lang === "en" ? "We've saved you a table." : "حجزنا لك طاولة."}
          </h2>
          <p className="lede" style={{ marginTop: 16 }}>
            {lang === "en"
              ? "A confirmation is on its way. The basket of mezze will be on the table when you arrive."
              : "تأكيد الحجز في طريقه إليك. وستجد سلّة المازة على الطاولة فور وصولك."}
          </p>

          <div style={{
            marginTop: 28,
            background: "var(--ivory)",
            border: "1px solid var(--ink-08)",
            padding: "20px 24px",
            borderRadius: 4,
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 18,
            fontFamily: "var(--font-serif)",
          }}>
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--ink-40)" }}>{lang === "en" ? "Branch" : "الفرع"}</div>
              <div style={{ fontSize: 22, marginTop: 4 }}>{branchName}</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--ink-40)" }}>{lang === "en" ? "Party" : "العدد"}</div>
              <div style={{ fontSize: 22, marginTop: 4 }}>{submitted.party} {lang === "en" ? "guests" : "ضيف"}</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--ink-40)" }}>{lang === "en" ? "Date" : "التاريخ"}</div>
              <div style={{ fontSize: 22, marginTop: 4 }}>{submitted.date}</div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--ink-40)" }}>{lang === "en" ? "Time" : "الوقت"}</div>
              <div style={{ fontSize: 22, marginTop: 4 }}>{submitted.time}</div>
            </div>
          </div>

          <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn primary" onClick={() => setRoute("menu")}>
              {pick(COPY.cta.seeMenu, lang)}
            </button>
            <button className="btn ghost" onClick={() => { setSubmitted(null); setRoute("home"); }}>
              {lang === "en" ? "Back to home" : "العودة للرئيسية"}
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="container" style={{ paddingTop: 140, paddingBottom: 120 }}>
      <div className="reserve-wrap">
        <aside className="reserve-aside">
          <span className="eyebrow">{lang === "en" ? "Reserve" : "احجز"}</span>
          <h1 className="display" style={{ marginTop: 16, fontSize: 64 }}>
            {lang === "en" ? "We'll save you a table." : "سنحفظ لك طاولة."}
            <span className="alt-locale">
              {lang === "en" ? "سنحفظ لك طاولة." : "We'll save you a table."}
            </span>
          </h1>
          <p className="lede" style={{ marginTop: 20 }}>
            {lang === "en"
              ? "Same kitchen, three branches. Pick the one that's closest tonight."
              : "نفس المطبخ، ثلاثة فروع. اختر الأقرب إليك الليلة."}
          </p>

          <div className="aside-img" style={{
            backgroundImage: "url(media/interior-1.jpg)",
            marginTop: 32,
            borderRadius: 2,
            boxShadow: "0 24px 48px -24px rgba(27,27,27,0.3)",
          }} />

          <div style={{
            marginTop: 24,
            padding: 20,
            background: "var(--parchment)",
            border: "1px solid var(--parchment-deep)",
            borderRadius: 2,
            fontStyle: lang === "en" ? "italic" : "normal",
            fontSize: 17,
            lineHeight: 1.5,
            color: "var(--charcoal-soft)",
            fontFamily: lang === "ar" ? "var(--font-arabic-body)" : "var(--font-serif)",
          }}>
            {lang === "en"
              ? "“The basket of mezze arrives before anyone orders anything — that's how Damascus welcomes you.”"
              : "«سلّة المازة تصل قبل أن تطلب — هكذا تستقبلك دمشق.»"}
          </div>
        </aside>

        <form className="reserve-form" onSubmit={onSubmit}>
          <div className="field">
            <label>{lang === "en" ? "Branch" : "الفرع"}</label>
            <div className="branch-radio">
              {BRANCHES.map((b) => (
                <label key={b.id} className={form.branch === b.id ? "on" : ""}>
                  <input
                    type="radio"
                    name="branch"
                    checked={form.branch === b.id}
                    onChange={() => setField("branch", b.id)}
                  />
                  <span>{pick(b.name, lang)}</span>
                  <span className="ar-name">{pick(b.name, lang === "en" ? "ar" : "en")}</span>
                </label>
              ))}
            </div>
          </div>

          <div className="field-row">
            <div className="field">
              <label>{lang === "en" ? "Date" : "التاريخ"}</label>
              <input
                type="date"
                value={form.date}
                onChange={(e) => setField("date", e.target.value)}
                min={new Date().toISOString().slice(0, 10)}
              />
            </div>
            <div className="field">
              <label>{lang === "en" ? "Party size" : "عدد الضيوف"}</label>
              <div className="stepper">
                <button type="button" onClick={() => setField("party", Math.max(1, form.party - 1))}>−</button>
                <span className="val">{form.party}</span>
                <button type="button" onClick={() => setField("party", Math.min(20, form.party + 1))}>+</button>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--ink-40)", marginInlineStart: 12 }}>
                  {lang === "en"
                    ? (form.party >= 10 ? "Large party — we'll call to confirm" : "")
                    : (form.party >= 10 ? "مجموعة كبيرة — سنتواصل للتأكيد" : "")}
                </span>
              </div>
            </div>
          </div>

          <div className="field">
            <label>{lang === "en" ? "Time" : "الوقت"}</label>
            <div className="slot-grid">
              {slots.map((s) => (
                <button
                  key={s}
                  type="button"
                  className={form.time === s ? "on" : ""}
                  onClick={() => setField("time", s)}
                >
                  {s}
                </button>
              ))}
            </div>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--ink-40)", marginTop: 4 }}>
              {lang === "en" ? "Need a later slot? Call 600 500022 — we serve until 03:00." : "بعد الحادية عشرة؟ اتصل على 600 500022 — نقدّم الطعام حتى الثالثة فجراً."}
            </span>
          </div>

          <div className="field-row">
            <div className="field">
              <label>{lang === "en" ? "Name" : "الاسم"}</label>
              <input
                type="text"
                value={form.name}
                onChange={(e) => setField("name", e.target.value)}
                placeholder={lang === "en" ? "Your name" : "اسمك"}
                required
              />
            </div>
            <div className="field">
              <label>{lang === "en" ? "Phone" : "الهاتف"}</label>
              <input
                type="tel"
                value={form.phone}
                onChange={(e) => setField("phone", e.target.value)}
                placeholder="+971 …"
                required
              />
            </div>
          </div>

          <div className="field">
            <label>{lang === "en" ? "Notes (optional)" : "ملاحظات (اختياري)"}</label>
            <textarea
              rows="3"
              value={form.notes}
              onChange={(e) => setField("notes", e.target.value)}
              placeholder={lang === "en" ? "Patio table, kids menu, birthday cake…" : "طاولة على الرصيف، قائمة أطفال، كيكة عيد ميلاد…"}
            />
          </div>

          <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap", marginTop: 8 }}>
            <button type="submit" className="btn primary lg" disabled={!canSubmit} style={!canSubmit ? { opacity: 0.4, cursor: "not-allowed" } : {}}>
              {lang === "en" ? "Confirm reservation" : "تأكيد الحجز"} <ArrowRight />
            </button>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--ink-40)" }}>
              {lang === "en" ? "We'll email & text a confirmation." : "سنرسل تأكيداً بالبريد والرسائل."}
            </span>
          </div>
        </form>
      </div>
    </div>
  );
}

// ============================================================
// Late-night screen
// ============================================================

function LateNightScreen({ setRoute, tweaks }) {
  const { lang } = useLang();

  return (
    <div className="late-page">
      <div className="container" style={{ paddingTop: 160, paddingBottom: 120 }}>
        <LateBadge override={tweaks.lateOverride} />
        <h1 className="display" style={{ marginTop: 28, color: "var(--ivory)", maxWidth: "16ch" }}>
          {lang === "en"
            ? "The grills don't stop until 3 AM."
            : "المشاوي تستمر حتى الثالثة فجراً."}
          <span className="alt-locale" style={{ color: "rgba(245,239,226,0.5)" }}>
            {lang === "en"
              ? "المشاوي تستمر حتى الثالثة فجراً."
              : "The grills don't stop until 3 AM."}
          </span>
        </h1>
        <p className="lede" style={{ maxWidth: "44ch", marginTop: 24 }}>
          {lang === "en"
            ? "Patio open. Skewers turning. The shawarma man is on the spit. Drivers know the corner."
            : "الرصيف مفتوح. الأسياخ تدور. عمّ الشاورما على السيخ. السائقون يعرفون الزاوية."}
        </p>

        <div className="late-meta">
          <div>
            <h4>{lang === "en" ? "Tonight" : "الليلة"}</h4>
            <p>{lang === "en" ? "Patio open · charcoal lit · staff full house" : "الرصيف مفتوح · الفحم مشتعل · طاقم كامل"}</p>
          </div>
          <div>
            <h4>{lang === "en" ? "Order ahead" : "اطلب مسبقاً"}</h4>
            <p>{lang === "en" ? "WhatsApp the kitchen — 56 504 1754" : "راسل المطبخ — 56 504 1754"}</p>
          </div>
          <div>
            <h4>{lang === "en" ? "Tell the driver" : "اشرح للسائق"}</h4>
            <p style={{ fontStyle: lang === "en" ? "italic" : "normal" }}>
              {lang === "en"
                ? "“Drop me at Aroos Damascus, Al Muraqqabat Road.”"
                : "«أنزلني عند عروس دمشق، شارع المرقّبات.»"}
            </p>
          </div>
        </div>

        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48, alignItems: "start" }}>
          <div>
            <span className="eyebrow" style={{ color: "var(--gold-antique)" }}>{lang === "en" ? "Late-night order" : "طلب الليل"}</span>
            <h2 className="display" style={{ marginTop: 12, fontSize: 36, color: "var(--ivory)" }}>
              {lang === "en" ? "What the regulars order after midnight." : "ما يطلبه الزبائن بعد منتصف الليل."}
            </h2>

            <div style={{ marginTop: 32, display: "grid", gap: 14 }}>
              {[
                { en: "Mixed Charcoal Grill · for the table", ar: "مشكّل مشاوي · للطاولة", price: 60 },
                { en: "Arayes · charcoal pita, spiced minced lamb", ar: "عرايس · خبز عربي بلحم متبّل على الفحم", price: 25 },
                { en: "Beef Shawarma sandwich", ar: "سندويش شاورما لحم", price: 12 },
                { en: "Kunafa · hot, with pistachio", ar: "كنافة · ساخنة مع الفستق", price: 15 },
                { en: "Lemon Mint, big jug", ar: "ليمون بالنعناع، إبريق كبير", price: 18 },
              ].map((row) => (
                <div key={row.en} style={{
                  display: "grid",
                  gridTemplateColumns: "1fr auto",
                  alignItems: "baseline",
                  paddingBlock: 12,
                  borderBottom: "1px dashed rgba(245,239,226,0.15)",
                  gap: 14,
                }}>
                  <div>
                    <span style={{ fontFamily: "var(--font-serif)", fontSize: 20, color: "var(--ivory)" }}>
                      {lang === "en" ? row.en : row.ar}
                    </span>
                    <div style={{ fontFamily: "var(--font-arabic-display)", color: "var(--gold-antique)", fontSize: 18, marginTop: 2 }}>
                      {lang === "en" ? row.ar : row.en}
                    </div>
                  </div>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, color: "var(--gold-antique)" }}>
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.1em", color: "rgba(245,239,226,0.45)", marginInlineEnd: 4 }}>AED</span>
                    {row.price}
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn gold lg" href="https://wa.me/971565041754" target="_blank" rel="noreferrer">
                <span style={{ width: 16, height: 16, display: "inline-flex" }}><WhatsAppIcon /></span>
                {lang === "en" ? "WhatsApp the kitchen" : "راسل المطبخ"}
              </a>
              <a className="btn ghost lg" href="tel:+97142213673" style={{ color: "var(--ivory)", borderColor: "rgba(245,239,226,0.3)" }}>
                {lang === "en" ? "Call Muraqqabat" : "اتصل بفرع المرقّبات"}
              </a>
            </div>
          </div>

          <div style={{
            background: "rgba(245,239,226,0.05)",
            border: "1px solid rgba(245,239,226,0.15)",
            borderRadius: 4,
            padding: 32,
          }}>
            <span className="eyebrow" style={{ color: "var(--gold-antique)" }}>{lang === "en" ? "The Muraqqabat patio" : "رصيف المرقّبات"}</span>
            <h3 className="display" style={{ color: "var(--ivory)", marginTop: 12, fontSize: 28 }}>
              {lang === "en"
                ? "The best seat in old Deira after midnight."
                : "أجمل مقعد في ديرة القديمة بعد منتصف الليل."}
            </h3>
            <div style={{
              marginTop: 24,
              aspectRatio: "4/3",
              backgroundImage: "url(media/exterior-deira-1.jpg)",
              backgroundSize: "cover",
              backgroundPosition: "center",
              borderRadius: 2,
              filter: "brightness(0.9) contrast(1.05)",
            }} />
            <div style={{ marginTop: 20, display: "grid", gap: 12, fontSize: 13.5, color: "rgba(245,239,226,0.75)" }}>
              <div style={{ display: "grid", gridTemplateColumns: "22px 1fr", gap: 12 }}>
                <MapPinIcon className="" />
                <span>{lang === "en"
                  ? "Green Palace Hotel, ground floor · Al Muraqqabat Rd × Al Jazira St"
                  : "فندق القصر الأخضر، الطابق الأرضي · شارع المرقّبات وشارع الجزيرة"}</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "22px 1fr", gap: 12 }}>
                <CarIcon className="" />
                <span>{lang === "en"
                  ? "Street parking · valet after 19:00 · drop-off at the awning"
                  : "موقف على الشارع · صف السيارات بعد الساعة 19:00 · إنزال عند الواجهة"}</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "22px 1fr", gap: 12 }}>
                <MetroIcon className="" />
                <span>{lang === "en"
                  ? "Last metro: Salah Al Din 23:55 — taxi after that"
                  : "آخر مترو: صلاح الدين 23:55 — التاكسي بعد ذلك"}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.BranchesScreen = BranchesScreen;
window.ReserveScreen = ReserveScreen;
window.LateNightScreen = LateNightScreen;