(() => {
const { SectionHeader, ProjectCard, UnitCard, StepList, Card, Photo, Button, Icon } = window.RespectorGroupDesignSystem_21eac1;
const D = window.RGDATA || {};

const NAV = [
  { id: "home", label: "Главная" },
  { id: "hot", label: "Hot property", hot: true },
  { id: "building", label: "Строится" },
  { id: "portfolio", label: "Портфолио" },
  { id: "future", label: "В разработке" },
  { id: "tech", label: "Технология" },
  { id: "config", label: "Пакеты" },
  { id: "build", label: "Стройка на заказ" },
  { id: "partners", label: "Партнёрский сервис" },
];
window.RGNavIds = NAV.map(n => n.id);

function SiteNav({ go, current }) {
  const [shown, setShown] = React.useState(false);
  const [drop, setDrop] = React.useState(null);
  const navRef = React.useRef(null);
  const cats = (((D.partners || {}).categories) || []).filter(c => c.on !== false);
  React.useEffect(() => {
    if (!drop) return;
    const close = e => { if (e.type === "keydown" ? e.key === "Escape" : !navRef.current.contains(e.target)) setDrop(null); };
    document.addEventListener("mousedown", close); document.addEventListener("keydown", close); window.addEventListener("scroll", close, { passive: true });
    return () => { document.removeEventListener("mousedown", close); document.removeEventListener("keydown", close); window.removeEventListener("scroll", close); };
  }, [drop]);
  const openDrop = e => { const r = e.currentTarget.getBoundingClientRect(), n = navRef.current.getBoundingClientRect(); setDrop(drop ? null : { left: Math.max(8, Math.min(r.left - n.left, n.width - 288)) }); };
  const pickCat = id => { setDrop(null); go("partners"); try { history.replaceState(null, "", window.RGLink("partners", id)); } catch (e) {} setTimeout(() => window.dispatchEvent(new CustomEvent("rg-partner-cat", { detail: id })), 0); };
  React.useEffect(() => {
    const h = document.querySelector(".rg-header");
    if (!h || !window.IntersectionObserver) return;
    const io = new IntersectionObserver(([e]) => setShown(!e.isIntersecting));
    io.observe(h);
    return () => io.disconnect();
  }, []);
  return (
    <nav ref={navRef} className={"rg-sitenav" + (shown ? " rg-sitenav--brand" : "")} aria-label="Разделы сайта">
      <div className="rg-sitenav__inner">
        <a href="#" className="rg-sitenav__brand" aria-hidden={!shown} tabIndex={shown ? 0 : -1} onClick={e => { e.preventDefault(); go("home"); }}>
          <img src="../../assets/logo-seal-white-256.png" alt="Respector Group" />
          <span>Respector Group<small>Development</small></span>
        </a>
        {NAV.map(n => n.id === "partners" && cats.length ? (
          <button key={n.id} type="button" className="rg-sitenav__link rg-sitenav__drop" aria-current={current === n.id ? "page" : undefined} aria-haspopup="menu" aria-expanded={!!drop} onClick={openDrop}>
            {n.label}<Icon name="chevron-down" size={14} />
          </button>
        ) : (
          <a key={n.id} href="#" className={"rg-sitenav__link" + (n.hot ? " rg-sitenav__link--hot" : "")} aria-current={current === n.id ? "page" : undefined}
            onClick={e => { e.preventDefault(); go(n.id); }}>{n.hot && <span className="rg-sitenav__dot" />}{n.label}</a>
        ))}
      </div>
      {drop && <div className="rg-sitenav__menu" role="menu" style={{ left: drop.left }}>
        <button type="button" role="menuitem" onClick={() => pickCat(null)}><Icon name="layout-grid" size={16} />Все направления</button>
        {cats.map(c => <button key={c.id} type="button" role="menuitem" onClick={() => pickCat(c.id)}><Icon name={c.icon} size={16} />{c.label}</button>)}
      </div>}
    </nav>
  );
}

function PageHead({ eyebrow, title, lead }) {
  return (
    <section className="rg-container" style={{ paddingBlock: "var(--space-16) var(--space-10)" }}>
      <SectionHeader eyebrow={eyebrow} title={title} lead={lead} />
    </section>
  );
}

function HotPage({ go }) {
  /* Только квартиры с отметкой hot из админки (ставится при добавлении на сайт), свободные. */
  const units = (D.projects || []).flatMap(p => (p.units || []).filter(u => u.hot && u.status === "free").map(u => ({ ...u, pid: p.id, pname: p.name })))
    .sort((a, b) => (a.price ?? 1e12) - (b.price ?? 1e12));
  return (
    <>
      <PageHead eyebrow="Hot property" title="Лучшие предложения прямо сейчас" lead="Квартиры, которые мы выделили среди свободных, — от самой доступной." />
      <section className="rg-container" style={{ paddingBottom: "var(--section-y)" }}>
        {units.length ? <div className="rg-g4">{units.map(u => (
          <UnitCard key={u.pid + u.code} {...u} floor={u.pname + " · " + u.floor} href="#" onClick={e => { e.preventDefault(); window.RGOpenUnit(go, u.pid, u.code); }} />
        ))}</div> : <div className="rg-empty">Горячих предложений сейчас нет</div>}
      </section>
    </>
  );
}

const PHASE = {
  building: { eyebrow: "Строится", title: "Дома, которые строим сейчас", lead: "Покупка на этапе стройки — цена ниже, чем после сдачи.", stage: "building" },
  portfolio: { eyebrow: "Портфолио", title: "Сданные дома", lead: "Все квартиры проданы — дома можно посмотреть вживую.", stage: "portfolio" },
  future: { eyebrow: "В разработке", title: "Проекты в разработке", lead: "Участки куплены, идёт проектирование и получение разрешений.", stage: "future" },
};
function PhasePage({ go, kind }) {
  const c = PHASE[kind];
  const list = (D.projects || []).filter(p => window.RGStage(p) === c.stage);
  return (
    <>
      <PageHead eyebrow={c.eyebrow} title={c.title} lead={c.lead} />
      <div className="rg-g3 rg-g3--tight" style={{ paddingBottom: "var(--section-y)" }}>
        {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); }} />
        ))}
      </div>
    </>
  );
}

const STAGES = [
  { title: "Участок и проект", description: "Покупаем землю, проектируем под максимальный коэффициент застройки, получаем разрешение." },
  { title: "Фундамент и каркас", description: "Монолитный железобетонный каркас по сейсмическим нормам Греции." },
  { title: "Стены и кровля", description: "Кладка, утепление фасада, кровля и мансарды." },
  { title: "Инженерия", description: "Электрика, сантехника, отопление, рекуперация воздуха." },
  { title: "Отделка", description: "Плитка, покраска, двери, кухни — по выбранному пакету." },
  { title: "Сдача", description: "Приёмка, документы, ключи. Помогаем со сдачей в аренду." },
];
function TechPage({ go }) {
  return (
    <>
      <PageHead eyebrow="Технология" title="Как мы строим" lead="Каждый дом проходит шесть этапов. На каждом снимаем фото и отчитываемся покупателям." />
      <section className="rg-container" style={{ paddingBottom: "var(--section-y)" }}>
        <div className="rg-g3">
          {STAGES.map((s, i) => (
            <Card key={s.title}>
              <Photo ratio="4/3" alt={s.title} />
              <div style={{ padding: "var(--space-5)", display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
                <span className="rg-eyebrow">Этап {i + 1}</span>
                <h3 style={{ fontSize: "var(--fs-h4)" }}>{s.title}</h3>
                <p style={{ color: "var(--text-body)", fontSize: "var(--fs-body-sm)" }}>{s.description}</p>
              </div>
            </Card>
          ))}
        </div>
        <div style={{ marginTop: "var(--space-10)", display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}><Button onClick={() => go("building")}>Смотреть дома на стройке</Button><Button variant="secondary" onClick={() => go("build")}>Построить свой дом</Button></div>
      </section>
    </>
  );
}

Object.assign(window, {
  SiteNav, HotPage, TechPage,
  BuildingPage: p => <PhasePage {...p} kind="building" />,
  PortfolioPage: p => <PhasePage {...p} kind="portfolio" />,
  FuturePage: p => <PhasePage {...p} kind="future" />,
});
})();