/* wegopaars site — root app: holds state, composes all sections. */
(function () {
  const DS = window.WegopaarsDesignSystem_3b7565;
  const { Button, Badge, Card, SectionHeading, Toast } = DS;
  const WGP = window.WGP;
  const { ico } = WGP;

  function ExecutorSection({ lang }) {
    const fa = lang === 'fa';
    const pRules = fa ? ['پرداخت بیعانه برای تورهای پولی الزامی و تضمین رزرو است.','تا ۷۲ ساعت پیش از تور، بیعانه قابل بازگشت است.','رعایت برنامهٔ اعلام‌شدهٔ مجری ضروری است.'] : ['A deposit is required for paid tours and secures your booking.','The deposit is refundable up to 72 hours before the tour.','Following the operator’s schedule is required.'];
    const xRules = fa ? ['داشتن مجوز قانونی گردشگری و کارت راهنما الزامی است.','بیمهٔ مسئولیت مسافر برای هر تور باید فعال باشد.','تور تا تأیید مدارک توسط ادمین منتشر نمی‌شود.'] : ['A valid tourism permit and guide card are mandatory.','Passenger liability insurance must be active.','A tour is not published until documents are approved.'];
    const ruleCard = (tone, icon, title, rules) => (
      <Card pad="16px 18px">
        <div style={{ display:'flex', alignItems:'center', gap:9, fontWeight:800, fontSize:'14.5px', marginBottom:10 }}>
          <span style={{ width:30, height:30, borderRadius:9, background:`color-mix(in srgb,${tone} 15%,transparent)`, display:'grid', placeItems:'center', color:tone }}>{icon}</span>{title}
        </div>
        <ul style={{ margin:0, paddingInlineStart:18, color:'var(--t2)', fontSize:'13.5px', lineHeight:2 }}>{rules.map((r,i)=><li key={i}>{r}</li>)}</ul>
      </Card>
    );
    return (
      <section id="executor" style={{ position:'relative', zIndex:1, background:'var(--bg-2)', borderBlock:'1px solid var(--line)' }}>
        <div style={{ maxWidth:'var(--maxw)', margin:'0 auto', padding:'54px 22px', display:'grid', gridTemplateColumns:'1fr 1fr', gap:30, alignItems:'start' }}>
          <div>
            <SectionHeading align="start" tagColor="var(--saffron)" tag={fa ? 'مشارکت در تور' : 'Join a tour'} title={fa ? 'مجری تور شوید' : 'Become a tour operator'} subtitle={fa ? 'اگر مجوز و تجربهٔ اجرای تور دارید، می‌توانید تور خودتان را در ایران‌گرد منتشر کنید.' : 'If you hold a permit and have experience, you can publish your own tour on wegopaars.'} />
            <div style={{ display:'flex', flexDirection:'column', gap:14, marginTop:20 }}>
              {ruleCard('var(--acc)', ico(['M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2','M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8'], 1.9, 16), fa ? 'قوانین شرکت‌کننده' : 'Participant rules', pRules)}
              {ruleCard('var(--saffron)', ico(['M9 12l2 2 4-4','M21 12c0 5-3.5 7.5-8.5 9C7.5 19.5 4 17 4 12V6l8-3 8 3v6z'], 1.9, 16), fa ? 'قوانین مجری' : 'Operator rules', xRules)}
            </div>
          </div>
          <Card gradient pad="26px" style={{ position:'sticky', top:90, borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-lg)' }}>
            <div style={{ width:54, height:54, borderRadius:15, background:'var(--grad-brand)', display:'grid', placeItems:'center', marginBottom:16, color:'#fff' }}>{ico(['M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2','M8 2h8v4H8z','M9 12l2 2 4-4'], 1.8, 28)}</div>
            <h3 style={{ fontSize:20, fontWeight:900, margin:'0 0 8px' }}>{fa ? 'تور خودت را اجرا کن' : 'Run your own tour'}</h3>
            <p style={{ color:'var(--t2)', fontSize:'13.5px', lineHeight:1.85, margin:'0 0 18px' }}>{fa ? 'پروفایلت را به مجری ارتقا بده، مدارک را بارگذاری کن و پس از تأیید ادمین تورت را منتشر کن.' : 'Upgrade to operator, upload documents, and publish after admin approval.'}</p>
            <div style={{ display:'flex', alignItems:'flex-start', gap:11, padding:'13px 15px', borderRadius:'var(--r-sm)', background:'color-mix(in srgb,var(--saffron) 13%,transparent)', border:'1px solid color-mix(in srgb,var(--saffron) 32%,transparent)', marginBottom:18 }}>
              <span style={{ color:'var(--saffron)', flex:'none' }}>{ico(['M12 9v4M12 17h.01','M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'], 1.9, 20)}</span>
              <div style={{ fontSize:'12.5px', color:'var(--t1)', lineHeight:1.7 }}>{fa ? 'تا تأیید مدارک و مجوزها توسط ادمین، تورِ شما منتشر و فعال نمی‌شود.' : 'Until your documents are approved by an admin, your tour stays unpublished.'}</div>
            </div>
            <Button variant="brand" fullWidth>{fa ? 'ثبت‌نام به‌عنوان مجری' : 'Apply as an operator'}</Button>
          </Card>
        </div>
      </section>
    );
  }

  function Site() {
    const D = window.WGP_DATA;
    const [lang, setLang] = React.useState('fa');
    const [theme, setTheme] = React.useState('dark');
    const [cityId, setCityId] = React.useState(null);
    const [filter, setFilter] = React.useState('all');
    const [regId, setRegId] = React.useState(null);
    const [toast, setToast] = React.useState(null);
    const tRef = React.useRef();
    const fa = lang === 'fa';
    const dir = fa ? 'rtl' : 'ltr';
    const brand = D.T[lang].brand;

    React.useEffect(() => {
      document.documentElement.setAttribute('dir', dir);
      document.documentElement.setAttribute('data-theme', theme);
    }, [dir, theme]);

    const flash = (msg) => { setToast(msg); clearTimeout(tRef.current); tRef.current = setTimeout(() => setToast(null), 2800); };

    const crafts = [];
    D.CITIES.forEach(c => { const t = c[lang]; c.handicrafts.forEach(h => { const hl = h[lang]; crafts.push({ name:hl.name, souvenir:hl.souvenir, basalam:h.basalam, cityName:t.name, initial:hl.name.charAt(0), tint:c.color }); }); });
    crafts.sort((a, b) => (b.basalam ? 1 : 0) - (a.basalam ? 1 : 0));

    const city = D.CITIES.find(c => c.id === cityId) || null;
    const regTour = D.TOURS.find(t => t.id === regId) || null;

    const confirmReg = () => {
      const t = D.TOURS.find(x => x.id === regId);
      if (t && t.filled < t.capacity) t.filled++;
      setRegId(null);
      flash(fa ? 'ثبت‌نام شما با موفقیت انجام شد.' : 'Your registration was successful.');
    };

    return (
      <div dir={dir} data-theme={theme} style={{ minHeight:'100vh', background:'var(--bg)', color:'var(--t1)', position:'relative', overflowX:'hidden' }}>
        <div style={{ position:'fixed', inset:0, pointerEvents:'none', zIndex:0, background:'radial-gradient(60% 50% at 80% 0%,rgba(31,157,87,.12),transparent 60%),radial-gradient(50% 40% at 10% 20%,rgba(232,163,61,.08),transparent 60%)' }} />
        <WGP.Nav lang={lang} theme={theme} brand={brand} onLang={() => setLang(fa ? 'en' : 'fa')} onTheme={() => setTheme(theme === 'dark' ? 'light' : 'dark')} onAdmin={() => { window.location.href = '../admin/index.html'; }} />
        <WGP.Hero lang={lang} />
        <WGP.MapSection lang={lang} cities={D.CITIES} onOpen={setCityId} />
        <WGP.DestSection lang={lang} cities={D.CITIES} onOpen={setCityId} />
        <WGP.Crafts lang={lang} crafts={crafts.slice(0, 6)} />
        <WGP.ToursSection lang={lang} tours={D.TOURS} filter={filter} onFilter={setFilter} onRegister={setRegId} />
        <ExecutorSection lang={lang} />
        <WGP.Footer lang={lang} brand={brand} />
        <WGP.CityDrawer lang={lang} city={city} onClose={() => setCityId(null)} />
        <WGP.RegModal lang={lang} tour={regTour} onClose={() => setRegId(null)} onConfirm={confirmReg} />
        {toast && <Toast message={toast} />}
      </div>
    );
  }

  window.WGP.Site = Site;
})();