/* Shared small components — corporate nav version */

const Arrow = ({dir='r'}) => (
  <svg className="arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden>
    {dir === 'r' && <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>}
    {dir === 'l' && <path d="M13 8H3M7 4L3 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>}
    {dir === 'd' && <path d="M8 3v10M4 9l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>}
  </svg>
);

const Placeholder = ({ tag, dark=false, style, className='' }) => (
  <div className={`ph ${dark ? 'dark':''} ${className}`} style={style}>
    <div className="ph__tag">{tag}</div>
  </div>
);

const Eyebrow = ({ children, style }) => <span className="eyebrow" style={style}>{children}</span>;

/** Global nav — pages, not anchors */
const NAV = [
  { href: 'index.html',     label: 'ホーム',         sub: '当社の想い' },
  { href: 'service.html',   label: 'サービス',       sub: 'Services', sub2: [
    { href: 'service-leadership.html', t: 'リーダー育成',       d: 'ファシリ型研修・DiSC・1on1・会議設計' },
    { href: 'service-ai.html',         t: 'AI活用支援',         d: '各種AI研修／AI顧問' },
    { href: 'service-hyoka.html',      t: '評価のしくみづくり', d: '人事評価制度の設計・運用' },
    { href: 'service.html',            t: 'サービス一覧を見る',     d: '3つの柱をまとめて' }
  ] },
  { href: 'about.html',     label: '会社概要',       sub: 'About' },
  { href: '../blog.html',   label: 'ブログ',         sub: 'Journal',  external: true },
  { href: 'contact.html',   label: 'お問い合わせ',   sub: 'Contact' }
];

const Topbar = ({ current='index.html' }) => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.classList.toggle('nav-open', open);
    return () => document.body.classList.remove('nav-open');
  }, [open]);
  const close = () => setOpen(false);
  return (
  <header className="topbar">
    <div style={{background:'var(--navy-700)', color:'rgba(255,255,255,.85)', fontSize:11, letterSpacing:'.08em'}}>
      <div className="container" style={{display:'flex', justifyContent:'flex-end', gap:0, padding:'6px 20px'}}>
        <a href="../index.html" style={{color:'rgba(255,255,255,.6)', padding:'4px 14px', textDecoration:'none', borderRight:'1px solid rgba(255,255,255,.15)'}}>社会保険労務士法人 労務ニュース</a>
        <span style={{color:'#fff', padding:'4px 14px', background:'var(--accent)', fontWeight:600}}>株式会社 労務ニュース</span>
      </div>
    </div>
    <div className="container topbar__inner">
      <a className="brand" href="index.html">
        <img className="brand__logo" src="assets/logo.png" alt=""/>
        <div>
          <span className="brand__sub">株式会社</span>
          <span className="brand__text">労務ニュース</span>
        </div>
      </a>
      <nav className="nav">
        {NAV.map(n => (
          n.sub2 ? (
            <div key={n.href} className="nav__has-sub">
              <a href={n.href} className={current===n.href?'is-current':''}>{n.label}</a>
              <div className="nav__sub">
                <div className="nav__sub-card">
                  {n.sub2.map(s => (
                    <a key={s.href} href={s.href}>
                      <span className="nav__sub-t">{s.t}</span>
                      <small>{s.d}</small>
                    </a>
                  ))}
                </div>
              </div>
            </div>
          ) : (
            <a key={n.href} href={n.href} className={current===n.href?'is-current':''}>{n.label}</a>
          )
        ))}
      </nav>
      <div className="topbar__cta">
        <a className="btn btn--ghost btn--sm" href="contact.html">フォームで相談</a>
        <a className="btn btn--primary btn--sm" href="https://timerex.net/s/ryo.kurata_ada7_dad9/e55e9800" target="_blank" rel="noopener">無料相談を予約 <Arrow/></a>
      </div>
      <button className={`nav-toggle ${open?'is-open':''}`} aria-label="メニュー" aria-expanded={open} onClick={() => setOpen(o => !o)}>
        <span></span><span></span><span></span>
      </button>
    </div>
    <div className={`mobnav ${open?'is-open':''}`} onClick={close}>
      <nav className="mobnav__panel" onClick={e => e.stopPropagation()}>
        {NAV.map(n => (
          <div key={n.href} className="mobnav__group">
            <a className={`mobnav__link ${current===n.href?'is-current':''}`} href={n.href} onClick={close}>{n.label}</a>
            {n.sub2 && (
              <div className="mobnav__sub">
                {n.sub2.map(s => (
                  <a key={s.href} href={s.href} onClick={close}>
                    <span className="mobnav__sub-t">{s.t}</span>
                    {s.d && <small>{s.d}</small>}
                  </a>
                ))}
              </div>
            )}
          </div>
        ))}
        <a className="mobnav__cross" href="../index.html">社会保険労務士法人 労務ニュースはこちら →</a>
        <div className="mobnav__cta">
          <a className="btn btn--ghost" href="contact.html" onClick={close}>フォームで相談</a>
          <a className="btn btn--primary" href="https://timerex.net/s/ryo.kurata_ada7_dad9/e55e9800" target="_blank" rel="noopener">無料相談を予約 <Arrow/></a>
          <a className="mobnav__tel" href="tel:05057843599">お電話：050-5784-3599（平日 9:00–18:00）</a>
        </div>
      </nav>
    </div>
  </header>
  );
};

/** Page hero — lighter than LP hero, still branded */
const PageHero = ({ kicker, title, lead }) => (
  <section className="pagehero" data-screen-label="Page Hero">
    <div className="container">
      <span className="pagehero__kicker">{kicker}</span>
      <h1 className="pagehero__title">{title}</h1>
      {lead && <p className="pagehero__lead">{lead}</p>}
    </div>
  </section>
);

/** Breadcrumb */
const Breadcrumb = ({ trail }) => (
  <nav className="crumbs" aria-label="breadcrumb">
    <div className="container">
      {trail.map((t, i) => (
        <span key={i}>
          {t.href ? <a href={t.href}>{t.label}</a> : <span className="cur">{t.label}</span>}
          {i < trail.length - 1 && <span className="sep">／</span>}
        </span>
      ))}
    </div>
  </nav>
);

const StickyCTA = () => (
  <div className="sticky-cta">
    <a href="tel:05057843599"><small>電話で相談</small>050-5784-3599</a>
    <a href="contact.html">無料で相談する<small>平日 9:00–18:00</small></a>
  </div>
);

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer__top">
        <div>
          <a className="brand" href="index.html" style={{marginBottom:14}}>
            <img className="brand__logo brand__logo--dark" src="assets/logo.png" alt=""/>
            <div>
              <span className="brand__sub">株式会社</span>
              <span className="brand__text">労務ニュース</span>
            </div>
          </a>
          <p style={{fontSize:12,lineHeight:2,color:'rgba(255,255,255,.6)',maxWidth:'32ch',marginTop:16}}>
            株式会社 労務ニュース<br/>
            〒262-0018 千葉県千葉市花見川区畑町759<br/>
            フォレストビル202<br/>
            TEL 050-5784-3599 / 平日 9:00–18:00
          </p>
          <a href="https://maps.app.goo.gl/qRKGsTjV9gA5qxv27" target="_blank" rel="noopener" style={{display:'inline-block',marginTop:10,fontSize:12,color:'rgba(255,255,255,.55)',borderBottom:'1px solid rgba(255,255,255,.2)',paddingBottom:2}}>Google マップで見る →</a>
        </div>
        <div>
          <h5>サービス</h5>
          <ul>
            <li><a href="service-leadership.html">ファシリ型育成</a></li>
            <li><a href="service-ai.html">オマカセAIマナブくん</a></li>
            <li><a href="service-hyoka.html">人事評価制度</a></li>
            <li><a href="../index.html">社労士法人サイト</a></li>
          </ul>
        </div>
        <div>
          <h5>会社情報</h5>
          <ul>
            <li><a href="about.html#info">会社概要・メンバー</a></li>
            <li><a href="about.html#leaders">代表あいさつ</a></li>
            <li><a href="about.html#access">アクセス</a></li>
          </ul>
        </div>
        <div>
          <h5>その他</h5>
          <ul>
            <li><a href="../blog.html">ブログ / お役立ち情報（共通）</a></li>
            <li><a href="contact.html">お問い合わせ</a></li>
            <li><a href="https://timerex.net/s/ryo.kurata_ada7_dad9/e55e9800" target="_blank" rel="noopener">無料相談を予約</a></li>
            <li><a href="https://lin.ee/PFDU0ER" target="_blank" rel="noopener">公式LINE</a></li>
            <li><a href="/privacy/">プライバシーポリシー</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 株式会社 労務ニュース. All rights reserved.</span>
        <span>ミッション：経営者のストレスを減らし、企業の成長を後押しする。</span>
      </div>
    </div>
  </footer>
);

/** Group orientation band — placed right under the hero on each top page */
const GROUP_CARDS = [
  { key:'sr', kind:'社会保険労務士法人', scope:'日常の労務実務・手続き・給与計算・社員対応・助成金・就業規則・freee運用', href:'/index.html' },
  { key:'co', kind:'株式会社', scope:'チーム育成・各種AI研修・AI顧問・人事評価制度づくり', href:'/co/index.html' }
];
const GroupBand = ({ current='co' }) => (
  <section data-screen-label="Group · 2社体制" style={{background:'linear-gradient(180deg, var(--paper-2), var(--paper))', borderTop:'3px solid var(--accent)', borderBottom:'1px solid var(--paper-line)', padding:'60px 0'}}>
    <div className="container">
      <div style={{textAlign:'center', marginBottom:34}}>
        <Eyebrow>GROUP COMPANIES</Eyebrow>
        <h2 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(23px,3vw,32px)', lineHeight:1.45, color:'var(--ink-900)', margin:'10px 0 0', letterSpacing:'.03em'}}>
          ひとつの「労務ニュース」、<br/><em style={{fontStyle:'normal', background:'linear-gradient(180deg, transparent 60%, rgba(230,126,34,.5) 60% 92%, transparent 92%)', padding:'0 6px'}}>2つの専門会社</em>。
        </h2>
        <p style={{fontSize:15, lineHeight:1.95, color:'var(--ink-700)', margin:'16px auto 0', maxWidth:'60ch'}}>
          <strong>実務を担う社会保険労務士法人</strong>と、<strong>育成・AI・制度づくりを担う株式会社</strong>の二法人体制。グループとして連携し、実務と戦略の両輪でお応えします。
        </p>
      </div>
      <div style={{display:'flex', alignItems:'stretch', gap:20, flexWrap:'wrap', justifyContent:'center'}}>
        {GROUP_CARDS.map(c => {
          const cur = c.key === current;
          const inner = (
            <>
              <div style={{display:'inline-flex', alignItems:'center', gap:8, marginBottom:14}}>
                <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em', color: cur?'var(--ink-500)':'#fff', background: cur?'transparent':'var(--navy-700)', border: cur?'1px solid var(--paper-line)':'none', borderRadius:5, padding:'4px 10px', fontWeight:700}}>{c.kind}</span>
                {cur && <span style={{fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.1em', color:'var(--accent)', fontWeight:700}}>● ご覧中</span>}
              </div>
              <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:24, color:'var(--ink-900)', letterSpacing:'.04em', marginBottom:12}}>労務ニュース</div>
              <p style={{fontSize:13.5, lineHeight:1.85, color:'var(--ink-700)', margin:'0 0 20px', minHeight:'3.7em'}}>{c.scope}</p>
              {cur
                ? <span style={{display:'inline-block', fontSize:13, fontWeight:700, color:'var(--ink-500)', borderTop:'1px dashed var(--paper-line)', paddingTop:16, width:'100%'}}>いまご覧になっているサイトです</span>
                : <span className="btn btn--primary" style={{width:'100%', justifyContent:'center'}}>このサイトを見る <Arrow/></span>}
            </>
          );
          const base = {flex:'1 1 340px', maxWidth:480, borderRadius:'var(--radius)', padding:'30px 30px', display:'flex', flexDirection:'column'};
          return cur
            ? <div key={c.key} style={{...base, background:'var(--paper)', border:'1px dashed var(--paper-line)'}}>{inner}</div>
            : <a key={c.key} href={c.href} style={{...base, background:'#fff', border:'1px solid var(--paper-line)', borderTop:'4px solid var(--accent)', boxShadow:'0 14px 36px -18px rgba(20,32,60,.28)', textDecoration:'none', color:'inherit', transition:'transform .2s, box-shadow .2s'}}
                onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-6px)';e.currentTarget.style.boxShadow='0 22px 44px -18px rgba(20,32,60,.34)';}}
                onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='0 14px 36px -18px rgba(20,32,60,.28)';}}>{inner}</a>;
        })}
      </div>
    </div>
  </section>
);

Object.assign(window, { Arrow, Placeholder, Eyebrow, Topbar, PageHero, Breadcrumb, StickyCTA, Footer, GroupBand });