/* blog.html — ブログ窓口 */

const BlIntro = () => (
  <section style={{padding:'72px 0 32px', background:'var(--paper)'}} data-screen-label="01 Intro">
    <div className="container" style={{maxWidth:760, margin:'0 auto'}}>
      <div className="prose" style={{maxWidth:'none', textAlign:'center'}}>
        <p style={{fontFamily:'var(--font-serif)', fontSize:18, lineHeight:2.1, color:'var(--ink-900)'}}>
          発信は2つのチャネルに分けています。<br/>
          目的に合わせて読みやすい方を選んでください。
        </p>
      </div>
    </div>
  </section>
);

const BlLatest = () => {
  const [posts, setPosts] = React.useState(null);
  React.useEffect(() => {
    let aborted = false;
    fetch('https://roumunews.jp/wp-json/wp/v2/posts?per_page=6&_embed', { mode: 'cors' })
      .then(r => { if (!r.ok) throw new Error('http ' + r.status); return r.json(); })
      .then(data => {
        if (aborted || !Array.isArray(data) || !data.length) return;
        setPosts(data.map(p => {
          const media = p._embedded && p._embedded['wp:featuredmedia'] && p._embedded['wp:featuredmedia'][0];
          const thumb = (media && (media.media_details?.sizes?.medium_large?.source_url || media.source_url)) || null;
          const cats = (p._embedded && p._embedded['wp:term'] && p._embedded['wp:term'][0] || []).map(t => t.name);
          const d = new Date(p.date);
          const date = `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}.${String(d.getDate()).padStart(2,'0')}`;
          return { cat: cats[0] || 'お役立ち', ttl: (p.title && p.title.rendered) || '', date, link: p.link, thumb };
        }));
      })
      .catch(() => { if (!aborted) setPosts([]); });
    return () => { aborted = true; };
  }, []);

  if (posts === null) return (
    <section style={{padding:'12px 0 0'}}><div className="container"><p style={{textAlign:'center', color:'var(--ink-500)', fontSize:13, fontFamily:'var(--font-mono)'}}>最新記事を読み込み中…</p></div></section>
  );
  if (!posts.length) return null;
  return (
    <section style={{padding:'8px 0 72px', background:'var(--paper)'}} data-screen-label="02 Latest">
      <div className="container">
        <div className="section-head" style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', flexWrap:'wrap', gap:20, marginBottom:28}}>
          <div>
            <Eyebrow>LATEST · 新着記事</Eyebrow>
            <h2 style={{marginTop:12}}>まずは、最近の記事から。</h2>
          </div>
          <a className="btn btn--ghost btn--sm" href="https://roumunews.jp/blog/" target="_blank" rel="noopener">公式ブログをすべて見る <Arrow/></a>
        </div>
        <div className="blog__grid">
          {posts.map((p, i) => (
            <a className="blog__card" key={i} href={p.link} target="_blank" rel="noopener">
              <div className="blog__thumb">
                {p.thumb
                  ? <img src={p.thumb} alt="" style={{width:'100%', height:'100%', objectFit:'cover'}} loading="lazy"/>
                  : <Placeholder tag="記事" style={{height:'100%'}}/>}
              </div>
              <div className="blog__body">
                <div className="blog__cat">{p.cat}</div>
                <div className="blog__title" dangerouslySetInnerHTML={{__html: p.ttl}}/>
                <div className="blog__date">{p.date}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

const BlCats = () => (
  <section style={{padding:'48px 0 72px', background:'var(--paper-2)'}} data-screen-label="03 Categories">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>CHANNELS · 2つの発信チャネル</Eyebrow>
        <h2>もっと読むなら、目的に合わせて。</h2>
      </div>
      <div className="blog-cats" style={{gridTemplateColumns:'repeat(2, 1fr)', gap:'24px', maxWidth:880, margin:'0 auto'}}>
        <a className="blog-cat" href="https://roumunews.jp/blog/" target="_blank" rel="noopener">
          <span className="tag">BLOG · 公式ブログ</span>
          <span className="ttl">情報提供</span>
          <span className="dsc">法改正・労務実務・助成金・freee運用ノウハウ など、中小企業の経営者・労務担当者向けの情報をまとめています。「調べに来る」読者向け。</span>
        </a>
        <a className="blog-cat" href="https://note.com/roumunews" target="_blank" rel="noopener">
          <span className="tag">NOTE · note</span>
          <span className="ttl">インタビュー記事 ／ AI活用</span>
          <span className="dsc">顧問先の社長インタビュー、AI を使った労務・経営の実例、現場で感じたことなど。「読み物として楽しむ」読者向け。</span>
        </a>
      </div>
    </div>
  </section>
);

const BlSeminar = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="03 Seminar">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>SEMINAR · セミナー / イベント</Eyebrow>
        <h2>年10回程度、オンラインで開催しています。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'60ch'}}>
          助成金・freee・就業規則の3テーマを中心に、中小企業の経営者・労務担当者向けのオンラインセミナーを定期開催しています。参加は原則無料。
        </p>
      </div>
      <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'32px 36px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24}}>
          {[
            {d:'UPCOMING', t:'2026年の助成金活用ロードマップ', date:'近日公開', note:'2026年に使える助成金のカレンダー解説'},
            {d:'UPCOMING', t:'freee人事労務「入れたのに使えない」脱出セミナー', date:'近日公開', note:'よくある詰まり所と対処法'},
            {d:'UPCOMING', t:'就業規則"要注意条文"10選', date:'近日公開', note:'トラブルになりやすい条文を解説'}
          ].map((s, i) => (
            <div key={i} style={{
              padding:'18px 0',
              borderTop:'3px solid var(--accent)'
            }}>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.16em', color:'var(--accent)'}}>{s.d}</div>
              <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--ink-900)', margin:'10px 0 12px', letterSpacing:'.02em', lineHeight:1.55}}>{s.t}</h4>
              <div style={{fontSize:13, color:'var(--ink-700)', lineHeight:1.9}}>{s.note}</div>
              <div style={{marginTop:12, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--navy-700)', letterSpacing:'.06em'}}>{s.date}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:28, paddingTop:24, borderTop:'1px dashed var(--paper-line)', display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:16}}>
          <div style={{fontSize:13, color:'var(--ink-700)'}}>
            セミナー開催のお知らせは、メールまたは各SNSで配信しています。
          </div>
          <a className="btn btn--primary btn--sm" href="contact.html">メール配信に登録する <Arrow/></a>
        </div>
      </div>
    </div>
  </section>
);

const BlCTA = () => (
  <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="04 CTA">
    <div className="container" style={{textAlign:'center', maxWidth:720, margin:'0 auto'}}>
      <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.24em', color:'rgba(255,255,255,.7)', marginBottom:16}}>NEXT STEP</div>
      <h2 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(26px, 3.2vw, 36px)', lineHeight:1.5, color:'#fff', marginBottom:18, letterSpacing:'.04em'}}>
        記事よりも、<em style={{fontStyle:'normal', background:'linear-gradient(180deg, transparent 62%, rgba(230,126,34,.55) 62% 92%, transparent 92%)', padding:'0 4px'}}>直接話した方が早い</em>ときは。
      </h2>
      <p style={{fontSize:16, lineHeight:2, color:'rgba(255,255,255,.85)', marginBottom:28}}>
        個別の状況は、30分の無料相談で整理できます。
      </p>
      <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <a className="btn btn--primary btn--lg" href="contact.html">無料相談を予約する <Arrow/></a>
        <a className="btn btn--ghost btn--lg" href="service.html" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>サービス一覧を見る</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { BlIntro, BlLatest, BlCats, BlSeminar, BlCTA });