(() => {
const { Button, Icon, SectionHeader } = window.RespectorGroupDesignSystem_21eac1;
const data = () => (window.RGDATA || {}).partners || { categories: [], plan: [], office: {} };
const tel = s => "tel:" + String(s || "").replace(/[^\d+]/g, "");
const url = s => !s ? "" : /^[a-z]+:/i.test(s) ? s : "https://" + s;
const host = s => String(s || "").replace(/^[a-z]+:\/\//i, "").replace(/^www\./, "").replace(/\/$/, "");
const word = n => n % 10 === 1 && n % 100 !== 11 ? "партнёр" : [2, 3, 4].includes(n % 10) && ![12, 13, 14].includes(n % 100) ? "партнёра" : "партнёров";

function ContactList({ c }) {
  return (
    <ul className="rg-partner__contacts">
      {c.phone && <li><Icon name="phone" size={16} /><a href={tel(c.phone)}>{c.phone}</a></li>}
      {c.email && <li><Icon name="mail" size={16} /><a href={"mailto:" + c.email}>{c.email}</a></li>}
      {c.site && <li><Icon name="globe" size={16} /><a href={url(c.site)} target="_blank" rel="noopener">{host(c.site)}</a></li>}
      {c.fb && <li><Icon name="link" size={16} /><a href={url(c.fb)} target="_blank" rel="noopener">{host(c.fb)}</a></li>}
    </ul>
  );
}

function PartnerDetail({ p, cat }) {
  const office = data().office || {};
  return (
    <article className={"rg-partner rg-partner--open rg-partner--" + cat.id} aria-label={p.name}>
      <div className="rg-partner__side">
        {p.photo ? <img className="rg-partner__photo" src={p.photo} alt={p.name} /> : <div className="rg-partner__photo rg-partner__nophoto"><Icon name={cat.icon || "user"} size={40} /></div>}
        <div>
          <div className="rg-eyebrow">Специалист</div>
          <div className="rg-partner__name">{p.name}</div>
          {p.role && <div className="rg-partner__role">{p.role}</div>}
        </div>
        <ContactList c={{ phone: p.phone, email: p.email, fb: p.fb }} />
        <div className="rg-partner__cta">
          {p.site && <Button full href={url(p.site)} target="_blank" rel="noopener" icon={<Icon name="external-link" size={16} />}>Сайт партнёра</Button>}
          {p.phone && <Button full variant={p.site ? "secondary" : "primary"} href={tel(p.phone)} icon={<Icon name="phone" size={16} />}>Позвонить</Button>}
        </div>
      </div>
      <div className="rg-partner__main">
        <div className="rg-partner__top"><span className="rg-partner__icon"><Icon name={cat.icon} size={20} /></span><span className="rg-eyebrow">{cat.label}</span></div>
        <h3 className="rg-partner__headline">{p.headline || p.title}</h3>
        {p.lead && <p className="rg-partner__lead">{p.lead}</p>}
        {!!(p.services || []).length && <ul className="rg-partner__services">
          {p.services.map(s => <li key={s.t}><span className="rg-partner__icon"><Icon name={s.icon || "check"} size={18} /></span><div><b>{s.t}</b><span>{s.d}</span></div></li>)}
        </ul>}
        {!!(p.prices || []).length && <div className="rg-partner__prices">{p.prices.map(([k, v, n], i) => <div key={k + i} className={i === p.prices.length - 1 ? "is-accent" : ""}><span>{k}</span><b>{v}</b><small>{n}</small></div>)}</div>}
        {!!(p.extras || []).length && <div>
          <div className="rg-eyebrow" style={{ marginBottom: "var(--space-3)" }}>Дополнительные работы · не входят в пакеты</div>
          <dl className="rg-partner__extras">{p.extras.map(([k, v]) => <div key={k}><dt>{k}</dt><dd>{v}</dd></div>)}</dl>
        </div>}
        {!!(p.providers || []).length && <div>
          <div className="rg-eyebrow" style={{ marginBottom: "var(--space-3)" }}>{p.providersLabel || "Работаем со всеми энергокомпаниями"} · {p.providers.length}</div>
          <div className="rg-partner__providers">{p.providers.map(x => <span key={x}>{x}</span>)}</div>
        </div>}
        <div className="rg-partner__office">
          <div><div className="rg-eyebrow" style={{ color: "var(--gold-500)" }}>Предложение Respector Group</div><b>Партнёрский офис</b></div>
          <ContactList c={office} />
        </div>
      </div>
    </article>
  );
}

function CategoryPage({ cat }) {
  const office = data().office || {};
  const list = cat.partners || [];
  return (
    <div className="rg-pcat__page">
      <header className={"rg-pcat__head rg-partner--" + cat.id}>
        <span className="rg-partner__icon"><Icon name={cat.icon} size={22} /></span>
        <div><h2 className="rg-pcat__title">{cat.label}</h2>{cat.desc && <p className="rg-pcat__desc">{cat.desc}</p>}</div>
      </header>
      {list.length ? list.map(p => <PartnerDetail key={p.id} p={p} cat={cat} />) : (
        <div className="rg-pempty">
          <Icon name="user-search" size={28} color="var(--navy-300)" />
          <b>Партнёра в этом направлении подбираем</b>
          <span>Оставьте заявку — партнёрский офис свяжет вас с проверенным специалистом.</span>
          <div className="rg-pempty__btns">
            {office.phone && <Button size="sm" href={tel(office.phone)} icon={<Icon name="phone" size={16} />}>Позвонить в офис</Button>}
            {office.email && <Button size="sm" variant="secondary" href={"mailto:" + office.email + "?subject=" + encodeURIComponent("Партнёрский сервис: " + cat.label)}>Написать</Button>}
          </div>
        </div>
      )}
    </div>
  );
}

function Overview({ cats, pick }) {
  return (
    <div className="rg-pcat__grid">
      {cats.map(c => { const n = (c.partners || []).length; return (
        <button key={c.id} type="button" className={"rg-pcat rg-partner--" + c.id} onClick={() => pick(c.id)}>
          <span className="rg-partner__icon"><Icon name={c.icon} size={20} /></span>
          <b>{c.label}</b>
          <span className="rg-pcat__d">{c.desc}</span>
          <span className={"rg-pcat__n" + (n ? "" : " is-soon")}>{n ? n + " " + word(n) : "Скоро"}<Icon name="arrow-right" size={16} /></span>
        </button>); })}
    </div>
  );
}

function PartnersPage() {
  const D = data();
  const cats = (D.categories || []).filter(c => c.on !== false);
  const fromHash = () => { const m = location.hash.match(/^#partners\/(.+)/); const id = m ? decodeURIComponent(m[1]) : null; return cats.some(c => c.id === id) ? id : null; };
  const [cat, setCat] = React.useState(fromHash);
  const top = React.useRef(null);
  const pick = id => {
    setCat(id);
    try { history.replaceState(null, "", window.RGLink("partners", id)); } catch (e) {}
    if (top.current) { const y = top.current.getBoundingClientRect().top + window.scrollY - 90; if (window.scrollY > y) window.scrollTo({ top: y, behavior: "smooth" }); }
  };
  React.useEffect(() => { const h = e => pick(e.detail || null); window.addEventListener("rg-partner-cat", h); return () => window.removeEventListener("rg-partner-cat", h); }, []);
  const c = cats.find(x => x.id === cat);
  return (
    <>
      <section className="rg-container rg-phead">
        <SectionHeader eyebrow="Партнёрский сервис" title="Проверенные партнёры для вашего дома" lead="Работаем с ними на своих объектах: от ипотеки и документов до интернета и сада." />
        <window.RGPdfButton label="Презентация сервиса, PDF" name="Respector Group — партнёрский сервис" build={() => <PartnersPdf />} />
      </section>
      <section className="rg-container rg-pmenu" ref={top} style={{ paddingBottom: "var(--section-y)" }}>
        <nav className="rg-pmenu__nav" aria-label="Направления">
          <button type="button" className="rg-pmenu__item" aria-current={!cat ? "page" : undefined} onClick={() => pick(null)}><Icon name="layout-grid" size={18} />Все направления</button>
          {cats.map(x => (
            <button key={x.id} type="button" className="rg-pmenu__item" aria-current={cat === x.id ? "page" : undefined} onClick={() => pick(x.id)}>
              <Icon name={x.icon} size={18} />{x.label}<span>{(x.partners || []).length || "—"}</span>
            </button>
          ))}
        </nav>
        <div className="rg-pmenu__main">{c ? <CategoryPage key={c.id} cat={c} /> : <Overview cats={cats} pick={pick} />}</div>
      </section>
    </>
  );
}

/* PDF: обзор направлений → партнёры → развитие за 5 лет. */
function PartnersPdf() {
  const D = data();
  const cats = (D.categories || []).filter(c => c.on !== false);
  const all = cats.flatMap(c => (c.partners || []).map(p => ({ p, c })));
  const office = D.office || {};
  const Head = window.RGPdfHead, Foot = window.RGPdfFoot;
  return (
    <>
      <section className="rg-pdf__page">
        <Head kind="Партнёрский сервис" />
        <div>
          <div className="rg-pdf__eyebrow">Respector Group</div>
          <div className="rg-pdf__code" style={{ fontSize: "40pt" }}>Партнёрский сервис</div>
          <p className="rg-pdf__lead" style={{ marginTop: "4mm" }}>Проверенные специалисты, с которыми мы работаем на своих объектах. Покупатель получает одно окно — партнёрский офис Respector Group — и не ищет подрядчиков сам.</p>
        </div>
        <div className="rg-pdf__cats">
          {cats.map(c => (
            <div key={c.id}>
              <span className="rg-pdf__caticon"><Icon name={c.icon} size={16} /></span>
              <div><b>{c.label}</b><span>{c.desc}</span>
                <em className={(c.partners || []).length ? "" : "is-soon"}>{(c.partners || []).length ? c.partners.map(p => p.name).join(", ") : "Партнёр подбирается"}</em></div>
            </div>
          ))}
        </div>
        <Foot code="Партнёрский сервис" page="1 / 3" />
      </section>
      <section className="rg-pdf__page">
        <Head kind="Партнёрский сервис" />
        <div className="rg-pdf__h2">Партнёры · {all.length}</div>
        <div className="rg-pdf__plist">
          {all.map(({ p, c }) => (
            <div key={p.id}>
              {p.photo ? <img src={p.photo} alt="" /> : <span className="rg-pdf__caticon"><Icon name={c.icon} size={18} /></span>}
              <div>
                <div className="rg-pdf__eyebrow">{c.label}</div>
                <b>{p.name}</b>{p.role && <span className="rg-pdf__muted">{p.role}</span>}
                <p>{p.short || p.lead}</p>
                {!!(p.services || []).length && <p className="rg-pdf__muted">{p.services.map(s => s.t).join(" · ")}</p>}
                <div className="rg-pdf__pcont">{[p.phone, p.email, p.site && host(p.site)].filter(Boolean).map(x => <span key={x}>{x}</span>)}</div>
              </div>
            </div>
          ))}
        </div>
        <Foot code="Партнёрский сервис" page="2 / 3" />
      </section>
      <section className="rg-pdf__page">
        <Head kind="Партнёрский сервис" />
        <div>
          <div className="rg-pdf__eyebrow">План</div>
          <div className="rg-pdf__code" style={{ fontSize: "40pt" }}>Развитие за 5 лет</div>
        </div>
        <ol className="rg-pdf__road">
          {(D.plan || []).map(s => <li key={s.year + s.title}><span>{s.year}</span><div><b>{s.title}</b><p>{s.text}</p></div></li>)}
        </ol>
        <div className="rg-pdf__contacts">
          <div><b>Партнёрский офис</b><span>Одно окно для всех услуг партнёров.</span></div>
          <div className="rg-pdf__contactlist">{[office.phone, office.email, office.site].filter(Boolean).map(x => <span key={x}>{x}</span>)}</div>
        </div>
        <Foot code="Партнёрский сервис" page="3 / 3" />
      </section>
    </>
  );
}

window.PartnersPage = PartnersPage;
})();