// Pages — Visit, Press, FAQ

function MapPlaceholder({ lang }) {
  // SVG faux-map of Fishing Harbour area
  return (
    <div className="map">
      <svg viewBox="0 0 600 480" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <rect width="600" height="480" fill="#DCE3E0" />
        {/* Water */}
        <path d="M0,140 C140,150 240,80 420,90 C520,95 600,110 600,160 L600,260 C520,250 420,290 280,280 C180,275 80,240 0,250 Z" fill="#A8C7CC" opacity="0.7" />
        <path d="M0,250 C100,260 220,290 360,300 C480,308 600,260 600,260 L600,480 L0,480 Z" fill="#7EAAB1" opacity="0.5" />
        {/* Roads */}
        <line x1="0" y1="360" x2="600" y2="380" stroke="#fff" strokeWidth="6" />
        <line x1="120" y1="0" x2="180" y2="480" stroke="#fff" strokeWidth="4" />
        <line x1="300" y1="0" x2="380" y2="480" stroke="#fff" strokeWidth="5" />
        <line x1="0" y1="200" x2="600" y2="220" stroke="#fff" strokeWidth="3" strokeDasharray="5 5" opacity="0.7" />
        {/* Parks / sand */}
        <rect x="380" y="240" width="120" height="80" fill="#E0D9C2" opacity="0.6" />
        <text x="430" y="285" fontFamily="ui-monospace, monospace" fontSize="10" fill="#7a6f48" textAnchor="middle" letterSpacing="0.1em">SUNSET BEACH</text>
        {/* Burj */}
        <g transform="translate(450, 90)">
          <path d="M0,40 L20,0 L40,40 L30,40 L30,60 L10,60 L10,40 Z" fill="#1F3A4D" />
          <text x="20" y="80" fontFamily="ui-monospace, monospace" fontSize="9" fill="#1F3A4D" textAnchor="middle" letterSpacing="0.08em">BURJ AL ARAB</text>
        </g>
        {/* Marker — Bu Qtair */}
        <g transform="translate(220, 310)">
          <circle r="22" fill="#E8A33A" opacity="0.3" />
          <circle r="10" fill="#E8A33A" stroke="#1F3A4D" strokeWidth="2.5" />
          <text x="0" y="-28" fontFamily="Fraunces, Georgia, serif" fontStyle="italic" fontSize="18" fill="#1F3A4D" textAnchor="middle" fontWeight="700">Bu Qtair</text>
          <text x="0" y="-14" fontFamily="ui-monospace, monospace" fontSize="9" fill="#1F3A4D" textAnchor="middle" letterSpacing="0.08em">FISHING HARBOUR 2</text>
        </g>
        {/* Walking arrow */}
        <path d="M450 120 Q 380 200 240 305" stroke="#1F3A4D" strokeWidth="1.5" fill="none" strokeDasharray="4 4" />
        <text x="350" y="240" fontFamily="ui-monospace, monospace" fontSize="10" fill="#1F3A4D" letterSpacing="0.08em" transform="rotate(20 350 240)">9 MIN WALK</text>
      </svg>
      <a
        href="https://www.google.com/maps/search/?api=1&query=Bu+Qtair+Fish+Restaurant+Umm+Suqeim+Fishing+Harbour+2+Dubai"
        target="_blank"
        rel="noreferrer"
        style={{
          position: "absolute", left: 16, bottom: 16,
          background: "var(--paper)", color: "var(--ink)",
          padding: "10px 14px", fontFamily: "var(--mono)", fontSize: 11,
          letterSpacing: "0.12em", textTransform: "uppercase",
          textDecoration: "none", border: "1px solid var(--ink)"
        }}
      >
        {lang === "en" ? "Open in Google Maps ↗" : "افتح في خرائط جوجل ↗"}
      </a>
    </div>
  );
}

function Visit({ lang, setRoute }) {
  const t = CONTENT[lang];
  const todayIndex = new Date().getDay(); // 0=Sun
  const days = [
    { i: 0, en: "Sunday",    ar: "الأحد",    hr: "11:30 – 23:30" },
    { i: 1, en: "Monday",    ar: "الإثنين",   hr: "11:30 – 23:30" },
    { i: 2, en: "Tuesday",   ar: "الثلاثاء",  hr: "11:30 – 23:30" },
    { i: 3, en: "Wednesday", ar: "الأربعاء",  hr: "11:30 – 23:30" },
    { i: 4, en: "Thursday",  ar: "الخميس",   hr: "11:30 – 23:30" },
    { i: 5, en: "Friday",    ar: "الجمعة",   hr: "13:30 – 23:30" },
    { i: 6, en: "Saturday",  ar: "السبت",    hr: "11:30 – 23:30" },
  ];

  return (
    <main>
      <header className="page-head">
        <span className="crumb">{lang === "en" ? "03 / Visit" : "03 / زيارة"}</span>
        <h1 className="display">
          {lang === "en"
            ? <>Hard to find. <em>Worth the walk.</em></>
            : <>صعب أن تجده. <em>يستحق المشي.</em></>}
        </h1>
        <p className="lead" style={{ color: "var(--ink-soft)" }}>
          {lang === "en"
            ? "We're tucked into Fishing Harbour 2, ten minutes' walk along the water from the Burj Al Arab. Free parking on site. ATM is at Sunset Beach — please bring cash."
            : "نقع في مرسى الصيد 2، عشر دقائق سيراً على الأقدام من برج العرب. مواقف مجانية. الصرّاف في شاطئ سنست."}
        </p>
        <div className="pill-cluster" style={{ marginTop: 16 }}>
          <OpenStatus lang={lang} />
          <span className="pill red"><span className="dot" />{lang === "en" ? "Cash only · no ATM on site" : "نقداً فقط"}</span>
        </div>
      </header>

      <section className="wrap" style={{ paddingBottom: 64 }}>
        <div className="visit-grid">
          <MapPlaceholder lang={lang} />
          <div className="visit-info">
            <span className="eyebrow">{lang === "en" ? "Address" : "العنوان"}</span>
            <p className="addr">
              {t.address1}<br />{t.address2}<br />{t.address3}
            </p>
            <div className="cta-row">
              <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>
              <a className="btn btn-ghost" href="tel:+971557052130">
                {t.callTakeaway}
              </a>
            </div>

            <span className="eyebrow">{lang === "en" ? "Hours" : "ساعات العمل"}</span>
            <table className="hours-table">
              <tbody>
                {days.map((d) => (
                  <tr key={d.i} className={d.i === todayIndex ? "today" : ""}>
                    <td>{lang === "en" ? d.en : d.ar}{d.i === todayIndex && <span style={{ marginLeft: 8, fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.1em", color: "var(--fry-amber-deep)" }}>{lang === "en" ? "TODAY" : "اليوم"}</span>}</td>
                    <td>{d.hr}{d.i === 5 && <em style={{ marginLeft: 6, opacity: 0.7 }}>(after prayers)</em>}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="section-sm wrap">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--ink)" }}>
          {[
            { en: ["From Burj Al Arab", "9 min walk along the harbour side"], ar: ["من برج العرب", "9 دقائق مشياً"], icon: "→" },
            { en: ["From Sunset Beach", "5 min walk"], ar: ["من شاطئ سنست", "5 دقائق"], icon: "→" },
            { en: ["From JBH", "15 min walk"], ar: ["من جي بي إتش", "15 دقيقة"], icon: "→" },
            { en: ["From Downtown", "~20 min taxi"], ar: ["من داون تاون", "~20 دقيقة تاكسي"], icon: "→" },
          ].map((w, i) => (
            <div key={i} style={{ padding: 28, borderLeft: i ? "1px solid var(--ink)" : 0 }}>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 600, fontSize: 24, color: "var(--fry-amber-deep)" }}>{w.icon}</div>
              <div className="eyebrow" style={{ marginTop: 12 }}>{lang === "en" ? w.en[0] : w.ar[0]}</div>
              <p style={{ margin: "8px 0 0", fontSize: 16 }}>{lang === "en" ? w.en[1] : w.ar[1]}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="section wrap" style={{ paddingTop: 64 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 64 }}>
          <div>
            <span className="eyebrow">{lang === "en" ? "Parking" : "المواقف"}</span>
            <h3 className="display" style={{ fontSize: 28, margin: "12px 0 12px" }}>
              {lang === "en" ? <>Free <em>on-site</em>.</> : <>مجاني <em>في الموقع</em>.</>}
            </h3>
            <p style={{ margin: 0, color: "var(--ink-soft)" }}>
              {lang === "en"
                ? "Small free lot at Fishing Harbour 2. Fills up by 19:30 on weekends. Overflow at Sunset Beach is a 3–5 min walk along the corniche."
                : "موقف صغير مجاني في مرسى الصيد 2. ممتلئ بحلول 7:30 م في الإجازات."}
            </p>
          </div>
          <div>
            <span className="eyebrow">{lang === "en" ? "By bus" : "بالحافلة"}</span>
            <h3 className="display" style={{ fontSize: 28, margin: "12px 0 12px" }}>
              {lang === "en" ? <>RTA <em>8 · 81 · 88 · X28</em>.</> : <>آر تي إيه <em>8 · 81 · 88 · X28</em>.</>}
            </h3>
            <p style={{ margin: 0, color: "var(--ink-soft)" }}>
              {lang === "en"
                ? "Get off at Umm Suqeim Beach. 8-minute walk west along the harbour. Nol card works as usual."
                : "انزل في محطة شاطئ أم سقيم. 8 دقائق مشياً."}
            </p>
          </div>
          <div>
            <span className="eyebrow">{lang === "en" ? "By taxi" : "بالتاكسي"}</span>
            <h3 className="display" style={{ fontSize: 28, margin: "12px 0 12px" }}>
              {lang === "en" ? <>Tell them <em>'Fishing Harbour 2'</em>.</> : <>قل لهم <em>'مرسى الصيد 2'</em>.</>}
            </h3>
            <p style={{ margin: 0, color: "var(--ink-soft)" }}>
              {lang === "en"
                ? "Not 'Bu Qtair' — many drivers don't know the name. The harbour is the landmark. ~20 min from Downtown."
                : "ليس 'بو قطير' — الكثير من السائقين لا يعرفون الاسم. المرسى هو المعلم."}
            </p>
          </div>
        </div>
      </section>

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

// ─── Press ───────────────────────────────────────────────────────────────────
function Press({ lang }) {
  const articles = [
    { src: "Anthony Bourdain · No Reservations", year: "2009", quote: lang === "en" ? "Filmed at the original shack on Jumeirah beach. Grilled grouper, prawns, paratha, coconut curry. The episode rebroadcast on CNN in 2013 sent tourists in droves." : "صوّر بوردين هنا عام 2009.", out: "watch the clip" },
    { src: "CNN Travel", year: "2013", quote: lang === "en" ? "Listed Bu Qtair among Dubai's must-eat spots — \"a tin shack frying the freshest fish in town.\" The piece is still the single biggest source of first-time tourist visits." : "أدرجت قناة سي إن إن المطعم ضمن أفضل وجهات الأكل.", out: "read article" },
    { src: "Visit Dubai · Official", year: "—", quote: lang === "en" ? "Featured as a Dubai cultural landmark on the city's official tourism site." : "ضمن المعالم الثقافية في موقع زر دبي الرسمي.", out: "official page" },
    { src: "Emirates.com · Dubai Experience", year: "—", quote: lang === "en" ? "Recommended in the in-flight food guide every year since 2015." : "موصى به في دليل الطعام على متن طيران الإمارات." , out: "see listing" },
    { src: "Curly Tales", year: "2022", quote: lang === "en" ? "\"The best seafood in Dubai\" — a recurring headline since their first visit." : "أفضل مأكولات بحرية في دبي.", out: "read review" },
    { src: "Lovin Dubai · Bourdain Trail", year: "2018", quote: lang === "en" ? "Anchor of their 'Eat where Bourdain ate' city guide. They still link to the original CNN segment." : "ضمن مسار بوردين في دبي.", out: "read piece" },
  ];
  return (
    <main>
      <header className="page-head">
        <span className="crumb">{lang === "en" ? "04 / Press" : "04 / الصحافة"}</span>
        <h1 className="display">
          {lang === "en" ? <>Other people, <em>kind words</em>.</> : <>كلمات لطيفة من الآخرين.</>}
        </h1>
        <p className="lead" style={{ color: "var(--ink-soft)" }}>
          {lang === "en"
            ? "We've never bought an ad. The pieces below are the reason most of you are here. Thank you — and yes, we still have the photo of Bourdain at table 4."
            : "لم نشترِ إعلاناً قط. هذه القصص هي السبب الذي جاء بمعظمكم."}
        </p>
      </header>
      <section className="wrap section-sm">
        <PressStrip />
      </section>
      <section className="wrap section-sm">
        <div className="press-articles">
          {articles.map((a, i) => (
            <article className="press-card" key={i}>
              <span className="src">{a.src} {a.year && <span style={{ color: "var(--ink-soft)" }}>· {a.year}</span>}</span>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.55 }}>{a.quote}</p>
              <a className="meta" href="#" onClick={(e) => e.preventDefault()}>{a.out.toUpperCase()} ↗</a>
            </article>
          ))}
        </div>
      </section>

      <section style={{ background: "var(--ink)", color: "var(--paper)" }}>
        <div className="section wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
            <div>
              <span className="eyebrow" style={{ color: "var(--concrete-soft)" }}>{lang === "en" ? "Press kit" : "ملف الصحافة"}</span>
              <h2 className="display" style={{ margin: "16px 0 16px", color: "var(--paper)" }}>
                {lang === "en" ? <>Hi-res photos, <em>history</em>, fact sheet.</> : <>صور عالية الجودة، تاريخ، ورقة حقائق.</>}
              </h2>
              <p style={{ maxWidth: "44ch", margin: "0 0 24px", color: "var(--concrete-soft)" }}>
                {lang === "en"
                  ? "If you're writing about us, here's everything you need in one zip. Photography credit: Bu Qtair Restaurant / AOP photoshoot 2024."
                  : "إذا كنت تكتب عنّا، هذا كل ما تحتاجه."}
              </p>
              <a className="btn btn-accent" href="#" onClick={(e) => e.preventDefault()}>
                {lang === "en" ? "Download press kit (zip · 38 MB)" : "حمّل الملف"} ↓
              </a>
            </div>
            <div style={{ aspectRatio: "4/3", backgroundImage: "url(assets/photo-counter.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} />
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── FAQ ─────────────────────────────────────────────────────────────────────
function FAQ({ lang, setRoute }) {
  const qs = [
    { q: lang === "en" ? "Do you take cards?" : "هل تقبلون البطاقات؟",
      a: lang === "en" ? "Cash only. No card terminal, and there's no ATM on site. The nearest ATM is at Sunset Beach, a five-minute walk along the corniche." : "نقداً فقط. لا توجد بطاقات. أقرب صرّاف في شاطئ سنست." },
    { q: lang === "en" ? "Do you take reservations?" : "هل تقبلون الحجوزات؟",
      a: lang === "en" ? "No. Just walk in. The phone number on this site is for takeaway only — please don't ask the counter staff to hold a table." : "لا. ادخل مباشرة. الهاتف للسفري فقط." },
    { q: lang === "en" ? "How long is the wait?" : "ما طول الانتظار؟",
      a: lang === "en" ? "About 25 to 60 minutes once you've ordered. Friday and Saturday evenings are busiest. Weekday lunch and early evenings are the calmest." : "حوالي 25 إلى 60 دقيقة. أمسيات الجمعة والسبت هي الأكثر ازدحاماً." },
    { q: lang === "en" ? "Where do I park?" : "أين أركن سيارتي؟",
      a: lang === "en" ? "Free lot at Fishing Harbour 2 — fills up by 19:30 on weekends. Overflow parking at Sunset Beach is 3 to 5 minutes' walk along the corniche." : "موقف مجاني في مرسى الصيد 2. مواقف إضافية في شاطئ سنست." },
    { q: lang === "en" ? "Do you serve alcohol?" : "هل تقدمون الكحول؟",
      a: lang === "en" ? "No — we don't serve any alcohol. Karak chai, fresh juices, soft drinks and water." : "لا — لا نقدّم أي كحول." },
    { q: lang === "en" ? "Is it halal?" : "هل الطعام حلال؟",
      a: lang === "en" ? "Yes. The kitchen is all seafood. No pork on premises." : "نعم. مطبخ بحري بالكامل." },
    { q: lang === "en" ? "Is there vegetarian food?" : "هل يوجد طعام نباتي؟",
      a: lang === "en" ? "Paratha, rice, and the coconut curry can be made vegetable-only on request. The menu is fundamentally seafood-led — most vegetarians come for the paratha and a side of dal." : "براثا، أرز، وكاري نباتي عند الطلب." },
    { q: lang === "en" ? "Is it wheelchair accessible?" : "هل المكان مهيّأ للكراسي المتحركة؟",
      a: lang === "en" ? "Yes. The indoor seating area is ground-level with a wide door. Outdoor terrace has one small step. Please ask staff and we'll help." : "نعم. الجلسة الداخلية في الطابق الأرضي." },
    { q: lang === "en" ? "Can I order takeaway?" : "هل يمكنني طلب السفري؟",
      a: lang === "en" ? <>Yes — call <a href="tel:+971557052130">+971 55 705 2130</a> and the counter will hold an order for pickup. Allow 30–45 minutes.</> : <>نعم — اتصل بـ <a href="tel:+971557052130">+971 55 705 2130</a>.</> },
    { q: lang === "en" ? "How do I get there from the Burj Al Arab?" : "كيف أصل من برج العرب؟",
      a: lang === "en" ? "Nine minutes along the harbour-side promenade — keep the water on your right. Look for the yellow building with festoon lights." : "تسع دقائق مشياً على الكورنيش." },
  ];
  return (
    <main>
      <header className="page-head">
        <span className="crumb">{lang === "en" ? "05 / FAQ" : "05 / أسئلة شائعة"}</span>
        <h1 className="display">
          {lang === "en" ? <>What people <em>actually</em> ask.</> : <>ما يسأل عنه <em>الزبائن فعلاً</em>.</>}
        </h1>
        <p className="lead" style={{ color: "var(--ink-soft)" }}>
          {lang === "en"
            ? "If your question isn't here, it's probably because the answer is \"cash, no reservations, walk in\" — but please ask anyway."
            : "إذا لم يكن سؤالك هنا، فالإجابة هي على الأرجح: نقداً، بلا حجز، ادخل مباشرة."}
        </p>
      </header>
      <section className="wrap" style={{ paddingBottom: 96 }}>
        <div className="faq">
          {qs.map((it, i) => (
            <details key={i} open={i === 0}>
              <summary>{it.q}</summary>
              <p>{it.a}</p>
            </details>
          ))}
        </div>

        <div style={{ marginTop: 64, padding: 40, background: "var(--paper-deep)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
          <div>
            <span className="eyebrow">{lang === "en" ? "Still have questions?" : "لا تزال لديك أسئلة؟"}</span>
            <h3 className="display" style={{ margin: "8px 0 8px", fontSize: 32 }}>
              {lang === "en" ? <>Call the counter.</> : <>اتصل بالمنضدة.</>}
            </h3>
            <p style={{ margin: 0, color: "var(--ink-soft)" }}>
              {lang === "en" ? "Open hours only. WhatsApp also works." : "خلال ساعات العمل فقط."}
            </p>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "flex-end" }}>
            <a className="btn btn-primary" href="tel:+971557052130">{lang === "en" ? "Call +971 55 705 2130" : "اتصل بنا"}</a>
            <a className="btn btn-ghost" href="https://wa.me/971557052130" target="_blank" rel="noreferrer">{lang === "en" ? "WhatsApp" : "واتساب"}</a>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Visit, Press, FAQ });
