/* 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' },
  { href: 'contact.html', label: 'お問い合わせ', sub: 'Contact' }
];

const Topbar = ({ current='index.html' }) => (
  <header className="topbar">
    <div style={{background:'var(--navy-700)', color:'#fff', fontSize:12.5, letterSpacing:'.03em'}}>
      <div className="container" style={{display:'flex', justifyContent:'flex-end', gap:0, padding:'0 20px', flexWrap:'wrap'}}>
        <span style={{padding:'8px 16px', background:'var(--accent)', color:'#fff', fontWeight:700}}>社会保険労務士法人</span>
        <a href="/co/" style={{padding:'8px 16px', color:'#fff', fontWeight:600, textDecoration:'none', display:'inline-flex', alignItems:'center', gap:6, borderLeft:'1px solid rgba(255,255,255,.2)'}}>株式会社（研修・AI・人事評価）はこちら<span aria-hidden>→</span></a>
      </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#roumu-kun">オマカセロウムくん</a></li>
            <li><a href="service.html#joseikin">オマカセ助成金申請</a></li>
            <li><a href="service.html#freee">オマカセfreee導入</a></li>
            <li><a href="service.html#rules">オマカセできない就業規則</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="/co/">株式会社 労務ニュース（研修・AI・人事評価）</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 cross-link band — 社労士法人トップから株式会社サイトへ誘導 */
const CoPromo = () => (
  <section style={{background:'linear-gradient(135deg, var(--navy-800), var(--navy-900))', color:'#fff', padding:'64px 0'}} data-screen-label="Group · 株式会社へ">
    <div className="container" style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:36, flexWrap:'wrap'}}>
      <div style={{flex:'1 1 440px'}}>
        <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.2em', color:'var(--accent)', fontWeight:700, marginBottom:14}}>GROUP · 株式会社 労務ニュース</div>
        <h2 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(22px,3vw,30px)', lineHeight:1.5, color:'#fff', margin:'0 0 14px', letterSpacing:'.03em'}}>
          社員研修・AI活用・人事評価制度は、<br/><em style={{fontStyle:'normal', background:'linear-gradient(180deg, transparent 60%, rgba(230,126,34,.6) 60% 92%, transparent 92%)', padding:'0 4px'}}>株式会社 労務ニュース</em>へ。
        </h2>
        <p style={{fontSize:15, lineHeight:1.95, color:'rgba(255,255,255,.85)', margin:0, maxWidth:'58ch'}}>
          手続き・助成金・freee・規程は当社（社労士法人）が担当。チームづくり・各種AI研修・人事評価制度づくりは、同じ代表が率いる株式会社が担当します。実務と戦略、二法人の両輪でお応えします。
        </p>
      </div>
      <a href="/co/" style={{flex:'0 0 auto', display:'inline-flex', alignItems:'center', gap:10, background:'var(--accent)', color:'#fff', fontWeight:700, fontSize:16, padding:'17px 30px', borderRadius:'var(--radius)', textDecoration:'none', letterSpacing:'.04em', boxShadow:'0 10px 28px -10px rgba(230,126,34,.6)'}}>株式会社のサイトを見る <Arrow/></a>
    </div>
  </section>
);

/** 30秒 課題診断 — 「何をしたいか」で推奨サービスへ誘導（両法人横断） */
const DIAG_WANTS = [
  { label: '労務を丸ごと任せて、経営に集中したい', svc: 'オマカセロウムくん', group: '社労士法人', desc: '給与計算・手続き・社員対応・freee運用・就業規則の小改訂まで、日常の労務をまるごと引き取る月次顧問。', price: '月額 5万円〜', href: 'service-roumu.html' },
  { label: '使える助成金を、取りこぼさず取りたい', svc: 'オマカセ助成金申請', group: '社労士法人', desc: '累計6億円超の実績。取れる助成金を、取れるタイミングで設計して取り切る成功報酬型。', price: '完全成功報酬型', href: 'joseikin.html' },
  { label: '人事労務を、DX化したい', svc: 'オマカセfreee導入', group: '社労士法人', desc: 'freee人事労務を「使える状態」まで持っていく、約4ヶ月の伴走型導入・運用支援。', price: '導入伴走 要相談', href: 'freee.html' },
  { label: '就業規則を整えて、トラブルに備えたい', svc: 'オマカセできない就業規則', group: '社労士法人', desc: '雛形のコピペではなく、社長が自分の言葉で「こう決めた」と言える規則づくり。', price: '作成 25万円〜', href: 'rules.html' },
  { label: '幹部・管理職を育てたい', svc: 'チームを機能させる、幹部を育てる', group: '株式会社', desc: '体験型の学びと、現場が回り出すまでの伴走で、自分で動かせるチームに。', price: '研修＋伴走 要相談', href: '/co/service-leadership.html' },
  { label: 'AIを活用したい', svc: 'チームを、AIで動かす', group: '株式会社', desc: '業務に落とし込む各種AI研修と、月次のAI顧問で、AIを「使える人事部」に。', price: '研修 385,000円／名', href: '/co/service-ai.html' },
  { label: '評価制度をつくりたい・見直したい', svc: 'チームに、共通の目的と価値観を', group: '株式会社', desc: '等級・賃金・評価（業績／行動）を設計し直し、運用が定着するまで伴走。', price: '設計＋運用伴走 要相談', href: '/co/service-hyoka.html' }
];

const Diagnose = () => {
  const [sel, setSel] = React.useState(null);
  return (
    <section style={{padding:'76px 0', background:'var(--paper-2)'}} id="diagnose" data-screen-label="30秒診断">
      <div className="container" style={{maxWidth:940, margin:'0 auto'}}>
        <div className="section-head" style={{textAlign:'center', marginBottom:34}}>
          <Eyebrow>30-SECOND NAVI · 30秒で、自社に合う一手を</Eyebrow>
          <h2>いま、何をしたいですか？</h2>
          <p className="lead" style={{marginTop:12, marginLeft:'auto', marginRight:'auto'}}>ひとつ選ぶと、おすすめのサービスと相談先をお見せします。社労士法人・株式会社のどちらが担当かも分かります。</p>
        </div>
        {!sel ? (
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(270px, 1fr))', gap:12}}>
            {DIAG_WANTS.map((w, i) => (
              <button key={i} onClick={() => setSel(w)} style={{
                textAlign:'left', cursor:'pointer', background:'#fff',
                border:'1px solid var(--paper-line)', borderRadius:'var(--radius)',
                padding:'18px 20px', font:'inherit', color:'var(--ink-900)',
                display:'flex', alignItems:'center', justifyContent:'space-between', gap:12,
                transition:'border-color .2s, transform .2s, box-shadow .2s'
              }}
              onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--accent)';e.currentTarget.style.transform='translateY(-2px)';e.currentTarget.style.boxShadow='0 10px 24px -14px rgba(20,32,60,.2)';}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor='var(--paper-line)';e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';}}
              >
                <span style={{fontWeight:600, fontSize:15, lineHeight:1.5}}>{w.label}</span>
                <span style={{flex:'0 0 auto', color:'var(--accent)'}}><Arrow/></span>
              </button>
            ))}
          </div>
        ) : (
          <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid var(--accent)', borderRadius:'var(--radius)', padding:'32px 34px'}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.16em', color:'var(--accent)', fontWeight:700, marginBottom:6}}>あなたへのおすすめ ／ {sel.group}が担当</div>
            <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:24, color:'var(--ink-900)', margin:'0 0 12px', letterSpacing:'.02em'}}>{sel.svc}</h3>
            <p style={{fontSize:14.5, lineHeight:1.95, color:'var(--ink-700)', margin:'0 0 16px', maxWidth:'64ch'}}>{sel.desc}</p>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--navy-700)', marginBottom:22}}>{sel.price}</div>
            <div style={{display:'flex', gap:12, flexWrap:'wrap', alignItems:'center'}}>
              <a className="btn btn--navy" href={sel.href}>このサービスを詳しく <Arrow/></a>
              <a className="btn btn--primary" href="contact.html">この内容で無料相談</a>
              <button onClick={() => setSel(null)} style={{background:'none', border:'none', cursor:'pointer', font:'inherit', color:'var(--ink-500)', textDecoration:'underline', padding:'8px 4px'}}>もう一度選び直す</button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

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