(() => {
const { SiteHeader, SiteFooter, Button, Icon, SectionHeader, StatStrip, Marquee, ProjectCard, UnitCard, CollectionCard, NewsCard, VisaTierCard, StepList, Accordion, Card, Photo, Field, Input, Select, Textarea, Checkbox, FilterTabs, Tag, PriceBlock, ProjectsMap, HeroCarousel } = window.RespectorGroupDesignSystem_21eac1;
const D = window.RGDATA || {};
const MapBlock = ProjectsMap || (props => <div className="rg-empty">Карта загружается…</div>);
const HeroBlock = HeroCarousel || (props => <div className="rg-empty">Карусель проектов загружается…</div>);

/* Слайды — из вкладки «Баннеры» админки (после публикации): порядок, включение, текст, фото, проект и скорость смены.
   Цифры слайда берутся из привязанного дома. Пока админка ничего не публиковала — дома со свободными квартирами. */
function Hero({ go }) {
  const srcOf = v => (v && typeof v === "object") ? v.src : v;
  const byId = id => (D.projects || []).find(p => p.id === id);
  const slides = Array.isArray(D.banners)
    ? D.banners.filter(b => b.on).map(b => { const p = byId(b.projectId);
        return { id: b.id, projectId: p ? p.id : null, name: b.name, eyebrow: b.eyebrow, lead: b.lead, image: srcOf(b.image) || (p && p.image),
          ...(p && p.freeCount > 0 ? { priceFrom: p.priceFrom, areaTo: p.areaTo, freeCount: p.freeCount } : {}) }; })
    : (D.projects || []).filter(p => p.freeCount > 0).map(p => ({
        id: p.id, projectId: p.id, name: p.name, eyebrow: p.location, lead: (p.lead || "").split(". ")[0] + ".",
        image: p.image, priceFrom: p.priceFrom, areaTo: p.areaTo, freeCount: p.freeCount }));
  if (!slides.length) return null;
  const interval = D.bannerInterval != null ? D.bannerInterval * 1000 : 6500;
  const open = s => { const x = s && typeof s === "object" ? s : slides[s]; if (x && x.projectId) window.RGOpenProject ? window.RGOpenProject(go, x.projectId) : go("project", x.projectId); };
  return <HeroBlock slides={slides} interval={interval} onSelect={open} />;
}

/* Живые цифры: м² построено — площадь застройки сданных домов; продано — по таблице характеристик или по шахматке. */
function liveStats() {
  const P = D.projects || [];
  const built = P.filter(p => p.status === "Сдан").reduce((a, p) => a + (+((p.specs || {}).buildArea) || 0), 0);
  const soldOf = p => { const s = (p.specs || {}).sales || ""; const m = s.match(/продано\s+(\d+)/i);
    if (m) return +m[1]; if (/распрод/i.test(s)) return +((p.specs || {}).units) || p.totalCount || 0;
    return (p.units || []).filter(u => u.status === "sold").length; };
  const sold = P.reduce((a, p) => a + soldOf(p), 0);
  return [{ value: built.toLocaleString("de-DE"), label: "м² построено" }, { value: String(sold), label: "квартир продано" }];
}

function About() {
  return (
    <section className="rg-container" style={{ paddingBlock: "var(--section-y)" }}>
      <StatStrip items={[...(D.stats || []), ...liveStats()]} />
    </section>
  );
}

function QrLogo({ href, size = 132 }) {
  if (!href || !window.qrcode) return null;
  const q = window.qrcode(0, "H"); q.addData(href); q.make();
  const n = q.getModuleCount(), pad = 2, T = n + pad * 2, lg = Math.round(n * 0.22);
  let path = "";
  for (let r = 0; r < n; r++) for (let c = 0; c < n; c++) if (q.isDark(r, c)) path += "M" + (c + pad) + " " + (r + pad) + "h1v1h-1z";
  const o = (T - lg) / 2;
  return (
    <a href={href} target="_blank" rel="noopener" aria-label="QR-код: все проекты на Google Maps" style={{ display: "block", width: size, height: size, flex: "none" }}>
      <svg viewBox={"0 0 " + T + " " + T} width={size} height={size} shapeRendering="crispEdges" style={{ display: "block", background: "#fff" }}>
        <path d={path} fill="#04121F" />
        <rect x={o - .6} y={o - .6} width={lg + 1.2} height={lg + 1.2} fill="#fff" />
        <image href="../../assets/logo-mark.png" x={o} y={o} width={lg} height={lg} preserveAspectRatio="xMidYMid meet" />
      </svg>
    </a>
  );
}

function Geography({ go }) {
  const wrap = React.useRef(null);
  const [fs, setFs] = React.useState(false);
  React.useEffect(() => {
    const sync = () => { if (!document.fullscreenElement) setFs(false); setTimeout(() => window.dispatchEvent(new Event("resize")), 60); };
    const esc = e => { if (e.key === "Escape") setFs(false); };
    document.addEventListener("fullscreenchange", sync); document.addEventListener("keydown", esc);
    return () => { document.removeEventListener("fullscreenchange", sync); document.removeEventListener("keydown", esc); };
  }, []);
  React.useEffect(() => { document.body.style.overflow = fs && !document.fullscreenElement ? "hidden" : ""; setTimeout(() => window.dispatchEvent(new Event("resize")), 60); }, [fs]);
  const exitFs = () => { if (document.fullscreenElement) document.exitFullscreen().catch(() => {}); setFs(false); };
  const toggleFs = () => {
    if (fs) return exitFs();
    const el = wrap.current;
    if (el && el.requestFullscreen) el.requestFullscreen().then(() => setFs(true)).catch(() => setFs(true)); else setFs(true);
  };
  /* Только проекты Respector Group. Адреса — от заказчика; координаты
     ориентировочные по адресу, уточнить по геокодеру перед продакшеном. */
  const points = (D.projects || []).filter(p => p.coords).map(p => { const st = window.RGPhaseSticker(p);
    return { phase: st, id: p.id, title: p.name, lat: p.coords.lat, lng: p.coords.lng, note: p.mapNote, image: p.image,
      ...(p.freeCount ? { priceFrom: p.priceFrom, areaTo: p.areaTo, freeCount: p.freeCount, totalCount: p.totalCount } : { objects: st[1].toLowerCase(), status: st[0] === "sold" ? "sold" : undefined }) }; });
  return (
    <section style={{ background: "var(--surface-inverse)", paddingTop: "var(--section-y)" }}>
      <div className="rg-container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: "var(--space-8)", flexWrap: "wrap", marginBottom: "var(--space-8)" }}>
          <div style={{ display: "grid", gap: "var(--space-4)", justifyItems: "start" }}>
            <h2 className="rg-section__title" style={{ color: "#fff", margin: 0 }}>География проектов</h2>
            <Button variant="gold" href={(D.company || {}).projectsMapHref} target="_blank" rel="noopener" icon={<Icon name="map-pin" size={16} />}>Все проекты на Google Maps</Button>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "var(--space-4)", color: "var(--navy-200)", fontSize: "var(--fs-body-sm)" }}>
            <span style={{ maxWidth: 160 }}>Наведите камеру, чтобы открыть список проектов</span>
            <QrLogo href={(D.company || {}).projectsMapHref} size={132} />
          </div>
        </div>
      </div>
      <div ref={wrap} className={"rg-mapwrap" + (fs && !document.fullscreenElement ? " rg-mapwrap--full" : "")}>
        <MapBlock points={points} center={[40.3164, 23.0544]} zoom={15} onSelect={pt => { exitFs(); window.RGOpenProject(go, pt.id); }} height="80vh" full />
        <div className="rg-mapwrap__btn"><Button size="sm" variant="secondary" icon={<Icon name={fs ? "minimize-2" : "maximize-2"} size={16} />} onClick={toggleFs}>{fs ? "Свернуть" : "На весь экран"}</Button></div>
      </div>
    </section>
  );
}

function ProjectSlot() {
  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 Projects({ 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 style={{ paddingBlock: "var(--section-y)" }} id="projects">
      <div className="rg-container" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "var(--space-6)", flexWrap: "wrap" }}>
        <h2 style={{ fontSize: "var(--fs-h2)" }}>Проекты</h2>
        <Button variant="ghost" size="sm" iconRight={<Icon name="arrow-right" size={16} />} onClick={() => go("projects")}>Все проекты</Button>
      </div>
      <div className="rg-container" style={{ marginTop: "var(--space-8)", marginBottom: "var(--space-10)" }}>
        <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>
      <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 }}
            onClick={e => { e.preventDefault(); window.RGOpenProject(go, p.id); }} href="#" />
        ))}
        {slots.map((_, i) => <ProjectSlot key={"slot" + i} />)}
      </div>
    </section>
  );
}

/* Подборки считаются по опубликованным квартирам: число свободных и цена «от» — из шахматок, без констант.
   Подборка без свободных квартир не показывается. */
const NUM_WORD = { 2: "Два", 3: "Три", 4: "Четыре", 5: "Пять", 6: "Шесть", 7: "Семь" };
function Collections({ go }) {
  const free = (D.projects || []).flatMap(p => (p.units || []).filter(u => u.status === "free"));
  const list = (D.collections || []).map(c => { const t = FEAT_TEST[c.id]; if (!t) return null; const us = free.filter(t), pr = us.map(u => u.price).filter(n => n);
    return us.length ? { ...c, count: us.length, priceFrom: pr.length ? Math.min(...pr) : null } : null; }).filter(Boolean);
  if (!list.length) return null;
  return (
    <section className="rg-container" style={{ paddingBlock: "var(--section-y)" }}>
      <SectionHeader eyebrow="Подборки" title={(NUM_WORD[list.length] || list.length) + " " + (list.length < 5 ? "способа" : "способов") + " сузить выбор"}
        lead="Мы не вываливаем на вас весь список. Подборка собирается под задачу и пересчитывается сама, как только меняется остаток в доме." />
      <div className="rg-g3">
        {list.map(c => <CollectionCard key={c.title} {...c} href="#search" onClick={e => { e.preventDefault(); window.dispatchEvent(new CustomEvent("rg-collection", { detail: c.id })); }} />)}
      </div>
    </section>
  );
}

function Faq() {
  return (
    <section className="rg-container rg-split rg-split--faq" style={{ paddingBlock: "var(--section-y)" }}>
      <SectionHeader eyebrow="Вопросы и ответы" title="Что спрашивают перед покупкой" />
      <Accordion defaultOpen={0} items={D.faq} />
    </section>
  );
}

function Lead() {
  const [v, setV] = React.useState({ name: "", contact: "", q: "", ok: false, website: "" });
  const [state, setState] = React.useState("idle");
  const set = f => e => setV(s => ({ ...s, [f]: f === "ok" ? e.target.checked : e.target.value }));
  const valid = v.contact.trim().replace(/^\+30\s*$/, "").length >= 4 && v.ok;
  const submit = async e => {
    e.preventDefault(); if (!valid || state === "sending") return;
    setState("sending");
    const r = await window.RGStore.sendLead({ consent: true, website: v.website, name: v.name.trim() || "Без имени", contact: v.contact.trim(), channel: "Форма на главной", topic: v.q.trim() || "Подборка квартир", unit: "—" });
    setState(r.ok ? "sent" : "error");
  };
  return (
    <section style={{ background: "var(--surface-inverse)", paddingTop: "var(--section-y)" }}>
      <div className="rg-container rg-split rg-split--half">
        <div>
          <SectionHeader dark eyebrow="Консультация" title="Расскажите про задачу"
            lead="Соберём пять вариантов за сутки. По каждому — полная стоимость входа с налогами и нотариусом, ожидаемая аренда по сезону и срок окупаемости." />
          <StepList steps={[
            { title: "Созвон на 20 минут", description: "Разбираем задачу и бюджет" },
            { title: "Подборка из 5 объектов", description: "С полным расчётом расходов" },
            { title: "Показ и юрист", description: "Онлайн-показ или поездка, проверка документов" },
          ]} />
        </div>
        {state === "sent" ? (
          <div className="rg-field--dark" style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)", color: "#fff" }} aria-live="polite">
            <h3 style={{ fontSize: "var(--fs-h3)", color: "#fff" }}>Заявка отправлена</h3>
            <p style={{ color: "var(--navy-200)" }}>Менеджер свяжется с вами{(D.company || {}).hours ? " в рабочее время: " + D.company.hours.toLowerCase() : ""}.</p>
            <div><Button variant="secondary" onClick={() => { setV({ name: "", contact: "", q: "", ok: false, website: "" }); setState("idle"); }}>Новая заявка</Button></div>
          </div>
        ) : (
          <form className="rg-field--dark" onSubmit={submit} noValidate style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
            <Field dark label="Как к вам обращаться" htmlFor="lead-name"><Input id="lead-name" autoComplete="name" value={v.name} onChange={set("name")} placeholder="Имя" /></Field>
            <Field dark label="Телефон, WhatsApp, Viber или почта" htmlFor="lead-contact" required><Input id="lead-contact" value={v.contact} onChange={set("contact")} placeholder="+30 69…" /></Field>
            <Field dark label="Что ищете" htmlFor="lead-q"><Textarea id="lead-q" rows={3} value={v.q} onChange={set("q")} placeholder="Две спальни, у моря, до €150 000" /></Field>
            <input type="text" name="website" value={v.website} onChange={set("website")} tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: -9999, width: 1, height: 1, opacity: 0 }} />
            <Checkbox label={<span style={{ color: "var(--navy-200)" }}>Соглашаюсь с <a href="#privacy" target="_blank" rel="noopener" style={{ color: "#fff" }}>политикой конфиденциальности</a></span>} checked={v.ok} onChange={set("ok")} />
            {state === "error" && <p role="alert" style={{ fontSize: "var(--fs-body-sm)", color: "#fff" }}>Не удалось отправить. Попробуйте ещё раз или напишите нам: <a href="https://wa.me/306979917088" target="_blank" rel="noopener" style={{ color: "#fff" }}>WhatsApp</a>, <a href="mailto:respectorgroup@gmail.com" style={{ color: "#fff" }}>respectorgroup@gmail.com</a>.</p>}
            <Button type="submit" variant="gold" size="lg" full disabled={!valid || state === "sending"}>{state === "sending" ? "Отправляем…" : "Получить подборку"}</Button>
            <p style={{ fontSize: "var(--fs-caption)", color: "var(--navy-300)" }}>Обычно отвечаем в течение рабочего дня.</p>
          </form>
        )}
      </div>
    </section>
  );
}

/* Поиск по всем домам. Близость к морю — главный фильтр, берётся из p.seaM (админка) или RGSea. */
const SEA = [{ id: "300", label: "До 300 м" }, { id: "500", label: "До 500 м" }, { id: "1000", label: "До 1 км" }, { id: "any", label: "Любое" }];
const kindOf = t => /студ/i.test(t || "") ? "studio" : /мезонет|двухуров/i.test(t || "") ? "duplex" : "flat";
const SEARCH0 = { sea: "500", kind: "all", budget: "any", area: "any", free: true, feats: [] };
/* Особенности = подборки с главной (D.collections[].id). */
const FEAT_TEST = {
  garden: u => /участ|авли|сад/i.test((u.extras || []).join(" ")),
  u90: u => u.price != null && u.price <= 90000,
  mansard: u => /мансард/i.test((u.type || "") + " " + (u.extras || []).join(" ")),
  roof: u => /roof garden/i.test((u.extras || []).join(" ")),
  parking: u => /паркинг|парков|машиномест/i.test((u.extras || []).join(" ")),
  storage: u => /кладов/i.test((u.extras || []).join(" ")),
};
const FEAT_LABEL = { garden: "Свой участок", u90: "До € 90.000", mansard: "Мезонет с мансардой", roof: "Roof Garden", parking: "Парковочное место", storage: "Кладовая" };
const FEATS = Object.keys(FEAT_TEST);

function Search({ go }) {
  const [f, setF] = React.useState(SEARCH0);
  const [more, setMore] = React.useState(false);
  const set = k => v => { setF(s => ({ ...s, [k]: v })); setMore(false); };
  const toggle = id => { setF(s => ({ ...s, feats: s.feats.includes(id) ? s.feats.filter(x => x !== id) : [...s.feats, id] })); setMore(false); };
  React.useEffect(() => {
    const h = e => { setF({ ...SEARCH0, sea: "any", feats: [e.detail] }); setMore(false);
      const el = document.getElementById("search"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" }); };
    window.addEventListener("rg-collection", h); return () => window.removeEventListener("rg-collection", h);
  }, []);
  const all = (D.projects || []).flatMap(p => (p.units || []).map(u => ({ ...u, p, sea: window.RGSeaM(p) })));
  const pass = (u, skip) => (skip === "sea" || f.sea === "any" || (u.sea != null && u.sea <= +f.sea))
    && (f.kind === "all" || kindOf(u.type) === f.kind)
    && (f.budget === "any" || (u.price != null && u.price <= +f.budget))
    && (f.area === "any" || (u.area || 0) >= +f.area)
    && (!f.free || u.status === "free")
    && (skip === "feats" || f.feats.every(id => FEAT_TEST[id](u)));
  const featBase = all.filter(u => pass(u, "feats"));
  const list = all.filter(u => pass(u)).sort((a, b) => (a.sea ?? 1e9) - (b.sea ?? 1e9) || (a.price ?? 1e12) - (b.price ?? 1e12));
  const base = all.filter(u => pass(u, "sea"));
  const seaItems = SEA.map(s => ({ ...s, count: base.filter(u => s.id === "any" || (u.sea != null && u.sea <= +s.id)).length }));
  const shown = more ? list : list.slice(0, 8);
  const word = n => n % 10 === 1 && n % 100 !== 11 ? "квартира" : [2, 3, 4].includes(n % 10) && ![12, 13, 14].includes(n % 100) ? "квартиры" : "квартир";
  return (
    <section style={{ background: "var(--surface-sunken)", paddingBlock: "var(--section-y)" }} id="search">
      <div className="rg-container">
        <SectionHeader eyebrow="Поиск недвижимости" title="Найдите квартиру у моря" />
        <Card pad style={{ padding: "var(--card-pad-lg)" }}>
          <div className="rg-search__panel">
            <div className="rg-search__sea">
              <span className="rg-search__sealabel"><Icon name="waves" size={20} color="var(--aegean-600)" />Близость к морю</span>
              <FilterTabs label="Близость к морю" value={f.sea} onChange={set("sea")} items={seaItems} />
            </div>
            <div className="rg-search__filters">
              <Field label="Тип" htmlFor="s-kind"><Select id="s-kind" value={f.kind} onChange={e => set("kind")(e.target.value)} options={[{ value: "all", label: "Любой" }, { value: "studio", label: "Студия" }, { value: "flat", label: "Квартира" }, { value: "duplex", label: "Двухуровневая / мезонет" }]} /></Field>
              <Field label="Бюджет до" htmlFor="s-budget"><Select id="s-budget" value={f.budget} onChange={e => set("budget")(e.target.value)} options={[{ value: "any", label: "Любой" }, ...[100000, 150000, 200000, 300000].map(v => ({ value: String(v), label: "€ " + v.toLocaleString("de-DE") }))]} /></Field>
              <Field label="Площадь от" htmlFor="s-area"><Select id="s-area" value={f.area} onChange={e => set("area")(e.target.value)} options={[{ value: "any", label: "Любая" }, ...[30, 45, 60, 75].map(v => ({ value: String(v), label: v + " м²" }))]} /></Field>
              <div style={{ paddingBottom: 10 }}><Checkbox label="Только свободные" checked={f.free} onChange={e => set("free")(e.target.checked)} /></div>
            </div>
            <div className="rg-search__feats">
              <span>Особенности — как в подборках</span>
              <div className="rg-search__chips">
                {FEATS.map(id => { const on = f.feats.includes(id); const n = featBase.filter(u => f.feats.filter(x => x !== id).concat(id).every(x => FEAT_TEST[x](u))).length; return (
                  <button key={id} type="button" className="rg-search__chip" aria-pressed={on} disabled={!on && !n} onClick={() => toggle(id)}>
                    {on && <Icon name="check" size={14} />}{FEAT_LABEL[id]}<small>{n}</small></button>); })}
              </div>
            </div>
          </div>
        </Card>
        <div className="rg-search__bar">
          <span className="rg-search__count">Найдено {list.length} {word(list.length)}</span>
          {JSON.stringify(f) !== JSON.stringify(SEARCH0) && <Button variant="ghost" size="sm" icon={<Icon name="rotate-ccw" size={16} />} onClick={() => { setF(SEARCH0); setMore(false); }}>Сбросить фильтры</Button>}
        </div>
        {list.length ? (
          <div className="rg-g4">
            {shown.map(u => <UnitCard key={u.p.id + u.code} {...u} perM2={undefined} note={<><Icon name="waves" size={14} />{u.p.name}{u.sea != null ? " · " + window.RGSeaLabel(u.sea) : ""}</>}
              href="#" onClick={e => { e.preventDefault(); window.RGOpenUnit(go, u.p.id, u.code); }} />)}
          </div>
        ) : (
          <div className="rg-search__empty">
            <Icon name="search-x" size={24} color="var(--navy-300)" />
            Под эти условия сейчас ничего нет. Расширьте радиус до моря или бюджет.
            <Button variant="secondary" size="sm" onClick={() => setF(s => ({ ...s, sea: "any" }))}>Показать любое расстояние</Button>
          </div>
        )}
        {list.length > 8 && <div style={{ display: "flex", justifyContent: "center", marginTop: "var(--space-8)" }}>
          <Button variant="secondary" onClick={() => setMore(m => !m)}>{more ? "Свернуть" : "Показать все · " + list.length}</Button>
        </div>}
      </div>
    </section>
  );
}

function Home({ go, nav }) {
  return (
    <>
      <Hero go={go} />
      {nav}
      <Projects go={go} />
      <Search go={go} />
      <Geography go={go} />
      <Collections go={go} />
      <Faq />
      <About />
    </>
  );
}
window.Home = Home;
window.Lead = Lead;
})();