// Shared site components: Header, Footer, Brand mark
// Reflects live kashinoya-biz.com (real content). No fabricated figures.
const { useState, useEffect } = React;

function KMark({ size = 36, 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.5 }}>樫</div>
  );
}

function Header({ variant = "light", current = "" }) {
  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", label: "ホーム", id: "home" },
    { href: "subsidies.html", label: "補助金一覧", id: "subsidy" },
    { href: "articles.html", label: "記事", id: "articles" },
    { href: "about.html", 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.html" 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.html" className="mobile-cta">無料相談する</a></div>)}
    </header>
  );
}

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">中小企業・小規模事業者向けの補助金・助成金申請支援を行うITコンサルティング会社です。あなたの事業に最適な支援制度をお探しします。</p>
          <div className="footer-info"><div><span>所在地</span>神奈川県横浜市港北区</div><div><span>設立</span>2020年4月</div></div>
        </div>
        <div className="footer-cols">
          <div><div className="fc-head">サイトメニュー</div><a href="index.html">ホーム</a><a href="subsidies.html">補助金一覧</a><a href="articles.html">記事一覧</a><a href="about.html">会社概要</a><a href="contact.html">お問い合わせ</a></div>
          <div><div className="fc-head">サービス</div><a href="about.html#services">補助金申請サポート</a><a href="about.html#services">AI導入・業務活用支援</a><a href="about.html#services">AI研修・社内定着サポート</a></div>
          <div><div className="fc-head">お問い合わせ</div><a href="contact.html">無料相談・お問い合わせ</a><a href="https://kashinoya.co.jp/" target="_blank" rel="noopener">コーポレートサイト</a><a href="privacy.html">プライバシーポリシー</a></div>
        </div>
      </div>
      <div className="footer-bottom"><span>© 2025 Kashinoya Co., Ltd. All Rights Reserved.</span><span className="fb-links"><a href="privacy.html">プライバシーポリシー</a></span></div>
    </footer>
  );
}

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