// ── Header ──────────────────────────────────────────────
function Header() {
  const [open, setOpen] = React.useState(false);
  const links = [
    { href: '#about', label: 'ご家族向け' },
    { href: '#pro', label: 'ケアマネ向け' },
    { href: '#trust', label: '対応エリア・スタッフ' },
    { href: '#flow', label: 'ご利用の流れ' },
    { href: '#price', label: '料金' },
    { href: '#faq', label: 'よくある質問' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'blur(8px)',
      borderBottom: '1px solid var(--color-border-default)'
    }}>
      <div className="container header-container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 72, gap: 24, maxWidth: 'none', position: 'relative'
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10, flex: '0 0 auto' }}>
          <span style={{
            width: 34, height: 34, borderRadius: '50%',
            background: 'var(--color-bg-primary-soft)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            overflow: 'hidden', border: '1px solid var(--color-border-default)'
          }}>
            <img
              src="assets/mascot-polar-bear.jpg"
              alt="あおぞら訪問マッサージ院のしろくまマスコット"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }}
            />
          </span>
          <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 19, color: 'var(--color-text-heading)' }}>
            あおぞら訪問マッサージ院
          </span>
        </a>

        <nav className="pc-nav" style={{
          position: 'absolute', left: '50%', transform: 'translateX(-50%)',
          display: 'flex', gap: 16, alignItems: 'center', justifyContent: 'center', flexWrap: 'nowrap'
        }}>
          {links.map(l => (
            <a key={l.href} href={l.href} style={{ fontSize: 13.5, color: 'var(--color-text-body)', whiteSpace: 'nowrap' }}>{l.label}</a>
          ))}
          <a href="#contact" className="btn btn-family" style={{ padding: '9px 18px', fontSize: 13.5, whiteSpace: 'nowrap' }}>無料相談</a>
        </nav>

        <button className="mb-btn" onClick={() => setOpen(!open)} aria-label="メニュー" style={{
          display: 'none', background: 'none', border: 'none', fontSize: 26, cursor: 'pointer'
        }}>☰</button>
      </div>

      {open && (
        <div className="mb-menu" style={{ padding: '8px 24px 20px', borderTop: '1px solid var(--color-border-default)' }}>
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}
               style={{ display: 'block', padding: '12px 0', borderBottom: '1px solid var(--color-border-default)' }}>{l.label}</a>
          ))}
          <a href="#contact" onClick={() => setOpen(false)} className="btn btn-family" style={{ marginTop: 16, width: '100%', justifyContent: 'center' }}>無料相談はこちら</a>
        </div>
      )}

      <style>{`
        @media (max-width: 1060px) {
          .pc-nav { display: none !important; }
          .mb-btn { display: block !important; }
        }
        .header-container { padding-left: 24px !important; padding-right: 24px !important; }
        @media (max-width: 520px) {
          .header-container { padding-left: 16px !important; padding-right: 16px !important; }
        }
      `}</style>
    </header>
  );
}