/* 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' },
  { 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' }) => (
  <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 => (
          <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--primary btn--sm" href="https://timerex.net/s/ryo.kurata_ada7_dad9/e55e9800" target="_blank" rel="noopener">無料相談を予約 <Arrow/></a>
      </div>
    </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:05057843633"><small>電話で相談</small>050-5784-3633</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-3633 / 平日 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.html#ikusei">ファシリ型育成</a></li>
            <li><a href="service.html#ai-manabu">オマカセAIマナブくん</a></li>
            <li><a href="service.html#hyoka">人事評価制度</a></li>
            <li><a href="../index.html">社労士法人サイト</a></li>
          </ul>
        </div>
        <div>
          <h5>会社情報</h5>
          <ul>
            <li><a href="about.html">会社概要・メンバー</a></li>
            <li><a href="about.html#message">代表あいさつ</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="#">プライバシーポリシー</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 株式会社 労務ニュース. All rights reserved.</span>
        <span>ミッション：経営者のストレスを減らし、企業の成長を後押しする。</span>
      </div>
    </div>
  </footer>
);

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