/* Страница завершённого проекта: все квартиры проданы — без прайса и без
   шахматки, но с полным осмотром дома (фото, описание, видео с дрона). */
(() => {
const { Button, Icon, SectionHeader, Card, Photo, Badge, Breadcrumb, PhotoCarousel, UnitCard, UnitChessboard } = window.RespectorGroupDesignSystem_21eac1;
const D = window.RGDATA;
const Carousel = PhotoCarousel || (({ images = [], alt, height, scrim, radius }) => <Photo src={images[0]} alt={alt} scrim={scrim} style={{ height, borderRadius: radius ?? 0 }} />);

function CompletedProject({ go, projectId }) {
  const p = (D.projects || []).find(x => x.id === projectId) || (D.projects || []).find(x => window.RGStage(x) === "portfolio") || D.projects[0];
  const others = (D.projects || []).filter(x => x.id !== p.id && window.RGStage(x) === "portfolio");
  return (
    <>
      <section style={{ position: "relative", background: "var(--navy-900)" }}>
        <Carousel images={p.gallery || [p.image]} alt={p.name + " — фотографии дома"} height="clamp(380px, 40vw, 540px)" scrim thumbs={false} radius={0} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", pointerEvents: "none" }}>
          <div className="rg-container" style={{ width: "100%", paddingBottom: "var(--space-12)" }}>
            <span className="rg-eyebrow" style={{ color: "var(--gold-500)" }}>Завершённый проект</span>
            <h1 style={{ marginTop: "var(--space-3)", fontSize: "var(--fs-display)", fontWeight: "var(--fw-black)", letterSpacing: "var(--ls-wordmark)", textTransform: "none", color: "#fff" }}>{p.name}</h1>
            <p style={{ marginTop: "var(--space-2)", color: "var(--navy-200)", fontSize: "var(--fs-body-sm)" }}>{p.location}</p>
          </div>
        </div>
      </section>

      <div className="rg-container" style={{ paddingBlock: "var(--space-6)" }}>
        <Breadcrumb items={[{ label: "Проекты", href: "#", onClick: e => { e.preventDefault(); go("projects"); } }, { label: p.name }]} />
      </div>

      <section className="rg-container rg-split" style={{ paddingBottom: "var(--section-y)" }}>
        <div>
          <p style={{ fontSize: "var(--fs-body-lg)", lineHeight: "var(--lh-snug)", color: "var(--text-body)", maxWidth: "62ch" }}>{p.lead}</p>
          {!!p.features.length && (
            <ul className="rg-features">
              {p.features.map(ft => (
                <li key={ft} style={{ display: "flex", gap: "var(--space-3)", fontSize: "var(--fs-body-sm)", color: "var(--text-body)" }}>
                  <Icon name="check" size={16} color="var(--free-500)" />{ft}
                </li>
              ))}
            </ul>
          )}
          {window.ProjectSpecs && <window.ProjectSpecs specs={p.specs} />}
          <window.DroneVideo src={p.drone} title={p.name + " — видео с дрона"} />
        </div>
        <Card pad style={{ padding: "var(--card-pad-lg)" }}>
          <Badge status="navy">{p.status}</Badge>
          <div style={{ display: "flex", gap: "var(--space-8)", marginTop: "var(--space-5)" }}>
            <div><div className="rg-eyebrow">квартир в доме</div><div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", color: "var(--navy-700)" }}>{p.totalCount}</div></div>
            <div><div className="rg-eyebrow">свободно</div><div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", color: "var(--navy-700)" }}>0</div></div>
          </div>
          <p style={{ marginTop: "var(--space-5)", paddingTop: "var(--space-5)", borderTop: "1px solid var(--border-hairline)", fontSize: "var(--fs-body-sm)", color: "var(--text-muted)" }}>
            Дом полностью продан — можно ознакомиться с проектом, но записаться на просмотр квартиры здесь нельзя.
          </p>
          <Button variant="secondary" full style={{ marginTop: "var(--space-5)" }} onClick={() => go("projects")}>Смотреть дома в продаже</Button>
        </Card>
      </section>

      {!!(p.units || []).length && (
        <section style={{ background: "var(--surface-sunken)", paddingBlock: "var(--section-y)", marginBottom: "var(--section-y)" }}>
          <div className="rg-container">
            <SectionHeader eyebrow="Шахматка" title="Все квартиры дома проданы" lead="Нажмите на клетку — откроется квартира с площадью и допами." />
            <Card pad style={{ padding: "var(--card-pad-lg)" }}>
              <UnitChessboard allowSold floors={(() => { const rank = l => /исогио|цокол/i.test(l) ? 0 : parseInt(l) || 0; const m = [];
                p.units.forEach(u => { let f = m.find(x => x.label === u.floor); if (!f) m.push(f = { label: u.floor, units: [] }); f.units.push({ id: u.code, area: u.area, status: u.status, hot: u.hot }); });
                return m.sort((a, b) => rank(b.label) - rank(a.label)); })()}
                onSelect={u => window.RGOpenUnit(go, p.id, u.id)} />
            </Card>
          </div>
        </section>
      )}

      {window.RGProjectMap && <window.RGProjectMap p={p} />}
      {!!(p.units || []).length && (
        <section className="rg-container" style={{ paddingBottom: "var(--section-y)" }}>
          <SectionHeader eyebrow={"Портфолио · " + p.units.length + " квартир"} title={"Квартиры " + p.name} />
          <div className="rg-g4">
            {p.units.map(u => <UnitCard key={u.code} {...u} perM2={undefined} href="#" onClick={e => { e.preventDefault(); window.RGOpenUnit(go, p.id, u.code); }} />)}
          </div>
        </section>
      )}

      {!!others.length && (
        <section className="rg-container" style={{ paddingBottom: "var(--section-y)" }}>
          <SectionHeader eyebrow="Ещё завершённые проекты" title="Другие построенные дома" />
          <div className="rg-g3">
            {others.map(o => (
              <Card key={o.id} href="#" onClick={e => { e.preventDefault(); go("completed", o.id); }}>
                <Photo src={o.image} ratio="4/3" alt={o.name} />
                <div style={{ padding: "var(--card-pad)" }}>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h4)", fontWeight: "var(--fw-semibold)" }}>{o.name}</div>
                  <div style={{ marginTop: "var(--space-1)", fontSize: "var(--fs-caption)", color: "var(--text-muted)" }}>{o.location}</div>
                </div>
              </Card>
            ))}
          </div>
        </section>
      )}
    </>
  );
}
window.CompletedProject = CompletedProject;
})();
