// Sticky header. Navy-on-sky, thin bottom hairline.
function Header() {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  const nav = [
    { label: "お知らせ", href: "#news", en: "News" },
    { label: "事業紹介", href: "#services", en: "Service" },
    { label: "弊社メディア・コミュニティ", href: "#youtube-feature", en: "Media" },
    { label: "コラム", href: "https://piyoai.b-steep.com/", en: "Column", external: true },
  ];

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50, width: "100%",
      background: scrolled ? "rgba(255, 255, 255, 0.92)" : "rgba(255, 255, 255, 0.78)",
      backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)",
      borderBottom: "1px solid rgba(207, 233, 244, 0.7)",
      transition: "background 0.2s ease",
    }}>
      <div className="wrap" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 88, gap: 16,
      }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", flexShrink: 0 }} aria-label="B-Steep">
          <img src="assets/b-steep.svg" alt="B-Steep" style={{ height: 46, width: "auto" }} />
        </a>

        <nav className="hide-lt-lg" style={{ display: "flex", alignItems: "center", gap: 28 }}>
          {nav.map((item) => (
            <a key={item.href} href={item.href}
              target={item.external ? "_blank" : undefined}
              rel={item.external ? "noopener noreferrer" : undefined}
              style={{
              fontSize: 13, fontWeight: 500, color: "var(--ink-2)", letterSpacing: "0.04em",
              transition: "color 0.15s",
            }}
              onMouseEnter={(e) => e.currentTarget.style.color = "var(--navy-900)"}
              onMouseLeave={(e) => e.currentTarget.style.color = "var(--ink-2)"}
            >
              {item.label}
            </a>
          ))}
        </nav>

        <div className="hide-lt-lg" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); window.openDeck && window.openDeck(); }} className="btn btn-yellow" style={{ height: 42, padding: "0 18px", fontSize: 12.5 }}>
            資料を見る
            <Icon.ArrowRight size={12} />
          </a>
          <a href="#contact" className="btn btn-primary" style={{ height: 42, padding: "0 18px", fontSize: 12.5 }}>
            お問い合わせ
            <Icon.ArrowRight size={12} />
          </a>
        </div>

        <button
          className="show-lt-lg"
          onClick={() => setOpen(!open)}
          aria-label={open ? "メニューを閉じる" : "メニューを開く"}
          style={{
            width: 44, height: 44, borderRadius: 999,
            border: "none", background: "transparent", color: "var(--navy-900)",
            display: "flex", alignItems: "center", justifyContent: "center",
            cursor: "pointer",
          }}
        >
          {open ? <Icon.Close /> : <Icon.Menu />}
        </button>
      </div>

      {open && (
        <div className="show-lt-lg" style={{
          borderTop: "1px solid var(--sky-200)",
          background: "rgba(255, 255, 255, 0.98)",
          backdropFilter: "blur(12px)",
        }}>
          <nav style={{ display: "flex", flexDirection: "column", padding: "8px 24px" }}>
            {nav.map((item) => (
              <a key={item.href} href={item.href}
                target={item.external ? "_blank" : undefined}
                rel={item.external ? "noopener noreferrer" : undefined}
                onClick={() => setOpen(false)}
                style={{
                  padding: "18px 0",
                  borderBottom: "1px solid rgba(207, 233, 244, 0.7)",
                  display: "flex", justifyContent: "space-between", alignItems: "baseline",
                  fontSize: 15, fontWeight: 500, color: "var(--ink)",
                }}>
                <span>{item.label}</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.18em", color: "var(--ink-3)" }}>
                  {item.en}
                </span>
              </a>
            ))}
          </nav>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, padding: "16px 24px 24px" }}>
            <a href="#" onClick={(e) => { e.preventDefault(); setOpen(false); window.openDeck && window.openDeck(); }} className="btn btn-yellow" style={{ justifyContent: "center", width: "100%" }}>
              資料を見る <Icon.ArrowRight size={14} />
            </a>
            <a href="#contact" onClick={() => setOpen(false)} className="btn btn-primary" style={{ justifyContent: "center", width: "100%" }}>
              お問い合わせ <Icon.ArrowRight size={14} />
            </a>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 1023px) {
          .hide-lt-lg { display: none !important; }
        }
        @media (min-width: 1024px) {
          .show-lt-lg { display: none !important; }
        }
      `}</style>
    </header>
  );
}

window.Header = Header;