(() => {
const { SectionHeader, ProjectCard, CollectionCard, FilterTabs, Photo, Button, Icon, Marquee } = window.RespectorGroupDesignSystem_21eac1;
const D = window.RGDATA || {};

function Slot() {
  return (
    <div className="rg-card rg-project rg-project--photo" style={{ borderRadius: 0 }}>
      <Photo ratio="1/1" radius="0" />
      <div className="rg-project__over">
        <div>
          <div className="rg-project__name" style={{ color: "var(--navy-300)" }}>Новый дом</div>
          <div className="rg-project__loc">Халкидики · готовим к продаже</div>
        </div>
        <div className="rg-project__facts">
          <div className="rg-project__fact"><span>цена от</span><b style={{ color: "var(--navy-300)" }}>—</b></div>
          <div className="rg-project__fact"><span>площадь до</span><b style={{ color: "var(--navy-300)" }}>—</b></div>
        </div>
        <span className="rg-project__more" style={{ color: "var(--navy-300)" }}>Скоро</span>
      </div>
    </div>
  );
}

function ProjectsPage({ go }) {
  const [filter, setFilter] = React.useState("all");
  const all = D.projects || [];
  const ph = p => window.RGPhase(p);
  const free = all.filter(p => ph(p) === "sale" || ph(p) === "reserved");
  const soon = all.filter(p => ph(p) === "soon");
  const sold = all.filter(p => ph(p) === "sold");
  const list = filter === "all" ? all : filter === "sale" ? free : filter === "soon" ? soon : sold;
  const slots = Array.from({ length: Math.max(6 - list.length, 0) });
  return (
    <>
      <section className="rg-container" style={{ paddingBlock: "var(--space-16) var(--space-10)" }}>
        <h1 style={{ maxWidth: "24ch", fontSize: "var(--fs-display)", fontWeight: "var(--fw-black)", letterSpacing: "var(--ls-hero)", lineHeight: "var(--lh-tight)" }}>
          Мы строим жильё у моря, которое остаётся ценным каждый следующий год
        </h1>
        <div style={{ marginTop: "var(--space-16)" }}>
          <h2 style={{ fontSize: "var(--fs-h3)" }}>Жилищное строительство</h2>
        </div>
        <div style={{ marginTop: "var(--space-8)" }}>
          <FilterTabs value={filter} onChange={setFilter} items={[
            { id: "all", label: "Все", count: all.length },
            { id: "sale", label: "В продаже", count: free.length },
          { id: "soon", label: "Скоро в продаже", count: soon.length },
            { id: "done", label: "Завершено", count: sold.length }]} />
        </div>
      </section>

      <div className="rg-g3 rg-g3--tight">
        {list.map(p => (
          <ProjectCard key={p.id} {...p} sticker={(window.RGPhaseSticker(p) || [])[1]} stickerStatus={(window.RGPhaseSticker(p) || [])[0]} style={{ borderRadius: 0 }} href="#"
            onClick={e => { e.preventDefault(); window.RGOpenProject(go, p.id); }} />
        ))}
        {slots.map((_, i) => <Slot key={"s" + i} />)}
      </div>


      <section className="rg-container" style={{ paddingBlock: "var(--section-y)" }}>
        <SectionHeader eyebrow="Подборки" title="Шесть способов сузить выбор"
          lead="Подборка собирается под конкретную задачу и пересчитывается сама, как только меняется остаток в доме." />
        <div className="rg-g3">
          {(D.collections || []).map(c => <CollectionCard key={c.title} {...c} href="#" onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }} />)}
        </div>
      </section>
    </>
  );
}
window.ProjectsPage = ProjectsPage;
})();