// 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 } = window;

// ============== SERVICES PAGE ==============
const ServicesPage = ({ onBook }) => {
  const [active, setActive] = React.useState(SERVICE_GROUPS[0].id);

  React.useEffect(() => {
    const handler = () => {
      const sections = SERVICE_GROUPS.map(g => document.getElementById('svc-' + g.id));
      const scrollY = window.scrollY + 180;
      for (let i = sections.length - 1; i >= 0; i--) {
        if (sections[i] && sections[i].offsetTop <= scrollY) {
          setActive(SERVICE_GROUPS[i].id);
          break;
        }
      }
    };
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  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="svc-layout">
          <aside className="svc-nav">
            {SERVICE_GROUPS.map(g => (
              <a key={g.id}
                 className={active === g.id ? 'active' : ''}
                 onClick={(e) => {
                   e.preventDefault();
                   const el = document.getElementById('svc-' + g.id);
                   if (el) window.scrollTo({ top: el.offsetTop - 120, behavior: 'smooth' });
                 }}>
                {g.title}
              </a>
            ))}
          </aside>

          <div>
            {SERVICE_GROUPS.map(g => (
              <section className="service-block" id={'svc-' + g.id} key={g.id}>
                <div className="service-block-head">
                  <div className="service-block-icon"><Icon name={g.icon} size={36}/></div>
                  <div>
                    <h2>{g.title}</h2>
                    <p className="service-block-intro">{g.intro}</p>
                  </div>
                </div>
                <div className="service-items">
                  {g.items.map((it, i) => (
                    <div className="service-item" key={i}>
                      <h4>{it.title}</h4>
                      <p>{it.body}</p>
                    </div>
                  ))}
                </div>
              </section>
            ))}
            <div style={{paddingTop: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>
        </div>
      </div>
    </main>
  );
};

// ============== SPECIALISTS PAGE ==============
const SpecialistsPage = ({ onBook }) => {
  const total = SPECIALISTS.reduce((acc, s) => acc + s.count, 0);
  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">
          В штате центра работают {total} специалистов разных направлений — врачи, педагоги, психологи, логопеды, дефектологи, инструкторы и социальные работники.
        </p>

        <div className="info-grid">
          <div className="info-card dark">
            <div className="info-card-label">Всего в штате</div>
            <div className="info-card-value">{total}</div>
            <div className="info-card-sub">человек, объединённых одной миссией</div>
          </div>
          <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>

        <div className="table-wrap" style={{marginTop:48}}>
          <div className="t-row t-head">
            <div>№</div>
            <div>Категория</div>
            <div>Должность</div>
            <div style={{textAlign:'right'}}>Кол-во</div>
          </div>
          {SPECIALISTS.map((s, i) => (
            <div className="t-row" key={i}>
              <div className="t-num">{String(i+1).padStart(2, '0')}</div>
              <div className="t-cat">{s.cat}</div>
              <div className="t-role">{s.role}</div>
              <div className="t-count">{s.count}</div>
            </div>
          ))}
        </div>

        <div style={{marginTop:48, display:'flex', gap:12, flexWrap:'wrap'}}>
          <button className="btn btn-primary" onClick={onBook}>
            Записаться к специалисту <span className="btn-icon"><Icon name="arrow"/></span>
          </button>
        </div>
      </div>
    </main>
  );
};

// ============== PRICES PAGE ==============
const PricesPage = ({ 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="free-hero">
        <div className="free-hero-bg"></div>
        <div className="free-hero-content">
          <div className="eyebrow" style={{color:'rgba(255,255,255,0.7)'}}>Условия оказания услуг</div>
          <h2 className="display" style={{fontSize:'clamp(64px, 12vw, 168px)', lineHeight:0.9, marginTop:24, fontWeight:500}}>
            <span style={{fontStyle:'italic', color:'var(--accent)'}}>Бесплатно</span>
          </h2>
          <p style={{fontSize:18, lineHeight:1.5, color:'rgba(255,255,255,0.85)', maxWidth:560, marginTop:24}}>
            Для семей с оформленным ИППСУ — на основании Федерального закона от 28.12.2013 № 442-ФЗ «Об основах социального обслуживания граждан в Российской Федерации».
          </p>
          <div style={{display:'flex', gap:12, flexWrap:'wrap', marginTop:36}}>
            <button onClick={onBook} className="btn btn-accent">
              Записаться онлайн <span className="btn-icon"><Icon name="arrow"/></span>
            </button>
            <a className="btn btn-ghost" href="#/ippsu" onClick={(e) => { e.preventDefault(); goTo('ippsu'); }} style={{background:'rgba(255,255,255,0.08)', borderColor:'rgba(255,255,255,0.2)', color:'white'}}>
              Как оформить ИППСУ
            </a>
          </div>
        </div>
      </div>

      <div className="section-head" style={{marginTop:80}}>
        <div>
          <div className="eyebrow">Как начать</div>
          <h2 className="display h-md">Три шага<br/>к бесплатным услугам</h2>
        </div>
        <p>Если ИППСУ уже оформлен — переходите сразу к третьему шагу.</p>
      </div>
      <div className="steps-grid">
        <div className="step-item">
          <div className="step-num">01</div>
          <h4>Получите консультацию</h4>
          <p>Позвоните или оставьте заявку — расскажем, какие документы нужны и как пройти процедуру.</p>
        </div>
        <div className="step-item">
          <div className="step-num">02</div>
          <h4>Оформите ИППСУ</h4>
          <p>Через МСЭ (если у ребёнка инвалидность) или через ПМПК. Документ выдаётся в управлении социальной политики за 10 дней.</p>
        </div>
        <div className="step-item">
          <div className="step-num">03</div>
          <h4>Получайте услуги</h4>
          <p>Запишитесь в центр или вызовите специалистов на дом — все программы для вашего ребёнка бесплатны.</p>
        </div>
      </div>

      <div style={{marginTop:60, display:'flex', gap:12, flexWrap:'wrap', alignItems:'center'}}>
        <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>
);

// ============== IPPSU PAGE ==============
const IppsuPage = ({ onBook }) => {
  const [tab, setTab] = React.useState(0);
  const w = IPPSU_WAYS[tab];
  return (
    <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="ippsu" style={{marginTop:20, marginBottom:60}}>
          <div className="ippsu-bg"></div>
          <div className="ippsu-grid">
            <div>
              <div className="eyebrow ippsu-eyebrow">Как получить</div>
              <h2 style={{marginTop:16, fontFamily:'var(--font-display)', fontWeight:400, fontSize:'clamp(36px,5vw,56px)', letterSpacing:'-0.04em', lineHeight:1}}>
                Два <span className="accent-word">способа оформления</span>
              </h2>
              <p style={{marginTop:24, color:'rgba(245,241,234,0.75)', fontSize:17, maxWidth:380}}>
                Выберите подходящий способ в зависимости от ситуации с ребёнком — оформлена ли инвалидность или нужна социальная поддержка через ПМПК.
              </p>
              <button onClick={onBook} className="btn btn-accent" style={{marginTop:32}}>
                Получить консультацию <span className="btn-icon"><Icon name="arrow"/></span>
              </button>
            </div>
            <div className="ippsu-steps">
              <div className="ippsu-tabs">
                {IPPSU_WAYS.map((w, i) => (
                  <button key={w.id} className={`ippsu-tab ${tab===i?'active':''}`} onClick={() => setTab(i)}>
                    {w.title}
                  </button>
                ))}
              </div>
              <div style={{color:'rgba(245,241,234,0.6)', fontSize:13, marginBottom:8, fontFamily:'var(--font-mono)', letterSpacing:'0.1em', textTransform:'uppercase'}}>
                {w.sub}
              </div>
              {w.steps.map((s, i) => (
                <div className="ippsu-step" key={i}>
                  <div className="ippsu-step-num">{i+1}</div>
                  <p><strong>{s.strong}</strong> {s.text}</p>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="section-head">
          <div>
            <div className="eyebrow">Документы</div>
            <h2 className="display h-md">Скачать формы и образцы</h2>
          </div>
        </div>
        <div className="doc-list">
          {PARENT_DOCS.slice(0, 5).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>
    </main>
  );
};

// ============== FORMS PAGE ==============
const FormsPage = ({ 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">
        Мы оказываем социальные услуги в двух форматах. Для семей с оформленным ИППСУ услуги предоставляются бесплатно — по Федеральному закону № 442-ФЗ.
      </p>

      <div className="forms-grid" style={{marginBottom:60}}>
        <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>Полустационарная<br/>форма</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:32, fontFamily:'var(--font-display)', fontWeight:500, color:'var(--accent)'}}>{FORMS[0].free}</div>
              <div style={{fontSize:13, opacity:0.7}}>из {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>Социальное<br/>обслуживание на дому</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:32, fontFamily:'var(--font-display)', fontWeight:500, color:'var(--accent)'}}>{FORMS[1].free}</div>
              <div style={{fontSize:13, color:'var(--ink-muted)'}}>из {FORMS[1].capacity}</div>
            </div>
            <div className="form-card-num">02</div>
          </div>
        </div>
      </div>

      <div className="section-head">
        <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 style={{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={PARENT_DOCS[5].url}>
          Тарифы и услуги (PDF)
        </a>
      </div>
    </div>
  </main>
);

window.ServicesPage = ServicesPage;
window.SpecialistsPage = SpecialistsPage;
window.PricesPage = PricesPage;
window.IppsuPage = IppsuPage;
window.FormsPage = FormsPage;