// ─── Top navigation + footer ────────────────────────────────────

const NAV_ITEMS = [
{ id: "home", label: "トップ", labelEn: "Home" },
{ id: "services", label: "サービス", labelEn: "Services" },
{ id: "wp-maint", label: "WP保守", labelEn: "Maintenance" },
{ id: "seo", label: "SEO対策", labelEn: "SEO" },
{ id: "works", label: "実績", labelEn: "Works" },
{ id: "company", label: "会社概要", labelEn: "Company" }];


function TopNav({ page, go }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  React.useEffect(() => { setMenuOpen(false); }, [page]);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const nav = (pageId, opts) => { setMenuOpen(false); go(pageId, opts); };

  return (
    <>
      <header className={`topnav${scrolled ? " topnav--scrolled" : ""}`}>
        <div className="wrap topnav__inner">
          <button onClick={() => nav("home")} className="topnav__logo-btn">
            <img src={`${window.__THEME_URI}/assets/logo500x120.png`} alt="UIARB合同会社" className="topnav__logo-img" />
          </button>

          <nav className="topnav__nav hide-mobile">
            {NAV_ITEMS.map((it) => {
              const active = page === it.id;
              return (
                <button key={it.id} onClick={() => nav(it.id)}
                  className={`nav-item${active ? " nav-item--active" : ""}`}>
                  {it.label}
                  {active && <span className="nav-item__dot" />}
                </button>);
            })}
          </nav>

          <div className="topnav__actions">
            <button onClick={() => nav("contact", { tab: "form" })} className="btn btn-ghost btn-sm hide-mobile">
              無料相談
            </button>
            <button onClick={() => nav("contact", { tab: "form" })} className="btn btn-primary btn-sm hide-mobile">
              お問い合わせ
              <Arrow size={12} />
            </button>
            <button onClick={() => setMenuOpen(true)} className="topnav__hamburger" aria-label="メニューを開く">
              <span /><span /><span />
            </button>
          </div>
        </div>
      </header>

      {menuOpen && <div className="mobile-menu__overlay" onClick={() => setMenuOpen(false)} />}

      <div className={`mobile-menu${menuOpen ? " mobile-menu--open" : ""}`} aria-hidden={!menuOpen}>
        <div className="mobile-menu__header">
          <img src={`${window.__THEME_URI}/assets/logo500x120.png`} alt="UIARB合同会社" className="mobile-menu__logo" />
          <button onClick={() => setMenuOpen(false)} className="mobile-menu__close" aria-label="閉じる">✕</button>
        </div>

        <nav className="mobile-menu__nav">
          {NAV_ITEMS.map(it => (
            <button key={it.id} onClick={() => nav(it.id)}
              className={`mobile-menu__item${page === it.id ? " mobile-menu__item--active" : ""}`}>
              <span className="en mobile-menu__item-en">{it.labelEn}</span>
              <span className="mobile-menu__item-ja">{it.label}</span>
            </button>
          ))}
        </nav>

        <div className="mobile-menu__cta">
          <button onClick={() => nav("contact", { tab: "form" })} className="btn btn-accent btn-lg" style={{ width: "100%" }}>
            無料相談・お問い合わせ <Arrow />
          </button>
        </div>
      </div>
    </>
  );
}

function Logo() {
  return (
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <rect x="1" y="1" width="30" height="30" rx="6" stroke="var(--ink)" strokeWidth="1.2" />
      <path d="M9 11v7a5 5 0 0 0 5 5h4a5 5 0 0 0 5-5v-7" stroke="var(--ink)" strokeWidth="1.4" strokeLinecap="round" />
      <circle cx="16" cy="16" r="2" fill="var(--accent)" />
    </svg>);

}

function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div>
            <img src={`${window.__THEME_URI}/assets/logo500x120.png`} alt="UIARB合同会社" className="footer__logo-img" />
            <p className="footer__tagline">
              Webの力で、価値ある未来を<br />共に創る。
            </p>
          </div>
          <FooterCol label="SERVICES" items={[
          { t: "WordPress保守", p: "wp-maint" },
          { t: "WordPress開発", p: "services" },
          { t: "Webシステム開発", p: "services" },
          { t: "サーバー保守", p: "services" },
          { t: "SEO対策", p: "seo" }]
          } go={go} />
          <FooterCol label="COMPANY" items={[
          { t: "会社概要", p: "company" },
          { t: "実績紹介", p: "works" },
          { t: "お問い合わせ", p: "contact" }]
          } go={go} />
          <FooterCol label="CONTACT" items={[]} go={go}>
            <div className="footer__contact-info">
              <span className="footer__contact-hours">平日 10:00–16:00</span>
            </div>
          </FooterCol>
        </div>

        <div className="footer__bottom">
          <div>© 2026 UIARB LLC. All rights reserved.</div>
          <div className="en footer__bottom-links">PRIVACY · TERMS · SITEMAP</div>
        </div>
      </div>
    </footer>);

}

function FooterCol({ label, items, go, children }) {
  return (
    <div>
      <div className="en footer__col-label">{label}</div>
      {children ||
      <ul className="footer__col-list">
          {items.map((it, i) =>
        <li key={i}>
              <button onClick={() => go(it.p)} className="footer__col-btn">
                {it.t}
              </button>
            </li>
        )}
        </ul>
      }
    </div>);

}

// Big CTA block used at the bottom of every page
function BigCTA({ go, tweaks }) {
  const strong = tweaks?.ctaStrength === "strong";
  const subtle = tweaks?.ctaStrength === "subtle";
  return (
    <section className={`big-cta ${subtle ? "big-cta--subtle" : "big-cta--dark"}`}>
      {!subtle &&
      <div className="big-cta__glow">
          <svg viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice">
            <defs>
              <radialGradient id="ctaGlow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor="oklch(0.58 0.22 var(--accent-h))" stopOpacity="0.6" />
                <stop offset="100%" stopColor="oklch(0.58 0.22 var(--accent-h))" stopOpacity="0" />
              </radialGradient>
            </defs>
            <circle cx="900" cy="300" r="500" fill="url(#ctaGlow)" />
            <circle cx="200" cy="500" r="300" fill="url(#ctaGlow)" opacity="0.5" />
          </svg>
        </div>
      }
      <div className="wrap big-cta__inner">
        <Eyebrow num="→">GET IN TOUCH</Eyebrow>
        <h2 className={`h-display big-cta__title ${strong ? "big-cta__title--strong" : "big-cta__title--normal"}`}>
          まずは、お話から。
        </h2>
        <p className={`lead big-cta__lead ${subtle ? "big-cta__lead--subtle" : "big-cta__lead--dark"}`}>
          30分の無料相談で、現状の課題・予算・ゴールを整理します。<br />
          その場での見積り・営業は一切行いません。
        </p>
        <div className="big-cta__actions">
          <button onClick={() => go("contact", { tab: "form" })} className={`btn ${strong ? "btn-lg" : ""} btn-accent`}>
            無料相談を予約する
            <Arrow />
          </button>
          <button onClick={() => go("contact", { tab: "form" })} className={`btn ${subtle ? "btn-ghost" : "btn-dark"} ${strong ? "btn-lg" : ""}`}>
            見積りシミュレーター
            <ArrowUpRight />
          </button>
        </div>
        <div className={`big-cta__note ${subtle ? "big-cta__note--subtle" : "big-cta__note--dark"}`}>
          <span className="live-dot" />
          3営業日以内にご返信しています
        </div>
      </div>
    </section>);

}

function ScrollToTop() {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 400);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <button
      className={`scroll-top${visible ? " scroll-top--visible" : ""}`}
      onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      aria-label="ページトップへ戻る"
    >
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
        <path d="M9 14V4M4 9l5-5 5 5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  );
}

Object.assign(window, { TopNav, Footer, BigCTA, ScrollToTop, NAV_ITEMS });