/* wegopaars — صفحاتِ مستقلِ استان: «جاذبه‌های استان» و «محصولاتِ استان».
   هر دو با هدر و فوترِ ثابتِ همان پوستهٔ سایت (WGP.Nav / WGP.Footer) رندر می‌شوند.

   چرا صفحهٔ مستقل و نه مودالِ تودرتو: درارِ استان خودش یک پوشش است و مودال روی آن
   می‌شود پوشش‌روی‌پوشش (روی موبایل بد، و دکمهٔ بازگشتِ مرورگر را می‌شکند). صفحهٔ
   مستقل ضمناً در گوگل ایندکس می‌شود — «صنایع دستی اصفهان» عبارتی است که جستجو
   می‌شود، و ترافیکِ ارگانیک مستقیماً به پورسانتِ همکاری در فروش تبدیل می‌شود.

   استان از پارامترِ ?p=<geoKey> خوانده می‌شود (نامِ فارسیِ استان، همان کلیدِ نقشه). */
(function () {
  const DS = window.WegopaarsDesignSystem_3b7565;
  const { Card, Badge, Button, SectionHeading } = DS;
  const WGP = (window.WGP = window.WGP || {});

  /* ── انتخابِ رشتهٔ سه‌زبانه ────────────────────────────────────────────────
     جایگزینِ الگویِ قدیمیِ `fa ? 'فارسی' : 'English'` که با آمدنِ عربی متنِ
     انگلیسی را جلوی کاربرِ عرب می‌گذاشت. عربی از واژه‌نامهٔ `strings-ar.js`
     می‌آید (کلید = همان رشتهٔ فارسی) و اگر کلید نبود به **انگلیسی** برمی‌گردد،
     نه فارسی — پس رشتهٔ تازه هیچ‌وقت سایت را نمی‌شکند.
     `WGP_DATA.arStrings` روی واژه‌نامه می‌نشیند تا مالک بتواند بدونِ دیپلوی
     واژه‌ای را عوض کند. */
  const AR3 = (faS, enS, lang) => {
    if (lang === 'fa') return faS;
    if (lang !== 'ar') return enS;
    const dict = Object.assign({}, window.WGP_AR || {}, (window.WGP_DATA || {}).arStrings || {});
    return dict[faS] || enS;
  };

  const { fmt, ico } = WGP;

  const KIND_FA = {
    ATTRACTION: 'جاذبه', MUSEUM: 'موزه', MONUMENT: 'بنای تاریخی',
    NATURE: 'طبیعی', RELIGIOUS: 'مذهبی', FOOD: 'خوراک', MEDICAL: 'مرکز درمانی',
  };
  const KIND_EN = {
    ATTRACTION: 'Attraction', MUSEUM: 'Museum', MONUMENT: 'Monument',
    NATURE: 'Natural', RELIGIOUS: 'Religious', FOOD: 'Food', MEDICAL: 'Medical centre',
  };
  const KIND_AR = {
    ATTRACTION: 'معلم', MUSEUM: 'متحف', MONUMENT: 'صرح تاريخي',
    NATURE: 'طبيعي', RELIGIOUS: 'ديني', FOOD: 'مأكولات', MEDICAL: 'مركز طبي',
  };
  const kindMap = (lang) => (lang === 'fa' ? KIND_FA : lang === 'ar' ? KIND_AR : KIND_EN);

  const qs = (k) => { try { return new URLSearchParams(location.search).get(k) || ''; } catch (e) { return ''; } };
  const tx = (o, lang) => (o && (o[lang] || o.fa || o.en)) || '';

  // پوستهٔ مشترکِ هر دو صفحه — هدر و فوترِ ثابت، تم و زبانِ ماندگار.
  function PageShell({ children, title, crumb, crumbI18n }) {
    // زبان از localStorage خوانده می‌شود نه 'fa' ثابت — وگرنه کاربرِ عرب با هر
    // ناوبری به فارسی پرت می‌شد و دکمهٔ زبان عملاً بی‌اثر بود (ق-۷).
    const [lang, setLang] = React.useState(() => window.WGP_LANG.get());
    const [theme, setTheme] = React.useState(function () {
      try { return localStorage.getItem('wc_theme') || 'dark'; } catch (e) { return 'dark'; }
    });
    const [visitor, setVisitor] = React.useState(null);
    const D = window.WGP_DATA || {};
    const fa = lang === 'fa';
    const nextLang = (code) => {
      // انتخابگر کدِ صریح می‌دهد؛ اگر چیزی نداد (سازگاری عقب) به بعدی می‌رود.
      const nx = code || window.WGP_LANG.next(lang);
      window.WGP_LANG.set(nx);
      setLang(nx);
    };
    const brand = (D.T && ((D.T[lang] || D.T.fa) || {}).brand) || 'ایران‌گرد';
    const content = ((D.content || {})[lang]) || {};

    React.useEffect(() => {
      // جهت و `lang` هر دو از جدولِ LANGS می‌آیند، نه از «فارسی بودن» — عربی هم RTL است.
      window.WGP_LANG.apply(lang);
      document.documentElement.setAttribute('data-theme', theme);
      try { localStorage.setItem('wc_theme', theme); } catch (e) {}
    }, [lang, theme]);
    React.useEffect(() => {
      if (window.WCAuth && window.WCAuth.onChange) window.WCAuth.onChange(setVisitor);
    }, []);

    return (
      <div style={{ minHeight: '100vh', background: 'var(--bg)', display: 'flex', flexDirection: 'column' }}>
        <WGP.Nav
          lang={lang} theme={theme} brand={brand} visitor={visitor}
          onAccount={() => { window.location.href = '/custom/wegopars/profile.html'; }}
          onLang={nextLang}
          onTheme={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
          onAdmin={() => { window.location.href = '../admin/index.html'; }}
        />
        <main style={{ flex: 1, maxWidth: 'var(--maxw)', width: '100%', margin: '0 auto', padding: '30px 22px 60px' }}>
          <nav style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--t3)', marginBottom: 18, flexWrap: 'wrap' }}>
            <a href="/custom/wegopars/index.html" style={{ color: 'var(--acc)', textDecoration: 'none' }}>{AR3('خانه', 'Home', lang)}</a>
            <span>›</span>
            <a href="/custom/wegopars/index.html#map" style={{ color: 'var(--acc)', textDecoration: 'none' }}>{AR3('نقشهٔ ایران', 'Iran map', lang)}</a>
            <span>›</span>
            <span>{crumbI18n ? (tx(crumbI18n, lang) || '…') : (crumb || '…')}</span>
          </nav>
          {children({ lang, fa })}
        </main>
        <WGP.Footer lang={lang} brand={brand} content={content} />
      </div>
    );
  }

  // پوسته را صادر می‌کنیم تا صفحاتِ تازه (خدمات، بلیط، کیف‌پول) دقیقاً همین هدر و
  // فوتر و تم و زبان را بگیرند. قاعدهٔ صریحِ مالک: «همهٔ صفحه‌ها در داخلِ ساختارِ
  // صفحه‌ایِ ایران‌گرد باز شوند». پوستهٔ دوم یعنی دو جای تعمیر.
  WGP.PageShell = PageShell;

  // بارگذاریِ دادهٔ استان — هر دو صفحه از همین یک اندپوینت تغذیه می‌شوند.
  function useRegion() {
    const key = qs('p');
    const [state, setState] = React.useState({ loading: true, data: null, error: null });
    React.useEffect(() => {
      if (!key) { setState({ loading: false, data: null, error: 'no-key' }); return; }
      let alive = true;
      fetch('/api/v1/custom-sites/wegopars/region/' + encodeURIComponent(key))
        .then(r => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
        .then(d => { if (alive) setState({ loading: false, data: d, error: null }); })
        .catch(e => { if (alive) setState({ loading: false, data: null, error: e.message }); });
      return () => { alive = false; };
    }, [key]);
    return state;
  }

  // ⚠️ `lang` هم لازم است، نه فقط `fa`: از وقتی رشته‌ها سه‌زبانه شدند، هر جایی که
  // متن انتخاب می‌کند باید زبانِ واقعی را بداند. با `fa` تنها، کاربرِ عرب انگلیسی
  // می‌دید. همهٔ صداکننده‌ها `lang` را پاس می‌دهند.
  function Empty({ fa, lang, msg }) {
    return (
      <Card className="card-pad" style={{ padding: 40, textAlign: 'center', color: 'var(--t3)' }}>
        {msg || (AR3('چیزی برای نمایش نیست.', 'Nothing to show.', lang))}
        <div style={{ marginTop: 16 }}>
          <Button variant="surface" href="/custom/wegopars/index.html#map">{AR3('بازگشت به نقشه', 'Back to map', lang)}</Button>
        </div>
      </Card>
    );
  }

  // ─────────── صفحهٔ ۱: جاذبه‌های استان ───────────
  WGP.RegionPlacesPage = function RegionPlacesPage() {
    const { loading, data, error } = useRegion();
    return (
      <PageShell crumbI18n={data ? data.name : null}>
        {({ lang, fa }) => {
          // همان گاردِ ضدِ بن‌بست که در صفحهٔ صنایع‌دستی هست (بدونِ ?p= انتخابگر بده)
          if (!qs('p')) return <WGP.ProvincePicker lang={lang} fa={fa} target="places" />;
          if (loading) return <Empty fa={fa} lang={lang} msg={AR3('در حالِ بارگذاری…', 'Loading…', lang)} />;
          if (error || !data) return <Empty fa={fa} lang={lang} msg={AR3('استان یافت نشد.', 'Province not found.', lang)} />;
          const KIND = kindMap(lang);
          const all = (data.attractions || []).concat(data.museums || []);
          // ⚠️ **گروه‌بندی بر اساسِ نوع حذف شد.** بازخوردِ مالک: صفحه به‌هم‌ریخته بود.
          // علتش این بود که هر نوع بخشِ جداگانه می‌شد و بخشی با ۲ مورد ردیفِ دوتایی
          // می‌ساخت، بعدی سه‌تایی — گریدِ ۴ستونه هیچ‌وقت پر نمی‌شد.
          // حالا دو بخشِ بزرگ: «دیدنی‌ها» (همه‌چیز جز موزه) و «موزه‌ها». نوعِ هر مورد
          // روی خودِ کارت به‌صورتِ برچسب می‌آید، پس اطلاعات از دست نمی‌رود.
          const sections = [
            { key: 'sights', title: AR3('دیدنی‌ها و جاذبه‌ها', 'Sights & attractions', lang), items: data.attractions || [], color: data.color || 'var(--acc)' },
            { key: 'museums', title: AR3('موزه‌ها', 'Museums', lang), items: data.museums || [], color: 'var(--saffron)' },
            // مراکزِ درمانی سطلِ خودشان را دارند و از «دیدنی‌ها» بیرون کشیده شده‌اند
            // (سمتِ سرور) — بیمارستان وسطِ فهرستِ جاذبه‌های گردشگری بی‌معنی بود.
            { key: 'medical', title: AR3('مراکزِ درمانی', 'Medical centres', lang), items: data.medical || [], color: 'var(--firuze)' },
          ].filter(s => s.items.length);

          return (
            <>
              <SectionHeading align="start" tag={tx(data.name, lang)}
                title={AR3('جاذبه‌ها و دیدنی‌های ', 'Attractions of ', lang) + tx(data.name, lang)}
                subtitle={tx(data.summary, lang)} />
              {!all.length && <div style={{ marginTop: 24 }}><Empty fa={fa} lang={lang} /></div>}
              {sections.map(sec => (
                <section key={sec.key} style={{ marginTop: 34 }}>
                  <h3 style={{ fontSize: 17, fontWeight: 800, margin: '0 0 14px', display: 'flex', alignItems: 'center', gap: 9 }}>
                    <span style={{ width: 8, height: 22, borderRadius: 4, background: sec.color }} />
                    {sec.title}
                    <span style={{ fontSize: 12.5, color: 'var(--t3)', fontWeight: 600 }}>({fmt(sec.items.length, lang)})</span>
                  </h3>
                  <div className="wgp-grid4" style={{ display: 'grid', gap: 16 }}>
                    {sec.items.map(p => (
                      <a key={p.id} href={'/custom/wegopars/place.html?id=' + encodeURIComponent(p.id)}
                         style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
                        {/* ارتفاعِ ثابتِ کارت تا ردیف‌ها هم‌تراز بمانند — قبلاً هر کارت
                            به‌اندازهٔ متنش کِش می‌آمد و ردیف به‌هم‌ریخته می‌شد. */}
                        <Card pad={0} hover style={{ overflow: 'hidden', height: 330, display: 'flex', flexDirection: 'column' }}>
                          {p.image
                            ? <img src={p.image} alt={tx(p.title, lang)} loading="lazy" style={{ width: '100%', height: 150, objectFit: 'cover', display: 'block', flex: 'none' }} />
                            : <div style={{ height: 150, flex: 'none', background: 'linear-gradient(150deg,var(--card),var(--card-2))', display: 'grid', placeItems: 'center', color: 'var(--t3)' }}>{ico(['M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11z', 'M12 10a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'], 1.6, 30)}</div>}
                          <div style={{ padding: '13px 15px 15px', display: 'flex', flexDirection: 'column', gap: 6, flex: 1, minHeight: 0 }}>
                            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
                              <div style={{ fontWeight: 800, fontSize: 14.5, lineHeight: 1.6 }}>{tx(p.title, lang)}</div>
                              <Badge tone="acc">{KIND[p.kind] || p.kind}</Badge>
                            </div>
                            {tx(p.note, lang) && <div style={{ fontSize: 12, color: 'var(--t3)' }}>{tx(p.note, lang)}</div>}
                            {/* متن به سه خط محدود می‌شود تا کارت‌ها یک‌اندازه بمانند */}
                            {tx(p.description, lang) && (
                              <p className="wgp-clamp3" style={{ fontSize: 12.5, color: 'var(--t2)', lineHeight: 1.9, margin: 0 }}>{tx(p.description, lang)}</p>
                            )}
                            <span style={{ marginTop: 'auto', fontSize: 12, fontWeight: 700, color: 'var(--acc)' }}>{AR3('بیشتر بخوانید ←', 'Read more →', lang)}</span>
                          </div>
                        </Card>
                      </a>
                    ))}
                  </div>
                </section>
              ))}
              <div style={{ marginTop: 40, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <Button variant="brand" href={'/custom/wegopars/crafts.html?p=' + encodeURIComponent(data.geoKey || qs('p'))}>
                  {AR3('صنایع‌دستی و سوغاتِ ', 'Handicrafts of ', lang) + tx(data.name, lang)}
                </Button>
                <Button variant="surface" href="/custom/wegopars/index.html#map">{AR3('بازگشت به نقشه', 'Back to map', lang)}</Button>
              </div>
            </>
          );
        }}
      </PageShell>
    );
  };

  // ─────────── صفحهٔ ۳: معرفیِ یک جاذبه/موزه ───────────
  // عمداً کوتاه: عکس، تیتر، توضیحِ مختصر. محتوایش از پنلِ ادمین قابلِ ویرایش است.
  WGP.PlacePage = function PlacePage() {
    const id = qs('id');
    const [st, setSt] = React.useState({ loading: true, data: null, error: null });
    React.useEffect(() => {
      if (!id) { setSt({ loading: false, data: null, error: 'no-id' }); return; }
      let alive = true;
      fetch('/api/v1/custom-sites/wegopars/place/' + encodeURIComponent(id))
        .then(r => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
        .then(d => { if (alive) setSt({ loading: false, data: d, error: null }); })
        .catch(e => { if (alive) setSt({ loading: false, data: null, error: e.message }); });
      return () => { alive = false; };
    }, [id]);

    const p = st.data;
    return (
      <PageShell crumbI18n={p ? p.title : null}>
        {({ lang, fa }) => {
          if (st.loading) return <Empty fa={fa} lang={lang} msg={AR3('در حالِ بارگذاری…', 'Loading…', lang)} />;
          if (st.error || !p) return <Empty fa={fa} lang={lang} msg={AR3('این مکان یافت نشد.', 'Place not found.', lang)} />;
          const KIND = kindMap(lang);
          const reg = p.region || {};
          const desc = tx(p.description, lang);
          return (
            <article className="wgp-place">
              {/* ── نوارِ هیرو ──
                  چیدمانِ قبلی یک ستونِ ۷۸۰px وسطِ صفحه بود و روی ۱۵۶۰px حدودِ ۴۰٪
                  عرض حاشیهٔ خالی می‌ماند (بازخوردِ صریحِ مالک). حالا عکس تمامِ عرض
                  را می‌گیرد و تیتر رویش می‌نشیند — همان الگویی که کاربر از هر
                  سایتِ گردشگری انتظار دارد، و عکسِ جاذبه را هم بزرگ‌تر نشان می‌دهد. */}
              <header style={{ position: 'relative', borderRadius: 'var(--r-lg)', overflow: 'hidden', marginBottom: 26, background: 'linear-gradient(150deg,var(--card),var(--card-2))', minHeight: 260 }}>
                {p.image
                  ? <img src={p.image} alt={tx(p.title, lang)} style={{ width: '100%', height: 400, objectFit: 'cover', display: 'block' }} />
                  : <div style={{ height: 260, display: 'grid', placeItems: 'center', color: 'var(--t3)' }}>{ico(['M12 21s-7-5.2-7-11a7 7 0 0 1 14 0c0 5.8-7 11-7 11z', 'M12 10a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'], 1.5, 44)}</div>}
                {/* پردهٔ گرادیانی: بدونش تیتر روی عکسِ روشن (آسمانِ روز) ناخواناست —
                    همان درسی که روی کارت‌های تور و صنایع‌دستی خورده شد. */}
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 40%, transparent 70%)', pointerEvents: 'none' }} />
                <div style={{ position: 'absolute', insetInline: 0, bottom: 0, padding: '26px 30px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
                    <Badge tone="acc" variant="solid">{KIND[p.kind] || p.kind}</Badge>
                    <a href={'/custom/wegopars/region.html?p=' + encodeURIComponent(reg.geoKey || '')}
                       style={{ fontSize: 13, color: '#fff', textDecoration: 'none', fontWeight: 700, opacity: .92 }}>{tx(reg.name, lang)}</a>
                  </div>
                  <h1 style={{ fontSize: 34, fontWeight: 900, margin: 0, lineHeight: 1.45, color: '#fff', textShadow: '0 2px 14px rgba(0,0,0,.5)' }}>{tx(p.title, lang)}</h1>
                  {tx(p.note, lang) && <p style={{ fontSize: 15, color: 'rgba(255,255,255,.88)', margin: '8px 0 0' }}>{tx(p.note, lang)}</p>}
                </div>
              </header>

              {/* ستونِ اصلی + ستونِ چسبانِ کناری. زیرِ ۱۰۰۰px تک‌ستونه می‌شود (CSS). */}
              <div className="wgp-place-grid">
                <div>
                  {desc
                    ? <div style={{ fontSize: 15.5, color: 'var(--t2)', lineHeight: 2.15 }}>
                        {desc.split('\n').filter(Boolean).map((para, i) => <p key={i} style={{ margin: '0 0 16px' }}>{para}</p>)}
                      </div>
                    : <p style={{ color: 'var(--t3)', fontSize: 13.5 }}>{AR3('توضیحِ تکمیلی برای این مکان هنوز نوشته نشده.', 'No description yet.', lang)}</p>}

                  {/* ── نقشه ──
                      قابِ نقشه از OpenStreetMap است نه گوگل: امبدِ گوگل‌مپ از داخلِ ایران
                      قابلِ اتکا نیست و کاربر یک کادرِ خالی می‌بیند. دکمه‌های «مسیریابی»
                      جدا گذاشته شده‌اند تا هرکس گوگل‌مپ دارد از همان استفاده کند. */}
                  {p.geo && p.geo.lat != null && p.geo.lng != null && (() => {
                    const lat = Number(p.geo.lat), lng = Number(p.geo.lng);
                    const d = 0.02; // پنجرهٔ حدودِ ۲ کیلومتری — نه آن‌قدر نزدیک که گم شود
                    const bbox = [lng - d, lat - d, lng + d, lat + d].join('%2C');
                    return (
                      <section style={{ marginTop: 30 }}>
                        <h3 style={{ fontSize: 17, fontWeight: 800, margin: '0 0 13px' }}>{AR3('روی نقشه', 'On the map', lang)}</h3>
                        <iframe
                          title={AR3('نقشه', 'Map', lang)} loading="lazy"
                          src={`https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${lat}%2C${lng}`}
                          style={{ width: '100%', height: 380, border: '1px solid var(--line)', borderRadius: 'var(--r)', display: 'block' }} />
                        <div style={{ display: 'flex', gap: 10, marginTop: 12, flexWrap: 'wrap' }}>
                          <Button variant="surface" size="sm" href={`https://www.google.com/maps/search/?api=1&query=${lat},${lng}`} target="_blank" rel="noopener">
                            {AR3('مسیریابی در گوگل مپ', 'Open in Google Maps', lang)}
                          </Button>
                          <Button variant="surface" size="sm" href={`https://neshan.org/maps/@${lat},${lng},15z`} target="_blank" rel="noopener">
                            {AR3('نمایش در نشان', 'Open in Neshan', lang)}
                          </Button>
                        </div>
                      </section>
                    );
                  })()}

                  {/* ── سوغاتِ همین‌جا ── */}
                  {p.shops && p.shops.length > 0 && (
                    <section style={{ marginTop: 34 }}>
                      <h3 style={{ fontSize: 17, fontWeight: 800, margin: '0 0 4px' }}>{AR3('سوغاتِ همین‌جا', 'Souvenirs from here', lang)}</h3>
                      <p style={{ fontSize: 13, color: 'var(--t3)', margin: '0 0 14px' }}>
                        {AR3('غرفه‌های واقعیِ باسلام در ', 'Real Basalam shops in ', lang) + tx(reg.name, lang)}
                      </p>
                      {/* ⚠️ گریدِ ۴ستونهٔ ثابت حذف شد: در ستونِ باریک‌ترِ چیدمانِ تازه،
                          چهار کارتِ کنارِ هم له می‌شدند. auto-fill خودش تعداد را
                          با عرضِ موجود تنظیم می‌کند. */}
                      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(170px, 1fr))', gap: 13 }}>
                        {p.shops.filter(s => s.url).map((s) => (
                          <a key={s.id} href={s.url} target="_blank" rel="noopener nofollow sponsored"
                             style={{ textDecoration: 'none', color: 'inherit', border: '1px solid var(--line)', borderRadius: 'var(--r)', overflow: 'hidden', background: 'var(--card)', display: 'block' }}>
                            {s.image
                              ? <img src={s.image} alt={s.title} loading="lazy" style={{ display: 'block', width: '100%', height: 130, objectFit: 'cover' }} />
                              : <img src={WGP.cover(s.title, 'shop')} alt="" style={{ display: 'block', width: '100%', height: 130, objectFit: 'cover' }} />}
                            <div style={{ padding: '10px 11px' }}>
                              <div className="wgp-clamp2" style={{ fontSize: 12.5, fontWeight: 700, lineHeight: 1.6 }}>{s.title}</div>
                              {s.price ? <div style={{ fontSize: 12, color: 'var(--acc)', fontWeight: 800, marginTop: 6 }}>{fmt(s.price, lang)} <span style={{ fontSize: 10, color: 'var(--t3)' }}>{AR3('تومان', 'Toman', lang)}</span></div> : null}
                            </div>
                          </a>
                        ))}
                      </div>
                    </section>
                  )}

                  <div style={{ marginTop: 34, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                    <Button variant="brand" href={'/custom/wegopars/region.html?p=' + encodeURIComponent(reg.geoKey || '')}>
                      {AR3('دیگر جاذبه‌های ', 'More in ', lang) + tx(reg.name, lang)}
                    </Button>
                    <Button variant="surface" href={'/custom/wegopars/crafts.html?p=' + encodeURIComponent(reg.geoKey || '')}>
                      {AR3('سوغاتِ این استان', 'Local handicrafts', lang)}
                    </Button>
                  </div>
                </div>

                {/* ── ستونِ کناریِ چسبان ── */}
                <aside className="wgp-place-aside">
                  <Card pad="16px 18px" style={{ marginBottom: 16 }}>
                    <h4 style={{ fontSize: 14, fontWeight: 800, margin: '0 0 12px' }}>{AR3('در یک نگاه', 'At a glance', lang)}</h4>
                    <dl style={{ margin: 0, fontSize: 13, lineHeight: 1.9 }}>
                      {[
                        [AR3('نوع', 'Type', lang), KIND[p.kind] || p.kind],
                        [AR3('استان', 'Province', lang), tx(reg.name, lang)],
                        p.address ? [AR3('نشانی', 'Address', lang), p.address] : null,
                      ].filter(Boolean).map(([k, v], i) => (
                        <div key={i} style={{ display: 'flex', gap: 8, padding: '6px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
                          <dt style={{ color: 'var(--t3)', flex: 'none', minWidth: 62 }}>{k}</dt>
                          <dd style={{ margin: 0, color: 'var(--t1)', fontWeight: 600 }}>{v}</dd>
                        </div>
                      ))}
                    </dl>
                  </Card>

                  {/* دیگر جاذبه‌های همان استان — هم صفحه را پر می‌کند، هم صفحهٔ
                      جاذبه را از بن‌بست درمی‌آورد و لینکِ داخلی برایِ گوگل می‌سازد. */}
                  {p.nearby && p.nearby.length > 0 && (
                    <Card pad="16px 18px">
                      <h4 style={{ fontSize: 14, fontWeight: 800, margin: '0 0 12px' }}>
                        {AR3('دیگر جاذبه‌های ', 'More in ', lang) + tx(reg.name, lang)}
                      </h4>
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                        {p.nearby.map((n) => (
                          <a key={n.id} href={'/custom/wegopars/place.html?id=' + encodeURIComponent(n.id)}
                             style={{ display: 'flex', gap: 10, alignItems: 'center', textDecoration: 'none', color: 'inherit' }}>
                            {n.image
                              ? <img src={n.image} alt="" loading="lazy" style={{ width: 54, height: 54, borderRadius: 10, objectFit: 'cover', flex: 'none' }} />
                              : <img src={WGP.cover(tx(n.title, lang), 'place')} alt="" style={{ width: 54, height: 54, borderRadius: 10, objectFit: 'cover', flex: 'none' }} />}
                            <span style={{ minWidth: 0 }}>
                              <span className="wgp-clamp2" style={{ display: 'block', fontSize: 13, fontWeight: 700, lineHeight: 1.55 }}>{tx(n.title, lang)}</span>
                              <span style={{ fontSize: 11.5, color: 'var(--t3)' }}>{KIND[n.kind] || n.kind}</span>
                            </span>
                          </a>
                        ))}
                      </div>
                    </Card>
                  )}
                </aside>
              </div>
            </article>
          );
        }}
      </PageShell>
    );
  };

  // ─────────── صفحهٔ ۲: محصولات و غرفه‌های استان ───────────
  // ─────────── انتخابگرِ استان ───────────
  // ضدِ بن‌بست: هر لینکی که به region.html/crafts.html بدونِ ?p= برسد، به‌جای پیامِ
  // «استان یافت نشد» فهرستِ ۳۱ استان را می‌گیرد. خوراکش همان WGP_REGIONS نقشه است.
  WGP.ProvincePicker = function ProvincePicker({ lang, fa, target }) {
    const regions = (window.WGP_REGIONS || []).filter((r) => r.kind === 'PROVINCE' && r.geoKey);
    const page = target === 'crafts' ? 'crafts.html' : 'region.html';
    if (!regions.length) {
      return (
        <Empty fa={fa} lang={lang} msg={AR3('استانی انتخاب نشده. از نقشه شروع کن.', 'No province selected. Start from the map.', lang)} />
      );
    }
    return (
      <>
        <SectionHeading align="start" tag={AR3('انتخابِ استان', 'Pick a province', lang)}
          title={target === 'crafts'
            ? (AR3('صنایع‌دستی و سوغاتِ کدام استان؟', 'Handicrafts of which province?', lang))
            : (AR3('جاذبه‌های کدام استان؟', 'Attractions of which province?', lang))}
          subtitle={AR3('یکی از ۳۱ استان را انتخاب کن، یا روی نقشهٔ ایران بگرد.', 'Pick one of the 31 provinces, or explore the map.', lang)} />
        <div className="wgp-grid4" style={{ display: 'grid', gap: 14, marginTop: 26 }}>
          {regions.map((r) => (
            <a key={r.id} href={'/custom/wegopars/' + page + '?p=' + encodeURIComponent(r.geoKey)}
               style={{ textDecoration: 'none', color: 'inherit', border: '1px solid var(--line)', borderRadius: 'var(--r)', overflow: 'hidden', background: 'var(--card)', display: 'block' }}>
              {r.coverImage
                ? <img src={r.coverImage} alt={tx(r.name, lang)} loading="lazy" style={{ display: 'block', width: '100%', height: 110, objectFit: 'cover' }} />
                : <div style={{ height: 110, background: r.color || 'var(--firuze)' }} />}
              <div style={{ padding: '11px 13px' }}>
                <div style={{ fontWeight: 800, fontSize: 14 }}>{tx(r.name, lang)}</div>
                <div style={{ fontSize: 11.5, color: 'var(--t3)', marginTop: 4 }}>
                  {target === 'crafts'
                    ? fmt((r.counts || {}).shops || 0, lang) + (AR3(' غرفه', ' shops', lang))
                    : fmt((r.counts || {}).attractions || 0, lang) + (AR3(' جاذبه', ' sites', lang))}
                </div>
              </div>
            </a>
          ))}
        </div>
        <div style={{ marginTop: 26 }}>
          <Button variant="surface" href="/custom/wegopars/map.html">{AR3('نقشهٔ ایران', 'Iran map', lang)}</Button>
        </div>
      </>
    );
  };

  // ─────────── فرمِ «فروشگاهت را معرفی کن» ───────────
  // خواستهٔ مالک: «امکانِ معرفیِ فروشگاه در هر استان — سایتِ شخصی یا غرفه در باسلام».
  //
  // ⚠️ هیچ‌چیز اینجا مستقیم روی سایت نمی‌رود: سرور همیشه با `isPublished:false` ثبت
  // می‌کند و ادمین در تبِ غرفه‌ها تأیید می‌کند. پیامِ موفقیت هم همین را صریح می‌گوید،
  // وگرنه کاربر انتظار دارد فروشگاهش فوری بالا بیاید و بعد شکایت می‌کند.
  WGP.ShopSubmitForm = function ShopSubmitForm({ lang, fa, province, provinceName }) {
    const [f, setF] = React.useState({ title: '', vendor: '', category: '', url: '', contact: '' });
    const [state, setState] = React.useState({ busy: false, done: false, err: '' });
    const set = (k) => (e) => setF((o) => ({ ...o, [k]: e.target.value }));

    const submit = (e) => {
      e.preventDefault();
      if (!f.title.trim() || !f.contact.trim()) {
        setState({ busy: false, done: false, err: AR3('نامِ فروشگاه و راهِ تماس لازم است.', 'Shop name and contact are required.', lang) });
        return;
      }
      setState({ busy: true, done: false, err: '' });
      fetch('/api/v1/custom-sites/wegopars/shop-submission', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...f, province }),
      })
        .then((r) => (r.ok ? r.json() : r.json().then((j) => Promise.reject(new Error(j.message || String(r.status))))))
        .then(() => setState({ busy: false, done: true, err: '' }))
        .catch((err) => setState({
          busy: false, done: false,
          // ۴۲۹ یعنی سقفِ نرخ؛ پیامِ خامِ سرور برای کاربرِ عادی بی‌معنی است
          err: /429|Too Many/.test(err.message)
            ? (AR3('تعدادِ ثبت‌ها زیاد شد. کمی بعد دوباره تلاش کن.', 'Too many submissions. Please try again later.', lang))
            : (AR3('ثبت نشد: ', 'Failed: ', lang) + err.message),
        }));
    };

    const inp = { width: '100%', padding: '10px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--line)', background: 'var(--card)', color: 'var(--t1)', fontFamily: 'inherit', fontSize: 13.5 };
    const lbl = { display: 'block', fontSize: 12.5, color: 'var(--t2)', marginBottom: 6, fontWeight: 700 };

    return (
      <section style={{ marginTop: 40, padding: '26px 24px', borderRadius: 'var(--r-lg)', background: 'var(--bg-2)', border: '1px solid var(--line)' }}>
        <h3 style={{ fontSize: 18, fontWeight: 800, margin: '0 0 6px' }}>
          {AR3('فروشگاهت را در ', 'List your shop in ', lang) + provinceName + AR3(' معرفی کن', '', lang)}
        </h3>
        <p style={{ fontSize: 13, color: 'var(--t3)', margin: '0 0 18px', lineHeight: 1.9 }}>
          {AR3('غرفهٔ باسلام یا سایتِ شخصی — فرقی نمی‌کند. بعد از بررسی و تأیید، در صفحهٔ همین استان دیده می‌شود.', 'A Basalam shop or your own website — either works. It appears on this province’s page after review.', lang)}
        </p>

        {state.done ? (
          <div style={{ padding: '14px 16px', borderRadius: 'var(--r-sm)', background: 'color-mix(in srgb,var(--green) 14%,transparent)', border: '1px solid color-mix(in srgb,var(--green) 32%,transparent)', fontSize: 13.5, lineHeight: 1.9 }}>
            {AR3('✓ درخواستت ثبت شد. تیمِ ایران‌گرد بررسی می‌کند و بعد از تأیید، فروشگاهت روی همین صفحه می‌آید.', '✓ Submitted. Our team will review it, and your shop will appear on this page once approved.', lang)}
          </div>
        ) : (
          <form onSubmit={submit}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 14 }}>
              <div><label style={lbl}>{AR3('نامِ فروشگاه *', 'Shop name *', lang)}</label><input style={inp} value={f.title} onChange={set('title')} maxLength={160} /></div>
              <div><label style={lbl}>{AR3('نامِ صاحبِ کسب‌وکار', 'Owner name', lang)}</label><input style={inp} value={f.vendor} onChange={set('vendor')} maxLength={120} /></div>
              <div><label style={lbl}>{AR3('دستهٔ محصول', 'Category', lang)}</label><input style={inp} value={f.category} onChange={set('category')} maxLength={80} placeholder={AR3('مثلاً صنایع‌دستی، خوراکی', 'e.g. handicraft, food', lang)} /></div>
              <div><label style={lbl}>{AR3('راهِ تماس *', 'Contact *', lang)}</label><input style={inp} dir="ltr" value={f.contact} onChange={set('contact')} maxLength={160} placeholder="0912… / name@mail.com" /></div>
              <div style={{ gridColumn: '1 / -1' }}>
                <label style={lbl}>{AR3('لینکِ غرفه یا سایت', 'Shop or website link', lang)}</label>
                <input style={inp} dir="ltr" value={f.url} onChange={set('url')} maxLength={400} placeholder="https://basalam.com/…" />
              </div>
            </div>
            {state.err && <div style={{ marginTop: 12, fontSize: 13, color: 'var(--bad, #e5484d)' }}>{state.err}</div>}
            <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <button type="submit" disabled={state.busy}
                style={{ padding: '11px 22px', borderRadius: 'var(--pill)', border: 'none', background: 'var(--green)', color: '#fff', fontWeight: 800, fontSize: 13.5, cursor: state.busy ? 'wait' : 'pointer', fontFamily: 'inherit', opacity: state.busy ? .6 : 1 }}>
                {state.busy ? (AR3('در حالِ ارسال…', 'Sending…', lang)) : (AR3('ارسالِ درخواست', 'Submit', lang))}
              </button>
              <span style={{ fontSize: 12, color: 'var(--t3)' }}>{AR3('راهِ تماس فقط برای تیمِ ایران‌گرد است و روی سایت منتشر نمی‌شود.', 'Your contact is only seen by our team, never published.', lang)}</span>
            </div>
          </form>
        )}
      </section>
    );
  };

  WGP.RegionCraftsPage = function RegionCraftsPage() {
    const { loading, data, error } = useRegion();
    return (
      <PageShell crumbI18n={data ? data.name : null}>
        {({ lang, fa }) => {
          // بدونِ ?p= این صفحه بی‌معنی است. قبلاً «استان یافت نشد» می‌داد و بن‌بست بود؛
          // حالا خودش انتخابگرِ استان نشان می‌دهد تا هیچ لینکی به بن‌بست نرسد.
          if (!qs('p')) return <WGP.ProvincePicker lang={lang} fa={fa} target="crafts" />;
          if (loading) return <Empty fa={fa} lang={lang} msg={AR3('در حالِ بارگذاری…', 'Loading…', lang)} />;
          if (error || !data) return <Empty fa={fa} lang={lang} msg={AR3('استان یافت نشد.', 'Province not found.', lang)} />;
          const shops = data.shops || [];
          // دسته‌بندی بر اساسِ دستهٔ باسلام تا صفحه ساختار داشته باشد
          const groups = {};
          shops.forEach(s => { const c = s.category || (AR3('سایر', 'Other', lang)); (groups[c] = groups[c] || []).push(s); });
          const cats = Object.keys(groups).sort((a, b) => groups[b].length - groups[a].length);

          return (
            <>
              <SectionHeading align="start" tag={tx(data.name, lang)}
                title={AR3('صنایع‌دستی و سوغاتِ ', 'Handicrafts of ', lang) + tx(data.name, lang)}
                subtitle={AR3('غرفه‌های معتبرِ باسلام در این استان. خرید، پرداخت و ارسال کاملاً در بسترِ باسلام انجام می‌شود.', 'Verified Basalam vendors in this province. Purchase, payment and shipping happen entirely on Basalam.', lang)} />

              {!shops.length && <div style={{ marginTop: 24 }}><Empty fa={fa} lang={lang} msg={AR3('برای این استان هنوز غرفه‌ای ثبت نشده.', 'No shops listed yet.', lang)} /></div>}

              {cats.map(cat => (
                <section key={cat} style={{ marginTop: 34 }}>
                  <h3 style={{ fontSize: 17, fontWeight: 800, margin: '0 0 14px', display: 'flex', alignItems: 'center', gap: 9 }}>
                    <span style={{ width: 8, height: 22, borderRadius: 4, background: data.color || 'var(--clay)' }} />
                    {cat}
                    <span style={{ fontSize: 12.5, color: 'var(--t3)', fontWeight: 600 }}>({fmt(groups[cat].length, lang)})</span>
                  </h3>
                  <div className="wgp-grid4" style={{ display: 'grid', gap: 16 }}>
                    {groups[cat].map(s => (
                      <Card key={s.id} pad={0} hover style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                        <div style={{ position: 'relative' }}>
                          {s.image
                            ? <img src={s.image} alt={s.title} loading="lazy" style={{ width: '100%', height: 190, objectFit: 'cover', display: 'block' }} />
                            : <div style={{ height: 190, background: 'linear-gradient(150deg,var(--card),var(--card-2))', display: 'grid', placeItems: 'center', fontWeight: 900, fontSize: 30, color: 'var(--clay)' }}>{(s.title || '؟').charAt(0)}</div>}
                          {s.isTopVendor && <span style={{ position: 'absolute', top: 10, insetInlineStart: 10 }}><Badge tone="green" variant="solid">{AR3('غرفهٔ برتر', 'Top vendor', lang)}</Badge></span>}
                        </div>
                        <div style={{ padding: '13px 15px 15px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                          <div style={{ fontWeight: 700, fontSize: 13.5, lineHeight: 1.7 }}>{s.title}</div>
                          <div style={{ fontSize: 12, color: 'var(--t3)', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                            {s.vendor && <span>{s.vendor}</span>}
                            {s.rating != null && <span>★ {s.rating}{s.ratingCount ? ' (' + fmt(s.ratingCount, lang) + ')' : ''}</span>}
                          </div>
                          <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                            {s.price ? <span style={{ fontWeight: 800, fontSize: 14 }}>{fmt(s.price, lang)} <span style={{ fontSize: 11, color: 'var(--t3)', fontWeight: 600 }}>{AR3('تومان', 'Toman', lang)}</span></span> : <span />}
                            {/* لینکِ همکاری در فروش — nofollow/sponsored الزامی است */}
                            <Button variant="green" size="sm" href={s.url} target="_blank" rel="noopener nofollow sponsored" style={{ marginInlineStart: 'auto' }}>
                              {AR3('خرید در باسلام', 'Buy on Basalam', lang)}
                            </Button>
                          </div>
                        </div>
                      </Card>
                    ))}
                  </div>
                </section>
              ))}

              <p style={{ marginTop: 34, fontSize: 12, color: 'var(--t3)', lineHeight: 1.9 }}>
                {AR3('ایران‌گرد این غرفه‌ها را معرفی می‌کند؛ فروشنده، قیمت و ارسال بر عهدهٔ باسلام و غرفه‌دار است. ایران‌گرد از معرفی، کارمزدِ همکاری در فروش دریافت می‌کند.', 'WeGoPars introduces these vendors; the seller, price and shipping are handled by Basalam and the vendor. WeGoPars earns an affiliate commission from referrals.', lang)}
              </p>

              <WGP.ShopSubmitForm lang={lang} fa={fa} province={data.geoKey || qs('p')} provinceName={tx(data.name, lang)} />

              <div style={{ marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <Button variant="brand" href={'/custom/wegopars/region.html?p=' + encodeURIComponent(data.geoKey || qs('p'))}>
                  {AR3('جاذبه‌های ', 'Attractions of ', lang) + tx(data.name, lang)}
                </Button>
                <Button variant="surface" href="/custom/wegopars/index.html#map">{AR3('بازگشت به نقشه', 'Back to map', lang)}</Button>
              </div>
            </>
          );
        }}
      </PageShell>
    );
  };
})();