/* Главная страница */

/* Карусель текстов «о месте» — автолистание + ручные кнопки.
   Тексты лежат в отдельном файле и разделяются пустой строкой. */
function AboutRotator({ src, interval = 6000 }) {
  const [paras, setParas] = useState([]);
  const [i, setI] = useState(0);
  const timer = useRef(null);

  useEffect(() => {
    let alive = true;
    fetch(src)
      .then((r) => r.text())
      .then((t) => {
        if (!alive) return;
        const parts = t.split(/\n\s*\n/).map((s) => s.trim()).filter(Boolean);
        setParas(parts);
      })
      .catch(() => {});
    return () => { alive = false; };
  }, [src]);

  const arm = React.useCallback(() => {
    clearInterval(timer.current);
    if (paras.length > 1) {
      timer.current = setInterval(() => setI((x) => (x + 1) % paras.length), interval);
    }
  }, [paras.length, interval]);

  useEffect(() => { arm(); return () => clearInterval(timer.current); }, [arm]);

  const move = (d) => { setI((x) => (x + d + paras.length) % paras.length); arm(); };

  if (!paras.length) return null;

  return (
    <div className="about-rot">
      <p key={i} className="muted prettyw about-rot__text">{paras[i]}</p>
      <div className="about-rot__nav">
        <button className="about-rot__btn about-rot__btn--prev" onClick={() => move(-1)} aria-label="Предыдущий">
          <Arrow className="arr" />
        </button>
        <div className="about-rot__dots">
          {paras.map((_, k) => (
            <button key={k} className={'about-rot__dot' + (k === i ? ' is-on' : '')}
              onClick={() => { setI(k); arm(); }} aria-label={'Текст ' + (k + 1)}></button>
          ))}
        </div>
        <button className="about-rot__btn" onClick={() => move(1)} aria-label="Следующий">
          <Arrow className="arr" />
        </button>
      </div>
    </div>
  );
}

function Home({ go }) {
  const { events } = window.useEvents();
  const now = Date.now();
  const ts = (e) => (e._ts || 0);
  const isPast = (e) => ts(e) > 0 && ts(e) + 36e5 * 6 < now;
  const upcoming = events.filter((e) => !isPast(e)).sort((a, b) => ts(a) - ts(b));
  const recentPast = events.filter(isPast).sort((a, b) => ts(b) - ts(a));
  /* сначала ближайшие, добиваем недавними прошедшими — всего три */
  const ev = [...upcoming, ...recentPast].slice(0, 3).map((e) => ({ ...e, _past: isPast(e) }));
  return (
    <div>
      {/* ---------- HERO (фото) ---------- */}
      <section style={{ position:'relative', borderBottom:'1px solid var(--ink)', overflow:'hidden' }}>
        <img src="assets/photos/typewriter-green.png" alt="" style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 38%' }} />
        <div style={{ position:'absolute', inset:0, background:'linear-gradient(100deg, rgba(18,17,13,0.88) 0%, rgba(18,17,13,0.64) 48%, rgba(18,17,13,0.34) 80%, rgba(18,17,13,0.18) 100%)' }}></div>
        <div className="wrap" style={{ position:'relative', paddingTop:'clamp(48px,7vw,96px)', paddingBottom:'clamp(44px,6vw,84px)' }}>
          <div className="flex center gap-s fade-up" style={{ marginBottom: 26 }}>
            <span className="tag" style={{ color:'rgba(255,255,255,0.66)' }}>[ Социальное комьюнити · Тбилиси · с 2023 ]</span>
          </div>
          <h1 className="display fade-up wrapb" style={{ color:'#FCFBF7' }}>
            Дом вдали<br/>от <span style={{ color:'var(--green-2)' }}>дома</span>
          </h1>
          <div className="flex between" style={{ marginTop:'clamp(28px,4vw,46px)', gap:40, flexWrap:'wrap', alignItems:'flex-end' }}>
            <p className="prettyw fade-up" style={{ maxWidth:'46ch', fontSize:'clamp(18px,2.1vw,22px)', lineHeight:1.5, color:'rgba(255,255,255,0.92)' }}>
              Третье место в центре Тбилиси: кинозал, театральная сцена, библиотека,
              школа и зелёный двор. Безобувная зона, камин и ковры — заходите и оставайтесь.
            </p>
            <div className="flex gap-s fade-up">
              <button className="btn btn--green" onClick={()=>go('feed')}>Ближайшие события <Arrow className="arr"/></button>
              <button className="btn" style={{ borderColor:'rgba(255,255,255,0.7)', color:'#fff', background:'transparent' }} onClick={()=>go('rental')}>Арендовать</button>
            </div>
          </div>
        </div>
        <span style={{ position:'absolute', right:16, bottom:12, fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.06em', textTransform:'uppercase', color:'#fff', background:'rgba(0,0,0,0.32)', padding:'4px 9px', border:'1px solid rgba(255,255,255,0.28)' }}>@dzagli_tbilisi</span>
      </section>

      {/* ---------- НАПРАВЛЕНИЯ ---------- */}
      <section className="wrap section-pad">
        <div className="home-dirs">
          {[
            ['01','Лента','Жизнь в Собаке:\nанонсы мероприятий и встреч','feed','assets/photos/typewriter-green.png','center 38%'],
            ['02','Школа','Домашняя школа 6-9 классы: расписание и домашка.','school','assets/photos/books-kids.png','center 30%'],
            ['03','Библиотека','Сотни книг из базы — поиск по автору и жанру.','library','assets/photos/books-adult.png','center 45%'],
            ['04','Аренда','Кинозал, сцена, кабинеты, библиотека и двор.','rental','assets/photos/armchairs.png','center 58%'],
          ].map(([n,t,d,id,img,pos]) => (
            <button key={id} className="dircard" onClick={()=>go(id)}>
              <img className="dircard__img" src={img} alt="" style={{ objectPosition:pos }} />
              <span className="dircard__scrim"></span>
              <span className="dircard__n">{n}</span>
              <span className="dircard__body">
                <span className="dircard__t">{t}</span>
                <span className="dircard__d prettyw">{d}</span>
                <span className="dircard__go mono">открыть раздел <Arrow className="arr" /></span>
              </span>
            </button>
          ))}
        </div>
      </section>

      {/* ---------- БЛИЖАЙШЕЕ ---------- */}
      <section style={{ background:'var(--green-wash)', borderBlock:'1px solid var(--paper-3)' }}>
        <div className="wrap section-pad">
          <div className="flex between center" style={{ marginBottom: 34, flexWrap:'wrap', gap:14 }}>
            <h2 style={{ fontSize:'clamp(34px,5vw,60px)' }}>Ближайшее в доме</h2>
            <button className="btn btn--ghost" onClick={()=>go('feed')}>Вся лента <Arrow className="arr"/></button>
          </div>
          <div className="home-events">
            {ev.map(e => (
              <button key={e.id} className={'mini-ev' + (e._past ? ' mini-ev--past' : '')} onClick={()=>go('feed')}>
                <div className="mini-ev__date">
                  <span className="serif mini-ev__day">{e.day}</span>
                  <span className="mono mini-ev__mon">{e.mon}</span>
                </div>
                <div style={{ flex:1 }}>
                  <div className="mono mini-ev__kicker" style={{ fontSize:11.5, letterSpacing:'0.06em', marginBottom:6 }}>
                    {e._past ? 'прошло · ' : ''}{e.dow}{e.time ? ' · ' + e.time : ''}{e.format ? ' · ' + e.format : ''}
                  </div>
                  <div className="serif mini-ev__title" style={{ fontSize:23, lineHeight:1.08, marginBottom:6 }}>{e.title}</div>
                  <div className="mono faint" style={{ fontSize:11.5 }}>{e.space}{e.price ? ' · ' + e.price : ''}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- О МЕСТЕ ---------- */}
      <section className="wrap section-pad">
        <div>
          <SectionHead index="✦" kicker="третье место"
            title="Слоган на несколько слов" />
          <AboutRotator src="assets/about.txt" interval={6000} />
        </div>
      </section>

      {/* ---------- ФОТО-ПОЛОСА ---------- */}
      <section style={{ borderTop:'1px solid var(--ink)', position:'relative', overflow:'hidden' }}>
        <img src="assets/photos/armchairs.png" alt="" style={{ width:'100%', height:'clamp(300px,40vw,540px)', objectFit:'cover', objectPosition:'center 58%' }} />
        <div className="wrap" style={{ position:'absolute', inset:0, display:'flex', alignItems:'flex-end', paddingBottom:'clamp(22px,3vw,40px)', pointerEvents:'none' }}>
          <span className="mono" style={{ fontSize:12, letterSpacing:'0.06em', textTransform:'uppercase', color:'#fff', background:'rgba(0,0,0,0.4)', padding:'6px 12px', border:'1px solid rgba(255,255,255,0.3)' }}>безобувная зона · камин · ковры на полу</span>
        </div>
      </section>
    </div>
  );
}
Object.assign(window, { Home });