/* Shared helpers: Nav, Reveal wrapper, Footer */

const { useEffect, useRef, useState } = React;

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function Nav({ brandKanji = "誇", brandEn = "HOKORI KIMONO", links, ctaLabel = "オーダー相談", accent = "gold", current = "product", variant = "men" }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const productHref = variant === "women" ? "HOKORI KIMONO - Women.html" : "HOKORI KIMONO - Men.html";
  const defaultLinks = links || [
    { label: "PRODUCT",  href: productHref,       key: "product"  },
    { label: "ABOUT",    href: "about.html",      key: "about"    },
    { label: "ESTIMATE", href: "estimate.html",   key: "estimate" },
    { label: "CONTACT",  href: "contact.html",    key: "contact"  },
  ];
  const ctaHref = current === "product" ? "#order" : "contact.html#form";
  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <a href={productHref} className="nav__brand">
        <span className="nav__brand-mark">{brandKanji}</span>
        <span className="nav__brand-name">{brandEn}</span>
      </a>
      <div className="nav__links">
        {defaultLinks.map((l) => (
          <a key={l.href}
             className={`nav__link ${l.key === current ? 'nav__link--active' : ''}`}
             href={l.href}>{l.label}</a>
        ))}
      </div>
      <a href={ctaHref} className="nav__cta">{ctaLabel}</a>
    </nav>
  );
}

function Footer({ brandKanji = "誇", brandEn = "HOKORI KIMONO", tagline = "誇りを、身に纏う。", variant = "men" }) {
  const productHref = variant === "women" ? "HOKORI KIMONO - Women.html" : "HOKORI KIMONO - Men.html";
  const otherProductHref = variant === "women" ? "HOKORI KIMONO - Men.html" : "HOKORI KIMONO - Women.html";
  const otherProductLabel = variant === "women" ? "紳士の和装 — Men" : "大和撫子の装い — Women";
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <div className="footer__brand-mark">{brandKanji}</div>
            <div className="footer__brand-name">{brandEn}</div>
            <p className="footer__desc">{tagline}<br/>誇高が手がける、完全オーダーメイドの和装ブランド。</p>
          </div>
          <div>
            <div className="footer__col-title">Product</div>
            <ul className="footer__list">
              <li><a href={productHref}>{variant === "women" ? "大和撫子の装い" : "紳士の和装"}</a></li>
              <li><a href={otherProductHref}>{otherProductLabel}</a></li>
              <li><a href={productHref + "#fabrics"}>生地ライブラリー</a></li>
              <li><a href={productHref + "#order"}>カスタムオーダー</a></li>
            </ul>
          </div>
          <div>
            <div className="footer__col-title">About</div>
            <ul className="footer__list">
              <li><a href="about.html#concept">ブランドコンセプト</a></li>
              <li><a href="about.html#founder">代表挨拶</a></li>
              <li><a href="about.html#company">誇高について</a></li>
              <li><a href="https://kokoh.co.jp" target="_blank" rel="noopener">誇高ビジネストレーニング</a></li>
            </ul>
          </div>
          <div>
            <div className="footer__col-title">Contact</div>
            <ul className="footer__list">
              <li><a href="contact.html#form">オーダー相談</a></li>
              <li><a href="estimate.html">お見積りシミュレーター</a></li>
              <li><a href="contact.html#line">LINE公式</a></li>
              <li><a href="contact.html#faq">よくある質問</a></li>
              <li><a href="contact.html#legal">特定商取引法表記</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 KOKOH Inc.  All Rights Reserved.</span>
          <span>Privacy  /  Terms  /  Specified Commercial Transactions</span>
        </div>
      </div>
    </footer>
  );
}

/* Inline SVGs — simple line icons, gold stroke via currentColor */
const IconClock = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
    <circle cx="12" cy="12" r="10"/>
    <path d="M12 6.5v6l3.5 2"/>
  </svg>
);
const IconSparkle = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
    <path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/>
  </svg>
);
const IconCoin = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
    <circle cx="12" cy="12" r="9"/>
    <path d="M12 7v10M9 9.5c0-1 1.3-1.7 3-1.7s3 .7 3 1.7-1.3 1.5-3 1.5-3 .5-3 1.5 1.3 1.7 3 1.7 3-.7 3-1.7"/>
  </svg>
);
const IconLeaf = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
    <path d="M4 20c0-9 7-16 16-16-0 9-7 16-16 16z"/>
    <path d="M4 20L14 10"/>
  </svg>
);

Object.assign(window, { useReveal, Nav, Footer, IconClock, IconSparkle, IconCoin, IconLeaf });