/* wegopaars site — tours: seasonal-tour grid with filter + registration modal. */
(function () {
  const DS = window.WegopaarsDesignSystem_3b7565;
  const { Card, Badge, Button, FilterChip, ProgressBar, Avatar, SectionHeading, Input } = DS;
  const WGP = (window.WGP = window.WGP || {});
  const { fmt, ico } = WGP;

  const SEASON_COLOR = { spring:'#3fae6a', summer:'#e8a33d', autumn:'#c2603e', winter:'#2aa7c4', event:'#9b6cc2' };

  WGP.ToursSection = function ToursSection({ lang, tours, filter, onFilter, onRegister }) {
    const fa = lang === 'fa';
    const T = window.WGP_DATA.T[lang];
    const FILTERS = ['all','spring','summer','autumn','winter','event','free'];
    const shown = tours.filter(t => filter === 'all' ? true : filter === 'free' ? t.price === 0 : t.season === filter);
    return (
      <section id="tours" style={{ position:'relative', zIndex:1, maxWidth:'var(--maxw)', margin:'0 auto', padding:'50px 22px' }}>
        <SectionHeading tag={fa ? 'تورهای فصلی و مناسبتی' : 'Seasonal & special tours'} title={fa ? 'تور بعدی‌ات را رزرو کن' : 'Book your next tour'} subtitle={fa ? 'تورهای پولی با پرداخت بخشی از هزینه (بیعانه) و تورهای رایگان با ثبت‌نام ساده.' : 'Paid tours with a partial deposit, and free tours with simple registration.'} />
        <div style={{ display:'flex', gap:8, justifyContent:'center', flexWrap:'wrap', margin:'22px 0 26px' }}>
          {FILTERS.map(id => <FilterChip key={id} active={id === filter} onClick={() => onFilter(id)}>{T['flt_' + id]}</FilterChip>)}
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:18 }}>
          {shown.map(t => {
            const isFree = t.price === 0;
            const color = isFree ? '#3fae6a' : SEASON_COLOR[t.season];
            const exec = fa ? t.execFa : t.execEn;
            const pct = Math.round(t.filled / t.capacity * 100);
            return (
              <Card key={t.id} pad={0} style={{ overflow:'hidden', display:'flex', flexDirection:'column' }}>
                <div style={{ position:'relative' }}>
                  <image-slot id={'wg-tour-' + t.id} shape="rect" fit="cover" placeholder={fa ? t.titleFa : t.titleEn} style={{ display:'block', width:'100%', height:150 }}></image-slot>
                  <span style={{ position:'absolute', top:11, insetInlineStart:11 }}><Badge tone={color} variant="solid">{isFree ? T.flt_free : T['se_' + t.season]}</Badge></span>
                  {isFree && <span style={{ position:'absolute', top:11, insetInlineEnd:11 }}><Badge tone="green" variant="solid">{fa ? 'رایگان' : 'Free'}</Badge></span>}
                </div>
                <div style={{ padding:'15px 16px', display:'flex', flexDirection:'column', flex:1 }}>
                  <div style={{ fontWeight:800, fontSize:16, lineHeight:1.5 }}>{fa ? t.titleFa : t.titleEn}</div>
                  <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:9, fontSize:12, color:'var(--t3)' }}>
                    <span style={{ display:'inline-flex', alignItems:'center', gap:5 }}>{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, 14)}{fa ? t.cityFa : t.cityEn}</span>
                    <span style={{ display:'inline-flex', alignItems:'center', gap:5 }}>{ico(['M3 4h18v18H3z','M3 10h18M8 2v4M16 2v4'], 1.8, 14)}{fa ? t.dateFa : t.dateEn}</span>
                    <span>{fa ? t.durFa : t.durEn}</span>
                  </div>
                  <div style={{ marginTop:13 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', fontSize:'11.5px', color:'var(--t3)', marginBottom:5 }}><span>{fa ? 'ظرفیت' : 'Seats'}</span><span>{fmt(t.filled, lang)} / {fmt(t.capacity, lang)}</span></div>
                    <ProgressBar value={pct} color={color} />
                  </div>
                  <div style={{ display:'flex', alignItems:'center', gap:7, marginTop:13, fontSize:12, color:'var(--t2)' }}>
                    <Avatar initial={exec ? exec.charAt(0) : ''} size={22} />{exec}
                    <Badge tone="green" style={{ marginInlineStart:'auto' }} icon={ico(['M5 13l4 4L19 7'], 2.4, 11)}>{fa ? 'تأییدشده' : 'Verified'}</Badge>
                  </div>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:15, paddingTop:14, borderTop:'1px solid var(--line)' }}>
                    <div>
                      <div style={{ fontSize:'10.5px', color:'var(--t3)' }}>{isFree ? (fa ? 'ثبت‌نام آزاد' : 'Open registration') : (fa ? 'هر نفر' : 'per person')}</div>
                      <div style={{ fontWeight:900, fontSize:16, color:'var(--t1)' }}>{isFree ? (fa ? 'رایگان' : 'Free') : fmt(t.price, lang) + ' ' + T.toman}</div>
                    </div>
                    <Button variant="brand" size="sm" onClick={() => onRegister(t.id)}>{fa ? 'ثبت‌نام' : 'Register'}</Button>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>
      </section>
    );
  };

  WGP.RegModal = function RegModal({ lang, tour, onClose, onConfirm }) {
    if (!tour) return null;
    const fa = lang === 'fa';
    const T = window.WGP_DATA.T[lang];
    const isFree = tour.price === 0;
    const deposit = Math.round(tour.price * tour.depositPct / 100);
    return (
      <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:95, background:'rgba(4,12,14,.6)', backdropFilter:'blur(4px)', display:'grid', placeItems:'center', padding:20 }}>
        <div onClick={(e) => e.stopPropagation()} style={{ width:'min(460px,96vw)', background:'var(--bg)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-lg)', overflow:'hidden', animation:'pop .35s var(--spring)' }}>
          <div style={{ padding:'20px 22px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:12 }}>
            <div>
              <div style={{ fontSize:'11.5px', fontWeight:800, color:'var(--acc)' }}>{fa ? 'ثبت‌نام در تور' : 'Tour registration'}</div>
              <h3 style={{ fontSize:18, fontWeight:900, margin:'5px 0 0' }}>{fa ? tour.titleFa : tour.titleEn}</h3>
              <div style={{ fontSize:'12.5px', color:'var(--t3)', marginTop:4 }}>{fa ? tour.cityFa : tour.cityEn} · {fa ? tour.dateFa : tour.dateEn} · {fa ? tour.durFa : tour.durEn}</div>
            </div>
            <button onClick={onClose} style={{ width:34, height:34, borderRadius:10, background:'var(--surface)', border:'1px solid var(--line)', color:'var(--t2)', cursor:'pointer', display:'grid', placeItems:'center', flex:'none' }}>{ico(['M18 6 6 18M6 6l12 12'], 2, 16)}</button>
          </div>
          <div style={{ padding:'20px 22px' }}>
            <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
              <Input label={fa ? 'نام و نام خانوادگی' : 'Full name'} />
              <Input label={fa ? 'شمارهٔ تماس' : 'Phone number'} type="tel" />
            </div>
            {isFree
              ? <div style={{ marginTop:16, padding:14, borderRadius:'var(--r-sm)', background:'color-mix(in srgb,var(--green) 12%,transparent)', border:'1px solid color-mix(in srgb,var(--green) 30%,transparent)', display:'flex', alignItems:'center', gap:10 }}>
                  <span style={{ color:'var(--green)' }}>{ico(['M5 13l4 4L19 7'], 2, 20)}</span>
                  <div style={{ fontSize:13, color:'var(--t1)', fontWeight:700 }}>{fa ? 'این تور رایگان است — فقط ثبت‌نام کنید.' : 'This tour is free — just register.'}</div>
                </div>
              : <div style={{ marginTop:16, padding:15, borderRadius:'var(--r-sm)', background:'var(--card)', border:'1px solid var(--line)' }}>
                  <div style={{ display:'flex', justifyContent:'space-between', fontSize:13, color:'var(--t2)', marginBottom:8 }}><span>{fa ? 'هزینهٔ کل تور' : 'Total tour price'}</span><span style={{ fontWeight:700, color:'var(--t1)' }}>{fmt(tour.price, lang)} {T.toman}</span></div>
                  <div style={{ display:'flex', justifyContent:'space-between', fontSize:13, color:'var(--t2)', marginBottom:10 }}><span>{fa ? 'بیعانه' : 'Deposit'} ({fa ? '٪' + fmt(tour.depositPct, lang) : fmt(tour.depositPct, lang) + '%'})</span><span style={{ fontWeight:900, color:'var(--acc)', fontSize:16 }}>{fmt(deposit, lang)} {T.toman}</span></div>
                  <div style={{ fontSize:'11.5px', color:'var(--t3)', lineHeight:1.7, paddingTop:10, borderTop:'1px solid var(--line)' }}>{fa ? 'برای ثبت‌نام، بیعانه را همین حالا پرداخت می‌کنید؛ مابقی پیش از شروع تور.' : 'You pay the deposit now; the rest is settled before the tour starts.'}</div>
                </div>}
            <Button variant="brand" fullWidth style={{ marginTop:18 }} onClick={onConfirm}>{isFree ? (fa ? 'ثبت‌نام رایگان' : 'Register for free') : (fa ? 'پرداخت بیعانه و ثبت‌نام' : 'Pay deposit & register')}</Button>
          </div>
        </div>
      </div>
    );
  };
})();