// News / Blog pages
const { useState: p4S, useMemo: p4M } = React;

// formatted RU date
function newsDate(s) {
  if (!s) return '';
  const months = ['января','февраля','марта','апреля','мая','июня','июля','августа','сентября','октября','ноября','декабря'];
  const d = new Date((s + '').replace(' ', 'T'));
  if (isNaN(d)) return s;
  return `${d.getDate()} ${months[d.getMonth()]} ${d.getFullYear()}`;
}

// ============ NEWS LIST ============
const NewsListPage = ({ onBook }) => {
  const [cat, setCat] = p4S('Все');

  const categories = p4M(() => {
    const set = new Set();
    DATA.news.forEach(n => n.category && set.add(n.category));
    return ['Все', ...Array.from(set)];
  }, []);

  const list = p4M(() => {
    const all = DATA.news.slice().sort((a, b) => (b.published || '').localeCompare(a.published || ''));
    return cat === 'Все' ? all : all.filter(n => n.category === cat);
  }, [cat]);

  const featured = list[0];
  const rest = list.slice(1);

  return (
    <>
      <PageHero
        eyebrow="Новости и статьи"
        title="Новости центра"
        sub="Новости НАЦЗДРАВ, полезные материалы о здоровье и советы наших врачей."
        breadcrumbs={[
          { label: 'Главная', href: 'index.html' },
          { label: 'Новости' },
        ]}
      />

      <section className="sec" style={{ paddingTop: 0 }}>
        <div className="container">
          {DATA.news.length === 0 ? (
            <div className="dc-empty">
              <Icon name="paper" size={36} />
              <h3>Пока нет публикаций</h3>
              <p>Скоро здесь появятся новости и статьи центра</p>
            </div>
          ) : (
            <>
              {categories.length > 2 && (
                <div className="nw-filter">
                  {categories.map(c => (
                    <button key={c} className={`nw-filter__btn ${cat === c ? 'is-active' : ''}`} onClick={() => setCat(c)}>{c}</button>
                  ))}
                </div>
              )}

              {featured && (
                <a href={`article.html?id=${featured.id}`} className="nw-feat">
                  <div className="nw-feat__media">
                    {featured.cover
                      ? <img src={featured.cover} alt={featured.title} />
                      : <ImagePlaceholder label="обложка статьи" style={{ height: '100%', borderRadius: 0 }} />}
                  </div>
                  <div className="nw-feat__body">
                    <div className="nw-meta">
                      <span className="nw-cat">{featured.category}</span>
                      <span className="nw-date">{newsDate(featured.published)}</span>
                    </div>
                    <h2 className="nw-feat__title">{featured.title}</h2>
                    <p className="nw-feat__excerpt">{featured.excerpt}</p>
                    <span className="nw-readmore">Читать статью <Icon name="arrowR" size={15} /></span>
                  </div>
                </a>
              )}

              {rest.length > 0 && (
                <div className="nw-grid">
                  {rest.map(n => (
                    <a key={n.id} href={`article.html?id=${n.id}`} className="nw-card">
                      <div className="nw-card__media">
                        {n.cover
                          ? <img src={n.cover} alt={n.title} />
                          : <ImagePlaceholder label="обложка" style={{ height: '100%', borderRadius: 0 }} />}
                      </div>
                      <div className="nw-card__body">
                        <div className="nw-meta">
                          <span className="nw-cat">{n.category}</span>
                          <span className="nw-date">{newsDate(n.published)}</span>
                        </div>
                        <h3 className="nw-card__title">{n.title}</h3>
                        <p className="nw-card__excerpt">{n.excerpt}</p>
                      </div>
                    </a>
                  ))}
                </div>
              )}
            </>
          )}
        </div>
      </section>

      <NewsStyles />
    </>
  );
};

// ============ ARTICLE DETAIL ============
const ArticlePage = ({ articleId, onBook }) => {
  const article = p4M(() => DATA.news.find(n => n.id === articleId), [articleId]);

  React.useEffect(() => {
    if (article) {
      document.title = article.title + ' — НАЦЗДРАВ';
      const m = document.querySelector('meta[name="description"]') || (() => {
        const el = document.createElement('meta'); el.setAttribute('name', 'description'); document.head.appendChild(el); return el;
      })();
      if (article.excerpt) m.setAttribute('content', article.excerpt);
    }
  }, [article]);

  if (!article) {
    return (
      <section className="sec">
        <div className="container">
          <div className="dc-empty">
            <Icon name="paper" size={36} />
            <h3>Статья не найдена</h3>
            <p>Возможно, она была удалена или перемещена</p>
            <a className="btn btn-secondary" href="news.html">Ко всем новостям</a>
          </div>
        </div>
        <NewsStyles />
      </section>
    );
  }

  const paragraphs = (article.body || '').split(/\n{2,}/).map(s => s.trim()).filter(Boolean);
  const related = DATA.news.filter(n => n.id !== article.id && n.category === article.category).slice(0, 3);
  const fallback = DATA.news.filter(n => n.id !== article.id).slice(0, 3);
  const more = (related.length ? related : fallback);

  return (
    <>
      <article className="ar">
        <div className="container ar__container">
          <Breadcrumbs items={[
            { label: 'Главная', href: 'index.html' },
            { label: 'Новости', href: 'news.html' },
            { label: article.title },
          ]} />

          <div className="ar__head">
            <div className="nw-meta">
              <span className="nw-cat">{article.category}</span>
              <span className="nw-date">{newsDate(article.published)}</span>
            </div>
            <h1 className="ar__title">{article.title}</h1>
            {article.excerpt && <p className="ar__lead">{article.excerpt}</p>}
            {article.author && (
              <div className="ar__author">
                <span className="ar__author-avatar">{(article.author[0] || 'Н')}</span>
                <span>{article.author}</span>
              </div>
            )}
          </div>

          <div className="ar__cover">
            {article.cover
              ? <img src={article.cover} alt={article.title} />
              : <ImagePlaceholder label="обложка статьи" style={{ height: '100%', borderRadius: 'var(--r-lg)' }} />}
          </div>

          <div className="ar__body">
            {paragraphs.length
              ? paragraphs.map((p, i) => <p key={i}>{p}</p>)
              : <p className="ar__empty">Текст статьи появится позже.</p>}
          </div>

          <div className="ar__cta">
            <div>
              <h3>Нужна консультация специалиста?</h3>
              <p>Запишитесь на приём — наши врачи помогут разобраться в вашей ситуации.</p>
            </div>
            <button className="btn btn-primary btn-lg" onClick={onBook}>Записаться на приём</button>
          </div>
        </div>
      </article>

      {more.length > 0 && (
        <section className="sec sec-soft">
          <div className="container">
            <h2 className="ar__more-title">Читайте также</h2>
            <div className="nw-grid">
              {more.map(n => (
                <a key={n.id} href={`article.html?id=${n.id}`} className="nw-card">
                  <div className="nw-card__media">
                    {n.cover
                      ? <img src={n.cover} alt={n.title} />
                      : <ImagePlaceholder label="обложка" style={{ height: '100%', borderRadius: 0 }} />}
                  </div>
                  <div className="nw-card__body">
                    <div className="nw-meta">
                      <span className="nw-cat">{n.category}</span>
                      <span className="nw-date">{newsDate(n.published)}</span>
                    </div>
                    <h3 className="nw-card__title">{n.title}</h3>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </section>
      )}

      <NewsStyles />
    </>
  );
};

// ============ STYLES ============
const NewsStyles = () => (
  <style>{`
    .nw-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
    .nw-filter__btn { padding: 8px 16px; border-radius: var(--r-full); background: #fff; border: 1px solid var(--border-strong); font-size: 14px; font-weight: 500; color: var(--ink-700); transition: border-color .15s, background .15s, color .15s; }
    .nw-filter__btn:hover { border-color: var(--navy-700); }
    .nw-filter__btn.is-active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

    .nw-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; margin-bottom: 12px; }
    .nw-cat { color: var(--navy-700); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; }
    .nw-date { color: var(--ink-500); }

    /* Featured */
    .nw-feat { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 32px; transition: border-color .2s, box-shadow .2s; }
    .nw-feat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
    .nw-feat__media { min-height: 280px; }
    .nw-feat__media img { width: 100%; height: 100%; object-fit: cover; }
    .nw-feat__body { padding: 36px 38px; display: flex; flex-direction: column; justify-content: center; }
    .nw-feat__title { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; margin-bottom: 14px; }
    .nw-feat__excerpt { font-size: 16px; color: var(--ink-700); line-height: 1.55; margin-bottom: 22px; }
    .nw-readmore { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--navy-700); }
    .nw-feat:hover .nw-readmore { gap: 11px; }

    /* Grid cards */
    .nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .nw-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, box-shadow .2s, transform .2s; }
    .nw-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); }
    .nw-card__media { aspect-ratio: 16/10; }
    .nw-card__media img { width: 100%; height: 100%; object-fit: cover; }
    .nw-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
    .nw-card__title { font-size: 18px; line-height: 1.22; margin-bottom: 10px; }
    .nw-card__excerpt { font-size: 14px; color: var(--ink-500); line-height: 1.5; }

    /* Article */
    .ar { padding: 8px 0 56px; }
    .ar__container { max-width: 760px; }
    .ar__head { margin: 22px 0 28px; }
    .ar__title { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.025em; }
    .ar__lead { font-size: 19px; color: var(--ink-700); line-height: 1.5; margin-top: 18px; }
    .ar__author { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14.5px; font-weight: 500; color: var(--ink-900); }
    .ar__author-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--navy-800); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
    .ar__cover { aspect-ratio: 16/8.5; margin-bottom: 32px; }
    .ar__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); }
    .ar__body { font-size: 17px; line-height: 1.7; color: var(--ink-800, var(--ink-900)); }
    .ar__body p { margin-bottom: 20px; color: var(--ink-700); }
    .ar__empty { color: var(--ink-500); font-style: italic; }
    .ar__cta { margin-top: 40px; padding: 28px 32px; background: var(--navy-100); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
    .ar__cta h3 { font-size: 20px; margin-bottom: 6px; }
    .ar__cta p { font-size: 14.5px; color: var(--ink-700); max-width: 420px; }
    .ar__more-title { font-size: 26px; margin-bottom: 24px; }

    @media (max-width: 880px) {
      .nw-feat { grid-template-columns: 1fr; }
      .nw-feat__media { min-height: 220px; }
      .nw-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px) {
      .nw-grid { grid-template-columns: 1fr; }
      .ar__cta { flex-direction: column; align-items: flex-start; }
    }
  `}</style>
);

Object.assign(window, { NewsListPage, ArticlePage });

// ============ CONTACTS PAGE (восстановлена) ============
const ContactsPage = ({ onBook }) => {
  const b = DATA.brand;
  const [form, setForm] = p4S({ name: '', phone: '', message: '' });
  const [sent, setSent] = p4S(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canSend = form.name.trim() && form.phone.replace(/\D/g, '').length >= 10;

  const submit = (e) => {
    e.preventDefault();
    if (!canSend) return;
    if (window.NZ_API) {
      NZ_API.createAppointment({
        name: form.name, phone: form.phone,
        comment: form.message, direction: 'Обращение со страницы контактов',
      }).catch(() => {});
    }
    setSent(true);
  };

  const cards = [
    { icon: 'phone', label: 'Телефон', value: b.phone, href: `tel:${b.phoneRaw}`, hint: 'Звонок бесплатный' },
    { icon: 'pin', label: 'Адрес', value: b.address, hint: 'Парковка для пациентов' },
    { icon: 'clock', label: 'Часы работы', value: b.hours, hint: 'Без выходных' },
    { icon: 'mail', label: 'Email', value: b.email, href: `mailto:${b.email}`, hint: 'Ответим в течение дня' },
  ];

  return (
    <>
      <PageHero
        eyebrow="Контакты"
        title="Как нас найти"
        sub="Запишитесь на приём по телефону, через форму или приезжайте — мы всегда рады помочь."
        breadcrumbs={[
          { label: 'Главная', href: 'index.html' },
          { label: 'Контакты' },
        ]}
      />

      <section className="sec" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="ct-cards">
            {cards.map((c, i) => (
              <div key={i} className="ct-card">
                <div className="ct-card__icon"><Icon name={c.icon} size={22} /></div>
                <div className="ct-card__label">{c.label}</div>
                {c.href
                  ? <a className="ct-card__value" href={c.href}>{c.value}</a>
                  : <div className="ct-card__value">{c.value}</div>}
                <div className="ct-card__hint">{c.hint}</div>
              </div>
            ))}
          </div>

          <div className="ct-main">
            <div className="ct-map">
              <ImagePlaceholder label="карта проезда — Яндекс.Карты" style={{ height: '100%', borderRadius: 'var(--r-lg)' }} />
              <a className="ct-map__btn btn btn-secondary" href="https://yandex.ru/maps" target="_blank" rel="noopener noreferrer">
                <Icon name="pin" size={16} /> Открыть в Яндекс.Картах
              </a>
            </div>

            <div className="ct-form-wrap">
              {sent ? (
                <div className="ct-form ct-form--ok">
                  <div className="ct-ok__icon"><Icon name="check" size={30} strokeWidth={2} /></div>
                  <h3>Спасибо, {form.name.split(' ')[0]}!</h3>
                  <p>Мы получили ваше обращение и перезвоним на {form.phone} в ближайшее время.</p>
                  <button className="btn btn-secondary" onClick={() => { setSent(false); setForm({ name: '', phone: '', message: '' }); }}>Отправить ещё</button>
                </div>
              ) : (
                <form className="ct-form" onSubmit={submit}>
                  <h3 className="ct-form__title">Обратный звонок</h3>
                  <p className="ct-form__sub">Оставьте контакты — администратор перезвонит и поможет записаться.</p>
                  <div className="field">
                    <label>Ваше имя</label>
                    <input type="text" placeholder="Имя Фамилия" value={form.name} onChange={e => set('name', e.target.value)} required />
                  </div>
                  <div className="field">
                    <label>Телефон</label>
                    <input type="tel" placeholder="+7 (___) ___-__-__" value={form.phone} onChange={e => set('phone', e.target.value)} required />
                  </div>
                  <div className="field">
                    <label>Сообщение <span style={{ color: 'var(--ink-400)', fontWeight: 400 }}>(необязательно)</span></label>
                    <textarea rows={3} placeholder="Кратко опишите вопрос" value={form.message} onChange={e => set('message', e.target.value)} />
                  </div>
                  <button type="submit" className="btn btn-primary btn-lg" disabled={!canSend} style={{ width: '100%' }}>Жду звонка</button>
                  <p className="ct-form__policy">Нажимая кнопку, вы соглашаетесь с обработкой персональных данных</p>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      <style>{`
        .ct-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
        .ct-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; }
        .ct-card__icon { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--navy-100); color: var(--navy-700); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
        .ct-card__label { font-size: 12.5px; color: var(--ink-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
        .ct-card__value { font-size: 16px; font-weight: 600; color: var(--ink-900); display: block; line-height: 1.35; }
        a.ct-card__value:hover { color: var(--navy-700); }
        .ct-card__hint { font-size: 13px; color: var(--ink-500); margin-top: 6px; }

        .ct-main { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
        .ct-map { position: relative; min-height: 440px; }
        .ct-map__btn { position: absolute; left: 20px; bottom: 20px; box-shadow: var(--shadow-md); }
        .ct-form-wrap { display: flex; }
        .ct-form { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; width: 100%; }
        .ct-form__title { font-size: 22px; }
        .ct-form__sub { font-size: 14.5px; color: var(--ink-500); margin-bottom: 6px; line-height: 1.5; }
        .ct-form__policy { font-size: 12px; color: var(--ink-400); text-align: center; line-height: 1.45; }
        .ct-form--ok { align-items: center; text-align: center; justify-content: center; gap: 12px; }
        .ct-ok__icon { width: 60px; height: 60px; border-radius: 999px; background: oklch(0.62 0.13 160 / 0.14); color: var(--success); display: flex; align-items: center; justify-content: center; }
        .ct-form--ok p { color: var(--ink-700); max-width: 320px; line-height: 1.5; }

        @media (max-width: 900px) {
          .ct-cards { grid-template-columns: repeat(2, 1fr); }
          .ct-main { grid-template-columns: 1fr; }
          .ct-map { min-height: 320px; }
        }
        @media (max-width: 520px) { .ct-cards { grid-template-columns: 1fr; } }
      `}</style>
    </>
  );
};

Object.assign(window, { ContactsPage });
