// 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;

// ============== HOME PAGE ==============
const HomePage = ({ onBook }) => (
  <>
    <section className="hero" id="top">
      <div className="hero-orbit">
        <div className="glyph glyph-1"></div>
        <div className="glyph glyph-2"></div>
        <div className="glyph glyph-3"></div>
      </div>
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="eyebrow" style={{marginBottom:32}}>АНО «Потенциал» · Екатеринбург</div>
            <h1>
              Комплексная<br/>
              реадаптация<br/>
              <span className="accent-word">детей с ОВЗ</span>
            </h1>
          </div>
          <div className="hero-meta">
            <p>Программы, направленные на восстановление утраченных или ослабленных реакций человека — содействующие приспособлению к условиям труда и быта.</p>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={onBook}>
                Записаться на приём
                <span className="btn-icon"><Icon name="arrow"/></span>
              </button>
              <a className="btn btn-ghost" href="#/services" onClick={(e) => { e.preventDefault(); goTo('services'); }}>
                Программы и услуги
              </a>
            </div>
          </div>
        </div>

        <div className="hero-stats">
          <div className="stat">
            <div className="stat-num">11</div>
            <div className="stat-label">Направлений работы</div>
          </div>
          <div className="stat">
            <div className="stat-num">46</div>
            <div className="stat-label">Специалистов в штате</div>
          </div>
          <div className="stat">
            <div className="stat-num">300</div>
            <div className="stat-label">Мест по двум формам обслуживания</div>
          </div>
          <div className="stat">
            <div className="stat-num">2022</div>
            <div className="stat-label">Год основания организации</div>
          </div>
        </div>
      </div>
    </section>

    <div className="ticker">
      <div className="ticker-track">
        {['Диагностика','Нейрокоррекция','Логопед','Дефектолог','Массаж','Физиотерапия','АФК','Психология','Юрист','АВА','МИМ-терапия','Сенсорная интеграция','Песочная терапия','Подготовка к школе'].concat(['Диагностика','Нейрокоррекция','Логопед','Дефектолог','Массаж','Физиотерапия','АФК','Психология','Юрист','АВА','МИМ-терапия','Сенсорная интеграция','Песочная терапия','Подготовка к школе']).map((t, i) => <span key={i} className="ticker-item">{t}</span>)}
      </div>
    </div>

    {/* SERVICES OVERVIEW */}
    <section className="services" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Услуги и программы</div>
            <h2 className="display h-lg">Одиннадцать направлений<br/>работы со специалистами</h2>
          </div>
          <p>Каждая программа разрабатывается под конкретного ребёнка с учётом результатов диагностики и рекомендаций специалистов центра.</p>
        </div>
        <div className="services-grid">
          {SERVICES_TOP.map(s => (
            <div className="service" key={s.num} onClick={() => goTo('services')}>
              <div className="service-num">[ {s.num} ]</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <div className="service-arrow"><Icon name="arrowUp" size={14}/></div>
              <div className="service-icon"><Icon name={s.icon} size={28}/></div>
            </div>
          ))}
        </div>
        <div style={{marginTop:40, display:'flex', justifyContent:'center'}}>
          <a className="btn btn-ghost" href="#/services" onClick={(e) => { e.preventDefault(); goTo('services'); }}>
            Подробнее обо всех услугах <span className="btn-icon"><Icon name="arrow"/></span>
          </a>
        </div>
      </div>
    </section>

    {/* FORMS */}
    <section id="about">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Формы обслуживания</div>
            <h2 className="display h-lg">Выбирайте, как удобно<br/>заниматься с ребёнком</h2>
          </div>
          <p>Мы работаем в двух форматах — приём в центре и выезд специалистов к вам домой. Для семей с ИППСУ услуги предоставляются бесплатно.</p>
        </div>
        <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>Полустационарная<br/>форма</h3>
            <p>Занятия проходят в центре. Команда специалистов, специально оборудованная среда — сенсорная комната, зал для групповых занятий, кабинеты.</p>
            <div className="form-card-foot">
              <a href="#/forms" onClick={(e) => { e.preventDefault(); goTo('forms'); }} style={{display:'inline-flex', gap:8, alignItems:'center', color:'inherit'}}>
                Подробнее <Icon name="arrowUp" size={14}/>
              </a>
              <div className="form-card-num">150 мест</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>Специалисты приезжают к вам. Удобно, когда поездки в центр сложны или ребёнок чувствует себя комфортнее в привычной обстановке.</p>
            <div className="form-card-foot">
              <a href="#/forms" onClick={(e) => { e.preventDefault(); goTo('forms'); }} style={{display:'inline-flex', gap:8, alignItems:'center'}}>
                Подробнее <Icon name="arrowUp" size={14}/>
              </a>
              <div className="form-card-num">35 свободных</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* IPPSU */}
    <IPPSUBlock onBook={onBook}/>

    {/* HELP */}
    <section id="help">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Способы помочь</div>
            <h2 className="display h-lg">Поддержать работу<br/>центра можно по-разному</h2>
          </div>
          <p>Центр открыт для партнёрства с коммерческими организациями, НКО, благотворительными фондами и неравнодушными людьми.</p>
        </div>
        <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>
    </section>

    {/* FAQ */}
    <FAQBlock/>

    {/* QR Independent Assessment */}
    <section className="qr-section">
      <div className="container">
        <div className="qr-card">
          <div className="qr-content">
            <div className="eyebrow">Независимая оценка качества</div>
            <h2 className="display h-md" style={{marginTop:16, marginBottom:16}}>
              Оцените условия<br/>предоставления услуг
            </h2>
            <p style={{fontSize:17, color:'var(--ink-soft)', lineHeight:1.5, maxWidth:480}}>
              Чтобы оценить условия предоставления услуг используйте QR-код или перейдите по ссылке ниже
            </p>
            <a href="https://bus.gov.ru/qrcode/rate/786740" target="_blank" rel="noopener" className="qr-link">
              bus.gov.ru/qrcode/rate/786740
              <Icon name="arrowUp" size={16}/>
            </a>
            <p style={{fontSize:13, color:'var(--ink-muted)', marginTop:16, maxWidth:480, lineHeight:1.5}}>
              Официальный сайт государственных и муниципальных учреждений — bus.gov.ru
            </p>
          </div>
          <a href="https://bus.gov.ru/qrcode/rate/786740" target="_blank" rel="noopener" className="qr-image-wrap">
            <img src="qr.png" alt="QR-код для оценки условий предоставления услуг АНО Потенциал на сайте bus.gov.ru" className="qr-image"/>
          </a>
        </div>
      </div>
    </section>

    {/* CONTACT */}
    <ContactBlock onBook={onBook}/>
  </>
);

const IPPSUBlock = ({ onBook }) => {
  const [tab, setTab] = React.useState(0);
  const w = IPPSU_WAYS[tab];
  return (
    <section id="ippsu" style={{paddingTop:60}}>
      <div className="container">
        <div className="ippsu">
          <div className="ippsu-bg"></div>
          <div className="ippsu-grid">
            <div>
              <div className="eyebrow ippsu-eyebrow">Документ</div>
              <h2>
                Как получить <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>
              {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>
    </section>
  );
};

const FAQBlock = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Вопрос — ответ</div>
            <h2 className="display h-lg">Часто задаваемые<br/>вопросы</h2>
          </div>
          <p>Не нашли ответ? Напишите нам в мессенджер или оставьте заявку — мы перезвоним.</p>
        </div>
        <div className="faq-list">
          {FAQS.map((it, i) => (
            <div className={`faq-item ${open===i?'open':''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open===i ? -1 : i)}>
                {it.q}
                <span className="faq-toggle"><Icon name="plus" size={16}/></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">
                  {it.answer === 'ippsu' ? <IPPSUAnswer/> : it.a}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const IPPSUAnswer = () => (
  <>
    Существует два способа оформить индивидуальную программу предоставления социальных услуг.
    {IPPSU_WAYS.map(w => (
      <React.Fragment key={w.id}>
        <strong>{w.title}</strong>
        <ol>{w.steps.map((s, i) => <li key={i}><b>{s.strong}</b> {s.text}</li>)}</ol>
      </React.Fragment>
    ))}
  </>
);

const ContactBlock = ({ onBook }) => (
  <section className="contact" id="contact">
    <div className="container">
      <div className="contact-card">
        <div className="ippsu-bg" style={{opacity:0.4}}></div>
        <div className="contact-grid">
          <div>
            <div className="eyebrow">Связаться с нами</div>
            <h2 style={{marginTop:20}}>
              Запишитесь<br/>на <span className="accent-word">первичный приём</span>
            </h2>
            <p style={{marginTop:24, fontSize:18, color:'var(--ink-soft)', maxWidth:440}}>
              Укажите свои данные, и специалист свяжется с вами в ближайшее время. Мы поможем подобрать программу и форму обслуживания.
            </p>
            <button onClick={onBook} className="btn btn-primary" style={{marginTop:32}}>
              Открыть форму записи
              <span className="btn-icon"><Icon name="arrow"/></span>
            </button>
          </div>
          <div className="contact-meta">
            <div className="contact-row">
              <div className="contact-row-label">Телефон</div>
              <a href={'tel:' + ORG.phoneRaw} className="contact-row-value">{ORG.phone}</a>
            </div>
            <div className="contact-row">
              <div className="contact-row-label">Email</div>
              <a href={'mailto:' + ORG.email} className="contact-row-value small">{ORG.email}</a>
            </div>
            <div className="contact-row">
              <div className="contact-row-label">Адрес</div>
              <div className="contact-row-value small">{ORG.address}</div>
            </div>
            <div className="contact-row">
              <div className="contact-row-label">Соцсети и мессенджеры</div>
              <div className="contact-socials" style={{marginTop:8}}>
                <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>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

window.HomePage = HomePage;
window.IPPSUBlock = IPPSUBlock;
window.FAQBlock = FAQBlock;
window.ContactBlock = ContactBlock;