// Shared site components: Header, Footer, Brand mark
// Used across all pages of the kashinoya site

const { useState, useEffect } = React;

// ============ Brand Mark ============
function KMark({ size = 32, light = false }) {
  return (
    <div
      className="k-mark"
      style={{
        width: size,
        height: size,
        background: light ? "#ffffff" : "var(--ink)",
        color: light ? "var(--ink)" : "#ffffff",
        fontSize: size * 0.55,
      }}
    >K</div>
  );
}

// ============ Header ============
function Header({ variant = "light", current = "" }) {
  // variant: "light" (white pages) | "transparent-dark" (over dark hero)
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const overDark = variant === "transparent-dark" && !scrolled;
  const cls = scrolled
    ? "site-header is-scrolled"
    : variant === "transparent-dark"
    ? "site-header is-over-dark"
    : "site-header is-light";

  const links = [
    { href: "index.html#ai", label: "AI & DX", id: "ai" },
    { href: "index.html#support", label: "ビジネス支援", id: "support" },
    { href: "subsidy.html", label: "補助金一覧", id: "subsidy" },
    { href: "blog.html", label: "Blog", id: "blog" },
    { href: "index.html#cases", label: "事例", id: "cases" },
    { href: "index.html#about", label: "会社概要", id: "about" },
  ];

  return (
    <header className={cls}>
      <div className="header-inner">
        <a href="index.html" className="brand">
          <KMark size={36} light={overDark} />
          <div className="brand-text">
            <span className="brand-en">KASHINOYA</span>
            <span className="brand-jp">株式会社 樫乃屋</span>
          </div>
        </a>
        <nav className="nav">
          {links.map((l) => (
            <a
              key={l.id}
              href={l.href}
              className={current === l.id ? "is-active" : ""}
            >
              {l.label}
            </a>
          ))}
          <a href="#contact" className="nav-cta">
            お問い合わせ
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </nav>
        <button className="nav-toggle" onClick={() => setOpen(!open)} aria-label="menu">
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            {open ? (
              <path d="M5 5l12 12M17 5L5 17" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            ) : (
              <path d="M3 6h16M3 11h16M3 16h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
            )}
          </svg>
        </button>
      </div>
      {open && (
        <div className="mobile-menu">
          {links.map((l) => (
            <a key={l.id} href={l.href}>{l.label}</a>
          ))}
          <a href="#contact" className="mobile-cta">お問い合わせ</a>
        </div>
      )}
    </header>
  );
}

// ============ Footer ============
function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-top">
        <div className="footer-brand-col">
          <a href="index.html" className="footer-brand">
            <KMark size={36} />
            <div>
              <div className="brand-en" style={{ color: "var(--ink)" }}>KASHINOYA</div>
              <div className="brand-jp">株式会社 樫乃屋</div>
            </div>
          </a>
          <p className="footer-desc">
            AI・DX技術と補助金・経営コンサルティングを融合させ、
            企業の持続的な成長を支援するビジネスパートナー。
          </p>
          <div className="footer-info">
            <div><span>所在地</span>神奈川県横浜市</div>
            <div><span>設立</span>2020年4月</div>
            <div><span>TEL</span>045-000-0000</div>
          </div>
        </div>
        <div className="footer-cols">
          <div>
            <div className="fc-head">Solutions</div>
            <a href="#">AI & DX Solutions</a>
            <a href="#">補助金・資金調達支援</a>
            <a href="#">経営・ビジネス支援</a>
            <a href="#">自治体・官公庁支援</a>
          </div>
          <div>
            <div className="fc-head">Company</div>
            <a href="#">会社概要</a>
            <a href="#">代表メッセージ</a>
            <a href="#">導入事例</a>
            <a href="#">ニュース</a>
          </div>
          <div>
            <div className="fc-head">Contact</div>
            <a href="#">お問い合わせ</a>
            <a href="#">無料相談予約</a>
            <a href="#">資料請求</a>
            <a href="#">採用情報</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Kashinoya Co., Ltd. All Rights Reserved.</span>
        <span className="fb-links">
          <a href="#">プライバシーポリシー</a>
          <a href="#">利用規約</a>
        </span>
      </div>
    </footer>
  );
}

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