// 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", label: "会社概要" },
  ];

  return (
    <header className={`site-header ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav">
        <a href="#top" 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>

      {open && (
        <div
          onClick={() => setOpen(false)}
          style={{
            position: "fixed", inset: 0, background: "rgba(10,17,36,.5)",
            backdropFilter: "blur(8px)", zIndex: 100, display: "flex",
            alignItems: "flex-start", justifyContent: "flex-end",
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              width: "min(360px, 88%)", height: "100%", background: "var(--bg)",
              padding: "20px 24px", display: "flex", flexDirection: "column", gap: 8,
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
              <Logo />
              <button onClick={() => setOpen(false)} style={{ background: "none", border: "none", color: "var(--fg)" }}>
                <Icon name="x" size={22} />
              </button>
            </div>
            {links.map((l) => (
              <a
                key={l.href} href={l.href} onClick={() => setOpen(false)}
                style={{ padding: "14px 8px", borderBottom: "1px solid var(--border)", fontSize: 15, fontWeight: 500 }}
              >
                {l.label}
              </a>
            ))}
            <a className="btn btn-primary btn-lg" href="#contact" style={{ marginTop: 16 }}>
              <Icon name="mail" size={16} />無料相談
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

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">会社概要</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>
            <ul style={{ marginTop: 14 }}>
              <li>営業時間 平日 10:00–18:00</li>
              <li>東京都千代田区一番町 1-2-3</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ITtech Works Inc. All Rights Reserved.</span>
          <span style={{ display: "flex", gap: 18 }}>
            <a href="#">プライバシーポリシー</a>
            <a href="#">特定商取引法に基づく表記</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

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