// shared from window
const { ROUTES, NAV_PRIMARY, NAV_ALL, ORG, SERVICES_TOP, SERVICE_GROUPS, SPECIALISTS, PRICES, FORMS, SOCIAL_SERVICE_TYPES, IPPSU_WAYS, HELP_WAYS, DONATION_AMOUNTS, BANK_DETAILS, PARENT_DOCS, LEGAL_DOCS, EQUIPMENT, FAQS, LEADERSHIP, SVEDENIYA_SECTIONS, GOVERNANCE, MINISTRIES } = window.NKO_DATA;
const { Icon, Btn, Crumb, goTo } = window;

// ============== HUB PAGE — Сведения об организации ==============
const SvedeniyaHub = () => {
  // Parse sub-route from hash like #/svedeniya/osnovnye
  const sub = (window.location.hash.split('/')[2] || '').trim();
  if (sub) {
    return <SvedeniyaSub id={sub}/>;
  }
  return (
    <main className="page">
      <div className="container">
        <Crumb items={[{ label: 'Сведения об образовательной организации' }]}/>
        <h1 className="page-title">
          Сведения об <span className="accent-word">организации</span>
        </h1>
        <p className="page-lede">
          Раздел соответствует требованиям Приказа Рособрнадзора от 04.08.2023 № 1493 (ред. от 03.07.2025) и Постановления Правительства РФ от 20.10.2021 № 1802. Содержит полную информацию об образовательной деятельности АНО «Потенциал».
        </p>

        <div className="info-grid">
          <div className="info-card dark">
            <div className="info-card-label">Лицензия</div>
            <div className="info-card-value small">№ Л035-01277-66/00633578</div>
            <div className="info-card-sub">от 26.12.2022 · образовательная деятельность</div>
          </div>
          <div className="info-card">
            <div className="info-card-label">ИНН</div>
            <div className="info-card-value small">{ORG.inn}</div>
            <div className="info-card-sub">ОГРН {ORG.ogrn}</div>
          </div>
          <div className="info-card">
            <div className="info-card-label">Дата регистрации</div>
            <div className="info-card-value small">21.01.2022</div>
            <div className="info-card-sub">АНО · некоммерческая организация</div>
          </div>
        </div>

        <div className="svedeniya-grid">
          {SVEDENIYA_SECTIONS.map(s => (
            <a key={s.id}
               href={`#/svedeniya/${s.id}`}
               onClick={(e) => { e.preventDefault(); window.location.hash = `#/svedeniya/${s.id}`; window.scrollTo(0,0); }}
               className="svedeniya-card">
              <div className="svedeniya-num">{s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <span className="svedeniya-arrow"><Icon name="arrowUp" size={16}/></span>
            </a>
          ))}
        </div>
      </div>
    </main>
  );
};

// ============== SUB-PAGES ==============
const SvedeniyaSub = ({ id }) => {
  const section = SVEDENIYA_SECTIONS.find(s => s.id === id);
  if (!section) {
    return (
      <main className="page">
        <div className="container">
          <h1 className="page-title">Раздел не найден</h1>
          <a className="btn btn-primary" href="#/svedeniya" onClick={(e) => { e.preventDefault(); goTo('svedeniya'); }}>Вернуться к сведениям</a>
        </div>
      </main>
    );
  }
  const body = SUB_RENDERERS[id] ? SUB_RENDERERS[id]() : <p>Информация уточняется.</p>;
  return (
    <main className="page">
      <div className="container">
        <Crumb items={[
          { label: 'Сведения об организации', route: 'svedeniya' },
          { label: section.title }
        ]}/>
        <div className="svedeniya-sub-head">
          <div className="svedeniya-sub-num">{section.num}</div>
          <h1 className="page-title" style={{fontSize:'clamp(36px,5vw,72px)'}}>{section.title}</h1>
        </div>
        <p className="page-lede" style={{maxWidth:780}}>{section.desc}</p>
        <div className="svedeniya-body">
          {body}
        </div>

        <SubPager currentId={id}/>
      </div>
    </main>
  );
};

const SubPager = ({ currentId }) => {
  const idx = SVEDENIYA_SECTIONS.findIndex(s => s.id === currentId);
  const prev = SVEDENIYA_SECTIONS[idx - 1];
  const next = SVEDENIYA_SECTIONS[idx + 1];
  return (
    <div className="sub-pager">
      {prev ? (
        <a href={`#/svedeniya/${prev.id}`} onClick={(e) => { e.preventDefault(); window.location.hash = `#/svedeniya/${prev.id}`; window.scrollTo(0,0); }} className="sub-pager-link">
          <div className="sub-pager-label">← Предыдущий</div>
          <div className="sub-pager-title">{prev.title}</div>
        </a>
      ) : <div/>}
      {next ? (
        <a href={`#/svedeniya/${next.id}`} onClick={(e) => { e.preventDefault(); window.location.hash = `#/svedeniya/${next.id}`; window.scrollTo(0,0); }} className="sub-pager-link right">
          <div className="sub-pager-label">Следующий →</div>
          <div className="sub-pager-title">{next.title}</div>
        </a>
      ) : <div/>}
    </div>
  );
};

// ============== SUB-PAGE CONTENT RENDERERS ==============
const KV = ({ label, value, link }) => (
  <div className="bank-row">
    <div className="bank-row-label">{label}</div>
    <div style={{fontFamily:'var(--font-text)'}}>{link ? <a href={link} style={{color:'var(--brand)'}}>{value}</a> : value}</div>
  </div>
);

const SUB_RENDERERS = {
  osnovnye: () => (
    <>
      <div className="bank-card">
        <h4>Полное наименование</h4>
        <p>{ORG.fullName}</p>
      </div>
      <div className="bank-card" style={{marginTop:16}}>
        <h4>Сокращённое наименование</h4>
        <p>АНО «Потенциал»</p>
      </div>
      <div className="bank-card" style={{marginTop:16}}>
        <h4>Реквизиты и регистрация</h4>
        <KV label="Дата создания" value="21.01.2022"/>
        <KV label="ИНН" value={ORG.inn}/>
        <KV label="КПП" value={ORG.kpp}/>
        <KV label="ОГРН" value={ORG.ogrn}/>
        <KV label="Учредители" value={ORG.founders}/>
        <KV label="Адрес" value={ORG.addressFull}/>
        <KV label="График работы" value={ORG.schedule}/>
        <KV label="Телефон" value={ORG.phone} link={'tel:' + ORG.phoneRaw}/>
        <KV label="Email" value={ORG.email} link={'mailto:' + ORG.email}/>
      </div>
      <div className="bank-card" style={{marginTop:16}}>
        <h4>Лицензия на образовательную деятельность</h4>
        <KV label="Номер" value="Л035-01277-66/00633578"/>
        <KV label="Дата выдачи" value="26.12.2022"/>
        <KV label="Орган, выдавший лицензию" value="Министерство образования и молодёжной политики Свердловской области"/>
        <KV label="Срок действия" value="Бессрочно"/>
        <div style={{marginTop:16}}>
          <a className="btn btn-primary" href="docs/litsenziya-vypiska.pdf" target="_blank">
            Выписка из реестра лицензий <span className="btn-icon"><Icon name="arrowUp" size={16}/></span>
          </a>
        </div>
      </div>
      <div className="bank-card" style={{marginTop:16}}>
        <h4>Государственная аккредитация</h4>
        <p style={{color:'var(--ink-soft)'}}>Реализуемые программы социальной адаптации и реабилитации не подлежат государственной аккредитации в соответствии с частью 1 статьи 92 Федерального закона от 29.12.2012 № 273-ФЗ «Об образовании в Российской Федерации».</p>
      </div>
    </>
  ),

  struktura: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        АНО «Потенциал» имеет компактную структуру, ориентированную на оперативное взаимодействие специалистов и семей получателей услуг. В организации нет филиалов и представительств.
      </p>

      <div className="section-head">
        <div>
          <div className="eyebrow">Органы управления</div>
          <h2 className="display h-md">Высший и исполнительный<br/>органы управления</h2>
        </div>
      </div>
      <div className="doc-list">
        {GOVERNANCE.map((g, i) => (
          <div key={i} className="info-card" style={{margin:0}}>
            <div className="info-card-label">{String(i+1).padStart(2, '0')}</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:500, color:'var(--brand)', marginTop:6, marginBottom:10, letterSpacing:'-0.01em'}}>{g.name}</div>
            <p style={{fontSize:14, color:'var(--ink-soft)', lineHeight:1.55}}>{g.desc}</p>
          </div>
        ))}
      </div>

      <div className="section-head" style={{marginTop:60}}>
        <div>
          <div className="eyebrow">Подразделения</div>
          <h2 className="display h-md">Команда специалистов</h2>
        </div>
        <p>Полная численность штата — {SPECIALISTS.reduce((a,s)=>a+s.count,0)} специалистов по 21 направлениям.</p>
      </div>
      <div className="info-grid">
        <div className="info-card">
          <div className="info-card-label">Логопеды и дефектологи</div>
          <div className="info-card-value">8</div>
          <div className="info-card-sub">в т.ч. логопед-афазиолог</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Психологическая служба</div>
          <div className="info-card-value">4</div>
          <div className="info-card-sub">педагоги-психологи</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Социальные работники</div>
          <div className="info-card-value">10</div>
          <div className="info-card-sub">включая специалиста по соц. работе</div>
        </div>
      </div>
      <div style={{marginTop:24}}>
        <a className="btn btn-ghost" href="#/specialists" onClick={(e) => { e.preventDefault(); goTo('specialists'); }}>
          Полный состав специалистов <span className="btn-icon"><Icon name="arrow"/></span>
        </a>
      </div>
    </>
  ),

  dokumenty: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        Документы организации в электронной форме. Все файлы доступны для скачивания и содержат текстовый слой, пригодный для поиска и копирования.
      </p>
      <div className="doc-list">
        {LEGAL_DOCS.map((d, i) => (
          <a key={i}
             href={d.url}
             className="doc-item"
             target={d.url.startsWith('#') ? '_self' : '_blank'}
             onClick={d.url.startsWith('#') ? (e) => { e.preventDefault(); window.location.hash = d.url; window.scrollTo(0,0); } : undefined}>
            <div className="doc-icon">PDF</div>
            <div className="doc-title">{d.title}</div>
            <div className="doc-arrow"><Icon name="arrowUp" size={18}/></div>
          </a>
        ))}
      </div>

      <div className="section-head" style={{marginTop:60}}>
        <div>
          <div className="eyebrow">Для получателей социальных услуг</div>
          <h2 className="display h-md">Образцы документов<br/>и формы</h2>
        </div>
      </div>
      <div className="doc-list">
        {PARENT_DOCS.map((d, i) => (
          <a key={i} href={d.url} target="_blank" className="doc-item">
            <div className="doc-icon">PDF</div>
            <div className="doc-title">{d.title}</div>
            <div className="doc-arrow"><Icon name="arrowUp" size={18}/></div>
          </a>
        ))}
      </div>
    </>
  ),

  rukovodstvo: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        Сведения о руководителе организации и его заместителе. Все контактные данные предназначены для оперативной связи в рамках деятельности центра.
      </p>
      <div className="leader-grid">
        {LEADERSHIP.map((p, i) => (
          <div key={i} className="leader-card">
            <div className="leader-avatar">{p.name.split(' ').map(s => s[0]).slice(0, 2).join('')}</div>
            <div className="leader-role">{p.role}</div>
            <div className="leader-name">{p.name}</div>
            <div className="leader-contacts">
              <a href={`tel:${p.phone.replace(/\D/g,'')}`}>
                <Icon name="phone" size={14}/> {p.phone}
              </a>
              <a href={`mailto:${p.email}`}>
                <Icon name="mail" size={14}/> {p.email}
              </a>
            </div>
          </div>
        ))}
      </div>
    </>
  ),

  mto: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        Центр оборудован для проведения комплексных реабилитационных мероприятий. Здание полностью адаптировано для маломобильных групп населения, включая инвалидов-колясочников.
      </p>

      <div className="section-head">
        <div>
          <div className="eyebrow">Материально-техническое обеспечение</div>
          <h2 className="display h-md">Кабинеты и оборудование</h2>
        </div>
      </div>
      <div className="eq-grid">
        {EQUIPMENT.map((e, i) => (
          <div className="eq-item" key={i}>
            <h5>{e.title}</h5>
            <p>{e.desc}</p>
          </div>
        ))}
      </div>

      <div className="section-head" style={{marginTop:60}}>
        <div>
          <div className="eyebrow">Доступная среда</div>
          <h2 className="display h-md">Условия для маломобильных<br/>групп населения</h2>
        </div>
      </div>
      <div className="info-grid">
        <div className="info-card">
          <div className="info-card-label">Вход и входная группа</div>
          <div className="info-card-value small">Адаптирован</div>
          <div className="info-card-sub">для передвижения инвалидов-колясочников</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Информация на входе</div>
          <div className="info-card-value small">Шрифт Брайля</div>
          <div className="info-card-sub">таблица с наименованием и графиком</div>
        </div>
        <div className="info-card dark">
          <div className="info-card-label">Дистанционная работа</div>
          <div className="info-card-value small">Возможна</div>
          <div className="info-card-sub">по интернету и телефонии</div>
        </div>
      </div>
      <div className="bank-card" style={{marginTop:24}}>
        <h4>Дополнительные формы</h4>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--ink-soft)'}}>
          Услуги могут быть оказаны: в центре по адресу {ORG.address}; по месту жительства получателя социальных услуг; дистанционно — с использованием интернет-технологий и телефонии.
        </p>
      </div>
    </>
  ),

  platnye: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        АНО «Потенциал» <strong>не оказывает платные образовательные услуги</strong>. Все социальные и реабилитационные программы предоставляются <strong>бесплатно</strong> — для семей с оформленным ИППСУ, в соответствии с Федеральным законом от 28.12.2013 № 442-ФЗ.
      </p>

      <div className="info-grid">
        <div className="info-card dark">
          <div className="info-card-label">При наличии ИППСУ</div>
          <div className="info-card-value">Бесплатно</div>
          <div className="info-card-sub">по форме социального обслуживания</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Платные образовательные услуги</div>
          <div className="info-card-value small">Не оказываются</div>
          <div className="info-card-sub">все услуги предоставляются бесплатно</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Источник финансирования</div>
          <div className="info-card-value small">ФЗ № 442-ФЗ</div>
          <div className="info-card-sub">социальное обслуживание граждан</div>
        </div>
      </div>

      <div className="bank-card" style={{marginTop:48}}>
        <h4>Порядок получения услуг</h4>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--ink-soft)'}}>
          Для получения бесплатных социальных и реабилитационных услуг необходимо оформить ИППСУ — Индивидуальную программу предоставления социальных услуг. Сделать это можно двумя способами: через МСЭ (при наличии инвалидности) или через ПМПК (психолого-медико-педагогическую комиссию). Подробнее — на странице{' '}
          <a href="#/ippsu" onClick={(e) => { e.preventDefault(); goTo('ippsu'); }} style={{color:'var(--brand)'}}>«ИППСУ»</a>.
        </p>
      </div>

      <div className="section-head" style={{marginTop:60}}>
        <div>
          <div className="eyebrow">Документы</div>
          <h2 className="display h-md">Порядок оказания услуг<br/>и образец договора</h2>
        </div>
      </div>
      <div className="doc-list">
        <a href={PARENT_DOCS[3].url} target="_blank" className="doc-item">
          <div className="doc-icon">PDF</div>
          <div className="doc-title">{PARENT_DOCS[3].title}</div>
          <div className="doc-arrow"><Icon name="arrowUp" size={18}/></div>
        </a>
        <a href={PARENT_DOCS[4].url} target="_blank" className="doc-item">
          <div className="doc-icon">PDF</div>
          <div className="doc-title">{PARENT_DOCS[4].title}</div>
          <div className="doc-arrow"><Icon name="arrowUp" size={18}/></div>
        </a>
      </div>
    </>
  ),

  fhd: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        Сведения об объёме образовательной и социальной деятельности по источникам финансирования. Информация ежегодно обновляется в соответствии с Постановлением Правительства РФ от 20.10.2021 № 1802.
      </p>

      <div className="info-grid">
        <div className="info-card">
          <div className="info-card-label">Бюджетные средства</div>
          <div className="info-card-value small">Субсидии</div>
          <div className="info-card-sub">по программам соц. обслуживания</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Внебюджетные средства</div>
          <div className="info-card-value small">Не привлекаются</div>
          <div className="info-card-sub">все услуги бесплатны для семей с ИППСУ</div>
        </div>
        <div className="info-card dark">
          <div className="info-card-label">Пожертвования</div>
          <div className="info-card-value small">Целевые</div>
          <div className="info-card-sub">направляются на уставную деятельность</div>
        </div>
      </div>

      <div className="bank-card" style={{marginTop:48}}>
        <h4>План финансово-хозяйственной деятельности</h4>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--ink-soft)'}}>
          План ФХД на текущий год и отчёт об исполнении плана за предыдущий период будут опубликованы по мере их утверждения. До публикации сведения предоставляются по запросу — направьте письмо на {ORG.email} или позвоните по телефону {ORG.phone}.
        </p>
        <div style={{marginTop:20, display:'flex', gap:12, flexWrap:'wrap'}}>
          <a className="btn btn-primary" href={'mailto:' + ORG.email}>
            Запросить план ФХД <span className="btn-icon"><Icon name="mail" size={16}/></span>
          </a>
          <a className="btn btn-ghost" href={'tel:' + ORG.phoneRaw}>
            {ORG.phone}
          </a>
        </div>
      </div>
    </>
  ),

  vakantnye: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        Количество вакантных мест для приёма получателей социальных услуг — по формам обслуживания. Данные обновляются по мере изменения списочного состава.
      </p>
      <div className="forms-grid">
        <div className="form-card">
          <div className="form-decor"></div>
          <div style={{display:'flex', gap:12, alignItems:'center', marginBottom:24}}>
            <Icon name="clinic" size={28}/>
            <div className="eyebrow" style={{color:'rgba(255,255,255,0.6)'}}>Форма №1</div>
          </div>
          <h3>Полустационарная</h3>
          <p style={{marginTop:16}}>{FORMS[0].desc}</p>
          <div className="form-card-foot">
            <div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, textTransform:'uppercase', letterSpacing:'0.1em', opacity:0.6}}>Свободных мест</div>
              <div style={{fontSize:48, fontFamily:'var(--font-display)', fontWeight:500, color:'var(--accent)', lineHeight:1, marginTop:6}}>{FORMS[0].free}</div>
              <div style={{fontSize:13, opacity:0.7, marginTop:4}}>из {FORMS[0].capacity}</div>
            </div>
            <div className="form-card-num">01</div>
          </div>
        </div>
        <div className="form-card alt">
          <div className="form-decor"></div>
          <div style={{display:'flex', gap:12, alignItems:'center', marginBottom:24}}>
            <Icon name="home" size={28}/>
            <div className="eyebrow">Форма №2</div>
          </div>
          <h3>На дому</h3>
          <p style={{marginTop:16}}>{FORMS[1].desc}</p>
          <div className="form-card-foot">
            <div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--ink-muted)'}}>Свободных мест</div>
              <div style={{fontSize:48, fontFamily:'var(--font-display)', fontWeight:500, color:'var(--accent)', lineHeight:1, marginTop:6}}>{FORMS[1].free}</div>
              <div style={{fontSize:13, color:'var(--ink-muted)', marginTop:4}}>из {FORMS[1].capacity}</div>
            </div>
            <div className="form-card-num">02</div>
          </div>
        </div>
      </div>
    </>
  ),

  stipendii: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        Стипендиальное обеспечение в АНО «Потенциал» <strong>не предусмотрено</strong> — организация не реализует образовательные программы, по которым законодательством предусмотрено назначение стипендий.
      </p>
      <div className="bank-card">
        <h4>Меры социальной поддержки получателей услуг</h4>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--ink-soft)'}}>
          В соответствии с Федеральным законом от 28.12.2013 № 442-ФЗ «Об основах социального обслуживания граждан в Российской Федерации» центр предоставляет получателям, имеющим ИППСУ, социальные услуги <strong>на бесплатной основе</strong>.
        </p>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--ink-soft)', marginTop:12}}>
          Подробнее об оформлении ИППСУ — на странице{' '}
          <a href="#/ippsu" onClick={(e) => { e.preventDefault(); goTo('ippsu'); }} style={{color:'var(--brand)'}}>«Индивидуальная программа социальных услуг»</a>.
        </p>
      </div>
    </>
  ),

  mezhdunarodnoe: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        Международное сотрудничество в области образования и социальных услуг АНО «Потенциал» <strong>не осуществляет</strong>.
      </p>
      <div className="bank-card">
        <h4>Договоры с иностранными организациями</h4>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--ink-soft)'}}>
          На дату публикации настоящей страницы организация не имеет действующих договоров с иностранными юридическими лицами по вопросам образования и обучения; международные образовательные программы и обмен обучающимися/работниками не реализуются.
        </p>
      </div>
    </>
  ),

  pitanie: () => (
    <>
      <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:780, marginBottom:32}}>
        Организация горячего питания в центре <strong>не предусмотрена</strong> — программы реабилитации проходят в дневной форме и не предполагают длительного пребывания.
      </p>
      <div className="bank-card">
        <h4>Условия пребывания</h4>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--ink-soft)'}}>
          В центре оборудованы зоны для кратковременного отдыха. Получатели социальных услуг и сопровождающие лица могут принимать с собой воду и лёгкие закуски. В штате организации работает специалист по диетологии — консультации по вопросам питания детей с ОВЗ предоставляются в рамках программ.
        </p>
      </div>
    </>
  ),
};

window.SvedeniyaHub = SvedeniyaHub;
window.SvedeniyaSub = SvedeniyaSub;