/* wegopaars site — shell: shared helpers, Nav, Hero, Crafts, Footer.
   Registers onto window.WGP. Reads DS primitives from the compiled bundle. */
(function () {
  const DS = window.WegopaarsDesignSystem_3b7565;
  const { Button, Badge, Card, StatTile, SectionHeading } = DS;
  const WGP = (window.WGP = window.WGP || {});

  // ---- shared helpers ----
  const fmt = (n, lang) => lang === 'fa' ? Number(n).toLocaleString('fa-IR') : Number(n).toLocaleString('en-US');
  WGP.fmt = fmt;
  const ico = (paths, sw = 1.9, size = 18) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      {paths.map((d, i) => <path key={i} d={d} />)}
    </svg>
  );
  WGP.ico = ico;
  const Compass = (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9" /><polygon points="15.5 8.5 13.5 13.5 8.5 15.5 10.5 10.5" fill="#fff" stroke="none" />
    </svg>
  );
  WGP.Compass = Compass;

  // ---- Nav ----
  WGP.Nav = function Nav({ lang, theme, brand, onLang, onTheme, onAdmin }) {
    const items = lang === 'fa'
      ? [['#map','نقشهٔ ایران'],['#dest','مقصدها'],['#crafts','صنایع‌دستی'],['#tours','تورها'],['#guide','راهنمای سفر']]
      : [['#map','Iran Map'],['#dest','Destinations'],['#crafts','Handicrafts'],['#tours','Tours'],['#guide','Guide']];
    return (
      <nav style={{ position:'sticky', top:0, zIndex:60, backdropFilter:'blur(14px)', background:'color-mix(in srgb,var(--bg) 78%,transparent)', borderBottom:'1px solid var(--line)' }}>
        <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'13px 22px', display:'flex', alignItems:'center', gap:16 }}>
          <a href="#top" style={{ display:'flex', alignItems:'center', gap:11, textDecoration:'none', color:'var(--t1)' }}>
            <span style={{ width:40, height:40, borderRadius:13, background:'var(--grad-brand)', display:'grid', placeItems:'center', boxShadow:'0 8px 20px -8px rgba(31,157,87,.6)' }}>{Compass}</span>
            <span style={{ fontWeight:900, fontSize:21, letterSpacing:'-.5px' }}>{brand}</span>
          </a>
          <ul style={{ display:'flex', gap:4, listStyle:'none', margin:'0 auto', padding:0, fontSize:14, fontWeight:600 }}>
            {items.map(([h,l]) => <li key={h}><a href={h} style={{ color:'var(--t2)', textDecoration:'none', padding:'8px 12px', borderRadius:10, display:'block' }}>{l}</a></li>)}
          </ul>
          <div style={{ display:'flex', alignItems:'center', gap:9 }}>
            <Button variant="surface" size="sm" onClick={onLang} icon={ico(['M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18','M3 12h18'], 1.8, 16)} style={{ borderRadius:12, height:40 }}>{lang === 'fa' ? 'EN' : 'فا'}</Button>
            <button onClick={onTheme} title="theme" style={{ width:40, height:40, borderRadius:12, display:'grid', placeItems:'center', background:'var(--surface)', border:'1px solid var(--line)', color:'var(--t2)', cursor:'pointer' }}>
              {theme === 'dark'
                ? ico(['M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'], 1.8, 19)
                : ico(['M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'], 1.8, 19)}
              {theme === 'dark' && <span style={{ position:'absolute', width:8, height:8, borderRadius:'50%', background:'var(--saffron)', transform:'translate(0,-7px)' }} />}
            </button>
            <Button variant="wbc" size="sm" onClick={onAdmin} icon={ico(['M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z'], 1.6, 16)} style={{ borderRadius:12, height:40 }}>{lang === 'fa' ? 'پنل' : 'Panel'}</Button>
            <Button variant="surface" size="sm" onClick={() => window.WCAuth && window.WCAuth.open()} style={{ borderRadius:12, height:40, cursor:'pointer' }}>{lang === 'fa' ? 'ورود' : 'Log in'}</Button>
          </div>
        </div>
      </nav>
    );
  };

  // ---- Hero ----
  WGP.Hero = function Hero({ lang }) {
    const fa = lang === 'fa';
    const stats = fa
      ? [['۳۱','استان'],['120+','جاذبهٔ ثبت‌شده'],['۴۸','تور فعال'],['90+','صنعتگر']]
      : [['31','Provinces'],['120+','Attractions'],['48','Active tours'],['90+','Artisans']];
    const cards = [
      { id:'wg-hero-1', tone:'var(--saffron)', cap: fa?'مقصد ویژه':'Featured', name: fa?'میدان نقش‌جهان':'Naqsh-e Jahan Sq.', ph: fa?'عکس مقصد':'Destination', top:'6%', end:'4%', w:200, h:120, d:'7s' },
      { id:'wg-hero-2', tone:'var(--firuze)', cap: fa?'تور فصلی':'Seasonal tour', name: fa?'یلدا در کویر یزد':'Yalda in Yazd', ph: fa?'عکس تور':'Tour', bottom:'4%', start:'2%', w:210, h:120, d:'8s' },
      { id:'wg-hero-3', tone:'var(--clay)', cap: fa?'صنایع‌دستی':'Handicraft', name: fa?'میناکاری':'Mina enamel', ph: fa?'سوغات':'Souvenir', top:'40%', start:'20%', w:150, h:96, d:'6.5s' },
    ];
    return (
      <header id="top" style={{ position:'relative', zIndex:1, maxWidth:'var(--maxw)', margin:'0 auto', padding:'54px 22px 30px', display:'grid', gridTemplateColumns:'1.05fr .95fr', gap:40, alignItems:'center' }}>
        <div>
          <Badge tone="firuze" dot>{fa ? 'گردشگری ایران، یکپارچه و هوشمند' : 'Iran tourism, unified and smart'}</Badge>
          <h1 style={{ fontSize:'var(--fs-h1)', fontWeight:900, lineHeight:1.14, letterSpacing:'-1.2px', margin:'18px 0 0' }}>
            {fa ? 'سفر به ' : 'Travel to the '}<em style={{ fontStyle:'normal', background:'var(--grad-brand)', WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent' }}>{fa ? 'دلِ ایران' : 'heart of Iran'}</em><br />{fa ? 'از نقشه تا سوغات' : 'from the map to the souvenir'}
          </h1>
          <p style={{ color:'var(--t2)', fontSize:'16.5px', lineHeight:1.9, margin:'18px 0 0', maxWidth:540 }}>
            {fa ? 'روی نقشه شهر یا روستایت را انتخاب کن، جاذبه‌های مهمش را ببین، از صنعتگران محلی سوغات بخر و در تورهای فصلی و مناسبتی ثبت‌نام کن — همه در یک پلتفرم.' : 'Pick your city on the map, explore its attractions, buy souvenirs from local artisans, and join seasonal tours — all in one platform.'}
          </p>
          <div style={{ display:'flex', gap:12, marginTop:24, flexWrap:'wrap' }}>
            <Button variant="brand" href="#map" icon={ico(['M9 4 3 6v14l6-2 6 2 6-2V4l-6 2-6-2z','M9 4v14M15 6v14'])}>{fa ? 'کاوش روی نقشه' : 'Explore the map'}</Button>
            <Button variant="surface" href="#tours">{fa ? 'تورهای پیش‌رو' : 'Upcoming tours'}</Button>
          </div>
          <div style={{ display:'flex', gap:26, marginTop:30, flexWrap:'wrap' }}>
            {stats.map(([v,l]) => <StatTile key={l} value={v} label={l} />)}
          </div>
        </div>
        <div style={{ position:'relative', height:380 }}>
          <div style={{ position:'absolute', inset:0, borderRadius:'var(--r-lg)', background:'var(--grad-firuze)', opacity:.14, filter:'blur(30px)' }} />
          {cards.map(c => (
            <div key={c.id} style={{ position:'absolute', top:c.top, bottom:c.bottom, insetInlineEnd:c.end, insetInlineStart:c.start, width:c.w, borderRadius:'var(--r)', overflow:'hidden', background:'var(--card)', border:'1px solid var(--line)', boxShadow:'var(--shadow-lg)', animation:`floaty ${c.d} var(--ease) infinite` }}>
              <image-slot id={c.id} shape="rect" fit="cover" placeholder={c.ph} style={{ display:'block', width:'100%', height:c.h }}></image-slot>
              <div style={{ padding:'11px 13px' }}>
                <div style={{ fontSize:'10.5px', color:c.tone, fontWeight:800 }}>{c.cap}</div>
                <div style={{ fontWeight:800, fontSize:14, marginTop:2 }}>{c.name}</div>
              </div>
            </div>
          ))}
        </div>
      </header>
    );
  };

  // ---- Crafts ----
  WGP.Crafts = function Crafts({ lang, crafts }) {
    const fa = lang === 'fa';
    return (
      <section id="crafts" style={{ position:'relative', zIndex:1, background:'var(--bg-2)', borderBlock:'1px solid var(--line)' }}>
        <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'50px 22px' }}>
          <SectionHeading tagColor="var(--clay)" tag={fa ? 'صنایع‌دستی و سوغات' : 'Handicrafts & souvenirs'} title={fa ? 'از دستِ صنعتگران ایران' : 'Straight from Iran’s artisans'} subtitle={fa ? 'هنرمندان محلی و سوغات هر شهر؛ آن‌هایی که در باسلام غرفه دارند، مستقیم قابل خریدند.' : 'Local makers and each city’s signature souvenir; those with a Basalam shop can be bought directly.'} />
          <div style={{ display:'flex', alignItems:'center', gap:9, margin:'18px auto 26px', padding:'9px 15px', borderRadius:'var(--pill)', background:'color-mix(in srgb,var(--green) 12%,transparent)', border:'1px solid color-mix(in srgb,var(--green) 28%,transparent)', fontSize:'12.5px', color:'var(--t2)', width:'fit-content' }}>
            <span style={{ width:20, height:20, borderRadius:6, background:'var(--green)', display:'grid', placeItems:'center', color:'#fff' }}>{ico(['M5 13l4 4L19 7'], 2.6, 13)}</span>
            {fa ? 'صنایع‌دستی به غرفهٔ باسلام لینک می‌شوند؛ کسب‌وکارهای طراحی سایت، هاست و سرور به وبکستینگ و فهیم‌ساپ.' : 'Handicrafts link to their Basalam shop; web-design, hosting & server businesses to Webcasting & FahimSap.'}
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }}>
            {crafts.map((h, i) => (
              <Card key={i} pad={0} style={{ overflow:'hidden' }}>
                <div style={{ height:110, background:h.tint, display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
                  <span style={{ fontSize:30, fontWeight:900, color:'#fff', opacity:.92 }}>{h.initial}</span>
                  <span style={{ position:'absolute', top:10, insetInlineEnd:10 }}><Badge tone="acc" style={{ background:'color-mix(in srgb,var(--bg) 80%,transparent)', color:'var(--t1)' }}>{h.cityName}</Badge></span>
                </div>
                <div style={{ padding:'14px 16px' }}>
                  <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:8 }}>
                    <div><div style={{ fontWeight:800, fontSize:15 }}>{h.name}</div><div style={{ fontSize:'12.5px', color:'var(--t3)', marginTop:3 }}>{fa ? 'سوغات' : 'Souvenir'}: {h.souvenir}</div></div>
                    {h.basalam && <Badge tone="green">{fa ? 'غرفهٔ باسلام' : 'Basalam shop'}</Badge>}
                  </div>
                  <div style={{ display:'flex', gap:8, marginTop:13 }}>
                    {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>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  };

  // ---- Footer ----
  WGP.Footer = function Footer({ lang, brand }) {
    const fa = lang === 'fa';
    const col = (h, links) => (
      <div><h5 style={{ fontSize:13, color:'var(--t1)', margin:'0 0 14px' }}>{h}</h5><ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:11, fontSize:'13.5px' }}>{links.map((l,i)=><li key={i}><a href="#" style={{ color:'var(--t3)', textDecoration:'none' }}>{l}</a></li>)}</ul></div>
    );
    return (
      <footer style={{ position:'relative', zIndex:1, background:'var(--bg-2)', borderTop:'1px solid var(--line)' }}>
        <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'46px 22px 26px' }}>
          <div style={{ display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr 1fr', gap:30 }}>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                <span style={{ width:36, height:36, borderRadius:11, background:'var(--grad-brand)', display:'grid', placeItems:'center' }}>{Compass}</span>
                <span style={{ fontWeight:900, fontSize:19 }}>{brand}</span>
              </div>
              <p style={{ color:'var(--t3)', fontSize:'13.5px', lineHeight:1.9, margin:'14px 0 0', maxWidth:300 }}>{fa ? 'پلتفرم گردشگری ایران؛ کشف جاذبه‌ها، خرید سوغات و رزرو تورهای فصلی.' : 'Iran’s tourism platform — discover attractions, buy souvenirs, and book seasonal tours.'}</p>
              <div style={{ display:'inline-flex', alignItems:'center', gap:8, marginTop:16, padding:'8px 13px', borderRadius:'var(--pill)', background:'var(--surface)', border:'1px solid var(--line)', fontSize:12, color:'var(--t2)', fontWeight:700 }}>
                <span style={{ width:20, height:20, borderRadius:6, background:'var(--wbc-grad)', display:'grid', placeItems:'center', color:'#fff' }}>{ico(['M5 13l4 4L19 7'], 2.4, 12)}</span>{fa ? 'ساخته‌شده با وبکستینگ' : 'Built with Webcasting'}
              </div>
            </div>
            {col(fa ? 'کاوش' : 'Explore', fa ? ['نقشهٔ ایران','مقصدها','صنایع‌دستی','تورها'] : ['Iran Map','Destinations','Handicrafts','Tours'])}
            {col(fa ? 'همکاری' : 'Cooperate', fa ? ['ثبت‌نام مجری','ثبت غرفهٔ صنایع‌دستی','راهنمای سفر'] : ['Become an operator','Register a craft shop','Travel guide'])}
            {col(fa ? 'تماس' : 'Contact', ['۰۲۱-۰۰۰۰۰۰۰۰','hello@wegopaars.ir', fa ? 'تلگرام: wegopaars@' : 'Telegram: wegopaars@'])}
          </div>
          <div style={{ borderTop:'1px solid var(--line)', marginTop:30, paddingTop:18, display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:10, fontSize:'12.5px', color:'var(--t3)' }}>
            <span>{fa ? '© ۱۴۰۵ ایران‌گرد — تمامی حقوق محفوظ است.' : '© 2026 wegopaars — All rights reserved.'}</span>
            <span>{fa ? 'محتوای این سایت از پنل وبکستینگ مدیریت می‌شود.' : 'Content managed from the Webcasting panel.'}</span>
          </div>
        </div>
      </footer>
    );
  };
})();
