// site-chrome.jsx — Shared Header + Footer used by all pages

const { useState: useChromeState } = React;

function SiteHeader() {
  const [open, setOpen] = useChromeState(false);
  const [supportOpen, setSupportOpen] = useChromeState(false);

  const path = typeof window !== "undefined" ? window.location.pathname.replace(/\/$/, "") : "";
  const isActive = (href) => href === "/" ? path === "" || path === "/" : path === href || path.startsWith(href + "/");
  const isSupportActive = ["/faq", "/contact"].some(h => path === h);

  const mainLinks = [
    { label: "サービス",   sub: "SERVICE", href: "/service" },
    { label: "プラン",     sub: "PRICING", href: "/pricing" },
    { label: "ブログ",     sub: "BLOG",    href: "/blog" },
    { label: "会社概要",   sub: "ABOUT",   href: "/about" },
  ];
  const supportLinks = [
    { label: "よくある質問", sub: "FAQ",     href: "/faq" },
    { label: "お問い合わせ", sub: "CONTACT", href: "/contact" },
  ];
  return (
    <header style={{ background: "#fff", borderBottom: `1px solid ${LINE}`, position: "sticky", top: 0, zIndex: 50 }}>
      <div className="site-container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 0" }}>
        <a href="/" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
          <Wordmark size={26}/>
          <span style={{ fontSize: 11, color: MUTED, fontWeight: 600, borderLeft: `1px solid ${LINE}`, paddingLeft: 10, fontFamily: HD, whiteSpace: "nowrap" }} className="hide-sm">
            香盤AI生成ツール
          </span>
        </a>

        <nav className="header-nav" style={{ display: "flex", alignItems: "center", gap: 28 }}>
          {mainLinks.map((l, i) => {
            const active = isActive(l.href);
            return (
              <a key={l.href} href={l.href} style={{
                display: "flex", alignItems: "baseline", gap: 6, textDecoration: "none",
                color: active ? PRIM : INK,
                fontFamily: HD, fontWeight: 600, fontSize: 14, whiteSpace: "nowrap",
                borderBottom: active ? `2px solid ${PRIM}` : "2px solid transparent",
                paddingBottom: 2,
              }}>
                <span style={{ fontSize: 10, color: active ? PRIM : FAINT, fontWeight: 700, fontFamily: MN }}>0{i+1}</span>
                <span>{l.label}</span>
              </a>
            );
          })}
          {/* サポートドロップダウン */}
          <div style={{ position: "relative" }}
            onMouseEnter={() => setSupportOpen(true)}
            onMouseLeave={() => setSupportOpen(false)}>
            <button style={{
              display: "flex", alignItems: "center", gap: 5, background: "none", border: "none",
              cursor: "pointer", fontFamily: HD, fontWeight: 600, fontSize: 14,
              color: isSupportActive ? PRIM : INK,
              padding: "0 0 2px", borderBottom: isSupportActive ? `2px solid ${PRIM}` : "2px solid transparent",
              whiteSpace: "nowrap",
            }}>
              <span style={{ fontSize: 10, color: isSupportActive ? PRIM : FAINT, fontWeight: 700, fontFamily: MN }}>05</span>
              <span>サポート</span>
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" style={{ marginLeft: 2 }}>
                <path d="M1 1l4 4 4-4" stroke={isSupportActive ? PRIM : FAINT} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
            {supportOpen && (
              <div style={{ position: "absolute", top: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)", background: "#fff", border: `1px solid ${LINE}`, borderRadius: 12, padding: "6px 0", boxShadow: "0 8px 32px -8px rgba(15,23,42,.16)", minWidth: 192, zIndex: 200 }}>
                {supportLinks.map((l) => (
                  <a key={l.href} href={l.href} style={{ display: "block", padding: "10px 20px", color: isActive(l.href) ? PRIM : INK, fontFamily: HD, fontSize: 13.5, fontWeight: 600, textDecoration: "none" }}
                    onMouseEnter={e => e.currentTarget.style.background = LINE_F}
                    onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                    {l.label}
                    <span style={{ display: "block", fontSize: 10, color: isActive(l.href) ? PRIM : FAINT, fontFamily: MN, marginTop: 1 }}>{l.sub}</span>
                  </a>
                ))}
              </div>
            )}
          </div>
        </nav>

        <div className="header-cta" style={{ display: "flex", alignItems: "center", gap: 20 }}>
          <a href="https://kyakuhon-pakkun.com" style={{ color: SUB, textDecoration: "none", fontSize: 13, fontFamily: HD, fontWeight: 600, whiteSpace: "nowrap" }}>ログイン</a>
          <PrimaryButton href="https://buy.stripe.com/7sYeVf5VRgKl3G17tvffy0l">30日間無料で試す</PrimaryButton>
        </div>

        <button className="header-burger" onClick={() => setOpen(!open)} style={{ display: "none", background: "transparent", border: "none", padding: 8 }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke={INK} strokeWidth="2">
            <path d={open ? "M6 6L18 18M18 6L6 18" : "M4 7h16M4 12h16M4 17h16"} strokeLinecap="round"/>
          </svg>
        </button>
      </div>

      {open && (
        <div className="header-mobile-menu" style={{ borderTop: `1px solid ${LINE}`, padding: "16px 0", background: "#fff" }}>
          <div className="site-container" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {mainLinks.map((l, i) => {
              const active = isActive(l.href);
              return (
                <a key={l.href} href={l.href} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, color: active ? PRIM : INK, textDecoration: "none", fontFamily: HD, fontWeight: 700, fontSize: 18 }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
                    <span style={{ fontSize: 11, color: active ? PRIM : FAINT, fontFamily: MN }}>0{i+1}</span>
                    <span>{l.label}</span>
                  </div>
                  {active && <span style={{ width: 6, height: 6, borderRadius: "50%", background: PRIM, flexShrink: 0 }}/>}
                </a>
              );
            })}
            <div style={{ borderTop: `1px solid ${LINE_F}`, paddingTop: 12, marginTop: 4, display: "flex", flexDirection: "column", gap: 10 }}>
              <div style={{ fontFamily: MN, fontWeight: 700, fontSize: 9, color: FAINT, letterSpacing: ".12em" }}>SUPPORT</div>
              {supportLinks.map((l) => (
                <a key={l.href} href={l.href} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", color: isActive(l.href) ? PRIM : SUB, textDecoration: "none", fontFamily: HD, fontWeight: 600, fontSize: 16 }}>
                  <span>{l.label}</span>
                  {isActive(l.href) && <span style={{ width: 6, height: 6, borderRadius: "50%", background: PRIM, flexShrink: 0 }}/>}
                </a>
              ))}
            </div>
            <a href="https://kyakuhon-pakkun.com" style={{ color: SUB, marginTop: 8, fontFamily: HD, fontWeight: 600 }}>ログイン</a>
            <PrimaryButton href="https://buy.stripe.com/7sYeVf5VRgKl3G17tvffy0l" style={{ alignSelf: "stretch", justifyContent: "center" }}>30日間無料で試す</PrimaryButton>
          </div>
        </div>
      )}
    </header>
  );
}

function SiteFooter() {
  return (
    <footer style={{ background: "#F8F8F4", color: SUB, padding: "60px 0 40px", borderTop: `1px solid ${LINE}` }}>
      <div className="site-container">
        <div className="footer-grid" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 40, flexWrap: "wrap" }}>
          <div>
            <Wordmark size={26}/>
            <div style={{ fontFamily: HD, fontSize: 12, color: MUTED, marginTop: 8 }}>香盤AI生成ツール</div>
          </div>
          <div style={{ display: "flex", gap: 32, fontSize: 13, fontFamily: HD, flexWrap: "wrap" }}>
            {[
              { l: "利用規約", h: "https://service.kyakuhon-pakkun.com/terms" },
              { l: "プライバシーポリシー", h: "https://service.kyakuhon-pakkun.com/privacy" },
              { l: "特定商取引法に基づく表記", h: "https://service.kyakuhon-pakkun.com/tokushoho" },
              { l: "お問い合わせ", h: "https://service.kyakuhon-pakkun.com/contact" },
            ].map(({ l, h }) => (
              <a key={l} href={h} style={{ color: SUB, textDecoration: "none", fontWeight: 500 }}>{l}</a>
            ))}
          </div>
        </div>
        <div style={{ borderTop: `1px solid ${LINE}`, marginTop: 40, paddingTop: 20, fontSize: 11, color: FAINT, fontFamily: HD }}>
          <span style={{ whiteSpace: "nowrap" }}>© 2026 脚本パックン</span>
        </div>
      </div>
    </footer>
  );
}

// useInView for animations (also in site-sections.jsx — define here too for chrome-only pages)
function useInViewChrome(threshold = 0.15) {
  const ref = React.useRef(null);
  const [v, setV] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current || v) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => { if (e.isIntersecting) { setV(true); io.disconnect(); } }),
      { threshold }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [v, threshold]);
  return [ref, v];
}

function Reveal({ children, delay = 0, y = 12, as: Tag = "div", style, className }) {
  const [ref, inView] = useInViewChrome();
  return (
    <Tag ref={ref} className={className} style={{
      opacity: inView ? 1 : 0,
      transform: inView ? "translateY(0)" : `translateY(${y}px)`,
      transition: `opacity .65s cubic-bezier(.22,.61,.36,1) ${delay}ms, transform .7s cubic-bezier(.22,.61,.36,1) ${delay}ms`,
      ...style,
    }}>{children}</Tag>
  );
}

// Page hero — used by all sub-pages (consistent treatment)
function PageHero({ overline, title, subtitle, children }) {
  return (
    <section style={{ background: "#fff", padding: "72px 0 60px", borderBottom: `1px solid ${LINE}` }}>
      <div className="site-container" style={{ textAlign: "center" }}>
        {overline && <Overline>{overline}</Overline>}
        <Heading as="h1" size={56} weight={900} className="page-hero-title" style={{ marginTop: 16, lineHeight: 1.2, letterSpacing: "-0.025em", fontSize: "clamp(28px, 6vw, 56px)" }}>
          {title}
        </Heading>
        {subtitle && (
          <p style={{ marginTop: 18, color: SUB, fontFamily: HD, fontSize: 15, lineHeight: 1.85, maxWidth: 640, margin: "18px auto 0" }}>
            {subtitle}
          </p>
        )}
        {children && <div style={{ marginTop: 28 }}>{children}</div>}
      </div>
    </section>
  );
}

Object.assign(window, { SiteHeader, SiteFooter, Reveal, PageHero, useInViewChrome });