// shell-d.jsx — Variant D の共通シェル（HBFooter / HBLayout / HBSubHero）
// variant-d.jsx を先に読み込んで window.HBHeader / hbcp / fontJP 等が公開されている前提。
// サブページ (page-hatena-dx 等) はこのシェルで HBHeader + body + HBFooter を巻き取る。

(function(){
  const { HBHeader, HBLogo, HBChars, HB_NAV, HB_BASE, HB_WANTEDLY,
          hbcp, fontEN, fontENSans, fontJP, fontMono, ease, hbStyles } = window;

  // ---- HBFooter (PC) ----
  // フッターに掲載する法人 (本番 hatenabase.jp の構成と一致):
  //   1. はてなベース株式会社（メイン）       — Service/Information/Recruit/Other 4 列
  //   2. はてなベース税理士事務所             — Service/Information/Recruit/Other 4 列
  //   3. はてなベース社会保険労務士事務所     — 名称・概要のみ
  //
  // GROUP COMPANIES (variant-d.jsx 側) のカード一覧は社労士事務所のみ。
  function HBFooter() {
    const COMPANIES = [
      // 1. はてなベース株式会社（メイン）
      {
        name: 'はてなベース株式会社',
        en: 'HatenaBase, Inc.',
        tagline: '成長するスタートアップに "攻めるバックオフィス" を構築する。',
        addr: '東京都新宿区愛住町23-1 woody21 6階',
        mail: 'info@hatenabase.com',
        tel:  '03-4500-2647',
        url:  HB_BASE,
        sections: [
          { h:'Service', jp:'事業・サービス', items:[
            {t:'DXシステム導入・BPRシステム導入支援', href:`${HB_BASE}/hatena-dx`},
            {t:'DX・AI人材育成／クラウド会計人材の育成', href:`${HB_BASE}/hatena-content`},
            {t:'経理業務改善・DX支援会計コンサル', href:`${HB_BASE}/hatena-bi`},
          ]},
          { h:'Information', jp:'情報', items:[
            {t:'導入事例・実績',   href:`${HB_BASE}/achievements`},
            {t:'お知らせ',         href:`${HB_BASE}/news`},
            {t:'ブログ',           href:`${HB_BASE}/blog`},
            {t:'私たちについて',   href:`${HB_BASE}/about-us`},
            {t:'お問い合わせ',     href:`${HB_BASE}/contact`},
          ]},
          { h:'Recruit', jp:'採用', items:[
            {t:'採用情報',                  href:`${HB_BASE}/recruit`},
            {t:'一般採用',                  href:HB_WANTEDLY, ext:true},
            {t:'新卒採用・インターン採用',  href:`${HB_WANTEDLY}/newgrad`, ext:true},
          ]},
          { h:'Other', jp:'その他', items:[
            {t:'利用規約',                   href:`${HB_BASE}/terms`},
            {t:'資料請求',                   href:`${HB_BASE}/document-request`},
            {t:'コンテンツクリエイター向け', href:`${HB_BASE}/for-content-creaters`},
          ]},
        ],
      },
      // 2. はてなベース税理士事務所
      {
        name: 'はてなベース税理士事務所',
        en: 'HatenaBase Tax Office',
        tagline: 'クラウド会計を活用して、質の高い経営判断を。創業期からベンチャー企業、上場企業まで対応する税務の専門家。',
        addr: '東京都新宿区愛住町23-1 woody21 6階',
        mail: 'tamu@hatenabase.com',
        tel:  '',
        url:  `${HB_BASE}/tax-accountant`,
        sections: [
          { h:'Service', jp:'料金・サービス', items:[
            {t:'税務顧問',           href:`${HB_BASE}/tax-accountant/service/tax-advisor`},
            {t:'融資支援',           href:`${HB_BASE}/tax-accountant/service/financing-support`},
            {t:'管理会計コンサル',   href:`${HB_BASE}/tax-accountant/service/consulting`},
          ]},
          { h:'Information', jp:'情報', items:[
            {t:'導入事例・実績',   href:`${HB_BASE}/office-achievements`},
            {t:'お知らせ',         href:`${HB_BASE}/office-news`},
            {t:'ブログ',           href:`${HB_BASE}/blog`},
            {t:'私たちについて',   href:`${HB_BASE}/tax-accountant/about-us`},
            {t:'お問い合わせ',     href:`${HB_BASE}/tax-accountant/contact`},
          ]},
          { h:'Recruit', jp:'採用', items:[
            {t:'採用情報',                  href:`${HB_BASE}/tax-accountant/recruit`},
            {t:'一般採用',                  href:HB_WANTEDLY, ext:true},
            {t:'新卒採用・インターン採用',  href:`${HB_WANTEDLY}/newgrad`, ext:true},
          ]},
          { h:'Other', jp:'その他', items:[
            {t:'利用規約',  href:`${HB_BASE}/tax-accountant/terms`},
          ]},
        ],
      },
      // 3. はてなベース社会保険労務士事務所
      {
        name: 'はてなベース社会保険労務士事務所',
        en: 'HatenaBase Labor Office',
        tagline: '労務・人事・社会保険手続きに関する専門家。',
        addr: '東京都新宿区愛住町23-1 woody21 6階',
        mail: '',
        tel:  '',
        url:  '',
        sections: [],
      },
    ];

    return (
      <footer style={{padding:'88px 32px 36px', background:hbcp.ink, color:'#fff', position:'relative', overflow:'hidden'}}>
        <svg style={{position:'absolute', bottom:-200, right:-200, width:560, height:560, opacity:.15, pointerEvents:'none'}} viewBox="0 0 560 560">
          {[...Array(8)].map((_,i)=>(<circle key={i} cx="280" cy="280" r={40+i*30} fill="none" stroke={hbcp.blueLight} strokeOpacity=".4" strokeWidth=".7"/>))}
        </svg>
        <div style={{position:'relative', maxWidth:1280, margin:'0 auto'}}>

          {/* 巨大ロゴ＋GO TO TOP */}
          <div style={{padding:'24px 0 40px', borderBottom:'1px solid rgba(255,255,255,.15)', display:'flex', alignItems:'flex-end', justifyContent:'space-between', flexWrap:'wrap', gap:24}}>
            <div>
              <div style={{fontFamily:fontENSans, fontSize:'clamp(56px, 7vw, 110px)', fontWeight:200, letterSpacing:'-.04em', lineHeight:1}}>
                Hatenabase<span style={{color:hbcp.blueLight, fontFamily:fontEN, fontStyle:'italic', fontWeight:300}}>,</span>Group<span style={{color:hbcp.blueLight, fontFamily:fontEN, fontStyle:'italic', fontWeight:300}}>.</span>
              </div>
              <div style={{fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:22, color:hbcp.blueLight, marginTop:8, letterSpacing:'.02em'}}>
                Backoffice, redesigned.
              </div>
            </div>
            <a href="#top" onClick={(e)=>{ e.preventDefault(); window.scrollTo({top:0, behavior:'smooth'}); }}
               style={{display:'inline-flex', alignItems:'center', gap:10, fontFamily:fontENSans, fontSize:11, letterSpacing:'.32em', color:'rgba(255,255,255,.6)', textDecoration:'none', padding:'14px 18px', border:'1px solid rgba(255,255,255,.25)'}}>
              GO TO TOP <span style={{fontFamily:fontEN, fontStyle:'italic', fontSize:14}}>↑</span>
            </a>
          </div>

          {/* 3 つの会社別ブロック */}
          {COMPANIES.map( (co, idx) => (
            <div key={co.name} className="hb-footer-co" style={{padding:'48px 0', borderBottom:'1px solid rgba(255,255,255,.15)'}}>
              <div style={{display:'grid', gridTemplateColumns: co.sections.length > 0 ? '1.6fr 1fr 1fr 1fr 1fr' : '1fr', gap:40, alignItems:'flex-start'}}>
                {/* 会社情報カラム */}
                <div>
                  <div style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:14, textTransform:'uppercase'}}>{co.en}</div>
                  <h3 style={{fontFamily:fontJP, fontWeight:700, fontSize:18, lineHeight:1.45, margin:'0 0 14px', color:'#fff'}}>
                    {co.url ? <a href={co.url} style={{color:'inherit', textDecoration:'none'}}>{co.name}</a> : co.name}
                  </h3>
                  <p style={{fontSize:12.5, lineHeight:1.95, color:'rgba(255,255,255,.7)', margin:'0 0 18px', maxWidth:320}}>{co.tagline}</p>
                  <div style={{fontFamily:fontMono, fontSize:11, color:'rgba(255,255,255,.55)', lineHeight:1.95}}>
                    {co.addr && (<>{co.addr}<br/></>)}
                    {co.tel  && (<>TEL  {co.tel}<br/></>)}
                    {co.mail && (<>MAIL {co.mail}</>)}
                  </div>
                  {idx === 0 && (
                    <div style={{display:'flex', gap:8, marginTop:22}}>
                      <a href="https://x.com/hs_hatenabase" target="_blank" rel="noopener" aria-label="X" style={{width:36, height:36, borderRadius:'50%', border:'1px solid rgba(255,255,255,.25)', display:'grid', placeItems:'center'}}>
                        <img src="images/x_logo.svg" alt="" style={{width:13, height:13}}/>
                      </a>
                      <a href="https://note.com/hatenabase" target="_blank" rel="noopener" aria-label="note" style={{width:36, height:36, borderRadius:'50%', border:'1px solid rgba(255,255,255,.25)', display:'grid', placeItems:'center'}}>
                        <img src="images/note_icon.svg" alt="" style={{width:13, height:13}}/>
                      </a>
                    </div>
                  )}
                </div>

                {/* リンクセクション (4 列) */}
                {co.sections.map( s => (
                  <div key={s.h}>
                    <div style={{fontFamily:fontENSans, fontSize:10, fontWeight:500, letterSpacing:'.32em', color:hbcp.blueLight, marginBottom:12, textTransform:'uppercase'}}>{s.h}</div>
                    <div style={{fontFamily:fontJP, fontSize:11, color:'rgba(255,255,255,.55)', marginBottom:14}}>{s.jp}</div>
                    {s.items.map( it => (
                      <a key={it.t} href={it.href} target={it.ext?'_blank':'_self'} rel="noopener"
                         style={{display:'block', color:'#fff', textDecoration:'none', fontSize:12.5, padding:'6px 0', opacity:.85}}>{it.t}</a>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          ))}

          {/* BOTTOM */}
          <div style={{display:'flex', flexWrap:'wrap', gap:18, justifyContent:'space-between', paddingTop:28, fontFamily:fontMono, fontSize:10.5, color:'rgba(255,255,255,.5)'}}>
            <div>共通所在地：東京都新宿区愛住町23-1 woody21 6階</div>
            <div>Copyright © {new Date().getFullYear()} HatenaBase Inc.</div>
            <div style={{display:'flex', gap:24}}>
              <a href={`${HB_BASE}/terms`} style={{color:'inherit', textDecoration:'none'}}>利用規約</a>
              <a href={`${HB_BASE}/document-request`} style={{color:'inherit', textDecoration:'none'}}>資料請求</a>
              <a href={`${HB_BASE}/contact`} style={{color:'inherit', textDecoration:'none'}}>お問い合わせ</a>
            </div>
          </div>
        </div>

        {/* レスポンシブ: モバイルで 5 列を 2 列に折りたたむ */}
        <style>{`
          @media (max-width: 880px) {
            .hb-footer-co > div { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
            .hb-footer-co > div > div:first-child { grid-column: 1 / -1; }
          }
        `}</style>
      </footer>
    );
  }

  // ---- HBSubHero: サブページ用の共通ヒーロー ----
  // crumb: パンくず文字列 (例: "Service / Hatena, DX.")
  // en:   英語ラベル (例: "Hatena, DX.")
  // jp:   メインタイトル日本語 (例: "DX・システム開発")
  // tag:  italic 一行 (例: "Designing the new operating system of business.")
  // lead: 段落本文
  function HBSubHero({ crumb, en, jp, tag, lead }) {
    return (
      <section style={{position:'relative', padding:'72px 32px 64px', overflow:'hidden', background:hbcp.white, borderBottom:`1px solid ${hbcp.line}`}}>
        <svg style={{position:'absolute', top:-40, right:-220, width:520, height:520, opacity:.4, pointerEvents:'none'}} viewBox="0 0 520 520">
          {[...Array(9)].map((_,i)=>(<circle key={i} cx="260" cy="260" r={40+i*24} fill="none" stroke={hbcp.blue} strokeOpacity=".15" strokeWidth=".7"/>))}
        </svg>
        <div style={{position:'relative', maxWidth:1280, margin:'0 auto'}}>
          {crumb && (
            <div style={{fontFamily:fontMono, fontSize:11, letterSpacing:'.06em', color:hbcp.inkLight, marginBottom:28}}>
              {crumb}
            </div>
          )}
          {en && (
            <div style={{fontFamily:fontENSans, fontSize:11, letterSpacing:'.32em', color:hbcp.blue, marginBottom:18, display:'flex', alignItems:'center', gap:14}}>
              <span style={{display:'inline-block', width:8, height:8, borderRadius:'50%', background:hbcp.blue}}/>
              {en.toUpperCase()}
            </div>
          )}
          <h1 style={{fontFamily:fontJP, fontWeight:900, fontSize:'clamp(36px, 5.5vw, 72px)', lineHeight:1.18, letterSpacing:'-.02em', margin:0}}>
            {jp}
          </h1>
          {tag && (
            <div style={{marginTop:14, fontFamily:fontEN, fontStyle:'italic', fontWeight:300, fontSize:'clamp(16px, 1.6vw, 22px)', color:hbcp.blue, lineHeight:1.3}}>
              {tag}
            </div>
          )}
          {lead && (
            <p style={{fontSize:16, lineHeight:1.9, color:hbcp.inkSoft, margin:'28px 0 0', maxWidth:680}}>{lead}</p>
          )}
        </div>
      </section>
    );
  }

  // ---- HBLayout: HBHeader + 子ノード + HBFooter ----
  function HBLayout({ children }) {
    const rootRef = React.useRef(null);
    React.useEffect(() => {
      // 共通 reveal 観測
      const root = rootRef.current; if (!root) return;
      const reveals = root.querySelectorAll('.hb-chars, .hb-up');
      const io = new IntersectionObserver(es => {
        es.forEach(e => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } });
      }, { threshold: 0.05, rootMargin: '0px 0px -5% 0px' });
      reveals.forEach(el => {
        io.observe(el);
        if (el.closest('.hb-hero, .hb-subhero')) {
          requestAnimationFrame(() => el.classList.add('is-in'));
        }
      });
      return () => io.disconnect();
    }, []);

    return (
      <div ref={rootRef} className="ab-scroll hb-root" style={{
        width:'100%', minHeight:'100vh', overflow:'auto', position:'relative',
        background:hbcp.white, color:hbcp.ink, fontFamily:fontJP,
        ['--hb-blue']: hbcp.blue,
        ['--hb-blue-light']: hbcp.blueLight,
        ['--hb-blue-ghost']: hbcp.blueGhost,
        ['--hb-ink']: hbcp.ink,
        ['--hb-paper']: hbcp.paper,
      }}>
        <style>{hbStyles}</style>
        <HBHeader/>
        {children}
        <HBFooter/>
      </div>
    );
  }

  Object.assign(window, { HBFooter, HBSubHero, HBLayout });
})();
