/* ===== Public screens part 2 ===== */
const D2 = window.DATA;
function lessonTitle(lesson){ return typeof lesson==='string' ? lesson : (lesson?.t || 'Урок'); }
const bundledOperatorCourseIds = [
  'aeronavigation-bpla-part-1',
  'aeronavigation-bpla-part-2',
  'aviation-meteorology-part-1',
  'aviation-meteorology-part-2',
  'kyrgyz-republic-legal-foundations-part-1',
  'kyrgyz-republic-legal-foundations-part-2',
  'uav-fpv-systems-part-1',
  'uav-fpv-systems-part-2',
  'first-aid-online',
];

function PublicArticleSkeleton({ showCover=true, showSideCards=2 }){
  return (
    <div>
      <div className="subhero article-hero public-skeleton-shell">
        <div className="wrap stack" style={{gap:14}}>
          <div className="public-skeleton public-skeleton--back"></div>
          <div className="row gap8 wrapf">
            <div className="public-skeleton public-skeleton--badge"></div>
            <div className="public-skeleton public-skeleton--meta"></div>
          </div>
          <div className="public-skeleton public-skeleton--title"></div>
          <div className="public-skeleton public-skeleton--title public-skeleton--title-sm"></div>
          <div className="public-skeleton public-skeleton--meta public-skeleton--meta-wide"></div>
        </div>
      </div>
      <div className="wrap section" style={{paddingTop:28}}>
        {showCover && <div className="card article-cover public-skeleton public-skeleton--cover"></div>}
        <div className="article-layout">
          <article className="card article-main public-skeleton-card">
            <div className="stack" style={{gap:14}}>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-xl"></div>
              <div className="public-skeleton public-skeleton--line"></div>
              <div className="public-skeleton public-skeleton--line"></div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-xl"></div>
              <div className="public-skeleton public-skeleton--line"></div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
            </div>
          </article>
          <aside className="article-side stack" style={{gap:18}}>
            {Array.from({length:showSideCards}).map((_, index)=>(
              <div key={index} className="card article-related public-skeleton-card">
                <div className="stack" style={{gap:14}}>
                  <div className="public-skeleton public-skeleton--line public-skeleton--line-sm"></div>
                  <div className="public-skeleton public-skeleton--line"></div>
                  <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
                  <div className="public-skeleton public-skeleton--line public-skeleton--line-sm"></div>
                  <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
                </div>
              </div>
            ))}
          </aside>
        </div>
      </div>
    </div>
  );
}

function PublicLandingSkeleton(){
  return (
    <div>
      <section className="public-skeleton-hero">
        <div className="wrap public-skeleton-hero__in">
          <div className="stack" style={{gap:16,flex:1}}>
            <div className="public-skeleton public-skeleton--badge"></div>
            <div className="public-skeleton public-skeleton--hero-title"></div>
            <div className="public-skeleton public-skeleton--hero-title public-skeleton--hero-title-sm"></div>
            <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
            <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
            <div className="row gap12 wrapf" style={{marginTop:6}}>
              <div className="public-skeleton public-skeleton--cta"></div>
              <div className="public-skeleton public-skeleton--cta public-skeleton--cta-ghost"></div>
            </div>
          </div>
          <div className="public-skeleton public-skeleton--hero-media"></div>
        </div>
      </section>
      <section className="section">
        <div className="wrap stack" style={{gap:28}}>
          <div className="stack center" style={{alignItems:'center',gap:14}}>
            <div className="public-skeleton public-skeleton--eyebrow"></div>
            <div className="public-skeleton public-skeleton--section-title"></div>
          </div>
          <div className="grid programs-grid">
            {Array.from({length:2}).map((_, index)=>(
              <div key={index} className="card public-skeleton-card public-skeleton-card--program">
                <div className="public-skeleton public-skeleton--icon"></div>
                <div className="stack" style={{gap:10,flex:1}}>
                  <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
                  <div className="public-skeleton public-skeleton--line"></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section" style={{background:'var(--bg-2)'}}>
        <div className="wrap stack" style={{gap:28}}>
          <div className="spread wrapf" style={{gap:16}}>
            <div className="stack" style={{gap:12}}>
              <div className="public-skeleton public-skeleton--eyebrow"></div>
              <div className="public-skeleton public-skeleton--section-title public-skeleton--section-title-md"></div>
            </div>
            <div className="public-skeleton public-skeleton--cta public-skeleton--cta-ghost"></div>
          </div>
          <div className="grid g3">
            {Array.from({length:3}).map((_, index)=>(
              <div key={index} className="card public-skeleton-card public-skeleton-card--media">
                <div className="public-skeleton public-skeleton--media"></div>
                <div className="stack" style={{gap:12,padding:18}}>
                  <div className="public-skeleton public-skeleton--badge"></div>
                  <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="wrap" style={{paddingBottom:92}}>
        <div className="public-skeleton public-skeleton--cta-panel"></div>
      </section>
    </div>
  );
}

function PublicCatalogSkeleton({ cards=6, showFilters=true, showSearch=true, columnsClass='g3', showLead=false, leadSide=false }){
  return (
    <div>
      <div className="subhero article-hero public-skeleton-shell">
        <div className="wrap stack" style={{gap:14}}>
          <div className="public-skeleton public-skeleton--eyebrow"></div>
          <div className="public-skeleton public-skeleton--title"></div>
          <div className="public-skeleton public-skeleton--title public-skeleton--title-sm"></div>
          <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
        </div>
      </div>
      <section className="wrap" style={{padding:'24px 28px 0'}}>
        <div className="public-skeleton public-skeleton--banner"></div>
      </section>
      <div className="wrap" style={{paddingBottom:92}}>
        {(showFilters || showSearch) && (
          <div className="card public-skeleton-toolbar">
            {showFilters && (
              <div className="row gap8 wrapf" style={{flex:1}}>
                {Array.from({length:showLead ? 5 : 6}).map((_, index)=><div key={index} className="public-skeleton public-skeleton--chip"></div>)}
              </div>
            )}
            {showSearch && <div className="public-skeleton public-skeleton--search"></div>}
          </div>
        )}
        {showLead && (
          <div className={`card public-skeleton-card ${leadSide ? 'public-skeleton-card--lead-side' : 'public-skeleton-card--lead'}`} style={{marginTop:28}}>
            <div className="public-skeleton public-skeleton--lead-media"></div>
            <div className="stack" style={{gap:12,padding:28,flex:1}}>
              <div className="row gap8 wrapf">
                <div className="public-skeleton public-skeleton--badge"></div>
                <div className="public-skeleton public-skeleton--meta"></div>
              </div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-xl"></div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
              <div className="public-skeleton public-skeleton--line"></div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
            </div>
          </div>
        )}
        <div className={`grid ${columnsClass}`} style={{marginTop:28}}>
          {Array.from({length:cards}).map((_, index)=>(
            <div key={index} className="card public-skeleton-card public-skeleton-card--grid">
              <div className="public-skeleton public-skeleton--card-media"></div>
              <div className="stack" style={{gap:12,padding:18}}>
                <div className="row gap8 wrapf">
                  <div className="public-skeleton public-skeleton--badge"></div>
                  <div className="public-skeleton public-skeleton--meta"></div>
                </div>
                <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
                <div className="public-skeleton public-skeleton--line"></div>
                <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function PublicCourseDetailSkeleton(){
  return (
    <div>
      <section className="public-skeleton-hero">
        <div className="wrap public-skeleton-hero__in">
          <div className="stack" style={{gap:16,flex:1}}>
            <div className="public-skeleton public-skeleton--back"></div>
            <div className="row gap8 wrapf">
              <div className="public-skeleton public-skeleton--badge"></div>
              <div className="public-skeleton public-skeleton--badge"></div>
            </div>
            <div className="public-skeleton public-skeleton--hero-title"></div>
            <div className="public-skeleton public-skeleton--hero-title public-skeleton--hero-title-sm"></div>
            <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
            <div className="row gap12 wrapf">
              <div className="public-skeleton public-skeleton--meta-card"></div>
              <div className="public-skeleton public-skeleton--meta-card"></div>
              <div className="public-skeleton public-skeleton--meta-card"></div>
            </div>
          </div>
          <div className="public-skeleton public-skeleton--hero-media"></div>
        </div>
      </section>
      <div className="wrap course-body">
        <div className="course-body__main stack" style={{gap:32}}>
          {Array.from({length:3}).map((_, index)=>(
            <section key={index} className="stack" style={{gap:18}}>
              <div className="public-skeleton public-skeleton--section-title public-skeleton--section-title-md"></div>
              <div className="grid g2" style={{gap:14}}>
                {Array.from({length:index===1 ? 3 : 4}).map((__, row)=>(
                  <div key={row} className="card public-skeleton-card" style={{padding:18}}>
                    <div className="stack" style={{gap:12}}>
                      <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
                      <div className="public-skeleton public-skeleton--line"></div>
                    </div>
                  </div>
                ))}
              </div>
            </section>
          ))}
        </div>
        <aside className="course-body__side">
          <div className="card public-skeleton-card" style={{padding:24}}>
            <div className="stack" style={{gap:14}}>
              <div className="public-skeleton public-skeleton--price"></div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
              <div className="public-skeleton public-skeleton--cta"></div>
              <div className="public-skeleton public-skeleton--cta public-skeleton--cta-ghost"></div>
              <div className="public-skeleton public-skeleton--line"></div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
              <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function PublicContactsSkeleton(){
  return (
    <div>
      <div className="subhero article-hero public-skeleton-shell">
        <div className="wrap stack" style={{gap:14}}>
          <div className="public-skeleton public-skeleton--eyebrow"></div>
          <div className="public-skeleton public-skeleton--title public-skeleton--title-sm"></div>
        </div>
      </div>
      <section className="wrap" style={{padding:'24px 28px 0'}}>
        <div className="public-skeleton public-skeleton--banner"></div>
      </section>
      <div className="wrap contacts-grid" style={{paddingBottom:92}}>
        <div className="stack" style={{gap:16}}>
          {Array.from({length:5}).map((_, index)=>(
            <div key={index} className="card public-skeleton-card" style={{padding:20}}>
              <div className="row gap16">
                <div className="public-skeleton public-skeleton--icon"></div>
                <div className="stack" style={{gap:10,flex:1}}>
                  <div className="public-skeleton public-skeleton--line public-skeleton--line-sm"></div>
                  <div className="public-skeleton public-skeleton--line"></div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="card public-skeleton-card" style={{overflow:'hidden'}}>
          <div className="public-skeleton public-skeleton--map"></div>
          <div className="stack" style={{gap:14,padding:24}}>
            <div className="public-skeleton public-skeleton--section-title public-skeleton--section-title-md"></div>
            <div className="public-skeleton public-skeleton--field"></div>
            <div className="public-skeleton public-skeleton--field"></div>
            <div className="public-skeleton public-skeleton--area"></div>
            <div className="public-skeleton public-skeleton--cta"></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function PublicRacesSkeleton(){
  return (
    <div>
      <div className="subhero article-hero public-skeleton-shell">
        <div className="wrap stack" style={{gap:14}}>
          <div className="public-skeleton public-skeleton--eyebrow"></div>
          <div className="public-skeleton public-skeleton--title public-skeleton--title-sm"></div>
          <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
          <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
          <div className="row gap12 wrapf">
            <div className="public-skeleton public-skeleton--cta"></div>
            <div className="public-skeleton public-skeleton--cta public-skeleton--cta-ghost"></div>
          </div>
          <div className="public-skeleton public-skeleton--banner"></div>
        </div>
      </div>
      <div className="wrap section">
        <div className="grid g3" style={{marginBottom:28}}>
          {Array.from({length:3}).map((_, index)=>(
            <div key={index} className="card public-skeleton-card" style={{padding:20}}>
              <div className="stack" style={{gap:12}}>
                <div className="public-skeleton public-skeleton--icon"></div>
                <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
                <div className="public-skeleton public-skeleton--line"></div>
                <div className="public-skeleton public-skeleton--cta public-skeleton--cta-sm"></div>
              </div>
            </div>
          ))}
        </div>
        <div className="public-skeleton public-skeleton--section-title public-skeleton--section-title-md" style={{marginBottom:28}}></div>
        <div className="stack" style={{gap:16}}>
          {Array.from({length:4}).map((_, index)=>(
            <div key={index} className="card public-skeleton-card public-skeleton-race-row">
              <div className="public-skeleton public-skeleton--race-date"></div>
              <div className="public-skeleton public-skeleton--race-thumb"></div>
              <div className="stack" style={{gap:10,flex:1}}>
                <div className="public-skeleton public-skeleton--line public-skeleton--line-lg"></div>
                <div className="public-skeleton public-skeleton--line public-skeleton--line-md"></div>
                <div className="public-skeleton public-skeleton--line"></div>
              </div>
              <div className="public-skeleton public-skeleton--badge"></div>
              <div className="public-skeleton public-skeleton--cta public-skeleton--cta-sm"></div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- COURSE HERO IMAGE CAROUSEL ---------------- */
function CourseHeroCarousel({ slides }){
  const [cur, setCur] = useState(0);
  const n = slides.length;
  useEffect(()=>{
    if(n < 2) return;
    const timer = setInterval(()=>setCur(i => (i + 1) % n), 7000);
    return ()=>clearInterval(timer);
  },[n]);
  const prev = () => setCur(i => (i - 1 + n) % n);
  const next = () => setCur(i => (i + 1) % n);
  return (
    <div style={{position:'absolute',inset:0,borderRadius:'inherit',overflow:'hidden'}}>
      {slides.map((src, i) => (
        <img key={i} src={src} alt="" style={{
          position:'absolute',inset:0,width:'100%',height:'100%',
          objectFit:'contain',borderRadius:'inherit',
          opacity: i===cur ? 1 : 0,
          transition:'opacity .4s ease'
        }}/>
      ))}
      {n > 1 && (
        <>
          <button className="hero-car-btn hero-car-btn--prev" onClick={prev} aria-label="Назад"><Icon name="chevLeft" size={18}/></button>
          <button className="hero-car-btn hero-car-btn--next" onClick={next} aria-label="Вперёд"><Icon name="chevRight" size={18}/></button>
          <div className="hero-car-dots">
            {slides.map((_, i) => (
              <button key={i} className={`hero-car-dot${i===cur?' is-on':''}`} onClick={()=>setCur(i)} aria-label={`Слайд ${i+1}`}/>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

/* ---------------- COURSE CAROUSEL ---------------- */
function CourseCarousel({ courses, go, enroll=[] }){
  const trackRef = useRef(null);
  function scroll(dir){
    if(trackRef.current) trackRef.current.scrollBy({left: dir * 340, behavior:'smooth'});
  }
  return (
    <div className="course-carousel">
      <button className="course-carousel__btn course-carousel__btn--prev" onClick={()=>scroll(-1)} aria-label="Назад">
        <Icon name="chevLeft" size={22}/>
      </button>
      <div className="course-carousel__track" ref={trackRef}>
        {courses.map(rc=>(<div key={rc.id} className="course-carousel__slide"><CourseCard c={rc} go={go} enrollment={enroll.find(item=>item.id===rc.id)}/></div>))}
      </div>
      <button className="course-carousel__btn course-carousel__btn--next" onClick={()=>scroll(1)} aria-label="Вперёд">
        <Icon name="chevRight" size={22}/>
      </button>
    </div>
  );
}

/* ---------------- EDUCATION CATALOG ---------------- */
function Education({ go, enroll=[] }){
  const cats = ['Актуальные','Оператор','Внешний пилот','Инженер','Аналитик данных','Продакшен','Сельхоз','Спорт'];
  const featuredIds = ['operator-bpla','engineer-pilot-junior'];
  const [active, setActive] = useState('Актуальные');
  const [q, setQ] = useState('');
  const baseCourse = D2.courses.find(c => c.id === 'certificate-operator');
  const baseEnrollment = baseCourse ? enroll.find(item=>item.id===baseCourse.id) : null;
  const list = D2.courses.filter(c =>
    c.active !== false &&
    c.cat !== 'База' &&
    (active==='Актуальные' ? featuredIds.includes(c.id) : c.cat===active) &&
    (c.title.toLowerCase().includes(q.toLowerCase()) || c.short.toLowerCase().includes(q.toLowerCase()))
  );
  return (
    <div>
      <div className="subhero education-hero">
        <div className="wrap stack" style={{gap:14}}>
          <span className="eyebrow">Образование</span>
          <h1 style={{fontSize:44,maxWidth:760}}>Каталог курсов Лаборатории БПЛА</h1>
          <p className="muted" style={{fontSize:18,maxWidth:620}}>Выберите программу под свою цель. Каждый курс — это онлайн-материалы, практика и аттестация с сертификатом.</p>
        </div>
      </div>
      <section className="wrap" style={{padding:'24px 28px 0'}}>
        <SiteAd slotId="education_top" variant="slot"/>
      </section>
      <div className="wrap" style={{paddingBottom:92}}>
        {baseCourse && (
          <div className="base-banner" onClick={()=>go('course', baseCourse.id)} role="button" tabIndex={0}>
            <div className="base-banner__badge"><Icon name="award" size={24}/></div>
            <div className="base-banner__body">
              <div className="row gap8 wrapf" style={{marginBottom:8}}><span className="badge green">БАЗА · С чего начать</span>{baseEnrollment?.access==='open'&&<span className="badge green"><Icon name="checkCircle" size={14}/> Курс куплен</span>}{baseEnrollment?.access==='pending'&&<span className="badge amber"><Icon name="clock" size={14}/> Оплата проверяется</span>}</div>
              <h2 className="base-banner__title">{baseCourse.title}</h2>
              <p className="base-banner__desc">{baseCourse.short}</p>
              <div className="row gap10 wrapf" style={{marginTop:14}}>
                <span className="chip"><Icon name="clock" size={13}/>{baseCourse.duration}</span>
                <span className="chip"><Icon name="grad" size={13}/>{baseCourse.level}</span>
                <b style={{color:'var(--green)',fontSize:15}}>{D2.fmt(baseCourse.price)} сом</b>
              </div>
            </div>
            <button className={`btn ${baseEnrollment?.access==='open'?'btn-green':'btn-primary'} base-banner__cta`} onClick={e=>{e.stopPropagation();go(baseEnrollment?.access==='open'?'player':'course', baseCourse.id);}}>
              {baseEnrollment?.access==='open'?'Перейти к обучению':'Начать с базы'} <Icon name="arrowRight"/>
            </button>
          </div>
        )}
        <div className="catalog-bar card">
          <div className="row gap8 wrapf" style={{flex:1}}>
            {cats.map(c=>(
              <button key={c} className={`tab ${c==='Актуальные'?'tab--feat':''} ${active===c?'tab--on':''}`} onClick={()=>setActive(c)}>
                {c==='Актуальные' ? <><Icon name="flag" size={14}/> {c}</> : c}
              </button>
            ))}
          </div>
          <div className="search">
            <Icon name="search" size={17}/>
            <input className="search__in" placeholder="Поиск курса…" value={q} onChange={e=>setQ(e.target.value)} />
          </div>
        </div>
        <div className="grid g3" style={{marginTop:28}}>
          {list.map(c=>(<CourseCard key={c.id} c={c} go={go} enrollment={enroll.find(item=>item.id===c.id)}/>))}
        </div>
        {list.length===0 && <div className="empty">Ничего не найдено. Попробуйте изменить запрос.</div>}
      </div>
    </div>
  );
}

/* ---------------- SERVICES ---------------- */
function ServicesPage({ go }){
  const categories = D2.serviceCategories || [];
  const services = D2.services || [];
  const scrollCategory = slug=>document.getElementById(`services-${slug}`)?.scrollIntoView({behavior:'smooth',block:'start'});
  return (
    <div className="services-page">
      <section className="services-hero">
        <div className="wrap services-hero__grid">
          <div className="stack" style={{gap:18}}>
            <span className="eyebrow">Цифровая трансформация</span>
            <h1>Услуги Лаборатории БПЛА</h1>
            <p>Применяем беспилотные технологии, лазерное сканирование, ИИ-аналитику и 3D-моделирование для бизнеса и государственных организаций.</p>
            <button className="btn btn-green btn-lg" style={{alignSelf:'flex-start'}} onClick={()=>go('contacts')}>Обсудить задачу <Icon name="arrowRight"/></button>
          </div>
          <img src="uploads/services/services-directions.webp" alt="Шесть направлений услуг Лаборатории БПЛА"/>
        </div>
      </section>
      <section className="wrap section">
        <div className="stack center services-heading">
          <span className="eyebrow">6 направлений</span>
          <h2>Решения под задачи вашей отрасли</h2>
        </div>
        <div className="services-directions">
          {categories.map((category,index)=><button key={category.id} className="services-direction card" onClick={()=>scrollCategory(category.slug)}>
            <span className="services-direction__number">{String(index+1).padStart(2,'0')}</span>
            <img src={category.image} alt={category.name}/>
            <div><h3>{category.name}</h3><p>{category.short_description}</p></div>
            <Icon name="arrowRight" size={20}/>
          </button>)}
        </div>
      </section>
      <section className="services-catalog">
        <div className="wrap stack" style={{gap:64}}>
          {categories.map((category,index)=>{
            const items=services.filter(item=>item.category_id===category.id);
            if(!items.length) return null;
            return <section id={`services-${category.slug}`} className="services-group" key={category.id}>
              <div className="services-group__head"><span>{String(index+1).padStart(2,'0')}</span><div><h2>{category.name}</h2><p>{category.short_description}</p></div></div>
              <div className="services-list">
                {items.map(item=><article className="service-card card" key={item.id}>
                  <button className="service-card__image" onClick={()=>go('service-detail',item.slug)}><img src={item.main_image} alt={item.name}/></button>
                  <div className="service-card__body"><span className="chip">{category.name}</span><h3>{item.name}</h3><p>{plainTextFromHtml(item.description)}</p><div className="service-card__footer"><b>{item.price}</b><button className="btn btn-ghost btn-sm" onClick={()=>go('service-detail',item.slug)}>Подробнее <Icon name="arrowRight" size={15}/></button></div></div>
                </article>)}
              </div>
            </section>;
          })}
        </div>
      </section>
    </div>
  );
}

function ServiceOrderForm({ service }){
  const [form,setForm]=useState({name:'',phone:''});
  const [submitting,setSubmitting]=useState(false);
  const [status,setStatus]=useState({type:'',text:''});
  const update=(field,value)=>setForm(current=>({...current,[field]:value}));
  async function submit(event){
    event.preventDefault();
    if(!form.name.trim()||!form.phone.trim())return setStatus({type:'error',text:'Заполните имя и телефон.'});
    setSubmitting(true);setStatus({type:'',text:''});
    try{
      const res=await fetch('api/contact-form.php',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:form.name.trim(),contact:form.phone.trim(),message:`Заявка на услугу «${service.name}». Прошу связаться со мной для уточнения задачи.`,service_title:service.name,service_slug:service.slug})});
      const data=await res.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
      if(!res.ok||data.ok===false)throw new Error(data.error||`HTTP ${res.status}`);
      setForm({name:'',phone:''});setStatus({type:'success',text:'Заявка отправлена. Мы свяжемся с вами.'});
    }catch(error){setStatus({type:'error',text:error.message||'Не удалось отправить заявку.'});}finally{setSubmitting(false);}
  }
  return <form id="service-order-form" className="service-order-form" onSubmit={submit}>
    <span className="eyebrow">Заказать услугу</span><h3>{service.name}</h3><p className="muted">Оставьте контакты — мы уточним задачу и рассчитаем стоимость.</p>
    <div className="field"><label>Имя</label><input className="input" autoComplete="name" value={form.name} onChange={e=>update('name',e.target.value)} placeholder="Как к вам обращаться" maxLength={120} required/></div>
    <div className="field"><label>Телефон</label><input className="input" type="tel" autoComplete="tel" value={form.phone} onChange={e=>update('phone',e.target.value)} placeholder="+996 ___ ___ ___" maxLength={190} required/></div>
    {status.text&&<div className={`service-order-form__status ${status.type}`}>{status.text}</div>}
    <button className="btn btn-green btn-block btn-lg" type="submit" disabled={submitting}>{submitting?'Отправка…':<>Отправить заявку <Icon name="arrowRight"/></>}</button>
  </form>;
}

function ServiceDetail({ slug, go }){
  const service = (D2.services || []).find(item=>item.slug===slug);
  if(!service) return <div className="wrap section"><div className="empty"><h2>Услуга не найдена</h2><p>Возможно, она ещё не опубликована.</p><button className="btn btn-primary" onClick={()=>go('services')}>Все услуги</button></div></div>;
  const related=(D2.services || []).filter(item=>item.category_id===service.category_id && item.id!==service.id).slice(0,3);
  const gallery=[service.main_image,...(service.gallery||[]).map(item=>item.image)].filter(Boolean);
  const openOrderForm=()=>document.getElementById('service-order-form')?.scrollIntoView({behavior:'smooth',block:'center'});
  return <div className="service-detail">
    <section className="service-detail__hero">
      <div className="wrap">
        <div className="service-breadcrumbs"><button onClick={()=>go('home')}>Главная</button><Icon name="chevRight" size={14}/><button onClick={()=>go('services')}>Услуги</button><Icon name="chevRight" size={14}/><span>{service.name}</span></div>
        <div className="service-detail__hero-grid"><div className="stack" style={{gap:18}}><span className="chip navy">{service.category_name}</span><h1>{service.name}</h1><p>{plainTextFromHtml(service.description)}</p><div className="row gap12 wrapf"><button className="btn btn-green btn-lg" onClick={openOrderForm}>Оставить заявку <Icon name="arrowRight"/></button><button className="btn btn-ghost btn-lg service-detail__all" onClick={()=>go('services')}>Все услуги</button></div></div><img src={service.main_image} alt={service.name}/></div>
      </div>
    </section>
    <main className="wrap service-detail__body">
      <article className="service-detail__content stack" style={{gap:34}}>
        <section><span className="eyebrow">Для кого</span><h2>Кому подходит услуга</h2><p>{service.audience}</p></section>
        <section><span className="eyebrow">Об услуге</span><h2>Что мы делаем</h2><div className="rich-text" dangerouslySetInnerHTML={{__html:service.description}}/></section>
        <section className="service-result"><div className="ic-badge"><Icon name="checkCircle"/></div><div><span className="eyebrow">Результат</span><h2>Что получает заказчик</h2><p>{service.customer_result}</p></div></section>
        {gallery.length>1 && <section><h2>Галерея</h2><div className="service-gallery">{gallery.map((image,index)=><img key={image} src={image} alt={`${service.name} — изображение ${index+1}`}/>)}</div></section>}
      </article>
      <aside className="service-detail__aside"><div className="card service-order"><div><span className="muted">Стоимость</span><b>{service.price}</b></div><div><span className="muted">Сроки выполнения</span><b>{service.duration}</b></div><ServiceOrderForm service={service}/></div></aside>
    </main>
    {related.length>0 && <section className="section service-related"><div className="wrap"><h2>Другие услуги категории</h2><div className="services-list">{related.map(item=><article className="service-card card" key={item.id}><button className="service-card__image" onClick={()=>go('service-detail',item.slug)}><img src={item.main_image} alt={item.name}/></button><div className="service-card__body"><h3>{item.name}</h3><p>{plainTextFromHtml(item.description)}</p><button className="btn btn-ghost btn-sm" onClick={()=>go('service-detail',item.slug)}>Подробнее</button></div></article>)}</div></div></section>}
  </div>;
}

/* ---------------- PUBLIC TRIAL LESSON ---------------- */
function TrialLesson({ go, loggedIn=false, enroll=[] }){
  const [completed,setCompleted] = useState(false);
  const [activeMaterial,setActiveMaterial] = useState('pdf');
  const course = D2.courses.find(item=>item.id==='operator-bpla');
  const price = Number(course?.price || 8900);
  const courseEnrollment=enroll.find(item=>item.id==='operator-bpla');
  const coursePurchased=courseEnrollment?.access==='open';
  const coursePending=courseEnrollment?.access==='pending';
  const buyCourse = ()=>go(coursePurchased?'player':'payment', 'operator-bpla');
  const trialMaterials = [
    {key:'pdf',label:'PDF',icon:'doc',kind:'pdf',src:'api/trial-lesson-media.php?type=pdf',title:'Презентация PDF'},
    {key:'audio',label:'Аудио',icon:'play',kind:'audio',src:'api/trial-lesson-media.php?type=audio',title:'Аудиолекция'},
    {key:'presentation',label:'PPTX',icon:'layers',kind:'pdf',src:'api/trial-lesson-media.php?type=presentation',title:'Презентация PowerPoint'},
  ];
  const selectedMaterial = trialMaterials.find(item=>item.key===activeMaterial) || null;
  return (
    <div className="trial-lesson">
      <section className="trial-lesson__hero">
        <div className="wrap trial-lesson__hero-grid">
          <div className="stack" style={{gap:18}}>
            <button className="back trial-lesson__back" onClick={()=>go('home')}><Icon name="chevLeft" size={16}/> На главную</button>
            <div className="row gap8 wrapf">
              <span className="chip navy"><Icon name="play" size={13}/> Бесплатный урок</span>
              <span className="chip trial-lesson__open-chip"><Icon name="eye" size={13}/> Без регистрации</span>
            </div>
            <h1>Урок 1. Основы аэронавигации: как беспилотник ориентируется в пространстве</h1>
            <p>Посмотрите первый урок программы «Оператор БПЛА» бесплатно. Вы узнаете, какие системы помогают дрону определять положение, направление и высоту полёта.</p>
            <div className="row gap24 wrapf trial-lesson__meta">
              <span><Icon name="video" size={18}/> Видеоурок</span>
              <span><Icon name="doc" size={18}/> PDF и презентация</span>
              <span><Icon name="play" size={18}/> Аудиолекция</span>
              <span><Icon name="grad" size={18}/> Начальный уровень</span>
              <span><Icon name="checkCircle" size={18}/> Свободный доступ</span>
            </div>
          </div>
          <div className="trial-lesson__hero-mark" aria-hidden="true"><Icon name="target" size={112}/></div>
        </div>
      </section>

      <main className="wrap trial-lesson__body">
        <section className="trial-player card">
          <div className="trial-player__head">
            <div>
              <span className="eyebrow">Пробный урок</span>
              <h2>Основы аэронавигации</h2>
            </div>
            <span className="badge green">Бесплатно</span>
          </div>
          <div className="trial-player__media">
            <video
              controls
              controlsList="nodownload"
              preload="metadata"
              playsInline
              src="api/trial-lesson-media.php"
              onEnded={()=>setCompleted(true)}
            >
              Ваш браузер не поддерживает воспроизведение видео.
            </video>
            {completed && (
              <div className="trial-player__complete">
                <div className="trial-player__complete-icon"><Icon name="check" size={30}/></div>
                <h2>Первый урок пройден!</h2>
                <p>Продолжите обучение на полном курсе «Оператор БПЛА»: 24 часа онлайн-занятий, симулятор, практика с инструктором и сертификат КРСУ.</p>
                <div className="trial-player__price">{D2.fmt(price)} <span>сом</span></div>
                <div className="row gap10 wrapf trial-player__complete-actions">
                  <button className="btn btn-green btn-lg" onClick={buyCourse} disabled={coursePending}>{coursePurchased?'Перейти к обучению':coursePending?'Оплата проверяется':'Купить полный курс'} <Icon name="arrowRight"/></button>
                  <button className="btn btn-ghost" onClick={()=>setCompleted(false)}>Посмотреть ещё раз</button>
                </div>
              </div>
            )}
          </div>
          <div className="trial-player__caption">
            <Icon name="checkCircle" size={18}/>
            <span>Нажмите «Воспроизвести» — вход и покупка для просмотра этого урока не нужны.</span>
          </div>
          <div className="trial-materials">
            <div className="trial-materials__head">
              <div>
                <span className="eyebrow">Материалы урока</span>
                <h3>PDF, аудио и презентация</h3>
              </div>
              <div className="row gap8 wrapf">
                {trialMaterials.map(item=>(
                  <button key={item.key} className={`chip ${activeMaterial===item.key?'navy':''}`} onClick={()=>setActiveMaterial(item.key)}>
                    <Icon name={item.icon} size={14}/> {item.label}
                  </button>
                ))}
              </div>
            </div>
            {selectedMaterial && <div className="trial-materials__viewer">
              <div className="spread wrapf trial-materials__title">
                <b>{selectedMaterial.title}</b>
                <span className="badge green">Без регистрации</span>
              </div>
              {selectedMaterial.kind==='audio'
                ? <div className="trial-materials__audio" onContextMenu={event=>event.preventDefault()}>
                    <audio key={selectedMaterial.src} src={selectedMaterial.src} controls controlsList="nodownload" preload="metadata"/>
                  </div>
                : <PdfLessonViewer src={selectedMaterial.src} title={`Основы аэронавигации · ${selectedMaterial.title}`}/>
              }
            </div>}
          </div>
        </section>

        <section className="trial-offer">
          <div className="trial-offer__content">
            <span className="eyebrow">Продолжить обучение</span>
            <h2>Полный курс «Оператор БПЛА»</h2>
            <p>Комплексная подготовка от устройства и навигации беспилотника до безопасного пилотирования и практической школы «Высота» на Иссык-Куле.</p>
            <div className="grid g2 trial-offer__features">
              {[
                ['clock','32 часа обучения'],
                ['video','50 видеоуроков'],
                ['users','Практика с инструктором'],
                ['award','Сертификат КРСУ'],
              ].map(([icon,label])=><div className="trial-offer__feature" key={label}><Icon name={icon} size={19}/><span>{label}</span></div>)}
            </div>
          </div>
          <aside className="trial-offer__buy card">
            <span className="muted">Полный доступ к программе</span>
            <div className="trial-offer__price">{D2.fmt(price)} <span>сом</span></div>
            {coursePurchased&&<div className="note" style={{marginBottom:12}}><Icon name="checkCircle" size={18}/> Курс уже куплен в вашем профиле.</div>}
            <button className="btn btn-green btn-block btn-lg" onClick={buyCourse} disabled={coursePending}>{coursePurchased?'Перейти к обучению':coursePending?'Оплата проверяется':loggedIn?'Купить полный курс':'Зарегистрироваться и купить'}</button>
            <button className="btn btn-ghost btn-block" onClick={()=>go('course','operator-bpla')}>Подробнее о курсе</button>
          </aside>
        </section>
      </main>
    </div>
  );
}

/* ---------------- COURSE DETAIL ---------------- */
function CourseDetail({ id, go, loggedIn=false, enroll=[] }){
  const requestedCourse = D2.courses.find(x=>x.id===id);
  const c = bundledOperatorCourseIds.includes(id) || requestedCourse?.active===false
    ? (D2.courses.find(x=>x.id==='operator-bpla') || requestedCourse || D2.courses[0])
    : (requestedCourse || D2.courses[0]);
  const catClass = `course-hero--${(c.cat||'').toLowerCase().replace(/\s+/g,'-')}`;
  const [open, setOpen] = useState(0);
  const enrollment=enroll.find(item=>item.id===c.id);
  const purchased=enrollment?.access==='open';
  const pending=enrollment?.access==='pending';
  const related = D2.courses.filter(x=>x.active!==false && x.id!==c.id && x.cat===c.cat).slice(0,3);
  const rel = related.length?related:D2.courses.filter(x=>x.active!==false && x.id!==c.id).slice(0,3);
  return (
    <div>
      <div className={`course-hero ${catClass}`} style={{'--c':c.color}}>
        <div className="wrap">
          <button className="back" onClick={()=>go('education')}><Icon name="chevLeft" size={16}/> Все курсы</button>
          <div className="course-hero__grid">
            <div className="stack" style={{gap:18}}>
              <div className="row gap8 wrapf">
                <span className="chip navy">{c.cat}</span>
                <span className="chip" style={{background:'rgba(255,255,255,.16)',color:'#fff',border:'none'}}><Icon name="grad" size={13}/>{c.level}</span>
                {purchased&&<span className="badge green"><Icon name="checkCircle" size={14}/> Курс куплен</span>}
                {!purchased&&pending&&<span className="badge amber"><Icon name="clock" size={14}/> Оплата проверяется</span>}
              </div>
              <h1 style={{fontSize:42,color:'#fff',maxWidth:640}}>{c.title}</h1>
              <p style={{color:'#CBDBE1',fontSize:18,maxWidth:600}}>{c.short}</p>
              <div className="row gap24 wrapf" style={{marginTop:6}}>
                <div className="ch-meta"><Icon name="clock" size={18}/><div><b style={{color:'#fff'}}>{c.duration}</b><div>длительность</div></div></div>
                <div className="ch-meta"><Icon name="book" size={18}/><div><b style={{color:'#fff'}}>{c.lessons} уроков</b><div>материалов</div></div></div>
                <div className="ch-meta"><Icon name="users" size={18}/><div><b style={{color:'#fff'}}>{c.students}</b><div>студентов</div></div></div>
              </div>
            </div>
            <div className="ch-media">
              {(c.slides && c.slides.length > 0)
                ? <CourseHeroCarousel slides={c.slides}/>
                : c.img
                  ? <img src={c.img} alt={c.title} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'contain',borderRadius:'inherit'}}/>
                  : <video src="assets/dron.mp4" muted autoPlay loop playsInline preload="metadata" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',borderRadius:'inherit'}}></video>}
              {!(c.slides && c.slides.length > 0) && <button className="hero-play"><Icon name="play" size={22}/></button>}
            </div>
          </div>
        </div>
      </div>

      <div className="wrap course-body">
        <div className="course-body__main stack" style={{gap:44}}>
          <section>
            <h2 style={{fontSize:26,marginBottom:18}}>Чему вы научитесь</h2>
            <div className="grid g2" style={{gap:14}}>
              {c.outcomes.map(o=>(
                <div key={o} className="outcome"><Icon name="checkCircle" size={20} style={{color:'var(--green-600)',flexShrink:0}}/><span>{o}</span></div>
              ))}
            </div>
          </section>
          <section>
            <h2 style={{fontSize:26,marginBottom:18}}>Программа курса</h2>
            <div className="stack" style={{gap:10}}>
              {c.modules.map((m,i)=>(
                <div key={i} className={`mod ${open===i?'mod--open':''}`}>
                  <button className="mod__head" onClick={()=>setOpen(open===i?-1:i)}>
                    <span className="mod__n">{String(i+1).padStart(2,'0')}</span>
                    <b style={{flex:1,textAlign:'left',fontSize:16.5}}>{m.t}</b>
                    <span className="muted" style={{fontSize:13}}>{m.lessons.length} уроков</span>
                    <Icon name="chevDown" size={18} className="mod__chev"/>
                  </button>
                  <div className="mod__body">
                    {m.lessons.map((l,j)=>(
                      <div key={j} className="mod__lesson"><Icon name={i===c.modules.length-1?'award':'video'} size={16} style={{color:'var(--muted-2)'}}/> {lessonTitle(l)}</div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </section>
          <section className="consult card">
            <div className="ic-badge"><Icon name="phone" size={20}/></div>
            <div className="stack" style={{gap:4,flex:1}}>
              <b style={{fontSize:18}}>Нужна консультация перед покупкой?</b>
              <span className="muted">Поможем выбрать курс под вашу цель и расскажем об условиях.</span>
            </div>
            <button className="btn btn-ghost" onClick={()=>go('contacts')}>Связаться</button>
          </section>
        </div>

        {/* sticky buy */}
        <aside className="course-body__side">
          <div className="buy card">
            {purchased&&<div className="note" style={{marginBottom:16}}><Icon name="checkCircle" size={18}/><span><b>Курс куплен</b><br/>Доступ открыт в вашем профиле.</span></div>}
            <div className="buy__price">{D2.fmt(c.price)} <span>сом</span></div>
            <div className="muted" style={{fontSize:13.5,marginBottom:18}}>Единоразовая оплата · доступ навсегда</div>
            <button className="btn btn-green btn-block btn-lg" disabled={pending} onClick={()=>go(purchased?'player':'payment', c.id)}>{purchased?'Перейти к обучению':pending?'Оплата проверяется':loggedIn?'Купить курс':'Войти и оплатить'}</button>
            <button className="btn btn-ghost btn-block" style={{marginTop:10}} onClick={()=>go(loggedIn ? 'cabinet' : 'login')}>{loggedIn ? 'Перейти в кабинет' : 'Уже учусь — войти'}</button>
            <div className="buy__list">
              {['Доступ к видео и материалам','Практика на симуляторе','Тестирование после курса','Сертификат Лаборатории БПЛА'].map(x=>(
                <div key={x} className="row gap8" style={{fontSize:14}}><Icon name="check" size={15} style={{color:'var(--green-600)'}}/> {x}</div>
              ))}
            </div>
            <div className="buy__social">
              <span className="muted" style={{fontSize:12.5,fontWeight:700}}>СЛЕДИТЕ ЗА КУРСОМ</span>
              <div className="row gap8">
                <a className="soc" href="https://youtube.com/@krsubpla?si=CuNgUznrsXyaAdlw" target="_blank" rel="noreferrer"><Icon name="youtube" size={18}/></a>
                <a className="soc" href="https://www.instagram.com/krsu.bpla" target="_blank" rel="noreferrer"><Icon name="instagram" size={18}/></a>
                <a className="soc" href="#"><Icon name="tg" size={18}/></a>
              </div>
            </div>
          </div>
        </aside>
      </div>

      <section className="section" style={{background:'var(--bg-2)'}}>
        <div className="wrap">
          <h2 style={{fontSize:30,marginBottom:32}}>Похожие курсы</h2>
          <CourseCarousel courses={rel} go={go} enroll={enroll}/>
        </div>
      </section>
    </div>
  );
}

/* ---------------- NEWS ---------------- */
function News({ go }){
  const cats = ['Все','Лаборатория БПЛА','Партнёры','Беспилотная Авиация','Гонки','Наука-образование'];
  const [active, setActive] = useState('Все');
  const list = active==='Все'?D2.news:D2.news.filter(n=>n.cat===active);
  const lead = list[0];
  const leadImg = lead?.img || 'assets/pic_bg1.png';
  return (
    <div>
      <div className="subhero news-hero">
        <div className="wrap stack" style={{gap:14}}>
          <span className="eyebrow">Новости</span>
          <h1 style={{fontSize:44,maxWidth:760}}>Единое информационное окно</h1>
          <p className="muted" style={{fontSize:18,maxWidth:680}}>Новости КРСУ, партнёров и профильных госпорталов — включая Госагентство гражданской авиации — в одной ленте.</p>
        </div>
      </div>
      <section className="wrap" style={{padding:'24px 28px 0'}}>
        <SiteAd slotId="news_top" variant="slot"/>
      </section>
      <div className="wrap" style={{paddingBottom:92}}>
        <div className="row gap8 wrapf" style={{marginBottom:28}}>
          {cats.map(c=>(<button key={c} className={`tab ${active===c?'tab--on':''}`} onClick={()=>setActive(c)}>{c}</button>))}
        </div>
        {lead && (
          <article className="news-lead card" onClick={()=>go('news-item', newsRouteParam(lead))} style={{cursor:'pointer'}}>
            <div className="news-lead__media"><img src={leadImg} alt={lead.title} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/></div>
            <div className="news-lead__body stack" style={{gap:14}}>
              <div className="row gap8"><span className={`badge ${lead.tag}`}>{lead.cat}</span><span className="muted" style={{fontSize:13}}>{lead.date}</span></div>
              <h2 style={{fontSize:30}}>{lead.title}</h2>
              <p className="muted" style={{fontSize:16}}>{excerptFromHtml(lead.text, 240)}</p>
              <div className="row gap8" style={{color:'var(--green-700)',fontWeight:700,fontSize:13.5}}><Icon name="globe" size={15}/> Источник: {lead.src}</div>
              <div className="row gap8" style={{color:'var(--navy)',fontWeight:800,fontSize:14}}><span>Читать полностью</span><Icon name="arrowRight" size={15}/></div>
            </div>
          </article>
        )}
        <div className="grid g3" style={{marginTop:28}}>
          {list.slice(1).map(n=>(<NewsCard key={n.id} n={n} go={go}/>))}
        </div>
      </div>
    </div>
  );
}

function NewsDetail({ id, go }){
  const article = findNewsByParam(id, D2.news) || D2.news[0];
  const related = D2.news.filter(item=>item.id!==article?.id).slice(0,3);
  if(!article){
    return (
      <div className="wrap section">
        <div className="empty">Новость не найдена.</div>
      </div>
    );
  }

  return (
    <div>
      <div className="subhero news-hero article-hero">
        <div className="wrap stack" style={{gap:14}}>
          <button className="back" onClick={()=>go('news')}><Icon name="chevLeft" size={16}/> Все новости</button>
          <div className="row gap8 wrapf">
            <span className={`badge ${article.tag}`}>{article.cat}</span>
            <span className="muted" style={{fontSize:14}}>{article.date}</span>
          </div>
          <h1 className="article-hero__title">{article.title}</h1>
          <div className="row gap8 wrapf" style={{color:'#dff6ec',fontWeight:700}}>
            <Icon name="globe" size={16}/> Источник: {article.src}
          </div>
        </div>
      </div>
      <div className="wrap section" style={{paddingTop:28}}>
        {article.img && (
          <div className="card article-cover">
            <img src={article.img} alt={article.title} className="article-cover__img"/>
          </div>
        )}
        <div className="article-layout">
          <article className="card article-main">
            <div
              className="richtext"
              dangerouslySetInnerHTML={{__html: newsHtmlContent(article.text)}}
            />
          </article>
          <aside className="article-side stack" style={{gap:18}}>
            <SiteAd slotId="news_top" variant="slot"/>
            <div className="card article-related">
              <b className="article-related__title">Другие новости</b>
              <div className="stack" style={{gap:14}}>
                {related.map(item=>(
                  <button key={item.id} className="article-related__item stack" style={{gap:6,textAlign:'left'}} onClick={()=>go('news-item', newsRouteParam(item))}>
                    <span className="muted" style={{fontSize:12}}>{item.date}</span>
                    <b style={{fontSize:15,lineHeight:1.35,color:'var(--ink)'}}>{item.title}</b>
                  </button>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

function RaceDetail({ id, go, loggedIn=false }){
  const race = findRaceByParam(id, D2.races) || D2.races[0];
  const related = D2.races.filter(item=>item.id!==race?.id).slice(0,3);
  if(!race){
    return (
      <div className="wrap section">
        <div className="empty">Старт не найден.</div>
      </div>
    );
  }

  return (
    <div>
      <div className="subhero news-hero article-hero">
        <div className="wrap stack" style={{gap:14}}>
          <button className="back" onClick={()=>go('races')}><Icon name="chevLeft" size={16}/> Все старты</button>
          <div className="row gap8 wrapf">
            <span className={`badge ${race.status==='Регистрация открыта'||race.status==='Набор открыт' ? 'green' : race.status==='Скоро' ? 'amber' : 'gray'}`}>{race.status}</span>
            <span className="muted" style={{fontSize:14}}>{race.date}</span>
          </div>
          <h1 className="article-hero__title">{race.title}</h1>
          <div className="row gap8 wrapf" style={{color:'#dff6ec',fontWeight:700}}>
            <Icon name="pin" size={16}/> {race.place}
          </div>
        </div>
      </div>
      <div className="wrap section" style={{paddingTop:28}}>
        {race.img && (
          <div className="card article-cover">
            <img src={race.img} alt={race.title} className="article-cover__img"/>
          </div>
        )}
        <div className="article-layout">
          <article className="card article-main">
            <div
              className="richtext"
              dangerouslySetInnerHTML={{__html: newsHtmlContent(race.text || '')}}
            />
          </article>
          <aside className="article-side stack" style={{gap:18}}>
            <SiteAd slotId="races_hero" variant="slot"/>
            <div className="card article-related">
              <b className="article-related__title">Участие</b>
              <p className="muted" style={{fontSize:14.5,margin:'0 0 16px'}}>
                Регистрация и доступ к материалам соревнований доступны через личный кабинет.
              </p>
              <button className="btn btn-primary btn-block" onClick={()=>go('payment','league-membership')}>
                {loggedIn ? 'Оплатить участие' : 'Войти и оплатить'}
              </button>
            </div>
            {!!related.length && (
              <div className="card article-related">
                <b className="article-related__title">Другие старты</b>
                <div className="stack" style={{gap:14}}>
                  {related.map(item=>(
                    <button key={item.id} className="article-related__item stack" style={{gap:6,textAlign:'left'}} onClick={()=>go('race-item', raceRouteParam(item))}>
                      <span className="muted" style={{fontSize:12}}>{item.date}</span>
                      <b style={{fontSize:15,lineHeight:1.35,color:'var(--ink)'}}>{item.title}</b>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </aside>
        </div>
      </div>
    </div>
  );
}

function StaticContentPage({ id, go }){
  const pages = D2.pages || {};
  const page = pages[String(id || '')] || pages.offer || { title:'Страница', text:'<p>Контент страницы пока не заполнен.</p>' };
  const navItems = [
    {id:'offer', title:'Договор оферты'},
    {id:'payment', title:'Условия оплаты'},
    {id:'privacy', title:'Политика конфиденциальности'},
  ];

  return (
    <div>
      <div className="subhero article-hero docs-hero">
        <div className="wrap stack" style={{gap:14}}>
          <button className="back" onClick={()=>go('home')}><Icon name="chevLeft" size={16}/> На главную</button>
          <span className="eyebrow">Документы</span>
          <h1 className="article-hero__title">{page.title}</h1>
          <p className="muted" style={{fontSize:18,maxWidth:700}}>Актуальная версия страницы публикуется и редактируется прямо из административной панели сайта.</p>
        </div>
      </div>
      <div className="wrap section" style={{paddingTop:28}}>
        <div className="article-layout">
          <article className="card article-main">
            {(page.files||[]).length>0 && (
              <div className="row gap10 wrapf" style={{marginBottom:22}}>
                {(page.files||[]).map((f,i)=>(
                  <a
                    key={i}
                    href={`/${String(f.path || '').replace(/^\/+/, '')}`}
                    target="_blank"
                    rel="noreferrer"
                    className="btn btn-navy"
                    style={{display:'inline-flex',alignItems:'center',gap:8}}
                    download={f.name||true}
                  >
                    <Icon name="doc" size={16}/> {f.name||'Скачать документ'}
                  </a>
                ))}
              </div>
            )}
            {page.text && page.text.trim() && <div className="richtext" dangerouslySetInnerHTML={{__html: newsHtmlContent(page.text)}} />}
          </article>
          <aside className="article-side stack" style={{gap:18}}>
            <div className="card article-related">
              <b className="article-related__title">Другие документы</b>
              <div className="stack" style={{gap:14}}>
                {navItems.filter(item=>item.id!==String(id || '')).map(item=>(
                  <button key={item.id} className="article-related__item stack" style={{gap:6,textAlign:'left'}} onClick={()=>go('page', item.id)}>
                    <span className="muted" style={{fontSize:12}}>Документ сайта</span>
                    <b style={{fontSize:15,lineHeight:1.35,color:'var(--ink)'}}>{item.title}</b>
                  </button>
                ))}
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

function PilotRatingPage({ go }){
  const rating = D2.pilotRating || {};
  const entries = (rating.entries || [])
    .filter(item=>item.active !== false)
    .sort((a,b)=>{
      const pointsDifference = (Number(b.points) || 0) - (Number(a.points) || 0);
      if(pointsDifference !== 0) return pointsDifference;
      return (Number(a.sort_order) || 0) - (Number(b.sort_order) || 0);
    });
  const top = entries.slice(0,3);

  return (
    <div>
      <div className="subhero race-hero race-hero--compact">
        <div className="wrap stack" style={{gap:14}}>
          <button className="back back--dark" onClick={()=>go('races')}><Icon name="chevLeft" size={16}/> К гонкам</button>
          <span className="eyebrow">Спортивный рейтинг</span>
          <h1 style={{fontSize:44,maxWidth:760}}>{rating.title || 'Рейтинг пилотов'}</h1>
          <p className="muted" style={{fontSize:18,maxWidth:760}}>{rating.subtitle || 'Таблица лучших пилотов Лаборатории БПЛА и результаты последних стартов.'}</p>
          <div className="row gap8 wrapf">
            <span className="badge green">{rating.season || 'Сезон'}</span>
            <span className="badge gray">Обновлено: {rating.updatedAt || '—'}</span>
          </div>
        </div>
      </div>
      <div className="wrap section" style={{paddingBottom:92}}>
        <div className="grid g3" style={{marginBottom:28}}>
          {top.map((pilot, index)=>(
            <div key={pilot.id} className={`card pilot-card pilot-card--place-${index+1}`}>
              <div className="pilot-card__place">{index + 1}</div>
              {pilot.photo
                ? <img src={pilot.photo} alt={pilot.name} className="pilot-card__photo"/>
                : <div className="ic-badge"><Icon name={index===0 ? 'trophy' : 'award'} size={20}/></div>}
              <b style={{fontSize:22}}>{pilot.name}</b>
              <span className="muted">{pilot.team || 'Лаборатория БПЛА'}</span>
              <div className="row gap8 wrapf" style={{justifyContent:'center'}}>
                {pilot.city && <span className="chip">{pilot.city}</span>}
                {pilot.drone && <span className="chip">{pilot.drone}</span>}
              </div>
              <div className="pilot-card__score">{pilot.points} очков</div>
              <div className="pilot-card__meta">
                <span>Побед: <b>{pilot.wins}</b></span>
                <span>Лучший круг: <b>{pilot.bestLap || '—'}</b></span>
              </div>
            </div>
          ))}
        </div>

        <div className="card pilot-table">
          <div className="pilot-table__head">
            <span>Место</span>
            <span>Пилот</span>
            <span>Команда</span>
            <span>Город</span>
            <span>Очки</span>
            <span>Победы</span>
            <span>Лучший круг</span>
          </div>
          <div className="stack" style={{gap:0}}>
            {entries.map((pilot, index)=>(
              <div key={pilot.id} className="pilot-table__row">
                <span className="pilot-table__place">{index + 1}</span>
                <span className="pilot-table__pilot"><span className="pilot-table__avatar">{pilot.photo ? <img src={pilot.photo} alt={pilot.name}/> : <Icon name="user" size={16}/>}</span><span><b>{pilot.name}</b>{pilot.drone ? <small>{pilot.drone}</small> : null}</span></span>
                <span>{pilot.team || '—'}</span>
                <span>{pilot.city || '—'}</span>
                <span><b>{pilot.points}</b></span>
                <span>{pilot.wins}</span>
                <span>{pilot.bestLap || '—'}</span>
              </div>
            ))}
          </div>
        </div>
        {!entries.length && <div className="empty">Рейтинг пока не заполнен.</div>}
      </div>
    </div>
  );
}

function LeagueMembershipPage({ go, loggedIn=false }){
  const league = D2.leagueMembership || {};
  const yearlyPrice = Number(league.yearlyPrice || 8760);
  const features = league.features || [];

  return (
    <div>
      <div className="subhero race-hero race-hero--compact">
        <div className="wrap stack" style={{gap:14}}>
          <button className="back back--dark" onClick={()=>go('races')}><Icon name="chevLeft" size={16}/> К гонкам</button>
          <span className="eyebrow">Лига дронов</span>
          <h1 style={{fontSize:44,maxWidth:760}}>{league.title || 'Членство в Лиге'}</h1>
          <p className="muted" style={{fontSize:18,maxWidth:760}}>{league.subtitle || 'Платная регистрация для участия в Лиге Дронов и официальных заездах.'}</p>
        </div>
      </div>

      <div className="wrap section" style={{paddingBottom:92}}>
        <div className="grid g2" style={{alignItems:'start',gap:24}}>
          <div className="card" style={{padding:28}}>
            <span className="eyebrow" style={{color:'var(--green-700)'}}>Что входит</span>
            <h2 style={{fontSize:30,margin:'10px 0 14px'}}>{league.title || 'Членство в Лиге'}</h2>
            <p className="muted" style={{fontSize:16.5,marginBottom:18}}>{league.description || 'Членство открывает доступ к официальным стартам, материалам сезона и уведомлениям Лиги.'}</p>
            <div className="stack" style={{gap:12}}>
              {features.map(item=>(
                <div key={item} className="outcome" style={{background:'var(--bg)'}}>
                  <Icon name="checkCircle" size={20} style={{color:'var(--green-600)',flexShrink:0}}/>
                  <span>{item}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="stack" style={{gap:18}}>
            <div className="card league-price-card league-price-card--highlight">
              <span className="badge amber">Годовая подписка</span>
              <b>{D2.fmt(yearlyPrice)} сом</b>
              <span className="muted">в год</span>
              <button className="btn btn-green btn-block btn-lg" onClick={()=>go('payment','league-membership')}>{loggedIn ? (league.cta || 'Оформить членство') : 'Войти и оформить'}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- CONTACTS ---------------- */
function Contacts(){
  const c = D2.contacts;
  const [form,setForm] = useState({name:'',contact:'',message:''});
  const [submitting,setSubmitting] = useState(false);
  const [status,setStatus] = useState({type:'',text:''});

  function updateForm(field, value){
    setForm(prev=>({...prev,[field]:value}));
  }

  async function submitForm(e){
    e.preventDefault();
    const name = form.name.trim();
    const contact = form.contact.trim();
    const message = form.message.trim();
    if(!name || !contact || !message){
      setStatus({type:'error', text:'Заполните имя, контакт и сообщение.'});
      return;
    }

    setSubmitting(true);
    setStatus({type:'', text:''});
    try{
      const res = await fetch('api/contact-form.php', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body:JSON.stringify({name, contact, message}),
      });
      const data = await res.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
      if(!res.ok || data.ok===false) throw new Error(data.error || `HTTP ${res.status}`);
      setForm({name:'',contact:'',message:''});
      setStatus({type:'success', text:data.message || 'Сообщение отправлено.'});
    }catch(err){
      setStatus({type:'error', text:err.message || 'Не удалось отправить сообщение.'});
    }finally{
      setSubmitting(false);
    }
  }

  return (
    <div>
      <div className="subhero contacts-hero">
        <div className="wrap stack" style={{gap:14}}>
          <span className="eyebrow">Контакты</span>
          <h1 style={{fontSize:44}}>Свяжитесь с лабораторией</h1>
        </div>
      </div>
      <section className="wrap" style={{padding:'24px 28px 0'}}>
        <SiteAd slotId="contacts_top" variant="slot"/>
      </section>
      <div className="wrap contacts-grid" style={{paddingBottom:92}}>
        <div className="stack" style={{gap:16}}>
          <div className="contact-row card"><div className="ic-badge"><Icon name="phone" size={20}/></div><div><b>Телефоны</b>{c.phones.map(p=><div key={p} className="muted">{p}</div>)}</div></div>
          <div className="contact-row card"><div className="ic-badge"><Icon name="mail" size={20}/></div><div><b>Email</b><div className="muted">{c.email}</div></div></div>
          <div className="contact-row card"><div className="ic-badge"><Icon name="pin" size={20}/></div><div><b>Адрес</b><div className="muted">{c.address}</div></div></div>
          <div className="contact-row card"><div className="ic-badge"><Icon name="clock" size={20}/></div><div><b>Часы работы</b><div className="muted">{c.hours}</div></div></div>
          <div className="contact-row card">
            <div className="ic-badge"><Icon name="globe" size={20}/></div>
            <div style={{flex:1}}><b>Социальные сети</b>
              <div className="row gap8" style={{marginTop:8}}>
                <a className="soc" href="https://youtube.com/@krsubpla?si=CuNgUznrsXyaAdlw" target="_blank" rel="noreferrer"><Icon name="youtube" size={18}/></a>
                <a className="soc" href="https://www.instagram.com/krsu.bpla" target="_blank" rel="noreferrer"><Icon name="instagram" size={18}/></a>
                <a className="soc" href="#"><Icon name="tg" size={18}/></a>
              </div>
            </div>
          </div>
        </div>
        <div className="card" style={{overflow:'hidden'}}>
          <div style={{aspectRatio:'4/3',position:'relative',overflow:'hidden'}}>
            <iframe
              title="Карта ЕТФ КРСУ"
              src="https://www.google.com/maps?q=42.8741378,74.6379815&z=18&output=embed"
              style={{position:'absolute',inset:0,width:'100%',height:'100%',border:0}}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
          <form className="stack" style={{gap:14,padding:24}} onSubmit={submitForm}>
            <b style={{fontSize:20}}>Задать вопрос</b>
            <div className="field"><label>Имя</label><input className="input" value={form.name} onChange={e=>updateForm('name', e.target.value)} placeholder="Как к вам обращаться"/></div>
            <div className="field"><label>Контакт</label><input className="input" value={form.contact} onChange={e=>updateForm('contact', e.target.value)} placeholder="Телефон или email"/></div>
            <div className="field"><label>Сообщение</label><textarea className="textarea" value={form.message} onChange={e=>updateForm('message', e.target.value)} placeholder="Ваш вопрос о курсах…"></textarea></div>
            {status.text && (
              <div className="note" style={{margin:0,color:status.type==='error' ? '#C0463B' : 'var(--green-700)'}}>
                {status.text}
              </div>
            )}
            <button className="btn btn-primary btn-block btn-lg" disabled={submitting}>
              {submitting ? 'Отправка...' : 'Отправить'} <Icon name="arrowRight"/>
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

function MediaGallery({ go }){
  const media = (D2.media || []).filter(item=>item.active);
  return (
    <div>
      <div className="subhero media-hero">
        <div className="wrap stack" style={{gap:14}}>
          <span className="eyebrow">Медиа-галерея</span>
          <h1 style={{fontSize:44,maxWidth:820}}>Обучалки, полезные видео по настройке и рекламные материалы</h1>
          <p className="muted" style={{fontSize:18,maxWidth:760}}>Здесь собраны видео из Telegram и хостинга лаборатории для студентов, абитуриентов и партнёров.</p>
          <div className="row gap12 wrapf" style={{marginTop:6}}>
            <button className="btn btn-primary btn-lg" onClick={()=>go('education')}>К курсам <Icon name="arrowRight"/></button>
            <button className="btn btn-ghost btn-lg" onClick={()=>go('home')}>На главную</button>
          </div>
        </div>
      </div>
      <div className="wrap" style={{paddingBottom:92}}>
        <div className="grid g2" style={{marginTop:28}}>
          {media.map((v)=>(
            <article key={v.id} className="media-gallery-card card">
              <div className="media-gallery-card__video">
                {v.kind==='image'
                  ? <img src={v.src} alt={v.title} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
                  : <video src={v.src} poster={v.poster||''} controls preload="metadata" playsInline />}
              </div>
              <div className="media-gallery-card__body">
                <span className="badge green">{v.cat}</span>
                <b>{v.title}</b>
                {v.text ? <span className="muted" style={{fontSize:14}}>{v.text}</span> : null}
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

function Faq({ go }){
  const [open,setOpen]=useState(null);
  const items=(D2.faq||[]).filter(x=>x.active);
  return (
    <div>
      <div className="subhero faq-hero">
        <div className="wrap stack" style={{gap:14}}>
          <span className="eyebrow">FAQ</span>
          <h1 style={{fontSize:44,maxWidth:760}}>Часто задаваемые вопросы</h1>
          <p className="muted" style={{fontSize:18,maxWidth:640}}>Всё, что вы хотели узнать о программе подготовки операторов БПЛА в КРСУ.</p>
        </div>
      </div>
      <div className="wrap section">
        <div style={{maxWidth:820,margin:'0 auto'}}>
          {items.length===0 && <p className="muted">Вопросы скоро появятся.</p>}
          <div className="stack" style={{gap:10}}>
            {items.map((item,i)=>{
              const isOpen=open===i;
              return (
                <div key={item.id} className="card" style={{padding:0,overflow:'hidden'}}>
                  <button
                    className="spread"
                    style={{width:'100%',padding:'22px 28px',background:'none',border:'none',cursor:'pointer',textAlign:'left',gap:16,alignItems:'center'}}
                    onClick={()=>setOpen(isOpen?null:i)}
                    aria-expanded={isOpen}
                  >
                    <span style={{fontSize:17,fontWeight:700,lineHeight:1.45,flex:1,color:'var(--ink)'}}>{item.q}</span>
                    <span style={{flexShrink:0,color:'var(--green)',transition:'transform .25s',transform:isOpen?'rotate(180deg)':'rotate(0deg)',display:'inline-flex'}}>
                      <Icon name="chevDown" size={22}/>
                    </span>
                  </button>
                  {isOpen && (
                    <div
                      className="richtext"
                      style={{padding:'0 28px 24px',borderTop:'1px solid var(--line)',paddingTop:20}}
                      dangerouslySetInnerHTML={{__html:item.a}}
                    />
                  )}
                </div>
              );
            })}
          </div>
          <div className="card" style={{marginTop:32,padding:'32px 28px',textAlign:'center',background:'linear-gradient(135deg,var(--bg-2) 0%,#edf7f1 100%)'}}>
            <p style={{fontWeight:700,fontSize:18,marginBottom:8}}>Не нашли ответ на свой вопрос?</p>
            <p className="muted" style={{marginBottom:20}}>Напишите нам — ответим в течение рабочего дня.</p>
            <button className="btn btn-navy" onClick={()=>go('contacts')}>Написать в лабораторию</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Education, CourseDetail, CourseCarousel, CourseHeroCarousel, News, Contacts, MediaGallery, PilotRatingPage, LeagueMembershipPage, Faq });