/* wegopaars site — explore: interactive Iran map, destination grid, city drawer. */
(function () {
  const DS = window.WegopaarsDesignSystem_3b7565;
  const { Card, Badge, Button, SectionHeading } = DS;
  const WGP = (window.WGP = window.WGP || {});
  const { fmt, ico } = WGP;

  const toPoints = (raw) => {
    const a = String(raw).split(',').map(s => s.trim()).filter(Boolean);
    const o = [];
    for (let i = 0; i + 1 < a.length; i += 2) o.push(a[i] + ',' + a[i + 1]);
    return o.join(' ');
  };

  // ---- Interactive SVG map + side list ----
  WGP.MapSection = function MapSection({ lang, cities, onOpen }) {
    const fa = lang === 'fa';
    const [hover, setHover] = React.useState(null);
    const PROV = window.WGP_PROV || [];
    const cityByPkey = {}; cities.forEach(c => { cityByPkey[c.pkey] = c; });

    let hoverInfo = { name: fa ? 'روی استان حرکت کن' : 'Hover a province', color: 'var(--t3)', meta: '' };
    if (hover) {
      const c = cityByPkey[hover];
      const pv = PROV.find(x => x.k === hover);
      const nm = fa ? hover : (pv ? pv.en : hover);
      hoverInfo = { name: nm, color: c ? c.color : 'var(--t3)', meta: c ? (fmt(c[lang].attractions.length, lang) + ' ' + (fa ? 'جاذبه' : 'sites')) : (fa ? 'به‌زودی' : 'Coming soon') };
    }

    return (
      <section id="map" style={{ position:'relative', zIndex:1, maxWidth:'var(--maxw)', margin:'0 auto', padding:'46px 22px' }}>
        <SectionHeading tag={fa ? 'نقشهٔ تعاملی' : 'Interactive map'} title={fa ? 'استانت را روی نقشه انتخاب کن' : 'Pick your province on the map'} subtitle={fa ? 'روی هر استان کلیک کن تا جاذبه‌ها، صنایع‌دستی و تورهای آن باز شود.' : 'Click any province to open its attractions, handicrafts and tours.'} />
        <div style={{ display:'grid', gridTemplateColumns:'1fr 290px', gap:22, alignItems:'start', marginTop:30 }}>
          <div onMouseLeave={() => setHover(null)} style={{ position:'relative', borderRadius:'var(--r-lg)', background:'linear-gradient(160deg,var(--card),var(--card-2))', border:'1px solid var(--line)', boxShadow:'var(--shadow)', overflow:'hidden', padding:14 }}>
            <svg viewBox="0 0 670 620" preserveAspectRatio="xMidYMid meet" style={{ width:'100%', height:'auto', display:'block' }}>
              {PROV.map(p => {
                const city = cityByPkey[p.k];
                const fill = city ? city.color : 'var(--muted)';
                return (
                  <polygon key={p.k} points={toPoints(p.c)}
                    onClick={() => city ? onOpen(city.id) : null}
                    onMouseEnter={() => setHover(p.k)}
                    style={{ fill, fillOpacity: city ? .82 : 1, stroke:'var(--bg)', strokeWidth:1, cursor:'pointer', transition:'fill-opacity .2s' }}
                    onMouseOver={(e) => { e.target.style.fillOpacity = 1; if (!city) e.target.style.fill = 'var(--firuze)'; }}
                    onMouseOut={(e) => { e.target.style.fillOpacity = city ? .82 : 1; if (!city) e.target.style.fill = 'var(--muted)'; }}
                  />
                );
              })}
            </svg>
            <div style={{ position:'absolute', bottom:16, insetInlineStart:16, display:'flex', alignItems:'center', gap:9, padding:'8px 14px', borderRadius:'var(--pill)', background:'color-mix(in srgb,var(--bg) 85%,transparent)', border:'1px solid var(--line)', backdropFilter:'blur(6px)', minHeight:36 }}>
              <span style={{ width:9, height:9, borderRadius:'50%', background:hoverInfo.color }} />
              <span style={{ fontWeight:800, fontSize:'13.5px' }}>{hoverInfo.name}</span>
              <span style={{ fontSize:'11.5px', color:'var(--t3)' }}>{hoverInfo.meta}</span>
            </div>
          </div>
          <Card pad={8} className="ir-scroll" style={{ borderRadius:'var(--r-lg)', maxHeight:560, overflow:'auto' }}>
            <div style={{ padding:'10px 12px 8px', fontSize:12, fontWeight:800, color:'var(--t3)' }}>{fa ? 'مقصدها' : 'Destinations'}</div>
            {cities.map(c => {
              const t = c[lang];
              return (
                <button key={c.id} onClick={() => onOpen(c.id)} style={{ display:'flex', alignItems:'center', gap:10, width:'100%', padding:'11px 12px', borderRadius:12, border:'1px solid transparent', background:'transparent', cursor:'pointer', color:'var(--t1)', fontFamily:'inherit' }}>
                  <span style={{ width:9, height:9, borderRadius:'50%', background:c.color, flex:'none' }} />
                  <span style={{ fontWeight:700, fontSize:14, flex:1, textAlign:'start' }}>{t.name}</span>
                  <span style={{ fontSize:'11.5px', color:'var(--t3)' }}>{fmt(t.attractions.length, lang)} {fa ? 'جاذبه' : 'sites'}</span>
                </button>
              );
            })}
          </Card>
        </div>
      </section>
    );
  };

  // ---- Featured destinations grid ----
  WGP.DestSection = function DestSection({ lang, cities, onOpen }) {
    const fa = lang === 'fa';
    return (
      <section id="dest" style={{ position:'relative', zIndex:1, maxWidth:'var(--maxw)', margin:'0 auto', padding:'46px 22px' }}>
        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:20, marginBottom:26, flexWrap:'wrap' }}>
          <SectionHeading align="start" tagColor="var(--saffron)" tag={fa ? 'مقصدهای منتخب' : 'Featured destinations'} title={fa ? 'شهرهایی که باید دید' : 'Cities worth seeing'} />
          <p style={{ color:'var(--t2)', fontSize:14, maxWidth:360, margin:0, lineHeight:1.8 }}>{fa ? 'گزیده‌ای از محبوب‌ترین مقصدهای ایران؛ روی هر کارت بزن و جاذبه‌هایش را کشف کن.' : 'A pick of Iran’s most loved destinations — tap a card to discover its attractions.'}</p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:18 }}>
          {cities.slice(0, 8).map(c => {
            const t = c[lang];
            return (
              <Card key={c.id} hover as="button" pad={0} onClick={() => onOpen(c.id)} style={{ overflow:'hidden', textAlign:'start', cursor:'pointer', fontFamily:'inherit' }}>
                <div style={{ position:'relative' }}>
                  <image-slot id={'wg-dest-' + c.id} shape="rect" fit="cover" placeholder={t.name} style={{ display:'block', width:'100%', height:140 }}></image-slot>
                  <span style={{ position:'absolute', top:10, insetInlineStart:10 }}><Badge tone={c.color} variant="solid">{t.province}</Badge></span>
                </div>
                <div style={{ padding:'13px 15px' }}>
                  <div style={{ fontWeight:800, fontSize:16 }}>{t.name}</div>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:8 }}>
                    <span style={{ fontSize:12, color:'var(--t3)' }}>{fmt(t.attractions.length, lang)} {fa ? 'جاذبه' : 'sites'}</span>
                    <span style={{ fontSize:'12.5px', fontWeight:700, color:'var(--acc)' }}>{fa ? 'کاوش' : 'Explore'} →</span>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      </section>
    );
  };

  // ---- City drawer ----
  WGP.CityDrawer = function CityDrawer({ lang, city, onClose }) {
    if (!city) return null;
    const fa = lang === 'fa';
    const t = city[lang];
    const TY = { hist: fa?'تاریخی':'Historical', nat: fa?'طبیعی':'Natural', rel: fa?'مذهبی':'Religious', cult: fa?'فرهنگی':'Cultural' };
    return (
      <>
        <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:80, background:'rgba(4,12,14,.55)', backdropFilter:'blur(3px)' }} />
        <aside className="ir-scroll" style={{ position:'fixed', top:0, insetInlineEnd:0, bottom:0, zIndex:90, width:'min(480px,94vw)', background:'var(--bg)', borderInlineStart:'1px solid var(--line)', boxShadow:'var(--shadow-lg)', overflowY:'auto', animation:'drawerIn .4s var(--ease)' }}>
          <div style={{ position:'relative' }}>
            <image-slot id={'wg-city-' + city.id} shape="rect" fit="cover" placeholder={t.name} style={{ display:'block', width:'100%', height:200 }}></image-slot>
            <div style={{ position:'absolute', inset:0, background:'linear-gradient(to top,var(--bg),transparent 70%)' }} />
            <button onClick={onClose} style={{ position:'absolute', top:14, insetInlineStart:14, width:38, height:38, borderRadius:11, background:'rgba(4,12,14,.5)', backdropFilter:'blur(6px)', border:'1px solid rgba(255,255,255,.16)', color:'#fff', cursor:'pointer', display:'grid', placeItems:'center' }}>{ico(['M18 6 6 18M6 6l12 12'], 2, 18)}</button>
            <div style={{ position:'absolute', insetInlineEnd:20, bottom:14 }}>
              <span style={{ fontSize:12, color:'var(--saffron)', fontWeight:800 }}>{t.province}</span>
              <h3 style={{ fontSize:27, fontWeight:900, margin:'2px 0 0' }}>{t.name}</h3>
            </div>
          </div>
          <div style={{ padding:'20px 22px 40px' }}>
            <p style={{ color:'var(--t2)', fontSize:14, lineHeight:1.85, margin:'0 0 22px' }}>{t.tagline}</p>
            <div style={{ display:'flex', alignItems:'center', gap:8, margin:'0 0 13px', color:'var(--firuze)' }}>{ico(['M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6'], 1.9, 18)}<h4 style={{ fontSize:'15.5px', fontWeight:800, margin:0, color:'var(--t1)' }}>{fa ? 'جاذبه‌های مهم' : 'Key attractions'}</h4></div>
            <div style={{ display:'flex', flexDirection:'column', gap:9, marginBottom:26 }}>
              {t.attractions.map((a, i) => (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px', borderRadius:'var(--r-sm)', background:'var(--card)', border:'1px solid var(--line)' }}>
                  <span style={{ width:38, height:38, borderRadius:10, background:'color-mix(in srgb,var(--firuze) 14%,transparent)', display:'grid', placeItems:'center', flex:'none', color:'var(--acc)' }}>{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.8, 18)}</span>
                  <div style={{ flex:1 }}><div style={{ fontWeight:700, fontSize:14 }}>{a.name}</div><div style={{ fontSize:12, color:'var(--t3)', marginTop:1 }}>{a.note}</div></div>
                  <Badge tone="acc">{TY[a.type]}</Badge>
                </div>
              ))}
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:8, margin:'0 0 13px', color:'var(--clay)' }}>{ico(['M9 15l-1 7h8l-1-7','M12 2a7 7 0 0 0-7 7c0 2 1 3 2 3s1.5-1 1.5-1 .5 1 1.5 1 1.5-1 1.5-1 .5 1 1.5 1 2-1 2-3a7 7 0 0 0-7-7z'], 1.9, 18)}<h4 style={{ fontSize:'15.5px', fontWeight:800, margin:0, color:'var(--t1)' }}>{fa ? 'صنایع‌دستی و سوغات' : 'Handicrafts & souvenirs'}</h4></div>
            <div style={{ display:'flex', flexDirection:'column', gap:9, marginBottom:26 }}>
              {city.handicrafts.map((h, i) => {
                const hl = h[lang];
                return (
                  <div key={i} style={{ padding:'13px 14px', borderRadius:'var(--r-sm)', background:'var(--card)', border:'1px solid var(--line)' }}>
                    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <span style={{ width:38, height:38, borderRadius:10, background:'color-mix(in srgb,var(--clay) 16%,transparent)', display:'grid', placeItems:'center', flex:'none', fontWeight:900, color:'var(--clay)' }}>{hl.name.charAt(0)}</span>
                      <div style={{ flex:1 }}><div style={{ fontWeight:700, fontSize:14 }}>{hl.name}</div><div style={{ fontSize:12, color:'var(--t3)', marginTop:1 }}>{fa ? 'سوغات' : 'Souvenir'}: {hl.souvenir}</div></div>
                      {h.basalam && <Badge tone="green">{fa ? 'غرفهٔ باسلام' : 'Basalam shop'}</Badge>}
                    </div>
                    <div style={{ display:'flex', gap:8, marginTop:11 }}>
                      {h.basalam && <Button variant="green" size="sm" style={{ flex:1 }}>{fa ? 'مشاهده در باسلام' : 'View on Basalam'}</Button>}
                      <Button variant="surface" size="sm" style={{ flex:1 }}>{fa ? 'تماس با صنعتگر' : 'Contact artisan'}</Button>
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{ display:'flex', alignItems:'center', gap:8, margin:'0 0 13px', color:'var(--firuze)' }}>{ico(['M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20','M12 2a10 10 0 0 1 0 20 10 10 0 0 1 0-20z'], 1.9, 18)}<h4 style={{ fontSize:'15.5px', fontWeight:800, margin:0, color:'var(--t1)' }}>{fa ? 'خدمات دیجیتال (طراحی سایت، هاست و سرور)' : 'Digital services (web, hosting, server)'}</h4></div>
            <div style={{ padding:'14px 15px', borderRadius:'var(--r-sm)', background:'color-mix(in srgb,var(--firuze) 9%,var(--card))', border:'1px solid color-mix(in srgb,var(--firuze) 26%,transparent)', marginBottom:26 }}>
              <p style={{ margin:'0 0 12px', fontSize:'12.5px', color:'var(--t2)', lineHeight:1.7 }}>{fa ? 'برای طراحی سایت و میزبانی کسب‌وکارهای این استان، وبکستینگ و فهیم‌ساپ معرفی می‌شوند.' : 'For website design and hosting of this province’s businesses, Webcasting and FahimSap are recommended.'}</p>
              <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
                <div style={{ display:'flex', alignItems:'center', gap:11 }}>
                  <span style={{ width:38, height:38, borderRadius:10, background:'var(--wbc-grad)', display:'grid', placeItems:'center', flex:'none', color:'#fff' }}>{ico(['M3 5h18v12H3z','M8 21h8M12 17v4'], 1.9, 18)}</span>
                  <div style={{ flex:1 }}><div style={{ fontWeight:700, fontSize:14 }}>{fa ? 'وبکستینگ' : 'Webcasting'}</div><div style={{ fontSize:12, color:'var(--t3)', marginTop:1 }}>{fa ? 'طراحی و ساخت سایت' : 'Website design & build'}</div></div>
                  <Button variant="wbc" size="sm">{fa ? 'مشاهده در وبکستینگ' : 'View on Webcasting'}</Button>
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:11 }}>
                  <span style={{ width:38, height:38, borderRadius:10, background:'color-mix(in srgb,var(--azure) 18%,transparent)', display:'grid', placeItems:'center', flex:'none', color:'var(--azure)' }}>{ico(['M4 5h16v6H4zM4 13h16v6H4z','M8 8h.01M8 16h.01'], 1.9, 18)}</span>
                  <div style={{ flex:1 }}><div style={{ fontWeight:700, fontSize:14 }}>{fa ? 'فهیم‌ساپ' : 'FahimSap'}</div><div style={{ fontSize:12, color:'var(--t3)', marginTop:1 }}>{fa ? 'هاست و سرور' : 'Hosting & server'}</div></div>
                  <Button variant="surface" size="sm">{fa ? 'مشاهده در فهیم‌ساپ' : 'View on FahimSap'}</Button>
                </div>
              </div>
            </div>
            <Button variant="brand" fullWidth href="#tours" onClick={onClose}>{(fa ? 'تورهای مرتبط با ' : 'Tours related to ') + t.name}</Button>
          </div>
        </aside>
      </>
    );
  };
})();