/* Shared layout components: Nav, Footer, useReveal hook */

const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    if (!("IntersectionObserver" in window)) {
      els.forEach((el) => el.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
};

const useParallax = (selector, factor = 0.3) => {
  React.useEffect(() => {
    const handler = () => {
      const els = document.querySelectorAll(selector);
      els.forEach((el) => {
        const rect = el.getBoundingClientRect();
        const offset = (rect.top + rect.height / 2 - window.innerHeight / 2) * factor;
        el.style.setProperty("--parallax", `${offset}px`);
      });
    };
    handler();
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, [selector, factor]);
};

/* Logo mark (SVG) */
const LogoMark = ({ size = 44 }) => (
  <svg viewBox="0 0 64 64" width={size} height={size} aria-label="たっぷり庵">
    <circle cx="32" cy="32" r="30" fill="var(--t-accent)" />
    <circle cx="32" cy="32" r="30" fill="none" stroke="var(--t-accent-deep)" strokeWidth="1.5" />
    <text
      x="32" y="40"
      textAnchor="middle"
      fontFamily="var(--font-mincho)"
      fontSize="26"
      fontWeight="700"
      fill="var(--t-cream)"
      letterSpacing="-1"
    >
      庵
    </text>
  </svg>
);

const Nav = ({ active = "home", variant = "desktop" }) => {
  const items = [
    { id: "home", label: "ホーム", href: "#home" },
    { id: "menu", label: "お品書き", href: "#menu" },
    { id: "stores", label: "店舗", href: "#stores" },
    { id: "recruit", label: "採用", href: "#recruit" },
  ];

  if (variant === "mobile") {
    return (
      <nav className="t-nav-mobile">
        <a href="#home" className="t-nav-mobile__brand">
          <LogoMark size={36} />
          <div>
            <div className="t-nav-mobile__brand-jp">たっぷり庵</div>
            <div className="t-nav-mobile__brand-en">SINCE 2001</div>
          </div>
        </a>
        <button className="t-nav-mobile__menu" aria-label="メニュー">
          <span></span><span></span><span></span>
        </button>
      </nav>
    );
  }

  return (
    <nav className="t-nav">
      <a href="#home" className="t-nav__brand">
        <LogoMark size={50} />
        <div className="t-nav__brand-text">
          <div className="t-nav__brand-jp">たい焼き一筋</div>
          <div className="t-nav__brand-name">たっぷり庵</div>
        </div>
      </a>
      <ul className="t-nav__links">
        {items.map((it) => (
          <li key={it.id}>
            <a href={it.href} className={`t-nav__link ${active === it.id ? "is-active" : ""}`}>
              {it.label}
            </a>
          </li>
        ))}
      </ul>
      <a href="#stores" className="t-nav__cta">
        <span>店舗を探す</span>
        <span style={{ fontSize: 14 }}>→</span>
      </a>
    </nav>
  );
};

const Footer = () => (
  <footer className="t-footer">
    <div className="t-footer__inner">
      <div className="t-footer__brand">
        <div className="t-footer__brand-row">
          <LogoMark size={56} />
          <div>
            <div className="t-footer__brand-jp">たい焼き一筋</div>
            <div className="t-footer__brand-name">たっぷり庵</div>
          </div>
        </div>
        <p className="t-footer__about">
          2001年の創業以来、福島・茨城・千葉で<br />
          皆様に愛されてきた、たい焼き専門店です。
        </p>
        <div className="t-footer__sns">
          <a href="#" aria-label="Instagram" className="t-footer__sns-link">Instagram</a>
          <a href="#" aria-label="X" className="t-footer__sns-link">X (Twitter)</a>
        </div>
      </div>

      <div className="t-footer__col">
        <div className="t-footer__col-title">お品書き</div>
        <ul>
          <li><a href="#menu">定番メニュー</a></li>
          <li><a href="#menu">期間限定</a></li>
        </ul>
      </div>
      <div className="t-footer__col">
        <div className="t-footer__col-title">店舗情報</div>
        <ul>
          <li><a href="#stores">本店（いわき）</a></li>
          <li><a href="#stores">ひたちなか店</a></li>
          <li><a href="#stores">千葉ニュータウン店</a></li>
        </ul>
      </div>
      <div className="t-footer__col">
        <div className="t-footer__col-title">その他</div>
        <ul>
          <li><a href="#recruit">採用情報</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </div>
    </div>
    <div className="t-footer__bottom">
      <span>© 2026 たい焼き一筋 たっぷり庵 All Rights Reserved.</span>
    </div>
  </footer>
);

Object.assign(window, { Nav, Footer, LogoMark, useReveal, useParallax });