// 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 } = window.NKO_DATA;
const { Icon, Btn, Crumb, goTo, FAQBlock } = window;

// ============== HELP PAGE ==============
const HelpPage = ({ onBook }) => (
  <main className="page page-enter">
    <div className="container">
      <Crumb items={[{ label: 'Способы помочь' }]}/>
      <h1 className="page-title">
        Способы <span className="accent-word">помочь</span>
      </h1>
      <p className="page-lede">
        Центр «Потенциал» открыт для партнёрства и сотрудничества с коммерческими организациями, НКО, благотворительными фондами и неравнодушными людьми, которые хотят помочь семьям и детям, сделать их жизнь более комфортной и гармоничной.
      </p>

      <div className="help-grid">
        {HELP_WAYS.map(h => (
          <a key={h.id} href={'#/' + h.route} onClick={(e) => { e.preventDefault(); goTo(h.route); }} className={`help-card ${h.featured ? 'featured' : ''}`}>
            <div className="help-num">{h.num}</div>
            <h3>{h.title}</h3>
            <p>{h.desc}</p>
            <span className="help-link">{h.cta} <Icon name="arrowUp" size={14}/></span>
          </a>
        ))}
      </div>
    </div>
  </main>
);

// ============== DONATE PAGE ==============
const DonatePage = () => {
  const [legal, setLegal] = React.useState(0); // 0 — физ, 1 — юр
  const [amount, setAmount] = React.useState(1000);
  const [custom, setCustom] = React.useState('');
  const isCustom = !DONATION_AMOUNTS.includes(amount);

  return (
    <main className="page page-enter">
      <div className="container">
        <Crumb items={[{ label: 'Способы помочь', route: 'help' }, { label: 'Сделать пожертвование' }]}/>
        <h1 className="page-title">
          Сделать <span className="accent-word">пожертвование</span>
        </h1>
        <p className="page-lede">
          Любая сумма поможет нам поддерживать программы для детей с ОВЗ и работу команды специалистов.
        </p>

        <div className="donate-layout">
          <div className="donate-card">
            <div className="donate-tabs">
              <button className={`donate-tab ${legal===0?'active':''}`} onClick={() => setLegal(0)}>Как физическое лицо</button>
              <button className={`donate-tab ${legal===1?'active':''}`} onClick={() => setLegal(1)}>Как юридическое лицо</button>
            </div>
            <div className="eyebrow" style={{marginBottom:16}}>Выберите сумму</div>
            <div className="donate-amounts">
              {DONATION_AMOUNTS.map(a => (
                <button key={a} className={`donate-amount ${amount===a && !isCustom ? 'active':''}`} onClick={() => { setAmount(a); setCustom(''); }}>
                  {a.toLocaleString('ru-RU')} ₽
                </button>
              ))}
              <button className={`donate-amount custom ${isCustom ? 'active' : ''}`} onClick={() => setAmount(0)}>
                Указать свою
              </button>
            </div>
            {amount === 0 && (
              <input
                type="number"
                className="donate-custom"
                placeholder="Сумма, ₽"
                value={custom}
                onChange={(e) => setCustom(e.target.value)}
              />
            )}
            <button className="btn btn-accent donate-submit" style={{marginTop:8}}>
              Пожертвовать {amount > 0 ? `${amount.toLocaleString('ru-RU')} ₽` : (custom ? `${Number(custom).toLocaleString('ru-RU')} ₽` : '')}
              <span className="btn-icon"><Icon name="arrow"/></span>
            </button>
            <p style={{fontSize:12, color:'var(--ink-muted)', marginTop:14, lineHeight:1.5}}>
              Нажимая «Пожертвовать», вы соглашаетесь с публичной офертой и политикой обработки персональных данных. Оплата картой через защищённую форму.
            </p>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            {BANK_DETAILS.map((b, i) => (
              <div key={i} className="bank-card">
                <h4>{b.name}</h4>
                {b.rows.map((r, j) => (
                  <div className="bank-row" key={j}>
                    <div className="bank-row-label">{r[0]}</div>
                    <div className="bank-row-value">{r[1]}</div>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
};

// ============== CONTACTS PAGE ==============
const ContactsPage = ({ onBook }) => (
  <main className="page page-enter">
    <div className="container">
      <Crumb items={[{ label: 'Контакты' }]}/>
      <h1 className="page-title">
        Связаться <span className="accent-word">с нами</span>
      </h1>
      <p className="page-lede">
        Вы можете связаться с нами удобным для вас способом: звонок, сообщение в WhatsApp или Telegram, или просто оставьте заявку — мы свяжемся с вами как можно скорее.
      </p>

      <div className="info-grid">
        <div className="info-card dark">
          <div className="info-card-label">График работы</div>
          <div className="info-card-value small">{ORG.schedule}</div>
          <div className="info-card-sub">в том числе по выходным и праздникам</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Дата регистрации</div>
          <div className="info-card-value">2022</div>
          <div className="info-card-sub">{ORG.founded}</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Учредители</div>
          <div className="info-card-value small">Белоусовы Д.Г. и А.В.</div>
          <div className="info-card-sub">{ORG.founders}</div>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:32, marginTop:48}} className="contacts-grid">
        <div style={{display:'flex', flexDirection:'column', gap:16}}>
          <div className="bank-card">
            <h4>Контакты</h4>
            <div className="bank-row"><div className="bank-row-label">Телефон</div><div><a href={'tel:' + ORG.phoneRaw} style={{color:'var(--brand)'}}>{ORG.phone}</a></div></div>
            <div className="bank-row"><div className="bank-row-label">Email</div><div><a href={'mailto:' + ORG.email} style={{color:'var(--brand)'}}>{ORG.email}</a></div></div>
            <div className="bank-row"><div className="bank-row-label">Адрес</div><div>{ORG.addressFull}</div></div>
          </div>
          <div className="bank-card">
            <h4>Реквизиты</h4>
            <div className="bank-row"><div className="bank-row-label">Полное наименование</div><div style={{fontFamily:'var(--font-text)'}}>{ORG.fullName}</div></div>
            <div className="bank-row"><div className="bank-row-label">ИНН</div><div>{ORG.inn}</div></div>
            <div className="bank-row"><div className="bank-row-label">КПП</div><div>{ORG.kpp}</div></div>
            <div className="bank-row"><div className="bank-row-label">ОГРН</div><div>{ORG.ogrn}</div></div>
          </div>
          <div className="bank-card">
            <h4>Соцсети и мессенджеры</h4>
            <div className="contact-socials" style={{marginTop:4}}>
              <a href={ORG.whatsapp} className="social-chip">WhatsApp</a>
              <a href={ORG.vk} className="social-chip">ВКонтакте</a>
              <a href={ORG.telegram} className="social-chip">Telegram</a>
              <a href={'mailto:' + ORG.email} className="social-chip">Email</a>
            </div>
          </div>
        </div>

        <div>
          <div className="map-card">
            <div className="map-tip">
              <strong>АНО «Потенциал»</strong>
              {ORG.address}
            </div>
            <div className="map-pin">
              <Icon name="pin" size={24}/>
            </div>
          </div>
          <div style={{marginTop:16, fontSize:14, color:'var(--ink-soft)'}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--ink-muted)', marginBottom:8}}>
              Как добраться
            </div>
            {ORG.transport.map((t, i) => <div key={i} style={{padding:'4px 0'}}>• {t}</div>)}
          </div>
        </div>
      </div>

      <div className="bank-card" style={{marginTop:32}}>
        <h4>Доступность</h4>
        <p style={{fontSize:14, lineHeight:1.6, color:'var(--ink-soft)'}}>
          Здание полностью адаптировано для всех маломобильных групп населения. Вход с улицы оборудован для передвижения, в том числе инвалидов-колясочников. При входе установлена таблица о наименовании организации и графике работы, выполненная шрифтом Брайля. Возможно оказание услуг по месту жительства или дистанционно — с использованием интернет-технологий и телефонии.
        </p>
      </div>

      <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
        <button className="btn btn-primary" onClick={onBook}>
          Оставить заявку <span className="btn-icon"><Icon name="arrow"/></span>
        </button>
        <a className="btn btn-ghost" href={'tel:' + ORG.phoneRaw}>
          Позвонить <Icon name="phone" size={16}/>
        </a>
      </div>
    </div>
  </main>
);

// ============== PARENTS PAGE ==============
const ParentsPage = ({ onBook }) => (
  <main className="page page-enter">
    <div className="container">
      <Crumb items={[{ label: 'Для родителей и опекунов' }]}/>
      <h1 className="page-title">
        Для родителей<br/>и <span className="accent-word">опекунов</span>
      </h1>
      <p className="page-lede">
        Полная информация для семей, обращающихся в центр: документы, условия предоставления услуг, формы обслуживания, оборудование и доступность.
      </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">по ФЗ № 442-ФЗ при наличии ИППСУ</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">Полустационарная</div>
          <div className="info-card-value">150</div>
          <div className="info-card-sub">мест · свободных: 0</div>
        </div>
        <div className="info-card">
          <div className="info-card-label">На дому</div>
          <div className="info-card-value">150</div>
          <div className="info-card-sub">мест · свободных: 35</div>
        </div>
      </div>

      <div className="section-head" style={{marginTop:60}}>
        <div>
          <div className="eyebrow">Виды услуг</div>
          <h2 className="display h-md">Что включают<br/>социальные услуги</h2>
        </div>
        <p>На основании Стандартов социальных услуг — по Федеральному закону от 28.12.2013 № 442-ФЗ.</p>
      </div>
      <div className="tag-list" style={{marginBottom:60}}>
        {SOCIAL_SERVICE_TYPES.map((t, i) => (
          <span key={i} className={`tag ${i === 0 ? 'brand' : ''}`}>{t}</span>
        ))}
      </div>

      <div className="section-head">
        <div>
          <div className="eyebrow">Документы</div>
          <h2 className="display h-md">Скачать формы<br/>и образцы</h2>
        </div>
        <p>Анкеты, договоры, правила и нормативные акты — для подготовки к первому визиту.</p>
      </div>
      <div className="doc-list" style={{marginBottom:60}}>
        {PARENT_DOCS.map((d, i) => (
          <a key={i} href={d.url} className="doc-item" target="_blank">
            <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">
        <div>
          <div className="eyebrow">Доступность</div>
          <h2 className="display h-md">Как добраться<br/>и оформить заявку</h2>
        </div>
      </div>
      <div className="bank-card" style={{marginBottom:32}}>
        <h4>Как подать заявку на услуги по ИППСУ</h4>
        <p style={{fontSize:14, lineHeight:1.65, color:'var(--ink-soft)'}}>
          Заявки на получение социальных услуг по ИППСУ принимаются по телефону {ORG.phone}. Далее необходимо:
        </p>
        <ol style={{margin:'12px 0 0 20px', fontSize:14, color:'var(--ink-soft)', lineHeight:1.7}}>
          <li>Предоставить оригинал ИППСУ;</li>
          <li>Предоставить ксерокопию паспорта законного представителя ребёнка;</li>
          <li>Информированное добровольное согласие на обработку персональных данных;</li>
          <li>Заключить договор об оказании услуг от имени законного представителя ребёнка.</li>
        </ol>
      </div>
      <div className="bank-card" style={{marginBottom:60}}>
        <h4>Адрес и транспорт</h4>
        <p style={{fontSize:14, lineHeight:1.6, color:'var(--ink-soft)'}}>
          {ORG.addressFull}. Здание полностью адаптировано для маломобильных групп. Возможны услуги на дому или дистанционно.
        </p>
        <div style={{marginTop:16, fontSize:14, color:'var(--ink-soft)'}}>
          {ORG.transport.map((t, i) => <div key={i} style={{padding:'4px 0'}}>• {t}</div>)}
        </div>
      </div>

      <div className="section-head">
        <div>
          <div className="eyebrow">Оборудование</div>
          <h2 className="display h-md">Что есть<br/>в центре</h2>
        </div>
        <p>Кабинеты специалистов, сенсорная комната, спортивное и реабилитационное оборудование, мастерские и инвентарь.</p>
      </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 style={{marginTop:60, display:'flex', gap:12, flexWrap:'wrap'}}>
        <button className="btn btn-primary" onClick={onBook}>
          Оставить заявку <span className="btn-icon"><Icon name="arrow"/></span>
        </button>
        <a className="btn btn-ghost" href="#/ippsu" onClick={(e) => { e.preventDefault(); goTo('ippsu'); }}>
          Как получить ИППСУ
        </a>
      </div>
    </div>
  </main>
);

// ============== LEGAL PAGE ==============
const LegalPage = () => (
  <main className="page page-enter">
    <div className="container">
      <Crumb items={[{ label: 'Справочно-нормативная информация' }]}/>
      <h1 className="page-title">
        Справочно-<wbr/>нормативная<br/><span className="accent-word">информация</span>
      </h1>
      <p className="page-lede">
        Юридическая, лицензионная и регистрационная информация об АНО «Потенциал».
      </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>
        <div className="info-card">
          <div className="info-card-label">ОГРН</div>
          <div className="info-card-value small">{ORG.ogrn}</div>
        </div>
      </div>

      <div className="bank-card" style={{marginTop:48}}>
        <h4>Полное наименование организации</h4>
        <p style={{fontSize:14, lineHeight:1.6, color:'var(--ink-soft)'}}>
          {ORG.fullName}
        </p>
      </div>

      <div className="bank-card" style={{marginTop:16}}>
        <h4>Реквизиты</h4>
        <div className="bank-row"><div className="bank-row-label">ИНН</div><div>{ORG.inn}</div></div>
        <div className="bank-row"><div className="bank-row-label">КПП</div><div>{ORG.kpp}</div></div>
        <div className="bank-row"><div className="bank-row-label">ОГРН</div><div>{ORG.ogrn}</div></div>
        <div className="bank-row"><div className="bank-row-label">Дата регистрации</div><div style={{fontFamily:'var(--font-text)'}}>{ORG.founded}</div></div>
        <div className="bank-row"><div className="bank-row-label">Учредители</div><div style={{fontFamily:'var(--font-text)'}}>{ORG.founders}</div></div>
        <div className="bank-row"><div className="bank-row-label">Адрес</div><div style={{fontFamily:'var(--font-text)'}}>{ORG.addressFull}</div></div>
        <div className="bank-row"><div className="bank-row-label">График работы</div><div style={{fontFamily:'var(--font-text)'}}>{ORG.schedule}</div></div>
        <div className="bank-row"><div className="bank-row-label">Лицензия</div><div style={{fontFamily:'var(--font-text)'}}>{ORG.license}</div></div>
      </div>

      <div className="section-head" style={{marginTop:60}}>
        <div>
          <div className="eyebrow">Документы</div>
          <h2 className="display h-md">Скачать</h2>
        </div>
      </div>
      <div className="doc-list">
        {LEGAL_DOCS.map((d, i) => (
          <a key={i} href={d.url} className="doc-item" target="_blank">
            <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>

      <p style={{marginTop:32, fontSize:14, lineHeight:1.6, color:'var(--ink-soft)', maxWidth:720}}>
        АНО «Центр социальной адаптации и реабилитации «Потенциал» оказывает социальные услуги на основании Федерального закона от 28.12.2013 № 442-ФЗ «Об основах социального обслуживания граждан в Российской Федерации», в соответствии со Стандартами социальных услуг.
      </p>
    </div>
  </main>
);

// ============== PHOTO PAGE ==============
const PhotoPage = () => {
  const [tab, setTab] = React.useState(0);
  const labels = ['1 этаж', 'Сенсорная комната', 'Кабинет логопеда', 'Зал АФК', 'Мастерская', 'Кабинет психолога', 'Игровая', 'Холл', 'Терраса', 'Кабинет дефектолога', 'Кабинет массажа', 'Юриста'];
  return (
    <main className="page page-enter">
      <div className="container">
        <Crumb items={[{ label: 'Фото и видео' }]}/>
        <h1 className="page-title">
          Фото <span className="accent-word">и видео</span>
        </h1>
        <p className="page-lede">
          Фотографии помещений, кабинетов специалистов, мероприятий и занятий с детьми. Видеоматериалы можно посмотреть в нашей группе ВКонтакте.
        </p>

        <div className="donate-tabs">
          <button className={`donate-tab ${tab===0?'active':''}`} onClick={() => setTab(0)}>Фото</button>
          <button className={`donate-tab ${tab===1?'active':''}`} onClick={() => setTab(1)}>Видео</button>
        </div>

        {tab === 0 ? (
          <div className="gallery" style={{marginTop:32}}>
            <div className="photo-slot large"><span>{labels[0]}</span></div>
            {labels.slice(1).map((l, i) => (
              <div key={i} className={`photo-slot ${i === 3 ? 'wide' : ''}`}><span>{l}</span></div>
            ))}
          </div>
        ) : (
          <div style={{marginTop:32, padding:60, textAlign:'center', background:'var(--paper)', border:'1px solid var(--line-soft)', borderRadius:'var(--r-lg)'}}>
            <Icon name="arrowUp" size={36}/>
            <h3 style={{fontFamily:'var(--font-display)', fontSize:24, fontWeight:500, marginTop:16, marginBottom:12}}>Видеоматериалы</h3>
            <p style={{color:'var(--ink-soft)', maxWidth:480, margin:'0 auto 24px'}}>
              Видео с занятий, мероприятий и интервью со специалистами публикуем в группе ВКонтакте.
            </p>
            <a href={ORG.vk} className="btn btn-primary">
              Перейти в группу ВКонтакте <span className="btn-icon"><Icon name="arrow"/></span>
            </a>
          </div>
        )}
      </div>
    </main>
  );
};

// ============== PRIVACY PAGE ==============
const PrivacyPage = () => (
  <main className="page page-enter">
    <div className="container">
      <Crumb items={[{ label: 'Политика конфиденциальности' }]}/>
      <h1 className="page-title">
        Политика <span className="accent-word">конфиденциальности</span>
      </h1>
      <p className="page-lede">
        Политика в отношении обработки персональных данных пользователей сайта nko-potential.ru
      </p>

      <div style={{maxWidth:780, fontSize:15, lineHeight:1.7, color:'var(--ink-soft)'}}>
        <h3 style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, color:'var(--ink)', marginTop:40, marginBottom:12}}>1. Общие положения</h3>
        <p>Настоящая Политика определяет порядок обработки и защиты персональных данных, осуществляемой АНО «Центр социальной адаптации и реабилитации «Потенциал» (ИНН {ORG.inn}, ОГРН {ORG.ogrn}, далее — Оператор).</p>

        <h3 style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, color:'var(--ink)', marginTop:32, marginBottom:12}}>2. Состав обрабатываемых данных</h3>
        <p>Оператор обрабатывает следующие персональные данные: фамилия, имя, отчество; контактный телефон; адрес электронной почты; сведения, которые пользователь добровольно сообщает в формах обратной связи на сайте.</p>

        <h3 style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, color:'var(--ink)', marginTop:32, marginBottom:12}}>3. Цели обработки</h3>
        <p>Персональные данные обрабатываются для: установления обратной связи с пользователем; информирования об услугах Оператора; заключения и исполнения договоров об оказании социальных услуг; статистических и аналитических исследований работы сайта.</p>

        <h3 style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, color:'var(--ink)', marginTop:32, marginBottom:12}}>4. Правовое основание</h3>
        <p>Обработка осуществляется на основании Федерального закона от 27.07.2006 № 152-ФЗ «О персональных данных» и согласия субъекта персональных данных, выраженного при заполнении форм на сайте.</p>

        <h3 style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, color:'var(--ink)', marginTop:32, marginBottom:12}}>5. Условия обработки</h3>
        <p>Оператор обеспечивает конфиденциальность персональных данных, не передаёт их третьим лицам, за исключением случаев, прямо предусмотренных законом. Хранение осуществляется в течение срока, необходимого для достижения целей обработки, или до отзыва согласия.</p>

        <h3 style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, color:'var(--ink)', marginTop:32, marginBottom:12}}>6. Права субъекта</h3>
        <p>Субъект персональных данных вправе: получать информацию о своих данных; требовать их уточнения, блокирования или уничтожения; отозвать согласие на обработку, направив соответствующее заявление по адресу: {ORG.email} или по адресу: {ORG.address}.</p>

        <h3 style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, color:'var(--ink)', marginTop:32, marginBottom:12}}>7. Контакты</h3>
        <p>По всем вопросам, связанным с обработкой персональных данных, обращайтесь: телефон {ORG.phone}, email {ORG.email}, адрес: {ORG.addressFull}.</p>
      </div>
    </div>
  </main>
);

// ============== FAQ PAGE ==============
const FAQPage = () => (
  <main className="page page-enter">
    <div className="container">
      <Crumb items={[{ label: 'Часто задаваемые вопросы' }]}/>
      <h1 className="page-title">
        Вопрос <span className="accent-word">— ответ</span>
      </h1>
      <p className="page-lede">
        Ответы на самые распространённые вопросы о работе центра, оформлении документов и получении услуг.
      </p>
      <FAQBlock/>
    </div>
  </main>
);

window.HelpPage = HelpPage;
window.DonatePage = DonatePage;
window.ContactsPage = ContactsPage;
window.ParentsPage = ParentsPage;
window.LegalPage = LegalPage;
window.PhotoPage = PhotoPage;
window.PrivacyPage = PrivacyPage;
window.FAQPage = FAQPage;