// ============================================================
// Aroos Damascus — extra home/menu/branch sections
// Each section is bilingual, sourced from the research brief.
// ============================================================

function MezzeBasketSection() {
  const { lang } = useLang();
  const items = [
    { en: "Romaine, herbs, mint, basil", ar: "خس وأعشاب ونعناع وحبق" },
    { en: "Cucumber, tomato, radish", ar: "خيار وطماطم وفجل" },
    { en: "Cured olives, pickled turnip", ar: "زيتون مكبوس ولفت مخلّل" },
    { en: "Carrots, lemon, pomegranate", ar: "جزر وليمون ورمّان" },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="mezze-grid">
          <div className="mezze-photo" style={{ backgroundImage: "url(media/mezze-1.jpg)" }}>
            <div className="mezze-stamp">
              <span>{lang === "en" ? "On the house" : "على حساب البيت"}</span>
              <small>{lang === "en" ? "Always · since 1980" : "دائماً · منذ 1980"}</small>
            </div>
          </div>
          <div>
            <span className="eyebrow">{lang === "en" ? "The basket" : "السلّة"}</span>
            <h2 className="display" style={{ marginTop: 16 }}>
              {lang === "en"
                ? "The basket arrives before you order."
                : "السلّة تصل قبل أن تطلب."}
            </h2>
            <p className="lede" style={{ marginTop: 18 }}>
              {lang === "en"
                ? "Fresh vegetables, herbs, olives and pickles — set on the table the moment you sit down. It has been complimentary, always, for forty-five years. That is how Damascus welcomes a guest."
                : "خضار طازجة وأعشاب وزيتون ومخلّل — توضع على الطاولة لحظة جلوسك. هي على حساب البيت، دائماً، منذ خمسة وأربعين عاماً. هكذا تستقبل دمشق ضيوفها."}
            </p>
            <ul className="basket-list">
              {items.map((row, i) => (
                <li key={i}>
                  <span className="num">{String(i + 1).padStart(2, "0")}</span>
                  <span>{pick(row, lang)}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function CharcoalProcessSection() {
  const { lang } = useLang();
  const steps = [
    {
      n: "01",
      title: { en: "The marinade", ar: "التتبيلة" },
      body: {
        en: "Chicken sits in yogurt, garlic and lemon overnight. Lamb is mixed with parsley, onion and Aleppo pepper just before skewering.",
        ar: "الدجاج ينقع في اللبن والثوم والليمون ليلة كاملة. اللحم يُخلط بالبقدونس والبصل وفلفل حلب قبل التشكيل مباشرة.",
      },
    },
    {
      n: "02",
      title: { en: "The charcoal", ar: "الفحم" },
      body: {
        en: "We use only natural lump charcoal — no briquettes, no gas. The grill is lit at 11:00 and tended without break until 03:00.",
        ar: "نستخدم الفحم الطبيعي فقط — لا قوالب ولا غاز. تُشعل الشواية الحادية عشرة صباحاً وتُتابع بلا انقطاع حتى الثالثة فجراً.",
      },
    },
    {
      n: "03",
      title: { en: "The table", ar: "الطاولة" },
      body: {
        en: "Skewers go from fire to plate without a holding step — pulled at the kitchen window, walked twelve metres, set down hot.",
        ar: "تذهب الأسياخ من النار إلى الصحن مباشرة — تُسحب عند نافذة المطبخ، وتُحمل اثني عشر متراً، وتُوضع ساخنة على الطاولة.",
      },
    },
  ];
  return (
    <section className="section charcoal-section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end", marginBottom: 56 }}>
          <div>
            <span className="eyebrow">{lang === "en" ? "How we grill" : "كيف نشوي"}</span>
            <h2 className="display" style={{ marginTop: 16 }}>
              {lang === "en" ? "Three moves between the marinade and the table." : "ثلاث خطوات بين التتبيلة والطاولة."}
            </h2>
          </div>
          <p className="lede" style={{ alignSelf: "end" }}>
            {lang === "en"
              ? "The charcoal grill sits at the kitchen window so the skewers go straight from the fire to your table — twelve metres, no holding."
              : "شواية الفحم عند نافذة المطبخ، فتذهب الأسياخ من النار إلى طاولتك مباشرة — اثني عشر متراً، بلا انتظار."}
          </p>
        </div>

        <div className="process-row">
          {steps.map((s) => (
            <div key={s.n} className="process-card">
              <span className="num">{s.n}</span>
              <h3 className="display">{pick(s.title, lang)}</h3>
              <p>{pick(s.body, lang)}</p>
            </div>
          ))}
        </div>

        <div className="charcoal-photo" style={{ backgroundImage: "url(media/charcoal-station-1.png)" }}>
          <div className="charcoal-photo-caption">
            <span>{lang === "en" ? "The grill window · Al Muraqqabat" : "نافذة الشواية · المرقّبات"}</span>
            <small>{lang === "en" ? "07:00 — 03:00, every day, since 1980" : "07:00 — 03:00، يومياً، منذ 1980"}</small>
          </div>
        </div>
      </div>
    </section>
  );
}

function FamilyFeastSection({ setRoute }) {
  const { lang } = useLang();
  const platters = [
    {
      title: { en: "Mixed Charcoal Grill", ar: "مشكّل مشاوي" },
      desc: {
        en: "Shish tawook, kofta, lamb kebab and arayes on one platter. Feeds three to four.",
        ar: "شيش طاووق، كفتة، كباب لحم، وعرايس على صحن واحد. يكفي ثلاثة إلى أربعة أشخاص.",
      },
      price: 60,
      photo: "media/mixed-grill-3.jpg",
      serves: { en: "3–4 guests", ar: "3–4 ضيوف" },
    },
    {
      title: { en: "Mixed Seafood Platter", ar: "مشكّل بحري" },
      desc: {
        en: "Whole charcoal fish, grilled prawns, fried calamari, hammour fillet — Levantine-style.",
        ar: "سمك كامل على الفحم، روبيان مشوي، كاليماري مقلي، فيليه هامور — على الطريقة الشامية.",
      },
      price: 80,
      photo: "media/dish-8.jpg",
      serves: { en: "3–4 guests", ar: "3–4 ضيوف" },
    },
    {
      title: { en: "Mezza Feast (cold + hot)", ar: "وليمة مازة (باردة وساخنة)" },
      desc: {
        en: "Hummus, moutabbal, tabbouleh, fattoush, kebbeh, sambousek, halloumi, batata harra.",
        ar: "حمّص، متبّل، تبّولة، فتّوش، كبّة، سمبوسك، حلّوم، بطاطا حارّة.",
      },
      price: 65,
      photo: "media/food-spread-1.jpg",
      serves: { en: "4–6 guests", ar: "4–6 ضيوف" },
    },
  ];

  return (
    <section className="section feast-section">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 48 }}>
          <div>
            <span className="eyebrow">{lang === "en" ? "For the table" : "للطاولة"}</span>
            <h2 className="display" style={{ marginTop: 16, maxWidth: "16ch" }}>
              {lang === "en" ? "Order for the table. Eat with your hands." : "اطلب للطاولة. كُل بيديك."}
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: "44ch" }}>
            {lang === "en"
              ? "Three platters built for a table of four. Add a basket of saj bread, two jugs of lemon mint, and the kunafa for after."
              : "ثلاث صواني للطاولة المؤلّفة من أربعة. أضف سلّة خبز صاج، إبريقَي ليمون بالنعناع، وكنافة للنهاية."}
          </p>
        </div>

        <div className="feast-grid">
          {platters.map((p) => (
            <div key={p.title.en} className="feast-card">
              <div className="feast-photo" style={{ backgroundImage: `url(${p.photo})` }}>
                <span className="feast-serves">{pick(p.serves, lang)}</span>
              </div>
              <div className="feast-body">
                <h3 className="display">{pick(p.title, lang)}</h3>
                <p>{pick(p.desc, lang)}</p>
                <div className="feast-footer">
                  <div className="feast-price">
                    <span className="aed">AED</span> {p.price}
                  </div>
                  <button className="btn ghost sm" onClick={() => setRoute("menu")}>
                    {lang === "en" ? "Details" : "التفاصيل"} <ArrowRight />
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="catering-strip">
          <div>
            <span className="eyebrow">{lang === "en" ? "Catering · groups of 20+" : "تموين · مجموعات 20+"}</span>
            <h3 className="display" style={{ marginTop: 10 }}>
              {lang === "en"
                ? "We cater weddings, majlis nights and office iftars."
                : "نخدم الأعراس وليالي المجلس وإفطارات المكاتب."}
            </h3>
            <p style={{ marginTop: 10, color: "var(--ink-60)", maxWidth: "52ch" }}>
              {lang === "en"
                ? "Tell us the headcount, the venue and the hour. We arrive with the basket already packed, the grill on the way, and a bilingual server lead."
                : "أخبرنا بالعدد والمكان والساعة. نصل والسلّة جاهزة، والشواية في الطريق، ومسؤول طاقم خدمة يتحدث اللغتين."}
            </p>
          </div>
          <div className="catering-actions">
            <a className="btn primary" href="https://wa.me/971565041754" target="_blank" rel="noreferrer">
              <span style={{ width: 14, height: 14, display: "inline-flex" }}><WhatsAppIcon /></span>
              {lang === "en" ? "WhatsApp catering" : "راسل قسم التموين"}
            </a>
            <a className="btn ghost" href="tel:+971600500022">
              {lang === "en" ? "Call 600 500022" : "اتصل 600 500022"}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function NeighbourhoodSection() {
  const { lang } = useLang();
  const cards = [
    {
      title: { en: "Salah Al Din metro", ar: "مترو صلاح الدين" },
      meta: { en: "6 min walk · Green Line", ar: "6 دقائق سيراً · الخط الأخضر" },
      body: {
        en: "Exit toward Al Muraqqabat Road, walk south past the pharmacy, our awning is on the right.",
        ar: "الخروج باتجاه شارع المرقّبات، السير جنوباً بعد الصيدلية، الواجهة على اليمين.",
      },
      icon: <MetroIcon className="" />,
    },
    {
      title: { en: "Tell the taxi", ar: "اشرح للسائق" },
      meta: { en: "All drivers know it", ar: "كل السائقين يعرفونها" },
      body: {
        en: "“عروس دمشق, شارع المرقّبات” — every Deira driver knows the corner.",
        ar: "«عروس دمشق، شارع المرقّبات» — يعرف الزاوية كل سائق في ديرة.",
      },
      icon: <CarIcon className="" />,
    },
    {
      title: { en: "Shisha around the corner", ar: "أرجيلة على الزاوية" },
      meta: { en: "Reef Mall · 4 min", ar: "ريف مول · 4 دقائق" },
      body: {
        en: "Several shisha cafés sit two blocks south on Al Jazira Street — start at the patio, finish there.",
        ar: "تجد عدّة مقاهٍ على شارع الجزيرة جنوباً — ابدأ على الرصيف، وانهِ هناك.",
      },
      icon: <MapPinIcon className="" />,
    },
    {
      title: { en: "After the last metro", ar: "بعد آخر مترو" },
      meta: { en: "23:55 onward", ar: "من 23:55" },
      body: {
        en: "Careem and Uber drop at the awning. We keep the patio lit and the charcoal going until 03:00.",
        ar: "كريم وأوبر يُنزلان عند الواجهة. نُبقي الرصيف مضاءً والفحم مشتعلاً حتى الثالثة فجراً.",
      },
      icon: <ClockIcon className="" />,
    },
  ];

  return (
    <section className="section neighbourhood-section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "end", marginBottom: 48 }}>
          <div>
            <span className="eyebrow">{lang === "en" ? "Old Deira" : "ديرة القديمة"}</span>
            <h2 className="display" style={{ marginTop: 16 }}>
              {lang === "en"
                ? "How to find us, how to leave, what's around the corner."
                : "كيف تصل إلينا، كيف تغادر، وما حولنا."}
            </h2>
          </div>
          <p className="lede" style={{ alignSelf: "end" }}>
            {lang === "en"
              ? "Our patio is the best seat in the neighbourhood — here's the rest of the night."
              : "رصيفنا أجمل مقعد في الحيّ — وهذه بقية الليلة."}
          </p>
        </div>

        <div className="neighbour-grid">
          {cards.map((c, i) => (
            <div key={i} className="neighbour-card">
              <div className="neighbour-icon">{c.icon}</div>
              <div className="neighbour-meta">{pick(c.meta, lang)}</div>
              <h4 className="display">{pick(c.title, lang)}</h4>
              <p>{pick(c.body, lang)}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function GallerySection() {
  const { lang } = useLang();
  const shots = [
    { src: "media/mezze-1.jpg", h: 320, label: { en: "Mezze basket", ar: "سلّة المازة" } },
    { src: "media/kebab-1.jpg", h: 260, label: { en: "Shish tawook", ar: "شيش طاووق" } },
    { src: "media/interior-1.jpg", h: 380, label: { en: "Lantern light", ar: "ضوء الفانوس" } },
    { src: "media/mixed-grill-3.jpg", h: 300, label: { en: "Mixed grill", ar: "مشكّل مشاوي" } },
    { src: "media/fattoush-1.jpg", h: 240, label: { en: "Fattoush", ar: "فتّوش" } },
    { src: "media/dish-6.jpg", h: 340, label: { en: "Kunafa", ar: "كنافة" } },
    { src: "media/manakeesh-1.jpg", h: 260, label: { en: "Manakeesh", ar: "مناقيش" } },
    { src: "media/interior-2.jpg", h: 320, label: { en: "Dining room", ar: "الصالة" } },
  ];
  return (
    <section className="section gallery-section">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 36 }}>
          <div>
            <span className="eyebrow">{lang === "en" ? "Tonight, in pictures" : "الليلة، بالصور"}</span>
            <h2 className="display" style={{ marginTop: 16 }}>
              {lang === "en" ? "From the table." : "من الطاولة."}
            </h2>
          </div>
          <a className="btn ghost" href="https://instagram.com/aroosdamascus" target="_blank" rel="noreferrer">
            @aroosdamascus <ArrowRight />
          </a>
        </div>

        <div className="masonry">
          {shots.map((s, i) => (
            <figure key={i} className="masonry-item" style={{ backgroundImage: `url(${s.src})`, height: s.h }}>
              <figcaption>{pick(s.label, lang)}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const { lang } = useLang();
  const [open, setOpen] = useState(0);
  const faqs = [
    {
      q: { en: "Are you open this late?", ar: "هل أنتم مفتوحون في هذا الوقت؟" },
      a: { en: "Every day, 07:00 to 03:00. Sharjah closes for Friday prayer between 11:30 and 13:00, then runs straight through to 04:00.", ar: "يومياً من 07:00 حتى 03:00. فرع الشارقة يُغلق ساعة الجمعة بين 11:30 و13:00، ثم يفتح حتى 04:00." },
    },
    {
      q: { en: "Do you take walk-ins?", ar: "هل تستقبلون بدون حجز؟" },
      a: { en: "Always. The patio fills up after 21:00 — book a table if you want the front edge.", ar: "دائماً. يمتلئ الرصيف بعد التاسعة مساءً — احجز إن أردت الصف الأمامي." },
    },
    {
      q: { en: "Is the kitchen halal?", ar: "هل المطبخ حلال؟" },
      a: { en: "Entirely. All meat is halal-certified. We do not serve alcohol at any branch.", ar: "بالكامل. جميع اللحوم حاصلة على شهادة حلال. لا تُقدَّم مشروبات كحولية في أي فرع." },
    },
    {
      q: { en: "Kids menu? High chairs?", ar: "قائمة أطفال؟ كراسٍ مرتفعة؟" },
      a: { en: "Both. Quarter portions of shish tawook and kofta, mild kebab, sambousek, plain rice. Six high chairs at each branch.", ar: "كلاهما. أنصاف وأرباع من شيش طاووق وكفتة، كباب لطيف، سمبوسك، رز سادة. ستة كراسٍ مرتفعة في كل فرع." },
    },
    {
      q: { en: "What about parking?", ar: "ماذا عن المواقف؟" },
      a: { en: "Muraqqabat — street parking + valet from 19:00. Sheikh Zayed — building valet. Sharjah — free lot, plenty of street.", ar: "المرقّبات — موقف الشارع وخدمة الصف من 19:00. الشيخ زايد — صف داخل المبنى. الشارقة — موقف مجاني، ومواقف الشارع متوفرة." },
    },
    {
      q: { en: "Can we order to deliver?", ar: "هل يمكن الطلب توصيلاً؟" },
      a: { en: "WhatsApp the kitchen at +971 56 504 1754 or order on Talabat (Muraqqabat #602733, Sheikh Zayed #708378). Late-night orders go out until 02:30.", ar: "راسل المطبخ على واتساب +971 56 504 1754 أو اطلب عبر طلبات (المرقّبات 602733، الشيخ زايد 708378). الطلبات الليلية تستمر حتى 02:30." },
    },
  ];

  return (
    <section className="section faq-section">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="eyebrow" style={{ justifyContent: "center" }}>FAQ</span>
          <h2 className="display" style={{ marginTop: 16, maxWidth: "20ch", marginInline: "auto" }}>
            {lang === "en" ? "Six things people ask before they call." : "ستة أسئلة قبل الاتصال."}
          </h2>
        </div>
        <div className="faq-list">
          {faqs.map((f, i) => (
            <div key={i} className={`faq-row ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{pick(f.q, lang)}</span>
                <span className="faq-plus">{open === i ? "−" : "+"}</span>
              </button>
              <div className="faq-a-wrap">
                <p className="faq-a">{pick(f.a, lang)}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Build-a-feast for the Menu page
function BuildAFeastSection({ setRoute }) {
  const { lang } = useLang();
  const feasts = [
    {
      title: { en: "Table for 2", ar: "طاولة لاثنين" },
      total: 95,
      items: [
        { en: "Hummus Beiruti", ar: "حمّص بيروتي", p: 15 },
        { en: "Fattoush", ar: "فتّوش", p: 15 },
        { en: "Shish Tawook", ar: "شيش طاووق", p: 30 },
        { en: "Arayes", ar: "عرايس", p: 25 },
        { en: "Kunafa", ar: "كنافة", p: 15 },
      ],
    },
    {
      title: { en: "Table for 4", ar: "طاولة لأربعة" },
      total: 195,
      items: [
        { en: "Mezza Feast (cold + hot)", ar: "وليمة مازة", p: 65 },
        { en: "Mixed Charcoal Grill", ar: "مشكّل مشاوي", p: 60 },
        { en: "Hummus Abu Alhoul", ar: "حمّص أبو الهول", p: 25 },
        { en: "Kunafa + Baklava", ar: "كنافة وبقلاوة", p: 27 },
        { en: "Lemon mint (jug)", ar: "ليمون بالنعناع (إبريق)", p: 18 },
      ],
    },
    {
      title: { en: "Late-night for 2", ar: "ليلة متأخرة لاثنين" },
      total: 68,
      items: [
        { en: "Beef Shawarma sandwich", ar: "سندويش شاورما لحم", p: 12 },
        { en: "Arayes", ar: "عرايس", p: 25 },
        { en: "Lemon mint", ar: "ليمون بالنعناع", p: 12 },
        { en: "Mixed Arabic Sweets", ar: "حلويات عربية مشكّلة", p: 19 },
      ],
    },
  ];
  return (
    <section className="section feast-section" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="divider-star" style={{ marginBottom: 40 }}><RubElHizb /></div>
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <span className="eyebrow" style={{ justifyContent: "center" }}>{lang === "en" ? "Build a feast" : "اختر وليمتك"}</span>
          <h2 className="display" style={{ marginTop: 14, maxWidth: "22ch", marginInline: "auto" }}>
            {lang === "en"
              ? "Three suggested orders, written by the host."
              : "ثلاث وصفات للطلب، اقترحها المضيف."}
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="feast-suggest">
          {feasts.map((f) => (
            <div key={f.title.en} className="feast-suggest-card">
              <span className="eyebrow" style={{ color: "var(--olive)" }}>{pick(f.title, lang)}</span>
              <ul>
                {f.items.map((it, i) => (
                  <li key={i}>
                    <span>{lang === "en" ? it.en : it.ar}</span>
                    <span className="p">AED {it.p}</span>
                  </li>
                ))}
              </ul>
              <div className="feast-total">
                <span>{lang === "en" ? "Total" : "المجموع"}</span>
                <strong>AED {f.total}</strong>
              </div>
              <button className="btn dark sm" onClick={() => setRoute("reserve")}>
                {lang === "en" ? "Reserve this table" : "احجز هذه الطاولة"} <ArrowRight />
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Location map panel for Branches page
function BranchesMapBand() {
  const { lang } = useLang();
  return (
    <section className="section branches-map-band">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "center" }} className="map-band-grid">
          <div>
            <span className="eyebrow">{lang === "en" ? "Across the UAE" : "في الإمارات"}</span>
            <h2 className="display" style={{ marginTop: 16 }}>
              {lang === "en"
                ? "From Sharjah to the Marina — one kitchen, one menu, one hour of charcoal."
                : "من الشارقة حتى المارينا — مطبخ واحد، قائمة واحدة، ساعة فحم واحدة."}
            </h2>
            <p className="lede" style={{ marginTop: 18 }}>
              {lang === "en"
                ? "Three houses set along the Dubai–Sharjah axis. Pick by where the night ends, not where it starts."
                : "ثلاثة بيوت على محور دبي–الشارقة. اختر بحسب وجهتك في نهاية الليلة، لا بدايتها."}
            </p>
            <ul className="map-legend">
              <li><span className="pin pin-1" /> {lang === "en" ? "Al Muraqqabat" : "المرقّبات"}<span className="km">{lang === "en" ? "Deira" : "ديرة"}</span></li>
              <li><span className="pin pin-2" /> {lang === "en" ? "Sheikh Zayed Rd" : "شارع الشيخ زايد"}<span className="km">{lang === "en" ? "Al Manara" : "المنارة"}</span></li>
              <li><span className="pin pin-3" /> {lang === "en" ? "Al Qasimia" : "القاسمية"}<span className="km">{lang === "en" ? "Sharjah" : "الشارقة"}</span></li>
            </ul>
          </div>
          <div className="map-canvas">
            <svg viewBox="0 0 600 420" preserveAspectRatio="xMidYMid meet">
              {/* Coastline stylised */}
              <defs>
                <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(124,31,31,0.04)" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect width="600" height="420" fill="url(#grid)" />
              <path d="M -10 350 C 80 320 140 290 200 270 C 280 240 360 200 460 160 C 520 140 580 130 610 130" fill="none" stroke="var(--gold-antique)" strokeWidth="2" strokeDasharray="4 6" opacity="0.6"/>
              <path d="M 60 120 C 140 130 220 160 300 200 C 380 240 450 270 540 320 L 540 420 L 60 420 Z" fill="rgba(201,162,75,0.08)" stroke="rgba(201,162,75,0.4)" strokeWidth="1"/>
              {/* Sharjah pin */}
              <g transform="translate(490 145)">
                <circle r="22" fill="rgba(124,31,31,0.12)" />
                <circle r="11" fill="var(--red-damascus)" />
                <text x="22" y="6" fontFamily="Inter" fontSize="12" fill="var(--charcoal)" fontWeight="600">{lang === "en" ? "Sharjah" : "الشارقة"}</text>
              </g>
              {/* Muraqqabat pin */}
              <g transform="translate(340 220)">
                <circle r="32" fill="rgba(124,31,31,0.14)" />
                <circle r="14" fill="var(--red-damascus)" />
                <text x="22" y="6" fontFamily="Inter" fontSize="14" fill="var(--charcoal)" fontWeight="700">{lang === "en" ? "Al Muraqqabat" : "المرقّبات"}</text>
                <text x="22" y="22" fontFamily="Inter" fontSize="10" fill="var(--ink-60)">{lang === "en" ? "Flagship · 1980" : "الفرع الأم · 1980"}</text>
              </g>
              {/* Sheikh Zayed pin */}
              <g transform="translate(180 310)">
                <circle r="22" fill="rgba(124,31,31,0.12)" />
                <circle r="11" fill="var(--red-damascus)" />
                <text x="-12" y="34" fontFamily="Inter" fontSize="12" fill="var(--charcoal)" fontWeight="600">{lang === "en" ? "Sheikh Zayed Rd" : "الشيخ زايد"}</text>
              </g>
              {/* Compass */}
              <g transform="translate(540 60)" opacity="0.5">
                <circle r="18" fill="none" stroke="var(--gold-antique)" strokeWidth="1"/>
                <path d="M 0 -12 L 4 0 L 0 12 L -4 0 Z" fill="var(--gold-antique)"/>
                <text x="0" y="-22" textAnchor="middle" fontFamily="Inter" fontSize="9" fill="var(--gold-antique)" letterSpacing="2">N</text>
              </g>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
}

window.MezzeBasketSection = MezzeBasketSection;
window.CharcoalProcessSection = CharcoalProcessSection;
window.FamilyFeastSection = FamilyFeastSection;
window.NeighbourhoodSection = NeighbourhoodSection;
window.GallerySection = GallerySection;
window.FAQSection = FAQSection;
window.BuildAFeastSection = BuildAFeastSection;
window.BranchesMapBand = BranchesMapBand;