// Pages — Home, How it works, Menu

const SPECIES = [
  { id: "hamour", en: "Hammour", ar: "هامور", note: "Grouper · most popular", img: "assets/fish-hamour.png", price: "AED 60–75", stock: true },
  { id: "sheri", en: "Sheri", ar: "شعري", note: "Emperor · local favourite", img: "assets/fish-sheri.png", price: "AED 50–65", stock: true },
  { id: "kofer", en: "Kofer", ar: "كوفر", note: "Mild, white flesh", img: "assets/fish-kofer.png", price: "AED 40–55", stock: true },
  { id: "farsh", en: "Farsh", ar: "فرش", note: "Flatfish · sweet & flaky", img: "assets/fish-farsh.png", price: "AED 45–60", stock: true },
  { id: "seabass", en: "Sea bass", ar: "قاروص", note: "Pan-style, firmer cook", img: "assets/fish-seabass.png", price: "AED 65–80", stock: true },
  { id: "pomfret", en: "Pomfret", ar: "زبيدي", note: "Bony, full of flavour", img: "assets/fish-generic.png", price: "AED 50–70", stock: true },
  { id: "snapper", en: "Red snapper", ar: "نقرور", note: "Whole-fish classic", img: "assets/fish-generic.png", price: "AED 60–75", stock: true },
  { id: "sardines", en: "Sardines", ar: "سردين", note: "When the catch is in", img: "assets/fish-generic.png", price: "AED 35", stock: false },
];

// ─── Home ────────────────────────────────────────────────────────────────────
function Home({ lang, setRoute, heroVariant }) {
  const t = CONTENT[lang];
  return (
    <main>
      <Hero lang={lang} setRoute={setRoute} variant={heroVariant} />

      <CatchBoard lang={lang} />

      {/* How it works (60-second teaser) */}
      <section className="section wrap">
        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 64, alignItems: "end", marginBottom: 36 }}>
          <span className="kicker-label">{lang === "en" ? "01 · The Drill" : "01 · الطريقة"}</span>
          <h2 className="display" style={{ margin: 0 }}>
            {lang === "en"
              ? <>How it works in <em>sixty seconds</em>.</>
              : <>كيف يعمل المطعم في <em>ستين ثانية</em>.</>}
          </h2>
        </div>
        <div className="steps-row">
          {[
            { en: ["Queue", "Counter on the right. Don't push."], ar: ["اطعمة", "المنضدة على اليمين."] },
            { en: ["Point", "Whichever fish off the ice."], ar: ["أشِر", "أي سمكة على الثلج."] },
            { en: ["Pay cash", "No card. No ATM."], ar: ["ادفع نقداً", "لا بطاقات."] },
            { en: ["Sit", "Inside if hot, outside if not."], ar: ["اجلس", "داخلاً أو خارجاً."] },
            { en: ["Wait 25–60 min", "Longer on weekends."], ar: ["انتظر 25–60 د", "أطول في الإجازات."] },
            { en: ["Eat with hands", "That's how it's done."], ar: ["كل بيديك", "هكذا نأكل."] },
          ].map((s, i) => (
            <div key={i} className="step-card">
              <div className="n">{String(i + 1).padStart(2, "0")}</div>
              <h4>{lang === "en" ? s.en[0] : s.ar[0]}</h4>
              <p>{lang === "en" ? s.en[1] : s.ar[1]}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28 }}>
          <button className="btn btn-link" onClick={() => setRoute("how")}>
            {lang === "en" ? "Read the full drill" : "اقرأ التفاصيل"} <ArrowR />
          </button>
        </div>
      </section>

      {/* Press */}
      <section className="section-sm wrap">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18, flexWrap: "wrap", gap: 16 }}>
          <span className="eyebrow">{lang === "en" ? "As written about by" : "كُتب عنّا في"}</span>
          <button className="btn btn-link" onClick={() => setRoute("press")}>
            {lang === "en" ? "See all press" : "كل الصحافة"} <ArrowR />
          </button>
        </div>
        <PressStrip />
      </section>

      {/* Today's catch grid */}
      <section className="section wrap">
        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 64, alignItems: "end", marginBottom: 24 }}>
          <span className="kicker-label">{lang === "en" ? "02 · On Ice" : "02 · على الثلج"}</span>
          <div>
            <h2 className="display" style={{ margin: 0 }}>
              {lang === "en"
                ? <>What's on the <em>counter</em> tonight.</>
                : <>ما هو على <em>المنضدة</em> الليلة.</>}
            </h2>
            <p className="lead" style={{ marginTop: 16, color: "var(--ink-soft)" }}>
              {t.catchSub} {lang === "en" ? "Prices below are " : "الأسعار "}<em>{t.indicative}</em>.
            </p>
          </div>
        </div>

        <div className="species-grid">
          {SPECIES.map((s) => (
            <div className="species" key={s.id}>
              <div className={"availability" + (s.stock ? "" : " out")}>
                {s.stock ? t.inStock : t.soldOut}
              </div>
              <div className="img">
                <img src={s.img} alt={s.en} />
              </div>
              <div>
                <div className="name">{lang === "en" ? s.en : s.ar}</div>
                <div className="ar">{lang === "en" ? s.ar : s.en}</div>
                <div className="price">{s.price} · {t.perPiece}</div>
              </div>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 16, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--ink-soft)" }}>
          {lang === "en"
            ? "WEIGHED AT THE COUNTER · CATCH CHANGES DAILY · UPDATED BY MOOSA"
            : "يُوزن عند المنضدة · يتغير الصيد يومياً"}
        </p>
        <div style={{ marginTop: 28 }}>
          <button className="btn btn-ghost" onClick={() => setRoute("menu")}>
            {lang === "en" ? "See the full menu" : "القائمة كاملة"} <ArrowR />
          </button>
        </div>
      </section>

      {/* The story / pull quote on dark */}
      <section style={{ background: "var(--harbour-blue)", color: "var(--paper)" }}>
        <div className="section wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center" }}>
          <PullQuote src={lang === "en" ? "Tripadvisor · 11k+ reviews · 4.2 ★" : "Tripadvisor · 11 ألف مراجعة"}>
            {lang === "en"
              ? "The best fish and prawns we have ever had. Plastic chairs, the Burj Al Arab over your shoulder, and a whole hammour in front of you."
              : "أفضل سمك وقريدس تذوقناه. كراسي بلاستيكية، برج العرب فوق كتفك، وهامور كامل أمامك."}
          </PullQuote>
          <div style={{ aspectRatio: "4/5", backgroundImage: "url(assets/exterior.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} />
        </div>
      </section>

      {/* Visit teaser */}
      <section className="section wrap">
        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 64, alignItems: "start" }}>
          <span className="kicker-label">{lang === "en" ? "03 · Find Us" : "03 · إعثر علينا"}</span>
          <div>
            <h2 className="display" style={{ margin: 0 }}>
              {lang === "en"
                ? <>Fishing Harbour 2, <em>Umm Suqeim</em>.</>
                : <>مرسى الصيد 2، <em>أم سقيم</em>.</>}
            </h2>
            <div style={{ display: "flex", gap: 48, marginTop: 24, flexWrap: "wrap" }}>
              <div>
                <div className="eyebrow">{lang === "en" ? "Address" : "العنوان"}</div>
                <p style={{ margin: "8px 0 0", fontSize: 16, lineHeight: 1.55 }}>
                  {t.address1}<br />{t.address2}<br />{t.address3}
                </p>
              </div>
              <div>
                <div className="eyebrow">{lang === "en" ? "Status" : "الحالة"}</div>
                <div style={{ marginTop: 12 }}><OpenStatus lang={lang} /></div>
                <p style={{ margin: "12px 0 0", fontSize: 14, color: "var(--ink-soft)" }}>
                  Sat–Thu · 11:30 – 23:30<br />
                  Fri · 13:30 – 23:30 <em style={{ opacity: 0.7 }}>(after prayers)</em>
                </p>
              </div>
              <div>
                <div className="eyebrow">{lang === "en" ? "Walking" : "مشياً"}</div>
                <p style={{ margin: "8px 0 0", fontSize: 14, color: "var(--ink-soft)" }}>
                  Burj Al Arab · 9 min<br />
                  Sunset Beach · 5 min<br />
                  Jumeirah Beach Hotel · 15 min
                </p>
              </div>
            </div>
            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="https://www.google.com/maps/search/?api=1&query=Bu+Qtair+Fish+Restaurant+Umm+Suqeim+Fishing+Harbour+2+Dubai" target="_blank" rel="noreferrer">
                {t.getDirections} <ArrowUR />
              </a>
              <button className="btn btn-ghost" onClick={() => setRoute("visit")}>
                {lang === "en" ? "Parking, buses & bus stops" : "مواقف وحافلات"} <ArrowR />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section className="wrap" style={{ paddingBottom: 96 }}>
        <Gallery />
      </section>
    </main>
  );
}

// ─── Hero (three variants) ──────────────────────────────────────────────────
function Hero({ lang, setRoute, variant }) {
  const t = CONTENT[lang];
  const heroPills = t.heroPills;

  if (variant === "editorial") {
    return (
      <section className="hero variant-editorial">
        <div className="row">
          <div className="copy">
            <span className="eyebrow">EST. 1980s · Fishing Harbour 2 · Dubai</span>
            <h1 className="display">
              {t.heroTitle[0]}<em>{t.heroTitle[1]}</em>{t.heroTitle[2]}<br />
              <span className="display-roman" style={{ fontWeight: 500, fontSize: "0.62em", color: "var(--ink-soft)" }}>
                {t.heroSub}
              </span>
            </h1>
            <p className="lead" style={{ marginTop: 18, color: "var(--ink-soft)" }}>
              {lang === "en"
                ? "You walk in, pick a fish off the ice, pay cash. Twenty minutes later it arrives whole, in our secret masala, with paratha and rice. Eat with your hands."
                : "تدخل، تختار السمكة من الثلج، تدفع نقداً. بعد عشرين دقيقة تصل كاملةً، في تتبيلتنا السرّية، مع البراثا والأرز."}
            </p>
            <HeroPills items={heroPills} />
            <div className="ctas">
              <a className="btn btn-primary" href="https://www.google.com/maps/search/?api=1&query=Bu+Qtair+Fish+Restaurant+Umm+Suqeim+Fishing+Harbour+2+Dubai" target="_blank" rel="noreferrer">{t.getDirections} <ArrowUR /></a>
              <button className="btn btn-ghost" onClick={() => setRoute("how")}>{t.howItWorks} <ArrowR /></button>
            </div>
          </div>
          <div className="photo" style={{ backgroundImage: "url(assets/hero-photoshoot.jpg)" }}>
            <span className="caption">FRIED HAMMOUR · OUR MASALA</span>
          </div>
        </div>
      </section>
    );
  }

  if (variant === "stack") {
    return (
      <section className="hero variant-stack">
        <div className="top">
          <span className="eyebrow">EST. 1980s · UMM SUQEIM · DUBAI</span>
          <h1 className="display">
            {t.heroTitle[0]}<em>{t.heroTitle[1]}</em>{t.heroTitle[2]}
          </h1>
          <p className="lead" style={{ margin: "0 auto 24px", color: "var(--ink-soft)" }}>
            {t.heroSub}
          </p>
          <HeroPills items={heroPills} />
          <div className="ctas" style={{ marginTop: 24 }}>
            <a className="btn btn-primary" href="https://www.google.com/maps/search/?api=1&query=Bu+Qtair+Fish+Restaurant+Umm+Suqeim+Fishing+Harbour+2+Dubai" target="_blank" rel="noreferrer">{t.getDirections} <ArrowUR /></a>
            <button className="btn btn-ghost" onClick={() => setRoute("how")}>{t.howItWorks} <ArrowR /></button>
          </div>
        </div>
        <div className="strip">
          <div style={{ backgroundImage: "url(assets/exterior.jpg)" }} />
          <div style={{ backgroundImage: "url(assets/photo-counter.jpg)" }} />
          <div style={{ backgroundImage: "url(assets/fried-fish-paratha.jpg)" }} />
        </div>
      </section>
    );
  }

  // default — full-bleed
  return (
    <section className="hero">
      <div className="bg" style={{ backgroundImage: "url(assets/hero-photoshoot.jpg)" }} />
      <div className="scrim" />
      <div className="grain" />
      <div className="hero-meta">
        <span className="big">est. 1980s</span>
        25°09'04"N 55°11'34"E<br />
        Fishing Harbour 2 · Dubai<br />
        4.2 ★ · 11k+ reviews
      </div>
      <div className="content">
        <span className="eyebrow" style={{ color: "var(--paper)", opacity: 0.8 }}>
          {lang === "en" ? "Beside the Burj Al Arab" : "بجوار برج العرب"}
        </span>
        <h1 className="display" style={{ marginTop: 16 }}>
          {t.heroTitle[0]}<em>{t.heroTitle[1]}</em>{t.heroTitle[2]}
        </h1>
        <p style={{ fontSize: 20, maxWidth: "46ch", margin: "0 0 8px", opacity: 0.92 }}>
          {t.heroSub}
        </p>
        <HeroPills items={heroPills} />
        <div className="ctas">
          <a className="btn btn-accent" href="https://www.google.com/maps/search/?api=1&query=Bu+Qtair+Fish+Restaurant+Umm+Suqeim+Fishing+Harbour+2+Dubai" target="_blank" rel="noreferrer">{t.getDirections} <ArrowUR /></a>
          <button className="btn btn-inverse" onClick={() => setRoute("how")}>{t.howItWorks} <ArrowR /></button>
        </div>
      </div>
    </section>
  );
}

// ─── How it works full page ──────────────────────────────────────────────────
function HowItWorks({ lang, setRoute }) {
  const t = CONTENT[lang];
  const steps = [
    { en: ["Queue at the counter", "A glass-front display shows the daily catch. Walk in, find the end of the line."], ar: ["اصطف", "العرض الزجاجي يُظهر صيد اليوم. ادخل وقف في الطابور."], meta: lang === "en" ? "~10 MIN ON WEEKENDS" : "~10 د في الإجازات" },
    { en: ["Point at your fish", "Hammour, sheri, pomfret, snapper, sea bass, sardines. Staff will weigh it for you."], ar: ["أشِر إلى سمكتك", "هامور، شعري، زبيدي، نقرور، قاروص، سردين."], meta: lang === "en" ? "WEIGHED AT THE COUNTER" : "تُوزن عند المنضدة" },
    { en: ["Pay cash, upfront", "No cards. No ATM on site. No alcohol. We don't take reservations either — sorry."], ar: ["ادفع نقداً", "لا بطاقات. لا صرف. لا كحول. لا حجوزات."], meta: lang === "en" ? "ATM AT SUNSET BEACH · 5 MIN" : "صراف في شاطئ سنست · 5 د" },
    { en: ["Find a seat", "Inside if it's hot, outside if it's not. Plastic tables. Festoon lights overhead."], ar: ["اجلس", "داخلاً إذا كان الجو حاراً، أو خارجاً."], meta: lang === "en" ? "INDOOR AC · OUTDOOR TERRACE" : "تكييف داخلي · شرفة خارجية" },
    { en: ["Wait 25 to 60 minutes", "The fish is fried to order. On Friday and Saturday evenings expect an hour. Weekday lunch is calmest."], ar: ["انتظر 25 إلى 60 دقيقة", "السمك يُقلى عند الطلب."], meta: lang === "en" ? "QUIETEST · TUE 14:00–17:00" : "أهدأ وقت · الثلاثاء 2–5 م" },
    { en: ["Eat with your hands", "Whole fish arrives with paratha and rice. Coconut curry on the side. That's how it's done here."], ar: ["كل بيديك", "تصل السمكة كاملةً مع البراثا والأرز."], meta: lang === "en" ? "VINEGAR & CHILLI ON THE TABLE" : "الخل والفلفل على الطاولة" },
  ];

  return (
    <main>
      <header className="page-head">
        <span className="crumb">{lang === "en" ? "01 / How it works" : "01 / كيف يعمل"}</span>
        <h1 className="display">
          {lang === "en"
            ? <>Six steps. <em>That's it.</em></>
            : <>ستّ خطوات. <em>فقط.</em></>}
        </h1>
        <p className="lead" style={{ color: "var(--ink-soft)" }}>
          {lang === "en"
            ? "We've been doing the same thing since the 1980s. Nothing on this page is going to surprise you — and that's the point."
            : "نفعل الشيء نفسه منذ الثمانينات."}
        </p>
        <div className="pill-cluster" style={{ marginTop: 20 }}>
          <span className="pill red"><span className="dot" />{lang === "en" ? "Cash only · no ATM on site" : "نقداً فقط"}</span>
          <span className="pill amber"><span className="dot" />{lang === "en" ? "No reservations" : "بدون حجوزات"}</span>
          <span className="pill blue"><span className="dot" />{lang === "en" ? "Halal · no alcohol" : "حلال · بلا كحول"}</span>
        </div>
      </header>

      <section className="section-sm wrap" style={{ paddingTop: 24 }}>
        <div className="steps-large">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="nbig">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <h3>{lang === "en" ? s.en[0] : s.ar[0]}</h3>
                <p>{lang === "en" ? s.en[1] : s.ar[1]}</p>
                <span className="meta">{s.meta}</span>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* The story */}
      <section style={{ background: "var(--paper-deep)" }}>
        <div className="section wrap story">
          <div className="photo" style={{ backgroundImage: "url(assets/exterior.jpg)" }} />
          <div>
            <span className="eyebrow">{lang === "en" ? "The story" : "الحكاية"}</span>
            <h2 className="display" style={{ margin: "12px 0 24px" }}>
              {lang === "en"
                ? <>Al Tayer, Moosa, <em>and the secret masala</em>.</>
                : <>الطاير، موسى، <em>والتتبيلة السرّية</em>.</>}
            </h2>
            <p>
              {lang === "en"
                ? "In the 1980s a man called Al Tayer ran a small shop on the Jumeirah beachfront, serving karak chai and paratha to fishermen and the growing South Asian community. It didn't really take off."
                : "في الثمانينات، كان رجل يُدعى الطاير يدير دكاناً صغيراً على شاطئ جميرا، يبيع الكرك والبراثا للصيادين والجالية الجنوب آسيوية."}
            </p>
            <p>
              {lang === "en"
                ? "Then Moosa — a cook from Kerala — started frying fish for the fishermen in a marinade of salt, turmeric and a secret ingredient he still won't tell anyone. Word spread. The shack moved to a porta-cabin on the beach, then to its current home at Fishing Harbour 2 in 1999."
                : "ثم بدأ موسى — وهو طبّاخ من ولاية كيرالا — يقلي السمك للصيادين بتتبيلة من الملح والكركم ومكوّن سرّي يرفض الإفصاح عنه حتى اليوم."}
            </p>
            <p>
              {lang === "en"
                ? "Bu Qtair means \u201Csweet water\u201D — what fishermen used to wash off the salt after a day at sea. In 2009, Anthony Bourdain filmed here for No Reservations. CNN rebroadcast the segment in 2013. The plastic tables haven't changed."
                : "“بو قطير” تعني المياه العذبة — حيث كان الصيادون يغسلون الملح بعد يوم في البحر."}
            </p>
            <div className="sig">— Moosa · still in the kitchen</div>
          </div>
        </div>
      </section>

      <section className="section wrap" style={{ paddingTop: 64 }}>
        <h3 className="display" style={{ margin: "0 0 24px", maxWidth: "20ch" }}>
          {lang === "en" ? "When to come, when not to come." : "متى تأتي، متى لا تأتي."}
        </h3>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--ink)" }}>
          {[
            { t: lang === "en" ? "Quietest" : "أهدأ", w: lang === "en" ? "Tue–Wed lunch · 14:00–17:00" : "الثلاثاء–الأربعاء غداءً", c: "var(--storefront-green)" },
            { t: lang === "en" ? "Good" : "جيد", w: lang === "en" ? "Weeknight dinners · before 19:00" : "ليالي الأسبوع · قبل 7 م", c: "var(--fry-amber-deep)" },
            { t: lang === "en" ? "Busy" : "مزدحم", w: lang === "en" ? "Fri & Sat · 20:00–23:00 · 60 min wait" : "الجمعة والسبت ليلاً", c: "#B23A2B" },
          ].map((c, i) => (
            <div key={i} style={{ padding: 32, borderLeft: i ? "1px solid var(--ink)" : "0" }}>
              <div className="eyebrow" style={{ color: c.c }}>{c.t}</div>
              <p style={{ margin: "12px 0 0", fontSize: 17 }}>{c.w}</p>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

// ─── Menu ────────────────────────────────────────────────────────────────────
function Menu({ lang, setRoute }) {
  const t = CONTENT[lang];
  return (
    <main>
      <header className="page-head">
        <span className="crumb">{lang === "en" ? "02 / Menu" : "02 / القائمة"}</span>
        <h1 className="display">
          {lang === "en"
            ? <>There <em>is</em> no menu.</>
            : <>لا توجد <em>قائمة</em>.</>}
        </h1>
        <p className="lead" style={{ color: "var(--ink-soft)" }}>
          {lang === "en"
            ? "You walk to the counter, see what's been caught that day, point at what you want. We weigh it, fry it in the house masala, and bring it whole with paratha and rice. This page is a guide — not a price list."
            : "تدخل، تنظر إلى ما تم اصطياده، وتشير إلى ما تريد. نزن، نقلي، نقدّم كاملةً."}
        </p>
        <div className="pill-cluster" style={{ marginTop: 16 }}>
          <span className="pill amber"><span className="dot" />{lang === "en" ? "Prices are indicative — weighed at counter" : "الأسعار تقريبية — تُوزن عند المنضدة"}</span>
          <span className="pill red"><span className="dot" />{lang === "en" ? "Cash only" : "نقداً فقط"}</span>
        </div>
      </header>

      <div className="wrap" style={{ paddingBottom: 96 }}>

        {/* Fish */}
        <section className="menu-section">
          <div className="label">
            <span className="eyebrow">FISH · I</span>
            <h3 className="display">{lang === "en" ? <>Whole, fried in <em>house masala</em>.</> : <>كاملة، مقليّة بتتبيلة <em>البيت</em>.</>}</h3>
            <p>{lang === "en" ? "Salt, turmeric, and a secret ingredient Moosa won't tell you about." : "ملح، كركم، ومكوّن سرّي."}</p>
          </div>
          <div className="menu-grid">
            {SPECIES.map((s) => (
              <div className="menu-item" key={s.id}>
                <div className="thumb"><img src={s.img} alt={s.en} /></div>
                <div className="meta">
                  <div className="row1">
                    <span className="name">{lang === "en" ? s.en : s.ar}</span>
                    <span className="price">{s.price}</span>
                  </div>
                  <span className="desc">{lang === "en" ? `${s.ar} · ${s.note}` : `${s.en} · ${s.note}`}</span>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Prawns */}
        <section className="menu-section">
          <div className="label">
            <span className="eyebrow">PRAWNS · II</span>
            <h3 className="display">{lang === "en" ? <>Large, headed, in the <em>same masala</em>.</> : <>قريدس كبير برأسه.</>}</h3>
            <p>{lang === "en" ? "Bourdain ordered them. So should you." : "طلبها بوردين. اطلبها أنت أيضاً."}</p>
          </div>
          <div className="menu-grid">
            <div className="menu-item">
              <div className="thumb"><img src="assets/prawns.png" alt="Prawns" /></div>
              <div className="meta">
                <div className="row1">
                  <span className="name">{lang === "en" ? "Fried prawns" : "قريدس مقلي"}</span>
                  <span className="price">AED 75 · ½ kg</span>
                </div>
                <span className="desc">{lang === "en" ? "Headed, marinated, deep-fried whole" : "بالرأس، متبّل، مقلي كاملاً"}</span>
              </div>
            </div>
            <div className="menu-item">
              <div className="thumb"><img src="assets/seafood-platter.png" alt="Platter" /></div>
              <div className="meta">
                <div className="row1">
                  <span className="name">{lang === "en" ? "Mixed seafood platter" : "طبق بحري مشكّل"}</span>
                  <span className="price">{lang === "en" ? "ask at counter" : "اسأل المنضدة"}</span>
                </div>
                <span className="desc">{lang === "en" ? "Fish + prawns + sides — share between 2–3" : "سمك + قريدس + سايدز · يكفي 2–3"}</span>
              </div>
            </div>
          </div>
        </section>

        {/* Sides */}
        <section className="menu-section">
          <div className="label">
            <span className="eyebrow">SIDES · III</span>
            <h3 className="display">{lang === "en" ? <>Paratha, rice, <em>coconut curry</em>.</> : <>براثا، أرز، <em>كاري جوز الهند</em>.</>}</h3>
            <p>{lang === "en" ? "Kerala-style Malabar gravy. Tear the paratha with your hands." : "كاري مالابار على الطريقة الكيرالية."}</p>
          </div>
          <div className="menu-list">
            <div className="row"><span className="n">{lang === "en" ? "Malabari paratha" : "براثا مالاباري"}</span><span className="p">AED 2 · {t.perPiece1}</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Steamed rice" : "أرز أبيض"}</span><span className="p">AED 5</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Coconut fish curry" : "كاري السمك بجوز الهند"}</span><span className="p">AED 15</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Paratha + curry combo" : "براثا + كاري"}</span><span className="p">AED 12</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Vinegar & chilli" : "الخل والفلفل"}</span><span className="p">{lang === "en" ? "on the table" : "على الطاولة"}</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Salad" : "سلطة"}</span><span className="p">AED 8</span></div>
          </div>
        </section>

        {/* Drinks */}
        <section className="menu-section">
          <div className="label">
            <span className="eyebrow">DRINKS · IV</span>
            <h3 className="display">{lang === "en" ? <>Karak, juices, <em>nothing else</em>.</> : <>كرك، عصائر، <em>ولا شيء آخر</em>.</>}</h3>
            <p>{lang === "en" ? "No alcohol. The fresh juices and shakes are the highlight." : "بلا كحول. العصائر الطازجة هي الأبرز."}</p>
          </div>
          <div className="menu-list">
            <div className="row"><span className="n">{lang === "en" ? "Karak chai" : "شاي كرك"}</span><span className="p">AED 4</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Fresh lemon mint" : "ليمون بالنعناع"}</span><span className="p">AED 12</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Banana / strawberry shake" : "موز / فراولة"}</span><span className="p">AED 15</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Mango / watermelon" : "مانجو / بطيخ"}</span><span className="p">AED 14</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Pomegranate / passionfruit" : "رمان / باشن فروت"}</span><span className="p">AED 16</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Pineapple / green apple / grape" : "أناناس / تفاح أخضر / عنب"}</span><span className="p">AED 14</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Orange juice" : "عصير برتقال"}</span><span className="p">AED 12</span></div>
            <div className="row"><span className="n">{lang === "en" ? "Soft drinks · water" : "مشروبات غازية · ماء"}</span><span className="p">AED 3–5</span></div>
          </div>
        </section>

        {/* What regulars order */}
        <section className="menu-section" style={{ borderTop: "1px solid var(--ink)" }}>
          <div className="label">
            <span className="eyebrow">{lang === "en" ? "REGULAR ORDER" : "طلب المعتاد"}</span>
            <h3 className="display">{lang === "en" ? <>What <em>regulars</em> ask for.</> : <>ماذا يطلب <em>الزبائن المعتادون</em>.</>}</h3>
          </div>
          <div>
            <p style={{ margin: 0, fontSize: 17, lineHeight: 1.7 }}>
              {lang === "en"
                ? <>One whole <strong>fried sheri</strong>, <strong>½ kg prawns</strong>, three <strong>parathas</strong>, a side of <strong>fish curry</strong>, two cups of <strong>karak</strong>. Feeds two. Around AED 150. Eat with your hands.</>
                : <>سمكة شعري كاملة، نصف كيلو قريدس، ثلاث براثات، صحن كاري سمك، كوبا كرك. يكفي شخصين. ~150 درهم.</>}
            </p>
            <p style={{ margin: "16px 0 0", fontSize: 14, color: "var(--ink-soft)", fontStyle: "italic" }}>
              {lang === "en"
                ? "Bourdain ordered grilled grouper and prawns with coconut curry and paratha. We still have the photo."
                : "طلب بوردين هامور مشوي وقريدس مع الكاري والبراثا."}
            </p>
          </div>
        </section>

      </div>
    </main>
  );
}

Object.assign(window, { Home, Hero, HowItWorks, Menu, SPECIES });