// Header + Footer

function Header({ tweaks, setTweak }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const links = [
    { href: "/#services", label: "サービス" },
    { href: "/#works", label: "制作実績" },
    { href: "/#pricing", label: "料金プラン" },
    { href: "/#flow", label: "制作の流れ" },
    { href: "/#faq", label: "よくあるご質問" },
    { href: "about.html", label: "事業概要" },
  ];

  return (
    <>
      <header className={`site-header ${scrolled ? "scrolled" : ""}`}>
        <div className="container nav">
          <a href="/" aria-label="ITtech Works home"><Logo /></a>
          <nav className="nav-links">
            {links.map((l) => (
              <a key={l.href} href={l.href}>{l.label}</a>
            ))}
          </nav>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <a className="nav-cta" href="/#contact">
              <Icon name="mail" size={16} />
              無料相談・お問い合わせ
            </a>
            <button
              className="nav-toggle"
              aria-label="Open menu"
              onClick={() => setOpen(true)}
              style={{
                border: "1px solid var(--border)",
                background: "var(--surface)",
                borderRadius: "var(--btn-radius, 10px)",
                width: 40, height: 40,
                alignItems: "center", justifyContent: "center",
                color: "var(--fg)",
              }}
            >
              <Icon name="menu" size={20} />
            </button>
          </div>
        </div>
      </header>

      {/* モバイルメニュー — header の外に置くことで CSS の制約を受けない */}
      {open && (
        <>
          {/* 背景オーバーレイ */}
          <div
            onClick={() => setOpen(false)}
            style={{
              position: "fixed", inset: 0,
              background: "rgba(0,0,0,0.5)",
              zIndex: 200,
            }}
          />
          {/* ドロワーパネル */}
          <div
            style={{
              position: "fixed", top: 0, right: 0, bottom: 0,
              width: "min(320px, 85vw)",
              background: "#14224a",
              padding: "20px 24px",
              display: "flex", flexDirection: "column", gap: 0,
              overflowY: "auto",
              zIndex: 201,
              boxShadow: "-4px 0 32px rgba(0,0,0,0.5)",
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, paddingBottom: 16, borderBottom: "1px solid rgba(255,255,255,0.15)" }}>
              <Logo />
              <button onClick={() => setOpen(false)} style={{ background: "none", border: "none", color: "#fff", cursor: "pointer", padding: 4 }}>
                <Icon name="x" size={24} />
              </button>
            </div>
            {links.map((l) => (
              <a
                key={l.href} href={l.href} onClick={() => setOpen(false)}
                style={{
                  display: "block",
                  padding: "16px 8px",
                  borderBottom: "1px solid rgba(255,255,255,0.1)",
                  fontSize: 15, fontWeight: 500,
                  color: "#fff",
                  textDecoration: "none",
                }}
              >
                {l.label}
              </a>
            ))}
            <a className="btn btn-primary btn-lg" href="/#contact" onClick={() => setOpen(false)} style={{ marginTop: 24 }}>
              <Icon name="mail" size={16} />無料相談
            </a>
          </div>
        </>
      )}
    </>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <Logo size={52} />
            <p style={{ marginTop: 14, color: "var(--fg-3)", fontSize: 13, lineHeight: 1.8, maxWidth: 320 }}>
              中小企業の「成果につながるWebサイト」を、丁寧なヒアリングと確かな技術で。
              企画から運用までを一気通貫でサポートします。
            </p>
          </div>
          <div className="footer-col">
            <h4>サービス</h4>
            <ul>
              <li><a href="/#services">ホームページ制作</a></li>
              <li><a href="/#services">ランディングページ制作</a></li>
              <li><a href="/#services">SEO・集客支援</a></li>
              <li><a href="/#services">保守・運用サポート</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>会社情報</h4>
            <ul>
              <li><a href="about.html">事業概要</a></li>
              <li><a href="/#works">制作実績</a></li>
              <li><a href="/#pricing">料金プラン</a></li>
              <li><a href="/#flow">制作の流れ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>公式LINE</h4>
            <div style={{
              background: "#fff",
              border: "1px solid var(--border)",
              borderRadius: 12,
              padding: 12,
              display: "flex",
              gap: 12,
              alignItems: "center",
              maxWidth: 260,
            }}>
              <div style={{ flex: "0 0 auto", lineHeight: 0 }}>
                <PlaceholderQR size={88} />
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 5, background: "#06C755",
                    display: "grid", placeItems: "center", color: "#fff", fontWeight: 800, fontSize: 11,
                    fontFamily: "system-ui, sans-serif",
                  }}>L</span>
                  <span style={{ fontSize: 12, fontWeight: 800, color: "var(--fg)" }}>友だち追加</span>
                </div>
                <div style={{ fontSize: 11, color: "var(--fg-3)", lineHeight: 1.5 }}>
                  QRを読み取って<br />お気軽にご相談ください
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ITtechWorks. All Rights Reserved.</span>
          <span style={{ display: "flex", gap: 18 }}>
            <a href="policy.html#privacy">プライバシーポリシー</a>
            <a href="policy.html#tokushoho">特定商取引法に基づく表記</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer });