// 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, HomePage, ServicesPage, SpecialistsPage, ParentsPage, FormsPage, PricesPage, IppsuPage, HelpPage, DonatePage, ContactsPage, LegalPage, PhotoPage, PrivacyPage, FAQPage, SvedeniyaHub } = window;

const { useState, useEffect } = React;

// ============== A11Y (Версия для слабовидящих) ==============
const A11yPanel = () => {
  const safeGet = (k, def) => { try { return localStorage.getItem(k) ?? def; } catch (e) { return def; } };
  const safeSet = (k, v) => { try { localStorage.setItem(k, v); } catch (e) {} };
  const [enabled, setEnabled] = useState(() => safeGet('a11y', 'off') === 'on');
  const [size, setSize] = useState(() => safeGet('a11y-size', 'normal'));
  const [scheme, setScheme] = useState(() => safeGet('a11y-scheme', 'bw'));

  useEffect(() => {
    const html = document.documentElement;
    html.classList.toggle('a11y-on', enabled);
    ['a11y-size-lg','a11y-size-xl'].forEach(c => html.classList.remove(c));
    ['a11y-scheme-bw','a11y-scheme-by','a11y-scheme-bb'].forEach(c => html.classList.remove(c));
    if (enabled) {
      if (size === 'lg') html.classList.add('a11y-size-lg');
      if (size === 'xl') html.classList.add('a11y-size-xl');
      html.classList.add('a11y-scheme-' + scheme);
    }
    safeSet('a11y', enabled ? 'on' : 'off');
    safeSet('a11y-size', size);
    safeSet('a11y-scheme', scheme);
  }, [enabled, size, scheme]);

  // Listen for "open a11y" events from header button
  useEffect(() => {
    const handler = () => setEnabled(true);
    window.addEventListener('open-a11y', handler);
    return () => window.removeEventListener('open-a11y', handler);
  }, []);

  if (!enabled) return null;

  return (
    <div className="a11y-panel">
      <div className="a11y-panel-group">
        <span className="a11y-panel-label">Размер шрифта:</span>
        <button className={size==='normal'?'on':''} onClick={() => setSize('normal')}>А</button>
        <button className={size==='lg'?'on':''} onClick={() => setSize('lg')}>А+</button>
        <button className={size==='xl'?'on':''} onClick={() => setSize('xl')}>А++</button>
      </div>
      <div className="a11y-panel-group">
        <span className="a11y-panel-label">Цветовая схема:</span>
        <button className={scheme==='bw'?'on':''} onClick={() => setScheme('bw')}>Ч/Б</button>
        <button className={scheme==='by'?'on':''} onClick={() => setScheme('by')} style={{background:scheme==='by'?'#000':'#000', color:'#ffeb3b', borderColor:'#000'}}>Ч/Ж</button>
        <button className={scheme==='bb'?'on':''} onClick={() => setScheme('bb')} style={{background:scheme==='bb'?'#003366':'#c5e3f6', color:'#003366', borderColor:'#003366'}}>С/Г</button>
      </div>
      <button className="a11y-panel-close" onClick={() => setEnabled(false)}>Обычная версия</button>
    </div>
  );
};

// ============== ROUTER ==============
const useRoute = () => {
  const getRoute = () => {
    const hash = window.location.hash.replace('#/', '').replace('#', '');
    return hash || 'home';
  };
  const [route, setRoute] = useState(getRoute());
  useEffect(() => {
    const handle = () => { setRoute(getRoute()); window.scrollTo(0, 0); };
    window.addEventListener('hashchange', handle);
    return () => window.removeEventListener('hashchange', handle);
  }, []);
  return route;
};

// ============== HEADER ==============
const Header = ({ onBook, onMenuOpen, current }) => (
  <header className="header">
    <div className="header-inner">
      <a href="#/home" className="logo" onClick={(e) => { e.preventDefault(); goTo('home'); }}>
        <span className="logo-mark">П</span>
        <span>Потенциал</span>
      </a>
      <nav className="nav">
        {NAV_PRIMARY.map(n => (
          <a key={n.route}
             href={'#/' + n.route}
             onClick={(e) => { e.preventDefault(); goTo(n.route); }}
             style={current === n.route ? { background: 'rgba(23,70,224,0.1)', color: 'var(--brand)' } : {}}>
            {n.label}
          </a>
        ))}
        <button
          className="a11y-btn"
          onClick={() => window.dispatchEvent(new Event('open-a11y'))}
          title="Версия для слабовидящих">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
        </button>
      </nav>
      <div className="header-mobile">
        <button
          className="a11y-btn"
          onClick={() => window.dispatchEvent(new Event('open-a11y'))}
          title="Версия для слабовидящих"
          style={{padding:'10px 12px'}}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
        </button>
        <a href={'tel:' + ORG.phoneRaw} className="nav-cta" style={{padding:'10px 14px', display:'inline-flex', alignItems:'center', gap:6, fontSize:13}}>
          <Icon name="phone" size={14}/>
        </a>
        <button className="menu-btn" onClick={onMenuOpen} aria-label="Меню">
          <Icon name="menu"/>
        </button>
      </div>
      <a onClick={(e) => { e.preventDefault(); onBook(); }} href="#" className="nav-cta" style={{padding:'10px 18px', fontSize:14, fontWeight:500}}>
        Записаться
      </a>
    </div>
  </header>
);

// ============== MOBILE MENU ==============
const MobileMenu = ({ open, onClose, onBook }) => (
  <div className={`mobile-menu ${open ? 'open' : ''}`}>
    <button className="mobile-menu-close" onClick={onClose}><Icon name="close"/></button>
    {NAV_ALL.slice(0, 10).map(n => (
      <a key={n.route} href={'#/' + n.route} onClick={(e) => { e.preventDefault(); goTo(n.route); onClose(); }}>{n.label}</a>
    ))}
    <a href="#" onClick={(e) => { e.preventDefault(); onClose(); onBook(); }}>Записаться на приём</a>
    <a href={'tel:' + ORG.phoneRaw} onClick={onClose}>{ORG.phone}</a>
  </div>
);

// ============== FOOTER ==============
const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="logo">
            <span className="logo-mark">П</span>
            <span>Потенциал</span>
          </div>
          <p className="footer-tag">АНО «Центр социальной адаптации и реабилитации «Потенциал» — комплексная реадаптация детей с ограниченными возможностями здоровья. Екатеринбург.</p>
          <div className="contact-socials">
            <a href={ORG.whatsapp} className="social-chip" style={{background:'rgba(255,255,255,0.06)', borderColor:'rgba(255,255,255,0.12)', color:'white'}}>WhatsApp</a>
            <a href={ORG.vk} className="social-chip" style={{background:'rgba(255,255,255,0.06)', borderColor:'rgba(255,255,255,0.12)', color:'white'}}>VK</a>
            <a href={ORG.telegram} className="social-chip" style={{background:'rgba(255,255,255,0.06)', borderColor:'rgba(255,255,255,0.12)', color:'white'}}>TG</a>
          </div>
        </div>
        <div className="footer-col">
          <h4>О нас</h4>
          <ul>
            <li><a href="#/specialists" onClick={(e) => { e.preventDefault(); goTo('specialists'); }}>Специалисты</a></li>
            <li><a href="#/parents" onClick={(e) => { e.preventDefault(); goTo('parents'); }}>Для родителей</a></li>
            <li><a href="#/forms" onClick={(e) => { e.preventDefault(); goTo('forms'); }}>Формы обслуживания</a></li>
            <li><a href="#/photo" onClick={(e) => { e.preventDefault(); goTo('photo'); }}>Фото и видео</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Услуги</h4>
          <ul>
            <li><a href="#/services" onClick={(e) => { e.preventDefault(); goTo('services'); }}>Услуги и программы</a></li>
            <li><a href="#/prices" onClick={(e) => { e.preventDefault(); goTo('prices'); }}>Стоимость</a></li>
            <li><a href="#/ippsu" onClick={(e) => { e.preventDefault(); goTo('ippsu'); }}>ИППСУ</a></li>
            <li><a href="#/help" onClick={(e) => { e.preventDefault(); goTo('help'); }}>Способы помочь</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Сведения и документы</h4>
          <ul>
            <li><a href="#/svedeniya" onClick={(e) => { e.preventDefault(); goTo('svedeniya'); }}>Сведения об организации</a></li>
            <li><a href="#/legal" onClick={(e) => { e.preventDefault(); goTo('legal'); }}>Нормативная информация</a></li>
            <li><a href="docs/ustav.pdf" target="_blank">Устав</a></li>
            <li><a href="docs/litsenziya-vypiska.pdf" target="_blank">Лицензия</a></li>
            <li><a href="#/privacy" onClick={(e) => { e.preventDefault(); goTo('privacy'); }}>Политика конфиденциальности</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-ministries">
        <div className="footer-ministries-label">Официальные ресурсы</div>
        <div className="footer-ministries-row">
          {MINISTRIES.map(m => (
            <a key={m.url} href={m.url} target="_blank" rel="noopener">{m.name}</a>
          ))}
        </div>
      </div>
      <div className="giant-logo">потенциал</div>
      <div className="footer-bot">
        <div>© 2022–{new Date().getFullYear()} АНО «Потенциал». Все права защищены.</div>
        <div>{ORG.address}</div>
      </div>
    </div>
  </footer>
);

// ============== MODAL ==============
const Modal = ({ open, onClose }) => {
  const [sent, setSent] = useState(false);
  useEffect(() => {
    if (open) setSent(false);
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <div className={`modal-backdrop ${open ? 'open' : ''}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}><Icon name="close" size={16}/></button>
        {!sent ? (
          <>
            <h3>Онлайн запись на приём</h3>
            <p className="modal-sub">Укажите свои данные — специалист свяжется с вами в ближайшее время.</p>
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="field">
                <label>Имя и фамилия</label>
                <input required type="text" placeholder="Как к вам обращаться?"/>
              </div>
              <div className="field">
                <label>Телефон</label>
                <input required type="tel" placeholder="+7 (___) ___-__-__"/>
              </div>
              <div className="field">
                <label>Интересующая услуга</label>
                <select defaultValue="">
                  <option value="" disabled>Выберите программу</option>
                  {SERVICES_TOP.map(s => <option key={s.num} value={s.title}>{s.title}</option>)}
                  <option value="other">Другое / нужна консультация</option>
                </select>
              </div>
              <div className="field">
                <label>Комментарий</label>
                <textarea rows="3" placeholder="Возраст ребёнка, особенности, удобное время для звонка..."></textarea>
              </div>
              <label className="consent">
                <input type="checkbox" required defaultChecked/>
                <span>Я согласен с <a href="#/privacy" onClick={(e) => { e.preventDefault(); onClose(); goTo('privacy'); }}>политикой конфиденциальности</a> и даю согласие на обработку персональных данных</span>
              </label>
              <button type="submit" className="btn btn-accent" style={{width:'100%', justifyContent:'center'}}>
                Отправить заявку
                <span className="btn-icon"><Icon name="arrow"/></span>
              </button>
            </form>
          </>
        ) : (
          <>
            <h3>Заявка отправлена</h3>
            <p className="modal-sub">Спасибо. Специалист свяжется с вами в ближайшее время. Если вопрос срочный — позвоните нам:</p>
            <a href={'tel:' + ORG.phoneRaw} className="btn btn-primary" style={{width:'100%', justifyContent:'center', marginTop:8}}>
              {ORG.phone}
              <span className="btn-icon"><Icon name="phone" size={16}/></span>
            </a>
          </>
        )}
      </div>
    </div>
  );
};

// ============== FLOAT CTA ==============
const FloatCTA = () => (
  <div className="float-cta">
    <a href={ORG.whatsapp} className="float-btn whatsapp" title="Написать в WhatsApp">
      <Icon name="whatsapp" size={24}/>
    </a>
    <a href={'tel:' + ORG.phoneRaw} className="float-btn" title="Позвонить">
      <Icon name="phone" size={20}/>
    </a>
  </div>
);

// ============== APP ==============
const App = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const route = useRoute();

  const onBook = () => { setModalOpen(true); setMenuOpen(false); };

  const baseRoute = route.split('/')[0];

  let page;
  switch (baseRoute) {
    case 'services':    page = <ServicesPage onBook={onBook}/>; break;
    case 'specialists': page = <SpecialistsPage onBook={onBook}/>; break;
    case 'parents':     page = <ParentsPage onBook={onBook}/>; break;
    case 'forms':       page = <FormsPage onBook={onBook}/>; break;
    case 'prices':      page = <PricesPage onBook={onBook}/>; break;
    case 'ippsu':       page = <IppsuPage onBook={onBook}/>; break;
    case 'help':        page = <HelpPage onBook={onBook}/>; break;
    case 'donate':      page = <DonatePage/>; break;
    case 'contacts':    page = <ContactsPage onBook={onBook}/>; break;
    case 'legal':       page = <LegalPage/>; break;
    case 'photo':       page = <PhotoPage/>; break;
    case 'privacy':     page = <PrivacyPage/>; break;
    case 'faq':         page = <FAQPage/>; break;
    case 'svedeniya':   page = <SvedeniyaHub/>; break;
    default:            page = <HomePage onBook={onBook}/>;
  }

  return (
    <>
      <A11yPanel/>
      <div className="a11y-zoom-wrap">
        <Header onBook={onBook} onMenuOpen={() => setMenuOpen(true)} current={baseRoute}/>
        <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} onBook={onBook}/>
        <div key={route}>{page}</div>
        <Footer/>
        <Modal open={modalOpen} onClose={() => setModalOpen(false)}/>
        <FloatCTA/>
      </div>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);