// お役立ち情報 一覧 + 詳細
/* scoped to avoid global alias collision with mobile-rest.jsx (PageK/HeroK/SHK/...) */
(function () {

const SK = window.Site;
const { T: TK, ARTICLES: ARTK, KNOWLEDGE: KNOWK, CoverImg: ImgK, Icon: IcK, Btn: BtnK, SectionHeading: SHK, Page: PageK, PageHero: HeroK, siteHref: hrefK, sitePhoneHref: phoneHrefK, knowledgeCardsFromArticles: buildKnowledgeCardsK } = SK;

const articleHrefK = (id) => `${hrefK('knowledge-detail')}&article=${encodeURIComponent(id)}`;
const currentKnowledgeCat = () => new URLSearchParams(window.location.search).get('cat') || 'すべて';
const knowledgeCatHref = (cat) => cat === 'すべて' ? hrefK('knowledge') : `${hrefK('knowledge')}&cat=${encodeURIComponent(cat)}`;

function currentArticleK() {
  const params = new URLSearchParams(window.location.search);
  const articleId = params.get('article');
  return ARTK.find((x) => x.id === articleId) || ARTK[0];
}

function knowledgeCardsK() {
  return buildKnowledgeCardsK(ARTK, KNOWK);
}

function knowledgeCategoriesK(cards) {
  return ['すべて'].concat(cards
    .map((k) => k.cat || k.tag)
    .filter((cat, i, arr) => cat && arr.indexOf(cat) === i));
}

function PageKnowledgeIndex() {
  const activeCat = currentKnowledgeCat();
  const cards = knowledgeCardsK();
  const cats = knowledgeCategoriesK(cards);
  const visibleArticles = activeCat === 'すべて'
    ? cards
    : cards.filter((k) => k.cat === activeCat || k.tag === activeCat);
  const lead = visibleArticles[0];
  const rest = visibleArticles.slice(1);
  return (
    <PageK active="knowledge">
      <HeroK num="04" en="KNOWLEDGE" title="住まいのお役立ちコラム" lead="ご相談の前に知っておきたい、屋根・外壁の基礎知識。" />
      {/* filter */}
      <section style={{ background: '#fff', padding: '24px 56px', borderBottom: `1px solid ${TK.line}` }}>
        <div style={{ display: 'flex', gap: 0, alignItems: 'center', flexWrap: 'wrap', maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TK.green, letterSpacing: 3, marginRight: 18, fontWeight: 700 }}>カテゴリ</div>
          {cats.map((c) => {
            const isActive = c === activeCat;
            return (
            <a key={c} href={knowledgeCatHref(c)} style={{
              padding: '8px 18px', fontSize: 13.5, fontFamily: '"Noto Sans JP", sans-serif', fontWeight: 600,
              color: isActive ? '#fff' : TK.ink,
              background: isActive ? TK.green : 'transparent',
              borderRadius: 999, marginRight: 8,
              textDecoration: 'none',
            }}>{c}</a>
          )})}
        </div>
      </section>

      {/* lead article */}
      {lead ? (
        <section style={{ background: TK.paper, padding: '56px 56px' }}>
          <a data-pc-readable="knowledge-featured" href={articleHrefK(lead.id)} style={{ display: 'block', width: '100%', maxWidth: 1280, margin: '0 auto', background: '#fff', borderRadius: 6, overflow: 'hidden', textDecoration: 'none' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0 }}>
              <ImgK src={lead.photo} ratio="3/2" />
              <div style={{ padding: '40px 44px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TK.green, letterSpacing: 3, fontWeight: 700, marginBottom: 14 }}>FEATURED — 注目の記事</div>
                <div style={{ fontSize: 12, color: TK.greenInk, background: TK.greenSoft, padding: '4px 10px', borderRadius: 999, display: 'inline-block', alignSelf: 'flex-start', fontWeight: 700, marginBottom: 14 }}>{lead.tag}</div>
                <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 32, fontWeight: 700, color: TK.ink, lineHeight: 1.4, marginBottom: 14 }}>{lead.title}</div>
                <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 15, color: TK.ink70, lineHeight: 2 }}>{lead.lead}</div>
                <div style={{ marginTop: 22, display: 'inline-flex', alignItems: 'center', gap: 6, color: TK.ink, fontSize: 13.5, fontWeight: 700, borderBottom: `1.5px solid ${TK.ink}`, paddingBottom: 3, alignSelf: 'flex-start' }}>
                  記事を読む <IcK.arrow width="14" height="14" />
                </div>
              </div>
            </div>
          </a>
        </section>
      ) : (
        <section style={{ background: TK.paper, padding: '56px 56px' }}>
          <div style={{ background: '#fff', border: `1px solid ${TK.line}`, borderRadius: 6, padding: '28px 32px', textAlign: 'center' }}>
            <p style={{ margin: '0 0 14px', color: TK.ink70, fontSize: 15, lineHeight: 1.9 }}>このカテゴリの記事は現在準備中です。「すべて」から他の記事をご覧ください。</p>
            <a href={hrefK('knowledge')} style={{ color: TK.orangeDeep, fontSize: 13.5, fontWeight: 700, textDecoration: 'none', borderBottom: `1.5px solid ${TK.orangeDeep}`, paddingBottom: 3 }}>すべての記事を見る</a>
          </div>
        </section>
      )}

      {/* article grid */}
      <section style={{ background: '#fff', padding: '40px 56px 88px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, maxWidth: 1280, margin: '0 auto' }}>
          {rest.map((k) => (
            <a key={k.id} href={articleHrefK(k.id)} style={{ display: 'block', textDecoration: 'none' }}>
              <ImgK src={k.photo} ratio="4/3" radius={4} />
              <div style={{ marginTop: 16, fontSize: 12, color: TK.greenInk, background: TK.greenSoft, padding: '4px 10px', borderRadius: 999, display: 'inline-block', fontWeight: 700 }}>{k.tag}</div>
              <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 19, fontWeight: 700, color: TK.ink, margin: '12px 0 8px', lineHeight: 1.5 }}>{k.title}</div>
              <div style={{ fontSize: 13, color: TK.ink70, lineHeight: 1.95 }}>{k.lead}</div>
            </a>
          ))}
        </div>
      </section>
    </PageK>
  );
}

function PageKnowledgeDetail() {
  const k = currentArticleK();
  const related = ARTK.filter((x) => x.id !== k.id).slice(0, 3);
  const paragraphs = k.paragraphs || [];
  const consultations = k.consultations || [];
  return (
    <PageK active="knowledge">
      <section style={{ background: TK.paper, padding: '40px 56px 0' }}>
        <SK.Breadcrumb items={['ホーム', 'お役立ち情報', k.title]} />
      </section>
      {/* article header */}
      <section style={{ background: TK.paper, padding: '28px 56px 60px', borderBottom: `1px solid ${TK.line}` }}>
        <div style={{ maxWidth: 920, margin: '0 auto' }}>
          <div style={{ fontSize: 12, color: TK.greenInk, background: TK.greenSoft, padding: '5px 12px', borderRadius: 999, display: 'inline-block', fontWeight: 700, marginBottom: 18 }}>{k.tag}</div>
          <h1 style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 48, fontWeight: 900, color: TK.ink, margin: 0, lineHeight: 1.35, letterSpacing: '-0.02em', fontFeatureSettings: "'palt'" }}>
            {k.title}
          </h1>
          <div style={{ marginTop: 18, fontSize: 13, color: TK.ink50, display: 'flex', gap: 16 }}>
            <span>カテゴリ：{k.tag}</span>
          </div>
        </div>
      </section>

      {/* body */}
      <section style={{ background: '#fff', padding: '64px 56px 64px' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <ImgK src={k.photo} ratio="16/9" radius={6} />
          <p style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 17, color: TK.ink, lineHeight: 2.2, marginTop: 32 }}>
            {k.lead}
          </p>
          <h2 style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 26, fontWeight: 700, color: TK.ink, marginTop: 48, lineHeight: 1.5, borderLeft: `3px solid ${TK.green}`, paddingLeft: 16 }}>
            {k.bodyTitle || '相談前に知っておきたいこと'}
          </h2>
          {paragraphs.map((text, i) => (
            <p key={i} style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 15.5, color: TK.ink80, lineHeight: 2.2, marginTop: 18 }}>
              {text}
            </p>
          ))}

          {/* call-out */}
          <div style={{ background: TK.greenSoft, color: TK.ink, padding: '24px 28px', borderRadius: 6, marginTop: 32 }}>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TK.green, letterSpacing: 2, marginBottom: 10, fontWeight: 700 }}>POINT</div>
            <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 16, lineHeight: 2 }}>
              {k.point || '気になることがあれば、無理に判断せず、お電話またはメールでご相談ください。'}
            </div>
          </div>

          <h2 style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 26, fontWeight: 700, color: TK.ink, marginTop: 48, lineHeight: 1.5, borderLeft: `3px solid ${TK.green}`, paddingLeft: 16 }}>
            よくいただくご相談
          </h2>
          <ul style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 15.5, color: TK.ink80, lineHeight: 2.2, marginTop: 18, paddingLeft: 22 }}>
            {consultations.map((item) => <li key={item}>{item}</li>)}
          </ul>

          {/* inline CTA */}
          <div style={{ background: '#fff', border: `1px solid ${TK.line}`, padding: 28, borderRadius: 6, marginTop: 48 }}>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TK.green, letterSpacing: 2, marginBottom: 10, fontWeight: 700 }}>RELATED — 関連する相談</div>
            <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 21, fontWeight: 700, color: TK.ink, marginBottom: 14 }}>{k.ctaTitle || '住まいの状況を、一度見てほしい方へ'}</div>
            <div style={{ fontSize: 14, color: TK.ink70, lineHeight: 1.95, marginBottom: 18 }}>{k.ctaBody || '気になることがあれば、お電話またはメールでお気軽にお問い合わせください。状況をお聞きしたうえで、現地での確認に伺います。'}</div>
            <div style={{ display: 'flex', gap: 10 }}>
              <BtnK kind="primary" href={phoneHrefK} icon={<IcK.phone width="14" height="14" />}>電話で相談する</BtnK>
              <BtnK kind="email" href={hrefK('contact')} icon={<IcK.chat width="14" height="14" />}>メールで問い合わせる</BtnK>
            </div>
          </div>
        </div>
      </section>

      {/* related */}
      <section style={{ background: TK.paper, padding: '64px 56px' }}>
        <SHK num="" en="RELATED ARTICLES" title="関連する記事" align="left" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {related.map((r) => (
            <a key={r.id} href={articleHrefK(r.id)} style={{ display: 'block', background: '#fff', padding: 20, borderRadius: 6, textDecoration: 'none' }}>
              <ImgK src={r.photo} ratio="4/3" radius={4} />
              <div style={{ marginTop: 14, fontSize: 12, color: TK.greenInk, background: TK.greenSoft, padding: '3px 10px', borderRadius: 999, display: 'inline-block', fontWeight: 700 }}>{r.tag}</div>
              <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 17, fontWeight: 700, color: TK.ink, margin: '10px 0 8px', lineHeight: 1.5 }}>{r.title}</div>
              <div style={{ fontSize: 13, color: TK.ink70, lineHeight: 1.85 }}>{r.lead}</div>
            </a>
          ))}
        </div>
      </section>
    </PageK>
  );
}

window.PageKnowledgeIndex = PageKnowledgeIndex;
window.PageKnowledgeDetail = PageKnowledgeDetail;
})();