function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nav = [
    { id: "worries", label: "お悩み" },
    { id: "strengths", label: "事務所について" },
    { id: "simulator", label: "受給診断" },
    { id: "flow", label: "ご相談の流れ" },
    { id: "pricing", label: "料金" },
    { id: "faq", label: "よくあるご質問" },
  ];

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
    setMenuOpen(false);
  };

  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0,
      zIndex: 100,
      background: scrolled ? "rgba(251, 248, 242, 0.94)" : "rgba(251, 248, 242, 0.7)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "all 0.3s ease",
    }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: "16px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: 24,
      }}>
        {/* Logo */}
        <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }} style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <LogoMark />
          <div>
            <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: "0.05em", lineHeight: 1.2 }}>
              障害年金専門 社労士事務所
            </div>
            <div style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: "0.1em", marginTop: 2 }}>
              社会保険労務士法人 ◯◯サポート
            </div>
          </div>
        </a>

        {/* Nav */}
        <nav className="header-nav" style={{ display: "flex", alignItems: "center", gap: 28 }}>
          {nav.map(n => (
            <a key={n.id} href={`#${n.id}`} onClick={(e) => { e.preventDefault(); scrollTo(n.id); }}
              style={{ fontSize: 14, color: "var(--ink)", letterSpacing: "0.05em" }}>
              {n.label}
            </a>
          ))}
        </nav>

        {/* CTA */}
        <a href="tel:0120-000-000" className="header-cta" style={{
          display: "flex", alignItems: "center", gap: 10,
          padding: "10px 20px",
          border: "1px solid var(--gold)",
          borderRadius: 999,
          color: "var(--gold-deep)",
          fontSize: 13,
          letterSpacing: "0.08em",
          background: "rgba(255,255,255,0.6)",
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          <span>お電話でのご相談</span>
        </a>

        {/* Mobile menu toggle */}
        <button className="menu-toggle" onClick={() => setMenuOpen(!menuOpen)} style={{ display: "none", padding: 8 }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
            {menuOpen ? <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></> : <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>}
          </svg>
        </button>
      </div>

      {/* Mobile menu drawer */}
      {menuOpen && (
        <div className="mobile-drawer" style={{
          padding: "20px 32px 32px",
          borderTop: "1px solid var(--line)",
          background: "var(--bg)",
        }}>
          {nav.map(n => (
            <a key={n.id} href={`#${n.id}`} onClick={(e) => { e.preventDefault(); scrollTo(n.id); }}
              style={{ display: "block", padding: "14px 0", borderBottom: "1px solid var(--line-soft)", fontSize: 15 }}>
              {n.label}
            </a>
          ))}
          <a href="tel:0120-000-000" style={{
            display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
            marginTop: 20,
            padding: "14px 20px",
            background: "var(--gold)",
            color: "white",
            borderRadius: 999,
            fontSize: 14,
            letterSpacing: "0.08em",
          }}>
            <span>0120-000-000</span>
          </a>
        </div>
      )}

      <style>{`
        @media (max-width: 960px) {
          .header-nav, .header-cta { display: none !important; }
          .menu-toggle { display: block !important; }
        }
      `}</style>
    </header>
  );
}

function LogoMark() {
  return (
    <div style={{
      width: 44, height: 44,
      display: "grid", placeItems: "center",
      background: "linear-gradient(135deg, #FBF8F2, #F0E5CC)",
      borderRadius: "50%",
      border: "1px solid var(--gold-light)",
      boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.6)",
    }}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        {/* leaf-like emblem */}
        <path d="M12 3 C 7 6, 5 11, 6 17 C 6 17, 9 14, 12 14 C 15 14, 18 17, 18 17 C 19 11, 17 6, 12 3 Z" fill="var(--gold)" opacity="0.85"/>
        <path d="M12 14 L 12 21" stroke="var(--gold-deep)" strokeWidth="1.4" strokeLinecap="round"/>
      </svg>
    </div>
  );
}

window.Header = Header;
window.LogoMark = LogoMark;