// support.jsx — contact / support page with click-to-call + WhatsApp for the support line.
const { Icon: SupIcon } = window;

const SUPPORT_PHONE_DISPLAY = "0102 522 8102";
const SUPPORT_PHONE_TEL = "+201025228102";      // tel: link (E.164)
const SUPPORT_PHONE_WA = "201025228102";          // wa.me (no +)

function SupportPage({ lang, t, onBackToStore }) {
  const waText = encodeURIComponent(lang === "en"
    ? "Hello MegaTech, I'd like help with a point-of-sale system."
    : "مرحباً ميجاتك، أحتاج مساعدة بخصوص نظام نقاط البيع.");
  const waUrl = "https://wa.me/" + SUPPORT_PHONE_WA + "?text=" + waText;
  function openWhatsApp(e) {
    if (e) e.preventDefault();
    // Open at top-level so it escapes the preview iframe (wa.me forbids framing).
    const w = window.open(waUrl, "_blank", "noopener,noreferrer");
    if (!w) { try { window.top.location.href = waUrl; } catch (err) { window.location.href = waUrl; } }
  }
  const channels = [
    { ic: "headset", t: lang === "en" ? "Phone support" : "الدعم الهاتفي", s: lang === "en" ? "Sat–Thu, 12:00–21:00" : "السبت–الخميس، 12:00–21:00" },
    { ic: "truck", t: lang === "en" ? "On-site installation" : "التركيب في الموقع", s: lang === "en" ? "Nationwide, 2–4 business days" : "كل المحافظات، 2–4 أيام عمل" },
  ];
  return (
    <main>
      <div className="container">
        <nav className="crumbs">
          <button onClick={onBackToStore}>{t.storefront}</button>
          <SupIcon name="chevron-right" size={15} className="flip-x" />
          <span style={{ color: "var(--fg1)" }}>{t.navSupport}</span>
        </nav>

        <section className="support">
          <div className="support__head">
            <div className="section__overline">{t.navSupport}</div>
            <h1 className="support__title">{lang === "en" ? "Talk to MegaTech support" : "تواصل مع دعم ميجاتك"}</h1>
            <p className="support__sub">{lang === "en"
              ? "Call us or message us on WhatsApp — our team helps you choose, set up, and service your point-of-sale systems."
              : "اتصل بنا أو راسلنا على واتساب — يساعدك فريقنا في اختيار وتجهيز وصيانة أنظمة نقاط البيع."}</p>
          </div>

          <div className="support__card">
            <div className="support__phone">
              <span className="support__phoneic"><SupIcon name="phone" size={26} /></span>
              <div>
                <div className="support__phonelabel">{lang === "en" ? "Support line" : "خط الدعم"}</div>
                <a href={"tel:" + SUPPORT_PHONE_TEL} className="support__phonenum num-tabular" dir="ltr">{SUPPORT_PHONE_DISPLAY}</a>
              </div>
            </div>

            <div className="support__actions">
              <a className="btn btn--primary btn--lg" href={"tel:" + SUPPORT_PHONE_TEL}>
                <SupIcon name="phone" size={20} />{lang === "en" ? "Call now" : "اتصل الآن"}
              </a>
              <a className="btn btn--lg support__wa" href={waUrl} onClick={openWhatsApp} target="_blank" rel="noopener noreferrer">
                <SupIcon name="whatsapp" size={20} fill="currentColor" stroke={0} />{lang === "en" ? "Chat on WhatsApp" : "راسلنا على واتساب"}
              </a>
            </div>
          </div>

          <div className="support__channels">
            {channels.map((c) => (
              <div className="support__channel" key={c.ic}>
                <span className="ic"><SupIcon name={c.ic} size={22} /></span>
                <div>
                  <div className="t">{c.t}</div>
                  <div className="s">{c.s}</div>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    </main>
  );
}

Object.assign(window, { SupportPage });