// ============================================================
// Aroos Damascus — Home + Story screens
// ============================================================

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

  const signatures = [
    {
      en: "Mixed Charcoal Grill",
      ar: "مشكّل مشاوي",
      price: 60,
      photo: "media/mixed-grill-2.jpg",
      desc: { en: "Shish tawook, kofta, lamb kebab, arayes — for the table.", ar: "شيش طاووق، كفتة، كباب لحم، عرايس — للطاولة." },
    },
    {
      en: "Hummus Beiruti",
      ar: "حمّص بيروتي",
      price: 15,
      photo: "media/mezze-2.jpg",
      desc: { en: "Tahini, lemon, parsley, chilli — the table starter.", ar: "طحينة، ليمون، بقدونس، فلفل — افتتاحية الطاولة." },
    },
    {
      en: "Kunafa",
      ar: "كنافة",
      price: 15,
      photo: "media/dish-6.jpg",
      desc: { en: "Cheese pull, hot syrup, crushed pistachio.", ar: "جبنة، قطر ساخن، فستق مدقوق." },
    },
  ];

  return (
    <>
      {/* Hero */}
      <section className="hero">
        <RubElHizb className="hero-bg-motif" />
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-eyebrow-row">
                <span className="hero-badge">
                  <span className="dot" />
                  {pick(COPY.heroEyebrow, lang)}
                </span>
                <LateBadge override={tweaks.lateOverride} />
              </div>

              <h1 className="display">
                {pick(COPY.heroTitle, lang)}
                <span className="alt-locale">
                  {pick(COPY.heroTitle, lang === "en" ? "ar" : "en")}
                </span>
              </h1>

              <p className="hero-sub">{pick(COPY.heroSub, lang)}</p>

              <div className="hero-ctas">
                <button className="btn primary lg" onClick={() => setRoute("reserve")}>
                  {pick(COPY.cta.reserve, lang)} <ArrowRight />
                </button>
                <button className="btn ghost lg" onClick={() => setRoute("menu")}>
                  {pick(COPY.cta.seeMenu, lang)}
                </button>
              </div>
            </div>

            <div className="hero-collage">
              <div className="img img-main" />
              <div
                className="img img-secondary"
                style={{ backgroundImage: "url(media/interior-1.jpg)" }}
              />
              <div className="img-stamp">
                <span className="big">45</span>
                <small>{lang === "en" ? "Years · Since 1980" : "عاماً · منذ 1980"}</small>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="hairline" />

      {/* Signature dishes */}
      <section className="section">
        <div className="container">
          <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", flexWrap: "wrap", gap: 24, marginBottom: 40 }}>
            <div>
              <span className="eyebrow">{lang === "en" ? "What to order" : "ماذا تطلب"}</span>
              <h2 className="display" style={{ marginTop: 12 }}>
                {lang === "en" ? "Three dishes the table always orders." : "ثلاثة أطباق تطلبها كل طاولة."}
              </h2>
            </div>
            <button className="btn ghost" onClick={() => setRoute("menu")}>
              {lang === "en" ? "Full menu" : "القائمة الكاملة"} <ArrowRight />
            </button>
          </div>

          <div className="sig-row">
            {signatures.map((s) => (
              <div className="sig-card" key={s.en} onClick={() => setRoute("menu")}>
                <div className="photo" style={{ backgroundImage: `url(${s.photo})` }} />
                <span className="price">AED {s.price}</span>
                <div className="body">
                  <h3 className="display">{lang === "en" ? s.en : s.ar}</h3>
                  <span className="ar-name">{lang === "en" ? s.ar : s.en}</span>
                  <p>{pick(s.desc, lang)}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Press strip */}
      <section className="press">
        <div className="container">
          <div className="press-row">
            <div>
              <p className="press-quote">
                {lang === "en"
                  ? "“The mezze basket is still on the house, and the charcoal still doesn't go out until 3 AM.”"
                  : "«سلّة المازة لا تزال على حساب البيت، والفحم لا ينطفئ قبل الثالثة فجراً.»"}
              </p>
              <span className="press-source">Curly Tales · 2024</span>
            </div>
            <div>
              <p className="press-quote">
                {lang === "en"
                  ? "“Kebab khoush khash — Dubai's must-order skewer.”"
                  : "«كباب خشخاش — أفضل سيخ في دبي.»"}
              </p>
              <span className="press-source">Frying Pan Adventures</span>
            </div>
            <div>
              <p className="press-quote">
                {lang === "en"
                  ? "“An old-Deira institution serving Syrian grills since 1980.”"
                  : "«مؤسسة دمشقية في قلب ديرة منذ 1980.»"}
              </p>
              <span className="press-source">AFAR · Visit Dubai</span>
            </div>
            <div style={{ textAlign: "center" }}>
              <div className="display" style={{ fontSize: 48, color: "var(--red-damascus)" }}>4.4★</div>
              <span className="press-source">Tripadvisor · 673 reviews</span>
              <div className="display" style={{ fontSize: 32, color: "var(--charcoal)", marginTop: 18 }}>18.7K</div>
              <span className="press-source">Google reviews · 4.3★</span>
            </div>
          </div>
        </div>
      </section>

      {/* Mezze basket — the experiential differentiator */}
      <MezzeBasketSection />

      <div className="hairline" />

      {/* Story strip */}
      <section className="section">
        <div className="container">
          <div className="story-grid">
            <div className="story-img" style={{ backgroundImage: "url(media/interior-2.jpg)" }} />
            <div>
              <span className="eyebrow">{lang === "en" ? "Our Story" : "حكايتنا"}</span>
              <h2 className="display" style={{ marginTop: 12 }}>
                {lang === "en"
                  ? "Opened on Al Muraqqabat in 1980. We never closed the kitchen."
                  : "افتتحنا على المرقّبات عام 1980. ولم يُغلق المطبخ منذ ذلك الحين."}
              </h2>
              <p className="lede" style={{ marginTop: 18 }}>
                {lang === "en"
                  ? "The complimentary mezze basket, the charcoal that runs until three, the patio that has the best seat in old Deira — all of it has been on the house, on the menu, on the table, for forty-five years."
                  : "سلّة المازة المجانية، الفحم الذي يبقى مشتعلاً حتى الثالثة، طاولة الرصيف التي تطل على ديرة القديمة — كل ذلك على حساب البيت، على القائمة، على الطاولة، منذ خمسة وأربعين عاماً."}
              </p>

              <div className="timeline">
                <div className="timeline-row">
                  <span className="timeline-year">1980</span>
                  <div className="timeline-text">
                    <strong>{lang === "en" ? "Al Muraqqabat opens" : "افتتاح المرقّبات"}</strong>
                    <p>{lang === "en"
                      ? "A Damascene family restaurant on Al Muraqqabat Road, ground floor of the Green Palace Hotel."
                      : "مطعم عائلي دمشقي على شارع المرقّبات، الطابق الأرضي من فندق القصر الأخضر."}</p>
                  </div>
                </div>
                <div className="timeline-row">
                  <span className="timeline-year">2008</span>
                  <div className="timeline-text">
                    <strong>{lang === "en" ? "Sheikh Zayed Road" : "شارع الشيخ زايد"}</strong>
                    <p>{lang === "en"
                      ? "A second house on the Dubai corridor, same charcoal grill, same mezze basket."
                      : "بيت ثانٍ على شارع دبي الرئيسي، الفحم نفسه، وسلّة المازة نفسها."}</p>
                  </div>
                </div>
                <div className="timeline-row">
                  <span className="timeline-year">2017</span>
                  <div className="timeline-text">
                    <strong>{lang === "en" ? "Al Qasimia, Sharjah" : "القاسمية، الشارقة"}</strong>
                    <p>{lang === "en"
                      ? "Crossed the creek with a Friday-split kitchen for the prayer hour."
                      : "عبرنا الخور بمطبخ يفتح بفترتين يوم الجمعة، مع وقت الصلاة."}</p>
                  </div>
                </div>
                <div className="timeline-row">
                  <span className="timeline-year">{lang === "en" ? "Today" : "اليوم"}</span>
                  <div className="timeline-text">
                    <strong>{lang === "en" ? "Three branches, same kitchen" : "ثلاثة فروع، مطبخ واحد"}</strong>
                    <p>{lang === "en"
                      ? "Three UAE branches. The grills still don't stop until 3 AM."
                      : "ثلاثة فروع في الإمارات. ولا تزال المشاوي حتى الثالثة فجراً."}</p>
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 32 }}>
                <button className="btn dark" onClick={() => setRoute("story")}>
                  {lang === "en" ? "Read the full story" : "اقرأ الحكاية كاملة"} <ArrowRight />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Late-night band */}
      <section className="section late-night">
        <div className="container">
          <div className="late-band-grid">
            <div>
              <span className="eyebrow">{lang === "en" ? "After 23:00" : "بعد الحادية عشرة"}</span>
              <h2 className="display" style={{ marginTop: 16 }}>
                {lang === "en" ? "The grills don't stop until 3 AM." : "الفحم لا ينطفئ قبل الثالثة فجراً."}
              </h2>
              <p className="lede" style={{ marginTop: 18 }}>
                {lang === "en"
                  ? "Patio open. Skewers turning. WhatsApp the kitchen and tell the driver, drop me at Aroos Damascus, Al Muraqqabat Road."
                  : "الرصيف مفتوح. الأسياخ تدور. أرسل واتساب إلى المطبخ، وقل للسائق: أنزلني عند عروس دمشق، شارع المرقّبات."}
              </p>
              <div style={{ marginTop: 28, 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>
                <button className="btn ghost lg" style={{ color: "var(--ivory)", borderColor: "rgba(245,239,226,0.3)" }} onClick={() => setRoute("late-night")}>
                  {lang === "en" ? "Late-night details" : "تفاصيل الساعة المتأخرة"}
                </button>
              </div>
            </div>
            <div className="late-stats">
              <div className="late-stat">
                <div className="lbl">{lang === "en" ? "Hours" : "الساعات"}</div>
                <div className="val">07:00 – 03:00</div>
              </div>
              <div className="late-stat">
                <div className="lbl">{lang === "en" ? "Daily" : "يومياً"}</div>
                <div className="val">{lang === "en" ? "20 hrs" : "20 ساعة"}</div>
              </div>
              <div className="late-stat">
                <div className="lbl">{lang === "en" ? "Mezze basket" : "سلّة المازة"}</div>
                <div className="val">{lang === "en" ? "On the house" : "على حساب البيت"}</div>
              </div>
              <div className="late-stat">
                <div className="lbl">{lang === "en" ? "Since" : "منذ"}</div>
                <div className="val">1980</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <CharcoalProcessSection />
      <FamilyFeastSection setRoute={setRoute} />
      <GallerySection />
      <NeighbourhoodSection />
      <FAQSection />
    </>
  );
}

// ---------- Story screen ----------
function StoryScreen({ setRoute }) {
  const { lang } = useLang();
  return (
    <>
      <section className="story-hero container">
        <span className="eyebrow">{lang === "en" ? "Our Story" : "حكايتنا"}</span>
        <h1 className="display" style={{ marginTop: 16 }}>
          {lang === "en"
            ? "Forty-five years on Al Muraqqabat Road."
            : "خمسة وأربعون عاماً في شارع المرقّبات."}
          <span className="alt-locale">
            {lang === "en"
              ? "خمسة وأربعون عاماً في شارع المرقّبات."
              : "Forty-five years on Al Muraqqabat Road."}
          </span>
        </h1>
        <p className="lede" style={{ marginTop: 24, maxWidth: "44ch", marginInline: "auto" }}>
          {lang === "en"
            ? "The mezze basket has been on the house since the first night. The charcoal hasn't gone out since the second."
            : "سلّة المازة على حساب البيت منذ أول ليلة. والفحم لم ينطفئ منذ الليلة الثانية."}
        </p>
      </section>

      <div className="container">
        <div className="story-gallery">
          <div className="img lg" style={{ backgroundImage: "url(media/interior-2.jpg)" }} />
          <div className="img" style={{ backgroundImage: "url(media/mixed-grill-1.jpg)" }} />
          <div className="img" style={{ backgroundImage: "url(media/mezze-1.jpg)" }} />
        </div>

        <div className="story-narrative">
          {lang === "en" ? (
            <>
              <p>The name on the awning, <em>عروس دمشق — the Bride of Damascus</em>, was the proudest thing a Syrian could call a kitchen in 1980. Our founder hung it over a small dining room on Al Muraqqabat Road, ground floor of the Green Palace Hotel, and started doing two things at once: cooking the way Damascus cooks, and staying open later than anyone in Deira.</p>
              <p>Forty-five years on, the dining room is still there. The hummus is still beaten by hand. The charcoal grill is still set up at the kitchen window so the skewers go straight from the fire to the table. And the basket of vegetables, herbs, olives and pickles still arrives before anyone has ordered anything, because that is how Damascus welcomes you to a table.</p>
              <p>Two more houses opened — Sheikh Zayed Road in the 2000s, Al Qasimia in Sharjah after that — but the food is cooked in one kitchen and decided by one family. The mezze basket is the same in all three. The charcoal grill is the same. The hours are the same, give or take Sharjah's Friday prayer split.</p>
              <p>If you are in old Deira after midnight, looking for a charcoal grill, our patio table is the best seat in the neighbourhood. We saved it for you.</p>
            </>
          ) : (
            <>
              <p>اسم اللوحة، <em>عروس دمشق</em>، كان أفخر ما يطلقه سوري على مطبخه عام 1980. علّق مؤسسنا اللوحة فوق صالة صغيرة في شارع المرقّبات، الطابق الأرضي من فندق القصر الأخضر، وبدأ أمرين في وقت واحد: أن يطبخ كما تطبخ دمشق، وأن يبقى مفتوحاً أطول من أي مطعم في ديرة.</p>
              <p>خمسة وأربعون عاماً مرّت، والصالة لا تزال هنا. الحمّص لا يزال يُخفق باليد. شواية الفحم لا تزال عند نافذة المطبخ، فتذهب الأسياخ من النار إلى الطاولة مباشرةً. وسلّة الخضار والأعشاب والزيتون والمخلل لا تزال تصل قبل أن يطلب أحد شيئاً، لأن هكذا تستقبل دمشق ضيوفها.</p>
              <p>بيتان آخران فُتحا — شارع الشيخ زايد في الألفية، ثم القاسمية في الشارقة — لكن الطعام يُطبخ من مطبخ واحد وتقرّره عائلة واحدة. سلّة المازة واحدة في الثلاثة. شواية الفحم واحدة. الساعات واحدة، إلا فترتي يوم الجمعة في الشارقة.</p>
              <p>إن كنت في ديرة القديمة بعد منتصف الليل، تبحث عن شواية فحم، فإن طاولة الرصيف عندنا هي أجمل مقعد في الحيّ. حفظناها لك.</p>
            </>
          )}
        </div>

        <div style={{ marginTop: 64, marginBottom: 64, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          <button className="btn primary lg" onClick={() => setRoute("reserve")}>
            {pick(COPY.cta.reserve, lang)} <ArrowRight />
          </button>
          <button className="btn ghost lg" onClick={() => setRoute("menu")}>
            {pick(COPY.cta.seeMenu, lang)}
          </button>
        </div>
      </div>
    </>
  );
}

window.HomeScreen = HomeScreen;
window.StoryScreen = StoryScreen;