/* /events — каталог событий */

const Events = () => {
  const navy = '#1A2535';
  const cream = '#F2EADA';
  const [typeFilter, setTypeFilter] = React.useState('ALL');
  const [formatFilter, setFormatFilter] = React.useState('ALL');
  const [topicFilter, setTopicFilter] = React.useState('ALL');
  const [selectedDay, setSelectedDay] = React.useState(null);

  // События: month (0-index Apr=3), day, тип, формат, тема, название, цена, мест осталось, дата текстом
  const events = [
    {id:'e1',  d: new Date(2026,3,28), type:'СЕССИЯ',    fmt:'ОНЛАЙН',  topic:'ВЕС',         title:'Индивидуальная сессия',              price:20000,  seats:2,  dur:'90 мин',  lead:'Один запрос. Точечная работа. Ведут авторы метода.', href:'session.html'},
    {id:'e2',  d: new Date(2026,4,3),  type:'ГРУППА',    fmt:'ЛИЧНО · МОСКВА', topic:'ОТНОШЕНИЯ', title:'Расстановочная группа — «Повторяющийся сценарий»', price:55000, seats:4, dur:'3 дня', lead:'Три дня плотной работы. Свой запрос + десятки чужих сцен, которые открывают твою.', href:'#e2'},
    {id:'e3',  d: new Date(2026,4,7),  type:'ВЕБИНАР',   fmt:'ОНЛАЙН',  topic:'МЕТОД',        title:'Почему откатывается результат',        price:0,      seats:250, dur:'90 мин',  lead:'Открытый разговор о том, почему психотерапия и коучинг не удерживают эффект.', href:'#e3'},
    {id:'e4',  d: new Date(2026,4,12), type:'ПРОГРАММА', fmt:'ОНЛАЙН',  topic:'ВЕС',         title:'Поток «Вес-лес» · 4 сессии',            price:90000,  seats:3,  dur:'2 мес',   lead:'Для тех, кто сбрасывает и возвращает. Работаем с причиной, не с калориями.', href:'ves-les.html'},
    {id:'e5',  d: new Date(2026,4,17), type:'СЕССИЯ',    fmt:'ЛИЧНО · СПБ', topic:'ДЕНЬГИ',   title:'Индивидуальная сессия',                 price:20000,  seats:1,  dur:'90 мин',  lead:'Очный формат. Для тех, кто ценит живой контакт и расстановочное поле.', href:'session.html'},
    {id:'e6',  d: new Date(2026,4,22), type:'ГРУППА',    fmt:'ОНЛАЙН',  topic:'ДЕНЬГИ',      title:'Группа «Денежный потолок»',             price:48000,  seats:6,  dur:'2 дня',   lead:'Работаем с тем, что не пускает твой доход выше привычной планки.', href:'#e6'},
    {id:'e7',  d: new Date(2026,4,29), type:'ВЕБИНАР',   fmt:'ОНЛАЙН',  topic:'МЕТОД',        title:'Вселенская терапия — что это',          price:2000,   seats:120, dur:'2 ч',    lead:'Разбор метода Леонида Тальписа. С демо-работой для 3 участников.', href:'#e7'},
    {id:'e8',  d: new Date(2026,5,5),  type:'ВЫЕЗД',     fmt:'ВЫЕЗД · СОЧИ', topic:'ТЕЛО',   title:'Ретрит «Тело не врёт» · 5 дней',        price:220000, seats:2,  dur:'5 дней',  lead:'Пять дней в Сочи: утро — тело, день — сессии, вечер — сборка. Закрытая группа 8 человек.', href:'#e8'},
    {id:'e9',  d: new Date(2026,5,11), type:'ПРОГРАММА', fmt:'ОНЛАЙН',  topic:'ОТНОШЕНИЯ',   title:'Поток «Отношения»',                      price:90000,  seats:5,  dur:'2 мес',   lead:'4 сессии для тех, кто третий раз попадает в один и тот же сценарий.', href:'#e9'},
    {id:'e10', d: new Date(2026,5,18), type:'ВЕБИНАР',   fmt:'ОНЛАЙН',  topic:'ТЕЛО',         title:'Q&A с авторами метода',                 price:0,      seats:400, dur:'60 мин',  lead:'Открытый созвон. Присылаешь вопрос заранее — отвечаем в эфире.', href:'#e10'},
    {id:'e11', d: new Date(2026,5,23), type:'VIP',       fmt:'ЛИЧНО · МОСКВА', topic:'БИЗНЕС', title:'VIP-сопровождение · старт потока',     price:180000, seats:3,  dur:'3 мес',   lead:'Пакет 6 сессий + чат + 2 сверки. Для собственников и предпринимателей.', href:'#vip'},
    {id:'e12', d: new Date(2026,5,28), type:'ГРУППА',    fmt:'ОНЛАЙН',  topic:'ВОЗРАСТ',      title:'Группа «Зрелая сила»',                   price:48000,  seats:8,  dur:'2 дня',   lead:'Для женщин 45+. Без романтизации «молодости» и без страха.', href:'#e12'},
  ];

  const types = ['ALL', ...Array.from(new Set(events.map(e=>e.type)))];
  const fmts = ['ALL', 'ОНЛАЙН','ЛИЧНО','ВЫЕЗД'];
  const topics = ['ALL', ...Array.from(new Set(events.map(e=>e.topic)))];

  const filtered = events.filter(e => {
    if (typeFilter !== 'ALL' && e.type !== typeFilter) return false;
    if (formatFilter !== 'ALL' && !e.fmt.startsWith(formatFilter)) return false;
    if (topicFilter !== 'ALL' && e.topic !== topicFilter) return false;
    if (selectedDay) {
      const s = selectedDay;
      if (e.d.getFullYear() !== s.getFullYear() || e.d.getMonth() !== s.getMonth() || e.d.getDate() !== s.getDate()) return false;
    }
    return true;
  });

  // Calendar: April 2026 (month index 3)
  const [calMonth, setCalMonth] = React.useState(3);
  const calYear = 2026;
  const monthNames = ['ЯНВАРЬ','ФЕВРАЛЬ','МАРТ','АПРЕЛЬ','МАЙ','ИЮНЬ','ИЮЛЬ','АВГУСТ','СЕНТЯБРЬ','ОКТЯБРЬ','НОЯБРЬ','ДЕКАБРЬ'];
  const daysInMonth = new Date(calYear, calMonth+1, 0).getDate();
  const firstDow = (new Date(calYear, calMonth, 1).getDay() + 6) % 7; // Mon=0

  const eventsByDay = {};
  events.forEach(e => {
    if (e.d.getMonth() === calMonth && e.d.getFullYear() === calYear) {
      const k = e.d.getDate();
      eventsByDay[k] = eventsByDay[k] || [];
      eventsByDay[k].push(e);
    }
  });

  const typeColor = (t) => {
    if (t === 'СЕССИЯ') return '#F2EADA';
    if (t === 'ГРУППА') return '#E3683E';
    if (t === 'ВЕБИНАР') return '#FF4D1A';
    if (t === 'ПРОГРАММА') return '#E3683E';
    if (t === 'ВЫЕЗД') return '#FF4D1A';
    if (t === 'VIP') return '#F2EADA';
    return '#F2EADA';
  };

  const fmtDate = (d) => {
    const days = ['ВС','ПН','ВТ','СР','ЧТ','ПТ','СБ'];
    const months = ['ЯНВ','ФЕВ','МАР','АПР','МАЙ','ИЮН','ИЮЛ','АВГ','СЕН','ОКТ','НОЯ','ДЕК'];
    return `${days[d.getDay()]} · ${d.getDate()} ${months[d.getMonth()]}`;
  };

  const resetFilters = () => { setTypeFilter('ALL'); setFormatFilter('ALL'); setTopicFilter('ALL'); setSelectedDay(null); };

  return (
    <main className="page">
      <Marquee on={window.__tweaks?.marquee !== false}/>
      <Nav current="events"/>

      {/* HERO */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="tag">/события · каталог 2026</div>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 40, alignItems:'end', marginTop: 24}} className="hero-grid">
          <h1 className="poster poster-xl" style={{margin: 0}}>
            СОБЫТИЯ.<br/>
            <span className="orange">БЛИ­ЖАЙ­ШИЕ.</span>
          </h1>
          <div style={{paddingBottom: 20}}>
            <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', color:'var(--cream-77)', lineHeight: 1.7}}>
              СЕССИИ / ГРУППЫ / ВЕБИНАРЫ<br/>
              ПРОГРАММЫ / ВЫЕЗДЫ / VIP<br/>
              <span style={{color:'var(--accent)'}}>{events.length}</span> АКТИВНОСТЕЙ / {monthNames[calMonth]}&nbsp;{calYear}
            </div>
          </div>
        </div>
        <div className="rule-top" style={{marginTop: 32, padding:'24px 0'}}>
          <p className="lead" style={{margin: 0, maxWidth: 900}}>
            Выбирай формат и тему. Тыкай в дату — показываем всё, что идёт в этот день. Мест мало — записывайся заранее.
          </p>
        </div>
      </section>

      {/* CALENDAR + FILTERS */}
      <section className="section bg-deep" style={{paddingTop: 40, paddingBottom: 40}}>
        <div className="cal-grid" style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 48, alignItems:'start'}}>
          {/* CALENDAR */}
          <div>
            <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 20, borderBottom:'2px solid var(--cream)', paddingBottom: 16}}>
              <div className="tag">§ календарь</div>
              <div style={{display:'flex', gap: 10, alignItems:'center'}}>
                <button onClick={()=>setCalMonth(m=>Math.max(3,m-1))} aria-label="Предыдущий месяц"
                  style={{background:'transparent', border:'1.5px solid var(--cream-33)', color:'var(--cream)', width: 44, height: 44, cursor:'pointer', fontSize: 14}}>←</button>
                <div className="poster poster-xs" style={{fontSize: 38, margin: 0, minWidth: 220, textAlign:'center'}}>
                  {monthNames[calMonth]}
                </div>
                <button onClick={()=>setCalMonth(m=>Math.min(11,m+1))} aria-label="Следующий месяц"
                  style={{background:'transparent', border:'1.5px solid var(--cream-33)', color:'var(--cream)', width: 44, height: 44, cursor:'pointer', fontSize: 14}}>→</button>
              </div>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 4}}>
              {['ПН','ВТ','СР','ЧТ','ПТ','СБ','ВС'].map(d=>(
                <div key={d} style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', color:'var(--cream-77)', textAlign:'center', padding:'10px 0'}}>{d}</div>
              ))}
              {Array.from({length: firstDow}).map((_,i)=><div key={'b'+i}/>)}
              {Array.from({length: daysInMonth}).map((_,i)=>{
                const day = i+1;
                const evs = eventsByDay[day] || [];
                const isSel = selectedDay && selectedDay.getDate() === day && selectedDay.getMonth() === calMonth;
                const active = evs.length > 0;
                return (
                  <button key={day}
                    disabled={!active}
                    onClick={()=> setSelectedDay(isSel ? null : new Date(calYear, calMonth, day))}
                    style={{
                      aspectRatio: '1', padding: 6, cursor: active ? 'pointer' : 'default',
                      background: isSel ? 'var(--accent)' : (active ? 'rgba(227,104,62,0.12)' : 'transparent'),
                      color: isSel ? navy : 'var(--cream)',
                      border: isSel ? '1.5px solid var(--accent)' : '1px solid var(--cream-22)',
                      display:'flex', flexDirection:'column', alignItems:'flex-start', justifyContent:'space-between',
                      fontFamily:'var(--f-display)', fontWeight: 800,
                      opacity: active ? 1 : 0.4,
                    }}>
                    <span style={{fontSize: 14, letterSpacing:'-0.01em'}}>{day}</span>
                    {active && (
                      <div style={{display:'flex', gap: 3, flexWrap:'wrap'}}>
                        {evs.slice(0,3).map((e,j)=>(
                          <span key={j} style={{width: 7, height: 7, borderRadius: '50%', background: isSel ? navy : typeColor(e.type)}}/>
                        ))}
                      </div>
                    )}
                  </button>
                );
              })}
            </div>
            <div style={{marginTop: 20, display:'flex', gap: 18, flexWrap:'wrap', fontFamily:'var(--f-mono)', fontSize: 15, letterSpacing:'0.08em', color:'var(--cream-77)'}}>
              {[['СЕССИЯ','#F2EADA'],['ГРУППА','#E3683E'],['ВЕБИНАР','#FF4D1A'],['ВЫЕЗД','#FF4D1A']].map(([l,c])=>(
                <span key={l} style={{display:'inline-flex', alignItems:'center', gap: 8}}>
                  <span style={{width: 8, height: 8, borderRadius:'50%', background: c}}/>{l}
                </span>
              ))}
            </div>
          </div>

          {/* FILTERS */}
          <div>
            <div className="tag" style={{marginBottom: 20}}>§ фильтры</div>
            <div style={{borderTop:'2px solid var(--cream)', paddingTop: 20, display:'flex', flexDirection:'column', gap: 24}}>
              <FilterRow label="ТИП" options={types} value={typeFilter} set={setTypeFilter}/>
              <FilterRow label="ФОРМАТ" options={fmts} value={formatFilter} set={setFormatFilter}/>
              <FilterRow label="ТЕМА" options={topics} value={topicFilter} set={setTopicFilter}/>
              <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop: 16, borderTop:'1px solid var(--cream-33)'}}>
                <div style={{fontFamily:'var(--f-mono)', fontSize: 15, letterSpacing:'0.1em', color:'var(--cream-77)'}}>
                  НАЙДЕНО / <span className="orange" style={{fontSize: 23}}>{filtered.length}</span>
                </div>
                <button onClick={resetFilters} className="btn btn-ghost" style={{padding:'10px 18px', fontSize: 14}}>Сбросить</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* LIST */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="kicker-row">
          <div>
            <div className="tag">§ каталог</div>
            <h2 className="poster poster-md" style={{marginTop: 12}}>{filtered.length} {filtered.length%10===1 && filtered.length%100!==11 ? 'СОБЫТИЕ' : 'СОБЫТИЙ'}</h2>
          </div>
          <div className="right">
            {selectedDay ? `ДЕНЬ: ${fmtDate(selectedDay)}` : 'ВСЕ ДНИ'}<br/>
            {typeFilter !== 'ALL' && `ТИП: ${typeFilter} · `}{formatFilter !== 'ALL' && `ФМТ: ${formatFilter} · `}{topicFilter !== 'ALL' && `ТЕМА: ${topicFilter}`}
          </div>
        </div>

        {filtered.length === 0 ? (
          <div style={{padding:'60px 0', borderTop:'2px solid var(--cream)', borderBottom:'2px solid var(--cream)', textAlign:'center'}}>
            <div className="poster poster-sm orange" style={{margin:'0 0 16px'}}>НИЧЕГО.</div>
            <p style={{fontSize: 12, color:'var(--cream-99)', margin:'0 0 20px'}}>Под такие фильтры ничего не нашлось. Расслабь условия или сбрось.</p>
            <button className="btn btn-orange" onClick={resetFilters}>Сбросить фильтры</button>
          </div>
        ) : (
          <div style={{borderTop:'2px solid var(--cream)'}}>
            {filtered.map(e => <EventRow key={e.id} e={e} fmtDate={fmtDate} typeColor={typeColor}/>)}
          </div>
        )}
      </section>

      {/* LEGEND / HELP */}
      <section className="bg-orange" style={{padding:'72px var(--px)', color: navy}}>
        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 48, alignItems:'end'}} className="cta-split">
          <h2 className="poster poster-lg" style={{margin: 0}}>
            НЕ ЗНАЕШЬ,<br/>С ЧЕГО <i>НАЧАТЬ?</i>
          </h2>
          <div style={{display:'flex', flexDirection:'column', gap: 14, paddingBottom: 12}}>
            <p style={{margin:'0 0 8px', fontSize: 12, lineHeight: 1.5, fontWeight: 500}}>
              Напиши — подскажем, какой формат подходит именно тебе. Созвон 15 минут, бесплатно.
            </p>
            <a className="btn btn-lg" style={{background: navy, color: cream}} href="#record">Написать в Telegram →</a>
            <a className="btn btn-lg" style={{background:'transparent', color: navy, border:'2px solid '+navy}} href="for-whom.html">Проверить, подходит ли мне</a>
          </div>
        </div>
      </section>

      <NextSteps
        title={<>ПОСЛЕ <span className="orange">СОБЫТИЙ.</span></>}
        items={[
          {label:'Группа', desc:'Постоянный формат, не разовое событие.', href:'group.html'},
          {label:'Сессия', desc:'Индивидуальная работа — если хочется поглубже.', href:'session.html', primary:true},
          {label:'Кто ведёт', desc:'Авторы — Евгения и Ксения.', href:'about.html'},
        ]}
      />

      <Footer/>
      <FloatingCTA/>
    </main>
  );
};

const FilterRow = ({label, options, value, set}) => (
  <div>
    <div style={{fontFamily:'var(--f-mono)', fontSize: 15, letterSpacing:'0.12em', color:'var(--cream-77)', marginBottom: 10}}>/{label}</div>
    <div style={{display:'flex', flexWrap:'wrap', gap: 8}}>
      {options.map(o => {
        const sel = o === value;
        return (
          <button key={o} onClick={()=>set(o)}
            style={{
              padding:'8px 14px', fontSize: 12, fontWeight: 700, letterSpacing:'0.06em',
              textTransform:'uppercase', cursor:'pointer',
              background: sel ? 'var(--accent)' : 'transparent',
              color: sel ? 'var(--navy)' : 'var(--cream)',
              border: sel ? '1.5px solid var(--accent)' : '1.5px solid var(--cream-33)',
            }}>
            {o === 'ALL' ? 'все' : o}
          </button>
        );
      })}
    </div>
  </div>
);

const EventRow = ({e, fmtDate, typeColor}) => {
  const seatsLow = e.seats <= 3;
  return (
    <a href={e.href} className="event-row" style={{
        display:'grid',
        gridTemplateColumns:'120px 110px 1fr 130px 180px',
        gap: 24, alignItems:'center', padding:'24px 0',
        borderBottom:'1px solid var(--cream-33)',
        textDecoration:'none', color:'inherit',
      }}>
      {/* Date block */}
      <div>
        <div style={{fontFamily:'var(--f-display)', fontSize: 56, fontWeight: 900, color:'var(--accent)', lineHeight: 0.85, letterSpacing:'-0.03em'}}>{e.d.getDate()}</div>
        <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', marginTop: 6, color:'var(--cream-77)'}}>
          {fmtDate(e.d).split(' · ')[1].split(' ')[1]} · {fmtDate(e.d).split(' · ')[0]}
        </div>
      </div>

      {/* Type pill */}
      <div>
        <span style={{
          display:'inline-block', padding:'5px 10px',
          background: typeColor(e.type), color:'#1A2535',
          fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em', fontWeight: 700,
        }}>{e.type}</span>
        <div style={{fontFamily:'var(--f-mono)', fontSize: 12, color:'var(--cream-77)', letterSpacing:'0.08em', marginTop: 8}}>{e.fmt}</div>
      </div>

      {/* Title + lead */}
      <div>
        <h3 className="event-title" style={{fontFamily:'var(--f-display)', fontSize: 'clamp(19px, 1.9vw, 24px)', fontWeight: 900, letterSpacing:'-0.015em', margin:'0 0 6px', lineHeight: 1.15}}>{e.title}</h3>
        <p style={{fontSize: 15, margin: 0, lineHeight: 1.45, color:'var(--cream-99)', maxWidth: 560}}>{e.lead}</p>
        <div style={{marginTop: 10, fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.08em', color:'var(--cream-77)'}}>
          ТЕМА · {e.topic} &nbsp; / &nbsp; {e.dur}
        </div>
      </div>

      {/* Seats */}
      <div style={{textAlign:'left'}}>
        <div style={{fontFamily:'var(--f-mono)', fontSize: 12, letterSpacing:'0.1em', color:'var(--cream-77)'}}>МЕСТ</div>
        <div style={{fontFamily:'var(--f-display)', fontSize: 29, fontWeight: 900, letterSpacing:'-0.02em', color: seatsLow ? 'var(--acid)' : 'var(--cream)'}}>
          {e.seats}
          {seatsLow && <span style={{fontFamily:'var(--f-mono)', fontSize: 11, letterSpacing:'0.12em', marginLeft: 6, verticalAlign:'middle'}}>МАЛО</span>}
        </div>
      </div>

      {/* Price + CTA */}
      <div style={{display:'flex', flexDirection:'column', alignItems:'flex-end', gap: 10}}>
        <div style={{fontFamily:'var(--f-display)', fontSize: 15, fontWeight: 900, letterSpacing:'-0.01em'}}>
          {e.price === 0 ? 'БЕСПЛАТНО' : `${e.price.toLocaleString('ru-RU')} ₽`}
        </div>
        <span className="btn btn-orange" style={{padding:'10px 16px', fontSize: 14}}>Записаться →</span>
      </div>
    </a>
  );
};

window.Events = Events;
