// Shared components, content, helpers
const { useState, useEffect, useRef, useMemo } = React;

// ─── Content dictionary (EN / AR) ───────────────────────────────────────────
const CONTENT = {
  en: {
    nav: { how: "How it works", menu: "Menu", visit: "Visit", press: "Press", faq: "FAQ" },
    heroPills: ["Cash only", "No reservations", "Eat with your hands"],
    heroTitle: ["Fresh fish, ", "secret masala", ", plastic tables —"],
    heroSub: "Beside the Burj Al Arab, since the 1980s.",
    getDirections: "Get directions",
    howItWorks: "How it works",
    callTakeaway: "Call for takeaway",
    notReservations: "Not for reservations",
    todaysCatch: "Today's catch — Wednesday",
    catchSub: "What's on ice this evening. Walk in, point, sit down.",
    indicative: "indicative — weighed at the counter",
    inStock: "On ice",
    soldOut: "Sold out",
    perPiece: "per fish",
    perHalfKilo: "per ½ kg",
    perPiece1: "per piece",
    address1: "Fishing Harbour 2",
    address2: "Old 32B Street, Umm Suqeim 2",
    address3: "Dubai, United Arab Emirates",
    openNow: "Open now",
    closed: "Closed",
    openIn: "Opens in",
    untilClose: "until 11:30 PM",
  },
  ar: {
    nav: { how: "كيف تعمل", menu: "القائمة", visit: "زيارة", press: "الصحافة", faq: "أسئلة" },
    heroPills: ["نقداً فقط", "بدون حجوزات", "كُل بيديك"],
    heroTitle: ["سمك طازج، ", "تتبيلة سرّية", "، طاولات بلاستيكية —"],
    heroSub: "بجوار برج العرب، منذ الثمانينات.",
    getDirections: "احصل على الاتجاهات",
    howItWorks: "كيف يعمل المطعم",
    callTakeaway: "اتصل للسفري",
    notReservations: "ليس للحجز",
    todaysCatch: "صيد اليوم — الأربعاء",
    catchSub: "ما هو على الثلج هذا المساء. ادخل، أشِر، اجلس.",
    indicative: "تقريبي — يُوزن عند المنضدة",
    inStock: "على الثلج",
    soldOut: "نفد",
    perPiece: "للسمكة",
    perHalfKilo: "لـ ½ كغم",
    perPiece1: "للقطعة",
    address1: "مرسى الصيد 2",
    address2: "شارع 32 ب القديم، أم سقيم 2",
    address3: "دبي، الإمارات العربية المتحدة",
    openNow: "مفتوح الآن",
    closed: "مغلق",
    openIn: "يفتح خلال",
    untilClose: "حتى 11:30 مساءً",
  },
};

// ─── Brand crest ────────────────────────────────────────────────────────────
function Crest() {
  return (
    <span className="crest" aria-hidden="true">
      <span>B</span>
    </span>
  );
}

// ─── Nav ────────────────────────────────────────────────────────────────────
function Nav({ route, setRoute, lang, setLang, forceSolid }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const el = document.querySelector(".app-shell");
    if (!el) return;
    const onScroll = () => setScrolled(el.scrollTop > 40);
    onScroll();
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, []);
  const solid = forceSolid || scrolled;
  const t = CONTENT[lang];
  const Item = ({ id, label }) => (
    <a
      className={route === id ? "active" : ""}
      onClick={() => setRoute(id)}
    >{label}</a>
  );
  return (
    <nav className={"nav " + (solid ? "solid" : "")}>
      <div className="nav-inner">
        <div className="brand" onClick={() => setRoute("home")}>
          <Crest />
          <span>Bu Qtair</span>
        </div>
        <div className="links">
          <Item id="how" label={t.nav.how} />
          <Item id="menu" label={t.nav.menu} />
          <Item id="visit" label={t.nav.visit} />
          <Item id="press" label={t.nav.press} />
          <Item id="faq" label={t.nav.faq} />
        </div>
        <div className="nav-right">
          <div className="lang" role="group" aria-label="Language">
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")}>EN</button>
            <button className={lang === "ar" ? "on" : ""} onClick={() => setLang("ar")}>عربي</button>
          </div>
          <a
            className="btn btn-ghost"
            style={{ padding: "8px 14px", fontSize: 13 }}
            href="https://www.google.com/maps/search/?api=1&query=Bu+Qtair+Fish+Restaurant+Umm+Suqeim+Fishing+Harbour+2+Dubai"
            target="_blank" rel="noreferrer"
          >Directions <ArrowUR /></a>
        </div>
      </div>
    </nav>
  );
}

// ─── Arrow glyphs ───────────────────────────────────────────────────────────
function ArrowUR() {
  return (
    <svg className="arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
      <path d="M4 12L12 4M12 4H6M12 4V10" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function ArrowR() {
  return (
    <svg className="arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
      <path d="M3 8H13M13 8L9 4M13 8L9 12" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ─── Pills cluster ──────────────────────────────────────────────────────────
function HeroPills({ items }) {
  const dots = ["red", "amber", "green"];
  return (
    <div className="hero-pills">
      {items.map((it, i) => (
        <span key={it} className={"pill " + dots[i % dots.length]}>
          <span className="dot" />{it}
        </span>
      ))}
    </div>
  );
}

// ─── "Open now" pill (live clock against schedule) ──────────────────────────
function OpenStatus({ lang }) {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 60000);
    return () => clearInterval(id);
  }, []);
  const day = now.getDay(); // 0=Sun
  const hr = now.getHours() + now.getMinutes() / 60;
  // Sat–Thu 11.5–23.5; Fri 13.5–23.5. Sun=0, Mon=1, Tue=2, Wed=3, Thu=4, Fri=5, Sat=6
  const fri = day === 5;
  const open = (fri ? hr >= 13.5 : hr >= 11.5) && hr < 23.5;
  const label = open
    ? (lang === "ar" ? "مفتوح الآن" : "Open now") + " · " + (lang === "ar" ? "حتى 11:30 م" : "until 11:30 PM")
    : (lang === "ar" ? "مغلق" : "Closed") + " · " + (fri ? (lang === "ar" ? "يفتح 1:30 م الجمعة" : "Opens Fri 1:30 PM") : (lang === "ar" ? "يفتح 11:30 ص" : "Opens 11:30 AM"));
  return (
    <span className={"pill " + (open ? "green" : "red")}>
      <span className="dot" />{label}
    </span>
  );
}

// ─── Pull quote ─────────────────────────────────────────────────────────────
function PullQuote({ children, src }) {
  return (
    <blockquote className="pull-quote">
      <span className="open">“</span>{children}<span className="open">”</span>
      <span className="src">— {src}</span>
    </blockquote>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────────────
function Footer({ lang, setRoute }) {
  const t = CONTENT[lang];
  return (
    <footer className="foot">
      <div className="foot-inner">
        <div className="brand-block">
          <div className="display" style={{ color: "var(--fry-amber)" }}>Bu Qtair</div>
          <p style={{ maxWidth: "28ch", fontSize: 14, opacity: 0.85, margin: 0 }}>
            {lang === "en"
              ? "Fresh fish, secret masala, plastic tables. Beside the Burj Al Arab since the 1980s."
              : "سمك طازج، تتبيلة سرّية، طاولات بلاستيكية. بجوار برج العرب منذ الثمانينات."}
          </p>
          <div style={{ marginTop: 24, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.12em", opacity: 0.7 }}>
            EST. 1980s · UMM SUQEIM
          </div>
        </div>
        <div>
          <h5>{lang === "en" ? "Visit" : "زيارة"}</h5>
          <ul>
            <li>{t.address1}</li>
            <li>{t.address2}</li>
            <li>{t.address3}</li>
            <li><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">Open in Maps ↗</a></li>
          </ul>
        </div>
        <div>
          <h5>{lang === "en" ? "Hours" : "ساعات العمل"}</h5>
          <ul>
            <li>Sat–Thu · 11:30 – 23:30</li>
            <li>Fri · 13:30 – 23:30 <em style={{ opacity: 0.6 }}>(after prayers)</em></li>
            <li style={{ marginTop: 8 }}><a href="tel:+971557052130">+971 55 705 2130</a></li>
            <li style={{ opacity: 0.7, fontSize: 12 }}>Takeaway only — not reservations</li>
          </ul>
        </div>
        <div>
          <h5>{lang === "en" ? "Follow" : "تابع"}</h5>
          <ul>
            <li><a href="#" onClick={(e) => e.preventDefault()}>Instagram · @buqtair_jumeira</a></li>
            <li><a href="#" onClick={(e) => e.preventDefault()}>Facebook</a></li>
            <li style={{ marginTop: 8 }}><a onClick={() => setRoute("press")}>Press kit</a></li>
            <li><a onClick={() => setRoute("faq")}>FAQ</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-inner baseline" style={{ marginTop: 64 }}>
        <span>© {new Date().getFullYear()} Bu Qtair Fish Restaurant · Halal · No alcohol</span>
        <span>Cash only · No reservations · Eat with your hands</span>
      </div>
    </footer>
  );
}

// ─── Call FAB ───────────────────────────────────────────────────────────────
function CallFab({ lang }) {
  return (
    <a className="fab" href="tel:+971557052130">
      <span className="icon">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
          <path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.03-.24c1.13.38 2.35.59 3.61.59a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.26.21 2.48.59 3.61a1 1 0 0 1-.24 1.03l-2.23 2.15z"/>
        </svg>
      </span>
      <span className="label">
        <strong>{lang === "en" ? "Call for takeaway" : "اتصل للسفري"}</strong>
        <small>+971 55 705 2130</small>
      </span>
    </a>
  );
}

// ─── Press strip ────────────────────────────────────────────────────────────
function PressStrip() {
  const items = [
    { name: "Anthony Bourdain", note: "No Reservations · 2009" },
    { name: "CNN Travel", note: "Feature · 2013" },
    { name: "Visit Dubai", note: "Official listing" },
    { name: "Emirates.com", note: "Dubai Experience" },
    { name: "Curly Tales", note: "Best seafood" },
  ];
  return (
    <div className="press-strip">
      {items.map((it) => (
        <div className="item" key={it.name}>
          <div>
            {it.name}
            <small>{it.note}</small>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Today's catch board ────────────────────────────────────────────────────
function CatchBoard({ lang }) {
  const items = [
    "HAMOUR — AED 65",
    "SHERI — AED 55",
    "POMFRET — AED 50",
    "RED SNAPPER — AED 60",
    "SEA BASS — AED 70",
    "SARDINES — AED 35",
    "FARSH — AED 45",
    "KOFER — AED 40",
    "PRAWNS ½ KG — AED 75",
  ];
  const ticker = [...items, ...items];
  return (
    <section className="catch-board">
      <span className="live">{lang === "en" ? "LIVE FROM THE COUNTER" : "مباشر من المنضدة"}</span>
      <div className="ticker">
        <div className="ticker-inner">
          {ticker.map((s, i) => <span key={i}>{s}</span>)}
        </div>
      </div>
      <span className="badge">{lang === "en" ? "INDICATIVE · WEIGHED AT COUNTER" : "تقريبي · يُوزن عند المنضدة"}</span>
    </section>
  );
}

// ─── Photo strip / gallery ──────────────────────────────────────────────────
function Gallery() {
  return (
    <div className="gallery">
      <div className="a" style={{ backgroundImage: "url(assets/exterior.jpg)" }} />
      <div className="b" style={{ backgroundImage: "url(assets/photo-counter.jpg)" }} />
      <div className="c" style={{ backgroundImage: "url(assets/interior-diners.jpg)" }} />
      <div className="d" style={{ backgroundImage: "url(assets/fried-fish-paratha.jpg)" }} />
      <div className="e" style={{ backgroundImage: "url(assets/fish-curry.jpg)" }} />
      <div className="f" style={{ backgroundImage: "url(assets/lime-shrimp.jpg)" }} />
    </div>
  );
}

// Expose to other scripts
Object.assign(window, {
  CONTENT, Nav, Footer, HeroPills, OpenStatus, PullQuote, ArrowUR, ArrowR,
  CallFab, PressStrip, CatchBoard, Gallery, Crest,
});