/* ===== Public screens ===== */
const D = window.DATA;

const CYRILLIC_TO_LATIN = {
  а:'a', б:'b', в:'v', г:'g', д:'d', е:'e', ё:'e', ж:'zh', з:'z', и:'i', й:'y', к:'k', л:'l', м:'m', н:'n', о:'o', п:'p', р:'r', с:'s', т:'t', у:'u', ф:'f', х:'h', ц:'ts', ч:'ch', ш:'sh', щ:'sch', ъ:'', ы:'y', ь:'', э:'e', ю:'yu', я:'ya',
};

function slugifyText(text=''){
  return String(text || '')
    .toLowerCase()
    .split('')
    .map(char=>CYRILLIC_TO_LATIN[char] ?? char)
    .join('')
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')
    .replace(/-{2,}/g, '-');
}

function plainTextFromHtml(html=''){
  return String(html || '')
    .replace(/<style[\s\S]*?<\/style>/gi, ' ')
    .replace(/<script[\s\S]*?<\/script>/gi, ' ')
    .replace(/<[^>]+>/g, ' ')
    .replace(/&nbsp;/gi, ' ')
    .replace(/\s+/g, ' ')
    .trim();
}

function excerptFromHtml(html='', maxLength=180){
  const text = plainTextFromHtml(html);
  if(text.length <= maxLength) return text;
  return `${text.slice(0, maxLength).trimEnd()}…`;
}

function newsHtmlContent(html=''){
  const raw = String(html || '').trim();
  if(!raw) return '<p>Текст новости пока не заполнен.</p>';
  if(/<[^>]+>/.test(raw)) return raw;
  return raw
    .split(/\n{2,}/)
    .map(chunk=>`<p>${chunk.replace(/\n/g,'<br/>')}</p>`)
    .join('');
}

function newsRouteParam(news){
  if(!news) return '';
  const slug = slugifyText(news.title || '');
  return slug ? `${news.id}-${slug}` : String(news.id);
}

function newsIdFromParam(param=''){
  const value = String(param || '').trim();
  if(!value) return '';
  const [first] = value.split('-');
  return /^\d+$/.test(first) ? first : value;
}

function findNewsByParam(param, list=(window.DATA?.news || [])){
  const id = newsIdFromParam(param);
  return list.find(item=>String(item.id)===String(id)) || null;
}

function raceRouteParam(race){
  if(!race) return '';
  const slug = slugifyText(race.title || '');
  return slug ? `${race.id}-${slug}` : String(race.id);
}

function raceIdFromParam(param=''){
  const value = String(param || '').trim();
  if(!value) return '';
  const [first] = value.split('-');
  return /^\d+$/.test(first) ? first : value;
}

function findRaceByParam(param, list=(window.DATA?.races || [])){
  const id = raceIdFromParam(param);
  return list.find(item=>String(item.id)===String(id)) || null;
}

function SiteAd({ slotId, variant='slot', className='', style={} }){
  const ad = (D.ads && D.ads[slotId]) || {};
  const enabled = !!ad.active && !!(ad.title || ad.text || ad.img || ad.url);
  const showPlaceholder = ad.showPlaceholder !== false;
  const baseClass = variant==='banner' ? 'ad-banner card' : 'ad-slot card';

  if(!enabled){
    if(!showPlaceholder) return null;
    return (
      <div className={`${baseClass} ${className}`.trim()} style={style}>
        {variant==='banner'
          ? <><span className="ad-banner__tag">РЕКЛАМА</span><b>Место для рекламы свободно</b><span>Этот рекламный блок доступен для размещения</span></>
          : 'Место для рекламы свободно'}
      </div>
    );
  }

  const Tag = ad.url ? 'a' : 'div';
  const props = ad.url ? {href:ad.url, target:'_blank', rel:'noreferrer'} : {};

  return (
    <Tag
      {...props}
      className={`${baseClass} site-ad ${className}`.trim()}
      style={{...style, position:'relative', overflow:'hidden', textDecoration:'none'}}
    >
      {ad.img && <img src={ad.img} alt={ad.title || 'Реклама'} style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover'}}/>}
      <div style={{position:'absolute', inset:0, background:ad.img ? 'linear-gradient(135deg, rgba(10,60,80,.82) 0%, rgba(15,94,70,.72) 100%)' : 'transparent'}}></div>
      {variant==='banner' ? (
        <div style={{position:'relative', zIndex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:8}}>
          <span className="ad-banner__tag">{ad.tag || 'РЕКЛАМА'}</span>
          <b>{ad.title || 'Рекламный баннер'}</b>
          {ad.text && <span>{ad.text}</span>}
          {ad.button && <span className="chip" style={{background:'#fff', color:'var(--navy)', border:'none', marginTop:4}}>{ad.button}</span>}
        </div>
      ) : (
        <div style={{position:'relative', zIndex:1, display:'flex', flexDirection:'column', alignItems:'flex-start', gap:6}}>
          <span className="ad-banner__tag">{ad.tag || 'РЕКЛАМА'}</span>
          <b style={{fontSize:18, lineHeight:1.2}}>{ad.title || 'Рекламный блок'}</b>
          {ad.text && <span style={{fontSize:14, fontWeight:600, color:ad.img ? '#EAF7F0' : 'inherit'}}>{ad.text}</span>}
          {ad.button && <span style={{fontSize:13, fontWeight:800, color:ad.img ? '#fff' : 'var(--green-700)'}}>{ad.button}</span>}
        </div>
      )}
    </Tag>
  );
}

/* ---------------- HERO VARIANTS ---------------- */
function HeroVideo({ go }){
  return (
    <section className="hero-video">
      <div className="hero-video__bg">
        <div className="hero-video__glow"></div>
        <img className="hero-video__visual hero-video__visual--left" src="assets/bg_fpv.png" alt="Студенты лаборатории БПЛА" />
        <div className="hero-video__scrim"></div>
      </div>
      <div className="wrap hero-video__inner">
        <span className="chip navy" style={{alignSelf:'flex-start'}}><Icon name="leaf" size={14}/> Лаборатория БПЛА · КРСУ</span>
        <h1 className="hero-video__title">Твой полёт начинается<br/><em>здесь</em></h1>
        <p className="hero-video__sub">Современные курсы по БПЛА: теория, симулятор и практика. Учитесь управлять, снимать, анализировать данные и работать с дронами профессионально.</p>
        <div className="row gap12 wrapf">
          <button className="btn btn-green btn-lg" onClick={()=>go('trial-lesson')}>Пробный урок <Icon name="arrowRight"/></button>
        </div>
        <SiteAd slotId="home_hero" variant="slot" className="ad-slot--hero"/>
      </div>
    </section>
  );
}

function HeroSplit({ go }){
  return (
    <section className="hero-split">
      <div className="wrap hero-split__grid">
        <div className="hero-split__text">
          <span className="eyebrow">Лаборатория БПЛА · КРСУ</span>
          <h1 className="hero-split__title">Твой полёт начинается здесь</h1>
          <p className="hero-split__sub">Курсы по FPV-пилотированию, агродронам, аэрофотосъёмке, рейсингу и научным исследованиям. Учитесь онлайн, тренируйтесь на симуляторе, защищайте аттестацию.</p>
          <div className="row gap12 wrapf">
            <button className="btn btn-primary btn-lg" onClick={()=>go('education')}>Каталог курсов <Icon name="arrowRight"/></button>
            <button className="btn btn-ghost btn-lg" onClick={()=>go('login')}>Войти в кабинет</button>
          </div>
        </div>
        <div className="hero-split__media">
          <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>
          <button className="hero-play"><Icon name="play" size={24}/></button>
          <div className="float-card float-card--a card">
            <div className="row gap12"><div className="ic-badge"><Icon name="grad" size={18}/></div><div><b>Сертификат КРСУ</b><div className="muted" style={{fontSize:13}}>после аттестации</div></div></div>
          </div>
          <div className="float-card float-card--b card">
            <div className="muted" style={{fontSize:12,fontWeight:700}}>ПРОГРЕСС КУРСА</div>
            <div className="row gap12" style={{marginTop:8}}><div className="bar" style={{flex:1}}><i style={{width:'72%'}}></i></div><b style={{fontSize:13}}>72%</b></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroMinimal({ go }){
  return (
    <section className="hero-min">
      <div className="wrap center stack" style={{alignItems:'center',gap:26}}>
        <span className="chip solid"><Icon name="zap" size={14}/> Новый набор · весна 2026</span>
        <h1 className="hero-min__title">Небо — это<br/>учебный класс</h1>
        <p className="hero-min__sub">Лаборатория БПЛА КРСУ обучает управлению дронами, аэросъёмке и инженерии. Онлайн-теория, симулятор и реальная практика.</p>
        <div className="row gap12 wrapf" style={{justifyContent:'center'}}>
          <button className="btn btn-primary btn-lg" onClick={()=>go('education')}>Начать обучение <Icon name="arrowRight"/></button>
          <button className="btn btn-ghost btn-lg" onClick={()=>go('login')}>Личный кабинет</button>
        </div>
        <div className="hero-min__media">
          <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>
          <button className="hero-play"><Icon name="play" size={24}/></button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PROGRAM PICKER ---------------- */
function ProgramPicker({ go }){
  const [active, setActive] = useState(0);
  const tabs = [
    {
      icon:'award', color:'#22c55e',
      label:'Сертификат оператора БПЛА КР',
      sub:'Официальный документ государственного образца',
      features:[
        'Курсы FPV-пилотирования, агродронов и аэрофотосъёмки',
        'Онлайн-обучение + полевые тренировки с инструктором',
        'Итоговая аттестация → гос. сертификат оператора БПЛА',
        'Группы с 18 лет — младшая и старшая',
      ],
      cta:'Выбрать курс',
    },
    {
      icon:'trophy', color:'#f59e0b',
      label:'Спорт',
      sub:'FPV-гонки, лига и федерация дронов',
      features:[
        'Тренировки на симуляторе и реальных трассах',
        'Участие в официальной лиге гонок дронов КР',
        'Членство в Федерации гонок дронов Кыргызстана',
        'Соревнования, рейтинг, сообщество пилотов',
      ],
      cta:'Войти в спорт',
    },
    {
      icon:'target', color:'#6366f1',
      label:'Карьера',
      sub:'Профессия пилота-оператора и инженера БПЛА',
      features:[
        'Агродроны — обработка полей и точное земледелие',
        'Аэрофотосъёмка и видеопроизводство с воздуха',
        'Диплом о квалификации от лаборатории БПЛА КРСУ',
        'Научные исследования и инженерные проекты',
      ],
      cta:'Построить карьеру',
    },
  ];
  const t = tabs[active];
  return (
    <div className="prog-picker">
      <div className="prog-tabs">
        {tabs.map((tab,i)=>(
          <button key={i} className={'prog-tab'+(active===i?' is-active':'')} onClick={()=>setActive(i)}
            style={active===i?{'--tc':tab.color}:{}}>
            <div className="prog-tab__icon" style={active===i?{background:tab.color+'22',color:tab.color}:{}}>
              <Icon name={tab.icon} size={22}/>
            </div>
            <div className="stack" style={{gap:3,textAlign:'left'}}>
              <b style={{fontSize:16}}>{tab.label}</b>
              <span className="muted" style={{fontSize:13}}>{tab.sub}</span>
            </div>
          </button>
        ))}
      </div>
      <div className="prog-panel" key={active} style={{'--tc':t.color}}>
        <ul className="prog-features">
          {t.features.map((f,i)=>(
            <li key={i} className="prog-feature">
              <span className="prog-dot"/>
              {f}
            </li>
          ))}
        </ul>
        <button className="btn prog-cta" style={{background:t.color}} onClick={()=>go('education')}>
          {t.cta} <Icon name="arrowRight"/>
        </button>
      </div>
    </div>
  );
}

/* ---------------- LANDING ---------------- */
const AUTUMN_SCHOOL_IMAGES = Array.from({length:8},(_,index)=>
  `assets/autumn-school/autumn-school-${String(index+1).padStart(2,'0')}.jpg`
);

const AUTUMN_SCHOOL_SLIDES = [
  {
    image:AUTUMN_SCHOOL_IMAGES[0],
    eyebrow:'Новый набор · 12–17 лет',
    title:'Прокачай свою осень в небе',
    text:'Осенняя «Школа дронов» 2026 — проект Лаборатории БПЛА КРСУ для тех, кто хочет не просто смотреть на дроны, а управлять ими.',
  },
  {
    image:AUTUMN_SCHOOL_IMAGES[3],
    eyebrow:'Level 1 · 30% курса',
    title:'Онлайн-база без отрыва от школы',
    text:'Сентябрь и октябрь: симуляторы, устройство и ремонт FPV, теория полёта и правила безопасности.',
  },
  {
    image:AUTUMN_SCHOOL_IMAGES[4],
    eyebrow:'Level 2 · 70% курса',
    title:'Полный газ на Иссык-Куле',
    text:'Во время осенних каникул — 7 дней погружения на базе «Жаштык»: ежедневные полёты, инструкторы и всё необходимое оборудование.',
  },
  {
    image:AUTUMN_SCHOOL_IMAGES[5],
    eyebrow:'Практика',
    title:'Навыки, которые останутся с тобой',
    text:'Уверенное ручное управление, сборка и ремонт дрона, пайка, а также базовые навыки первой помощи.',
  },
  {
    image:AUTUMN_SCHOOL_IMAGES[6],
    eyebrow:'Результат',
    title:'Сертификат КРСУ после экзамена',
    text:'В финале участники проходят итоговую аттестацию и получают официальный сертификат КРСУ установленного образца.',
  },
];

function AutumnSchoolCarousel({ go }){
  const [active,setActive]=useState(0);
  const [paused,setPaused]=useState(false);
  const slide=AUTUMN_SCHOOL_SLIDES[active];
  const move=direction=>setActive(index=>(index+direction+AUTUMN_SCHOOL_SLIDES.length)%AUTUMN_SCHOOL_SLIDES.length);

  useEffect(()=>{
    if(paused || window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
    const timer=setInterval(()=>move(1),6000);
    return ()=>clearInterval(timer);
  },[paused]);

  return <section className="autumn-promo" aria-label="Осенняя школа дронов" onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}>
    <div className="wrap">
      <div className="autumn-carousel card">
        <div className="autumn-carousel__copy" key={`copy-${active}`}>
          <span className="autumn-kicker"><Icon name="drone" size={16}/> {slide.eyebrow}</span>
          <h2>{slide.title}</h2>
          <p>{slide.text}</p>
          <div className="row gap12 wrapf">
            <button className="btn autumn-btn" onClick={()=>go('autumn-school')}>Подробнее <Icon name="arrowRight"/>
            </button>
            <span className="autumn-carousel__season"><Icon name="calendar" size={17}/> Сентябрь — ноябрь 2026</span>
          </div>
        </div>
        <div className="autumn-carousel__media" key={`image-${active}`}>
          <img src={slide.image} alt={slide.title}/>
          <div className="autumn-carousel__counter">{String(active+1).padStart(2,'0')} / {String(AUTUMN_SCHOOL_SLIDES.length).padStart(2,'0')}</div>
        </div>
        <button className="autumn-carousel__arrow autumn-carousel__arrow--prev" onClick={()=>move(-1)} aria-label="Предыдущий слайд"><Icon name="chevLeft"/></button>
        <button className="autumn-carousel__arrow autumn-carousel__arrow--next" onClick={()=>move(1)} aria-label="Следующий слайд"><Icon name="chevRight"/></button>
        <div className="autumn-carousel__dots" role="tablist" aria-label="Слайды осенней школы">
          {AUTUMN_SCHOOL_SLIDES.map((item,index)=><button key={item.title} className={index===active?'is-active':''} onClick={()=>setActive(index)} aria-label={`Слайд ${index+1}`} aria-selected={index===active}></button>)}
        </div>
      </div>
    </div>
  </section>;
}

function AutumnSchoolPage({ go }){
  const galleryAlts=[
    'Анонс Осенней школы дронов 2026',
    'Идеальный баланс учёбы и осенней практики',
    'Комбинированный формат обучения',
    'Программа онлайн-модуля',
    'Лётная практика на Иссык-Куле',
    'Навыки участников Школы дронов',
    'Сертификат КРСУ после аттестации',
    'Осенний набор 2026',
  ];
  return <div className="autumn-page">
    <section className="autumn-hero">
      <div className="wrap autumn-hero__grid">
        <div className="autumn-hero__copy">
          <button className="back autumn-back" onClick={()=>go('home')}><Icon name="chevLeft" size={16}/> На главную</button>
          <span className="autumn-kicker"><Icon name="drone" size={16}/> Осенний набор открыт</span>
          <h1>Прокачай свою осень в небе!</h1>
          <p className="autumn-hero__lead">Осенняя «Школа дронов» 2026 — проект Лаборатории БПЛА КРСУ для подростков от 12 до 17 лет.</p>
          <p>Онлайн-теория без отрыва от школы и интенсивная лётная практика на Иссык-Куле во время осенних каникул.</p>
          <div className="row gap12 wrapf">
            <a className="btn autumn-btn btn-lg" href="/#contacts">Забронировать место <Icon name="arrowRight"/></a>
            <span className="autumn-age"><Icon name="users" size={18}/> 12–17 лет</span>
          </div>
        </div>
        <div className="autumn-hero__media"><img src={AUTUMN_SCHOOL_IMAGES[0]} alt={galleryAlts[0]}/></div>
      </div>
    </section>

    <section className="section autumn-format">
      <div className="wrap">
        <Reveal className="autumn-heading">
          <span className="eyebrow">Формат обучения</span>
          <h2>Два этапа — одно полное погружение</h2>
          <p>Комбинированный формат помогает плавно войти в мир БПЛА и совместить занятия со школьной учёбой.</p>
        </Reveal>
        <div className="autumn-levels">
          <Reveal className="autumn-level card">
            <div className="autumn-level__number">01</div>
            <div><span className="autumn-level__share">30% курса</span><h3>Level 1: онлайн</h3><p className="autumn-level__date">Сентябрь — октябрь 2026</p><p>Начни летать, не выходя из дома. Базовая теория и тренировки в симуляторе готовят к реальным полётам.</p><ul><li>обычные и гоночные дроны в симуляторе;</li><li>устройство и ремонт FPV;</li><li>теория полёта и законы.</li></ul></div>
          </Reveal>
          <Reveal className="autumn-level autumn-level--field card" delay={80}>
            <div className="autumn-level__number">02</div>
            <div><span className="autumn-level__share">70% курса</span><h3>Level 2: Иссык-Куль</h3><p className="autumn-level__date">Ноябрь 2026 · 7 дней</p><p>Полное погружение в лагере КРСУ «Жаштык» во время осенних каникул.</p><ul><li>ежедневные полёты в ручном режиме;</li><li>работа с инструкторами;</li><li>дроны и оборудование предоставляет КРСУ.</li></ul></div>
          </Reveal>
        </div>
      </div>
    </section>

    <section className="section autumn-skills">
      <div className="wrap">
        <Reveal className="autumn-heading autumn-heading--light"><span className="eyebrow">Твои новые скиллы</span><h2>Не просто летать — понимать технику</h2></Reveal>
        <div className="autumn-skills__grid">
          {[
            {icon:'target',title:'Уверенный Manual',text:'Полный контроль над реальным дроном в сложных погодных условиях.'},
            {icon:'wrench',title:'Сборка с нуля',text:'Устройство дронов, пайка, диагностика и ремонт систем.'},
            {icon:'shield',title:'Первая помощь',text:'Отработка реальных навыков спасения и безопасности полётов.'},
          ].map((skill,index)=><Reveal className="autumn-skill" key={skill.title} delay={index*70}><div className="autumn-skill__icon"><Icon name={skill.icon}/></div><h3>{skill.title}</h3><p>{skill.text}</p></Reveal>)}
        </div>
      </div>
    </section>

    <section className="section autumn-result">
      <div className="wrap autumn-result__grid">
        <Reveal className="autumn-result__copy"><span className="eyebrow">Результат обучения</span><h2>Главный лут сезона</h2><p>Сдаёшь итоговый экзамен и получаешь официальный сертификат КРСУ установленного образца.</p><div className="autumn-result__path"><span>Экзамен</span><Icon name="arrowRight"/><span>Сертификат КРСУ</span></div></Reveal>
        <Reveal className="autumn-result__image" delay={80}><img src={AUTUMN_SCHOOL_IMAGES[6]} alt={galleryAlts[6]} loading="lazy"/></Reveal>
      </div>
    </section>

    <section className="section autumn-gallery">
      <div className="wrap">
        <Reveal className="autumn-heading"><span className="eyebrow">Программа в кадрах</span><h2>Осенняя миссия от старта до сертификата</h2></Reveal>
        <div className="autumn-gallery__grid">{AUTUMN_SCHOOL_IMAGES.map((image,index)=><Reveal key={image} delay={(index%4)*50}><img src={image} alt={galleryAlts[index]} loading="lazy"/></Reveal>)}</div>
      </div>
    </section>

    <section className="wrap autumn-final">
      <Reveal className="autumn-final__box">
        <div><span className="autumn-kicker">Места в эскадрилью ограничены</span><h2>Готов собрать и запустить свой первый дрон этой осенью?</h2><p>Старт онлайн-модуля — сентябрь 2026. Практика на Иссык-Куле — ноябрь 2026.</p></div>
        <a className="btn autumn-btn btn-lg" href="/#contacts">Забронировать место <Icon name="arrowRight"/></a>
      </Reveal>
    </section>
  </div>;
}

function Landing({ go, heroVariant }){
  const Hero = heroVariant==='split'?HeroSplit : heroVariant==='minimal'?HeroMinimal : HeroVideo;
  const steps = [
    { n:'01', t:'Пробный урок', d:'Занятия проходят полностью онлайн — подключайтесь из любой точки мира.' },
    { n:'02', t:'Выбираете курс', d:'Каталог программ под вашу цель — от хобби до профессии.' },
    { n:'03', t:'Оплачиваете', d:'Обучение — по реквизитам КРСУ, гонки — по отдельному QR-коду.' },
    { n:'04', t:'Учитесь онлайн и практикуетесь', d:'Видео, материалы, симулятор и полевые тренировки под наставничеством инструкторов.' },
    { n:'05', t:'Получаете сертификат оператора БПЛА Кыргызской Республики', d:'После итоговой аттестации выдаётся официальный документ государственного образца.' },
    { n:'06', t:'Диплом о присвоении квалификации', d:'Подтверждает уровень профессиональной подготовки выпускника лаборатории БПЛА КРСУ.' },
    { n:'07', t:'Становитесь членом федерации гонок дронов', d:'Открывается доступ к официальным соревнованиям, лиге и сообществу пилотов Кыргызстана.' },
  ];
  const mediaTeasers = (D.media || []).filter(item=>item.active).slice(0,3);
  const nearestRace = (D.races || [])[0];
  const nearestRaceTitle = nearestRace ? `${nearestRace.title} — ${String(nearestRace.status || '').toLowerCase()}` : 'Ближайшая гонка дронов';
  return (
    <div>
      <Hero go={go} />
      <AutumnSchoolCarousel go={go}/>
      {/* directions */}
      <section className="section">
        <div className="wrap">
          <Reveal className="stack center" style={{alignItems:'center',gap:14,marginBottom:48}}>
            <span className="eyebrow">Направления обучения</span>
            <h2 style={{fontSize:38,maxWidth:680}}>Программы обучения — для неба, земли и науки</h2>
            <p className="muted" style={{fontSize:16,maxWidth:520,textAlign:'center'}}>Выберите, что вам подходит</p>
          </Reveal>
          <Reveal>
            <ProgramPicker go={go}/>
          </Reveal>
        </div>
      </section>

      {/* media gallery teaser */}
      <section className="section" style={{background:'var(--bg-2)'}}>
        <div className="wrap">
          <div className="spread wrapf" style={{marginBottom:40,gap:16}}>
            <div className="stack" style={{gap:12}}>
              <span className="eyebrow">Медиа-галерея</span>
              <h2 style={{fontSize:38}}>Начните с того, что вдохновляет</h2>
            </div>
            <button className="btn btn-ghost" onClick={()=>go('media')}>Перейти в галерею <Icon name="arrowRight"/></button>
          </div>
          <div className="grid g3 news-teaser__grid">
            {mediaTeasers.map((m,i)=>(
              <Reveal key={m.id} delay={i*70}>
                <button className="media-card card" onClick={()=>go('media')}>
                  <div className="media-card__video">
                    {m.kind==='image'
                      ? <img src={m.src} alt={m.title} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
                      : <video src={m.src} poster={m.poster||''} muted playsInline preload="metadata"></video>}
                  </div>
                  <div className="media-card__body">
                    <span className="badge navy">{m.cat}</span>
                    <b>{m.title}</b>
                  </div>
                </button>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* how it works */}
      <section className="section">
        <div className="wrap">
          <Reveal className="stack center" style={{alignItems:'center',gap:14,marginBottom:52}}>
            <span className="eyebrow">Как это работает</span>
            <h2 style={{fontSize:38,maxWidth:620}}>Путь от заявки до сертификата</h2>
          </Reveal>
          <Reveal>
            <SiteAd slotId="home_steps_top" variant="banner" style={{marginBottom:28}}/>
          </Reveal>
          <div className="grid g4 steps">
            {steps.map((s,i)=>(
              <Reveal key={s.n} delay={i*60}>
                <div className="step">
                  <div className="step__n">{s.n}</div>
                  <div>
                    <b style={{fontSize:15}}>{s.t}</b>
                    <p className="muted" style={{fontSize:13.5,margin:'4px 0 0'}}>{s.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal>
            <SiteAd slotId="home_steps_bottom" variant="banner" style={{marginTop:28}}/>
          </Reveal>
        </div>
      </section>

      {/* why us band */}
      <section className="section why">
        <div className="wrap why__grid">
          <Reveal className="stack" style={{gap:18}}>
            <span className="eyebrow" style={{color:'var(--green)'}}>Почему КРСУ</span>
            <h2 style={{fontSize:36,color:'#fff'}}>Учебная база, практика и экспертиза в одном месте</h2>
            <p style={{color:'#C5D6DC',fontSize:17,maxWidth:520}}>Лаборатория БПЛА Кыргызско-Российского Славянского университета объединяет преподавателей, инженеров и действующих пилотов. Симуляторный зал, парк учебных дронов и собственная площадка для полётов.</p>
            <div className="row gap12 wrapf" style={{marginTop:8}}>
              <button className="btn btn-green btn-lg" onClick={()=>go('trial-lesson')}>Пробный урок <Icon name="arrowRight"/></button>
              <button className="btn btn-lg why__btn" onClick={()=>go('contacts')}>Контакты лаборатории</button>
            </div>
          </Reveal>
          <div className="grid g2 why__cards" style={{gap:18}}>
            {[
              { i:'shield', t:'Безопасность', d:'Регламенты и разбор аварийных ситуаций' },
              { i:'users', t:'Менторы', d:'Действующие пилоты и инженеры' },
              { i:'layers', t:'Симулятор', d:'Тренажёрный зал для отработки' },
              { i:'award', t:'Сертификат', d:'Аттестация и документ КРСУ' },
            ].map((f,i)=>(
              <Reveal key={f.t} delay={i*60}>
                <div className="why__card">
                  <div className="ic-badge ic-badge--dark"><Icon name={f.i} size={20}/></div>
                  <b style={{color:'#fff',fontSize:17}}>{f.t}</b>
                  <span style={{color:'#A9BFC6',fontSize:14}}>{f.d}</span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* racing teaser */}
      <section className="section">
        <div className="wrap race-teaser card">
          <div className="race-teaser__media">
            <img src="assets/bg_new.png" alt="Дрон-рейсинг" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}} />
          </div>
          <div className="race-teaser__text stack" style={{gap:16}}>
            <span className="eyebrow">Гонки на дронах</span>
            <h2 style={{fontSize:32}}>{nearestRaceTitle}</h2>
            <p className="muted" style={{fontSize:16}}>Анонсы, расписание квалификаций и трансляции — на наших каналах. Вся основная информация о гонках публикуется в социальных сетях лаборатории.</p>
            <div className="row gap12 wrapf">
              <button className="btn btn-primary" onClick={()=>nearestRace ? go('race-item', raceRouteParam(nearestRace)) : go('races')}>Зарегистрироваться <Icon name="arrowRight"/></button>
              <a className="btn btn-ghost" href="https://youtube.com/@krsubpla?si=CuNgUznrsXyaAdlw" target="_blank" rel="noreferrer"><Icon name="youtube"/> YouTube</a>
              <a className="btn btn-ghost" href="https://www.instagram.com/krsu.bpla" target="_blank" rel="noreferrer"><Icon name="instagram"/> Instagram</a>
            </div>
          </div>
        </div>
      </section>

      {/* news teaser */}
      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <div className="spread wrapf" style={{marginBottom:32,gap:16}}>
            <h2 style={{fontSize:32}}>Единое окно новостей</h2>
            <button className="btn btn-ghost" onClick={()=>go('news')}>Все новости <Icon name="arrowRight"/></button>
          </div>
          <div className="grid g3">
            {D.news.slice(0,3).map((n,i)=>(<Reveal key={n.id} delay={i*70}><NewsCard n={n} go={go}/></Reveal>))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="wrap" style={{paddingBottom:92}}>
        <Reveal className="cta">
          <div className="stack" style={{gap:12}}>
            <h2 style={{fontSize:36,color:'#fff',maxWidth:560}}>Готовы поднять свой первый дрон в воздух?</h2>
            <p style={{color:'#C5D6DC',fontSize:17}}>Приходите на пробное занятие и познакомьтесь с обучением.</p>
          </div>
          <button className="btn btn-green btn-lg" onClick={()=>go('trial-lesson')}>Пройти пробный урок <Icon name="arrowRight"/></button>
        </Reveal>
      </section>
    </div>
  );
}

/* ---------------- shared cards ---------------- */
function CourseCard({ c, go, enrollment=null }){
  const purchased=enrollment?.access==='open';
  const pending=enrollment?.access==='pending';
  return (
    <button className="course-card card" onClick={()=>go('course', c.id)}>
      <div className="course-card__top" style={{background:c.color}}>
        {c.img
          ? <img src={c.img} alt={c.title} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
          : <Icon name={c.icon} size={30} style={{color:'#fff'}}/>}
        <div className="course-card__badges">
          <span className="course-card__lvl">{c.level}</span>
          {purchased&&<span className="badge green course-card__access"><Icon name="checkCircle" size={14}/> Курс куплен</span>}
          {!purchased&&pending&&<span className="badge amber course-card__access"><Icon name="clock" size={14}/> Оплата проверяется</span>}
        </div>
        {!c.img && <div className="course-card__mark"><Icon name={c.icon} size={120}/></div>}
      </div>
      <div className="course-card__body">
        <div className="row gap8 wrapf" style={{marginBottom:10}}>
          <span className="chip"><Icon name="layers" size={13}/>{c.cat}</span>
          <span className="chip"><Icon name="clock" size={13}/>{c.duration}</span>
        </div>
        <b style={{fontSize:18.5,color:'var(--ink)',display:'block',marginBottom:8}}>{c.title}</b>
        <p className="muted" style={{fontSize:14.5,marginBottom:16}}>{c.short}</p>
        <div className="spread">
          <div className="row gap8">
            <span className="muted" style={{fontSize:13}}>{c.students} студентов</span>
          </div>
          {purchased
            ? <b style={{color:'var(--green-700)',fontSize:15}}>Перейти к обучению</b>
            : pending
              ? <b style={{color:'#9A6700',fontSize:14}}>Ожидает подтверждения</b>
              : <b style={{color:'var(--navy)',fontSize:17}}>{D.fmt(c.price)} сом</b>}
        </div>
      </div>
    </button>
  );
}

function NewsCard({ n, go }){
  const img = n.img || 'assets/pic_bg_new.png';
  return (
    <article className="news-card card" onClick={()=>go && go('news-item', newsRouteParam(n))} style={{cursor:go ? 'pointer' : 'default'}}>
      <div className="news-card__media"><img src={img} alt={n.title} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/></div>
      <div className="news-card__body">
        <div className="row gap8" style={{marginBottom:10}}>
          <span className={`badge ${n.tag}`}>{n.cat}</span>
          <span className="muted" style={{fontSize:12.5}}>{n.date}</span>
        </div>
        <b style={{fontSize:16.5,color:'var(--ink)',display:'block',marginBottom:8,lineHeight:1.3}}>{n.title}</b>
        <p className="muted" style={{fontSize:14}}>{excerptFromHtml(n.text, 150)}</p>
        <div className="row gap8 news-card__source" style={{color:'var(--green-700)',fontWeight:700,fontSize:13}}>
          <Icon name="globe" size={14}/> {n.src}
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Landing, CourseCard, NewsCard, SiteAd, plainTextFromHtml, excerptFromHtml, newsHtmlContent, slugifyText, newsRouteParam, newsIdFromParam, findNewsByParam, raceRouteParam, raceIdFromParam, findRaceByParam });