// ─── オンラインクリニック 結 お知らせ 共通コンポーネント ───
// データは news/news.js（window.NEWS_ITEMS）が単一ソース。
//
// TOPページ（index.html）: news.js → shared.jsx の順に読み込み、<NewsTopSection /> を置く。
//   Icon は index.html 側の定義を使う。
// 詳細ページ（news/<id>.html）: news.js → ../lp/shared.jsx → ../doctors/shared.jsx → shared.jsx
//   の順に読み込み、<NewsDetailApp id="..." /> するだけ。
//   ヘッダは医師ページと同じ DoctorNav（TOPの Nav の移植）、Icon / OnkriLogo は ../lp/shared.jsx を使う。
//
// 文言はすべて React の子要素として描画する（HTML文字列は使わない）。

const NEWS_EXTERNAL_LINK = { target: '_blank', rel: 'noopener noreferrer' };

const getNewsItems = () => (typeof window !== 'undefined' && window.NEWS_ITEMS) || [];

// ─── TOP：お知らせカード（ヒーロー直後） ───
const NewsTopSection = () => {
  const items = getNewsItems().filter((n) => n.status === 'published' && n.topVisible === true);
  if (items.length === 0) return null;

  return (
    <section id="news" className="news-top" aria-label="お知らせ">
      <div className="news-top__inner">
        <div className="news-top__head reveal">
          <div className="section-label">
            <Icon name="calendar" size={12} color="var(--blue-700)" />
            NEWS
          </div>
          <h2 className="news-top__title">お知らせ</h2>
        </div>
        {items.map((n) =>
        <article key={n.id} className="news-card reveal">
            <div className="news-card__meta">
              <span className="news-card__label">{n.category}</span>
              {n.eventDate &&
            <span className="news-card__date">
                  <Icon name="calendar" size={15} color="currentColor" />
                  開催日 {n.eventDate}
                </span>
            }
            </div>
            <h3 className="news-card__title">
              {/* カード全体のクリック領域は CSS（.news-card__link::after）で広げる。リンクはこの1つだけ */}
              <a href={n.href} className="news-card__link">{n.title}</a>
            </h3>
            <p className="news-card__excerpt">{n.excerpt}</p>
            <span className="news-card__more" aria-hidden="true">
              詳細を見る
              <Icon name="arrow" size={16} color="currentColor" />
            </span>
          </article>
        )}
      </div>
    </section>);
};

// ─── 詳細ページ：本文 ───
const NewsArticle = ({ item: n }) => (
  <article className="news-article">
    <header className="news-article__head">
      <div className="news-card__meta">
        <span className="news-card__label">{n.category}</span>
        {n.eventDate &&
        <span className="news-card__date">
            <Icon name="calendar" size={15} color="currentColor" />
            開催日 {n.eventDate}
          </span>
        }
      </div>
      <h1 className="news-article__title">{n.title}</h1>
    </header>

    <div className="news-article__body">
      {(n.body || []).map((t, i) => <p key={i}>{t}</p>)}
    </div>

    {n.booth && n.booth.length > 0 &&
    <section className="news-article__block">
        <h2 className="news-article__h2">{n.boothTitle}</h2>
        <ul className="news-booth">
          {n.booth.map((b) =>
        <li key={b.label} className="news-booth__item">
              <span className="news-booth__label">{b.label}</span>
              <span className="news-booth__text">{b.text}</span>
            </li>
        )}
        </ul>
      </section>
    }

    {n.closing && <p className="news-article__closing">{n.closing}</p>}

    {n.guide && n.guide.length > 0 &&
    <p className="news-article__guide">
        {n.guide.map((g, i) => g.href ?
      <a key={i} href={g.href} className="news-article__inlink">{g.text}</a> :
      <React.Fragment key={i}>{g.text}</React.Fragment>
      )}
      </p>
    }

    {n.overview && n.overview.length > 0 &&
    <section className="news-article__block">
        <h2 className="news-article__h2">{n.overviewTitle}</h2>
        <dl className="news-overview">
          {n.overview.map((o) =>
        <div key={o.label} className="news-overview__row">
              <dt>{o.label}</dt>
              <dd>{o.text}</dd>
            </div>
        )}
          {n.registration &&
        <div className="news-overview__row">
              <dt>{n.registration.title || '来場登録'}</dt>
              <dd>
                <a href={n.registration.url} className="news-overview__link" {...NEWS_EXTERNAL_LINK}>
                  {n.registration.label}
                  <span className="news-overview__ext" aria-hidden="true">↗</span>
                </a>
                {n.registration.note && <p className="news-overview__note">{n.registration.note}</p>}
              </dd>
            </div>
        }
        </dl>
      </section>
    }
  </article>
);

// ─── 詳細ページ：フッター ───
// 医師ページの DoctorFooter と同じ内容・見た目。DOCTOR_FOOTER_MENU の医師リンクは
// doctors/ 配下からの相対（'nakagami.html' 等）なので、news/ 配下から辿れるよう '../doctors/' を補う。
const NEWS_FOOTER_MENU = (typeof DOCTOR_FOOTER_MENU !== 'undefined' ? DOCTOR_FOOTER_MENU : []).map((g) => ({
  ...g,
  links: g.links.map((l) => l.external || /^(\.\.\/|https?:)/.test(l.href) ? l : { ...l, href: '../doctors/' + l.href })
}));

const NewsFooter = () => (
  <footer style={{ background: 'var(--blue-950)', color: 'white', padding: '60px 24px 32px' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div className="site-footer__grid">
        <div className="site-footer__brand">
          <a href="../" style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16, color: 'inherit', textDecoration: 'none' }}>
            <OnkriLogo size={36} />
            <span style={{ fontWeight: 900, fontSize: 18, letterSpacing: '-0.02em' }}>オンラインクリニック 結</span>
          </a>
          <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.8, maxWidth: 280 }}>
            <span style={{ display: 'inline-block' }}>患者様のライフスタイルに寄り添う、</span>
            <span style={{ display: 'inline-block' }}>新時代のオンライン診療を提供します。</span>
          </p>
        </div>
        {NEWS_FOOTER_MENU.map((group) => <DoctorFooterGroup key={group.title} group={group} />)}
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
        <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.35)' }}>© 2026 オンラインクリニック 結. All rights reserved.</span>
      </div>
    </div>
  </footer>
);

// ─── 詳細ページ本体 ───
const NewsDetailApp = ({ id }) => {
  const item = getNewsItems().find((n) => n.id === id && n.status === 'published');

  return (
    <>
      <DoctorNav />
      <main className="news-page">
        <div className="news-page__inner">
          <nav className="news-breadcrumb" aria-label="パンくずリスト">
            <a href="../index.html">トップ</a>
            <span aria-hidden="true">›</span>
            <span>お知らせ</span>
          </nav>

          {item ?
          <NewsArticle item={item} /> :

          <div className="news-error" role="alert">
              <p>お知らせが見つかりませんでした（ID: {id}）。</p>
              <p>掲載が終了したか、URLが変わった可能性があります。</p>
            </div>
          }

          <div className="news-back">
            {item && item.cta &&
            <a href={item.cta.href} className="btn-primary">
                {item.cta.label}
                <Icon name="arrow" size={16} color="currentColor" />
              </a>
            }
            <a href="../index.html" className="btn-outline">
              <Icon name="arrow" size={16} color="currentColor" />
              オンラインクリニック 結 トップへ戻る
            </a>
          </div>
        </div>
      </main>
      <NewsFooter />
    </>);
};

Object.assign(window, { NewsTopSection, NewsArticle, NewsDetailApp });