// リユース事業サイト（/reuse/）— 共通ヘッダー（全ナビが実動作）
function ReuseHeader({ current, onNavigate }) {
  const { Button } = window.DesignSystem_36acde;
  const nav = [
    { id: 'home', label: 'ホーム' },
    { id: 'service', label: 'サービス' },
    { id: 'mission', label: 'わたしたちの役割' },
    { id: 'kouken', label: '地域・社会貢献' },
    { id: 'kentei', label: '古物営業法' },
    { id: 'blog', label: 'ブログ' },
    { id: 'company', label: '会社概要' },
  ];
  // 本番では会社トップ "/"。ローカルプレビューでは ../top/index.html
  const TOP_URL = '../top/index.html';
  const RAKUAI_URL = 'https://www.smilefactory-rakuai.com/';
  return (
    <React.Fragment>
      {/* 上部ユーティリティ帯：親会社・他事業への導線 */}
      <div style={{ background: 'var(--green-800)', color: 'rgba(255,255,255,0.85)' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 24px', height: 36, display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700 }}>株式会社スマイルファクトリー｜リユース事業</span>
          <span style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <a href={TOP_URL} style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>会社トップ</a>
            <a href={RAKUAI_URL} target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(255,255,255,0.85)', textDecoration: 'none' }}>かわさき楽AIサポート ↗</a>
          </span>
        </div>
      </div>
      {/* メインヘッダー（追従） */}
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(250,247,240,0.88)', backdropFilter: 'blur(10px)',
        borderBottom: '1px solid var(--border-subtle)',
      }}>
        <div style={{
          maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '0 24px',
          height: 76, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('home'); }} style={{ display: 'flex', alignItems: 'center' }}>
            <img src="../../assets/logo-horizontal.svg" alt="スマイルファクトリー リユース事業" style={{ height: 44 }} />
          </a>
          <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
            {nav.map((n) => (
              <a key={n.id} href="#" onClick={(e) => { e.preventDefault(); onNavigate(n.id); }}
                style={{
                  padding: '8px 14px', borderRadius: 'var(--radius-pill)',
                  fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15,
                  color: current === n.id ? 'var(--green-700)' : 'var(--ink-700)',
                  background: current === n.id ? 'var(--green-100)' : 'transparent',
                  textDecoration: 'none', whiteSpace: 'nowrap',
                }}>{n.label}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Button variant="primary" size="sm" onClick={() => onNavigate('contact')}>お問い合わせ</Button>
          </div>
        </div>
      </header>
    </React.Fragment>
  );
}
window.ReuseHeader = ReuseHeader;