/* Shared components: Header, Footer, FadeUp, Icon, CTABand */

const { useState, useEffect, useRef } = React;

/* navigation helper */
function navigate(id) {
  window.location.hash = id;
  window.scrollTo({ top: 0, behavior: "instant" });
}

function useHash() {
  const [hash, setHash] = useState(() => (window.location.hash.replace("#","") || "home"));
  useEffect(() => {
    const onChange = () => setHash(window.location.hash.replace("#","") || "home");
    window.addEventListener("hashchange", onChange);
    return () => window.removeEventListener("hashchange", onChange);
  }, []);
  return hash;
}

/* IntersectionObserver fade-up */
function FadeUp({ children, delay = 0, as: Tag = "div", className = "", style, ...rest }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVisible(true); obs.disconnect(); }
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`fade-up ${visible ? "visible" : ""} ${className}`}
      style={{ transitionDelay: `${delay}ms`, ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

/* Tiny SVG icons */
function Icon({ name, size = 22 }) {
  const s = { width: size, height: size, stroke: "currentColor", fill: "none", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "book":   return (<svg viewBox="0 0 24 24" {...s}><path d="M4 5v14a1 1 0 0 0 1 1h6V6a1 1 0 0 0-1-1H4z"/><path d="M20 5v14a1 1 0 0 1-1 1h-6V6a1 1 0 0 1 1-1h6z"/><path d="M4 5l8 1 8-1"/></svg>);
    case "shield": return (<svg viewBox="0 0 24 24" {...s}><path d="M12 3l8 3v5c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>);
    case "flow":   return (<svg viewBox="0 0 24 24" {...s}><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="18" r="2"/><path d="M7 6h10M6 8l5 8M18 8l-5 8"/></svg>);
    case "arrow":  return (<svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "phone":  return (<svg viewBox="0 0 24 24" {...s}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>);
    case "mail":   return (<svg viewBox="0 0 24 24" {...s}><path d="M4 4h16v16H4z"/><path d="M4 6l8 6 8-6"/></svg>);
    case "globe":  return (<svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    /* TOP「サポート内容」用。既存アイコンと線幅・角丸の作りを合わせている */
    case "search": return (<svg viewBox="0 0 24 24" {...s}><circle cx="11" cy="11" r="6"/><path d="M15.5 15.5L21 21"/></svg>);
    case "doc":    return (<svg viewBox="0 0 24 24" {...s}><path d="M14 3H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V7l-4-4z"/><path d="M14 3v4h4"/><path d="M9 13h6M9 17h4"/></svg>);
    case "home":   return (<svg viewBox="0 0 24 24" {...s}><path d="M4 10.5L12 4l8 6.5"/><path d="M6 9.5V20h12V9.5"/><path d="M10 20v-5h4v5"/></svg>);
    case "chat":   return (<svg viewBox="0 0 24 24" {...s}><path d="M20 4H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3v4l5-4h8a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"/><path d="M8 9h8M8 12h5"/></svg>);
    default: return null;
  }
}

/* Header */
function Header() {
  const hash = useHash();
  const [menuOpen, setMenuOpen] = useState(false);

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

  useEffect(() => { setMenuOpen(false); }, [hash]);

  const go = (id) => { navigate(id); setMenuOpen(false); };

  return (
    <>
    <header className="topbar">
      <div className="topbar-inner">
        <div className="brand" onClick={() => go("home")}>
          <img className="brand-mark brand-mark-img" src={PHOTOS.logo} alt="LOOP" width="38" height="38" />
          <div className="brand-name">
            亜細亜交流事業協同組合
            <span className="small">Asia Interchange Cooperative Business Union</span>
          </div>
        </div>
        <nav className="nav">
          {NAV.slice(0, NAV.length - 1).map(n => (
            <a
              key={n.id}
              className={`nav-link ${hash === n.id ? "active" : ""}`}
              onClick={() => go(n.id)}
            >{n.label}</a>
          ))}
          <a className="nav-cta" onClick={() => go("contact")}>お問い合わせ</a>
        </nav>
        <button
          className={`menu-btn ${menuOpen ? "open" : ""}`}
          aria-label="メニュー"
          onClick={() => setMenuOpen(o => !o)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
    </header>
      <div className={`mobile-drawer ${menuOpen ? "open" : ""}`}>
        <div className="mobile-drawer-inner">
          <div className="mobile-nav">
            {NAV.slice(0, NAV.length - 1).map((n, i) => (
              <a
                key={n.id}
                className={`mobile-nav-link ${hash === n.id ? "active" : ""}`}
                onClick={() => go(n.id)}
                style={{transitionDelay: menuOpen ? `${i * 50 + 100}ms` : "0ms"}}
              >
                <span className="mn-en">{n.en}</span>
                <span className="mn-jp">{n.label}</span>
                <span className="mn-arrow"><Icon name="arrow" size={16}/></span>
              </a>
            ))}
          </div>
          <div className="mobile-cta">
            <button className="btn btn-primary" onClick={() => go("contact")} style={{width:"100%", justifyContent:"center"}}>
              お問い合わせフォーム <span className="arrow"><Icon name="arrow" size={16}/></span>
            </button>
          </div>
          <div className="mobile-contact">
            <div className="mc-label">TEL（本部）</div>
            <div className="mc-value">06-6394-7770</div>
            <div className="mc-hours">9:00 – 18:00（土日祝休）／ 来所は江坂事務所</div>
          </div>
        </div>
      </div>
    </>
  );
}

/* CTA band — shared between many pages */
function CTABand() {
  return (
    <section className="cta-band">
      <div className="cta-band-photo" style={{backgroundImage:`url(${PHOTOS.ctaBg})`}}></div>
      <div className="container cta-band-inner">
        <FadeUp>
          {/* 先頭の「—」は施主指示で全廃（テキスト直書き分も削除） */}
          <div className="section-num" style={{color:"var(--accent-soft)"}}>CONTACT</div>
        </FadeUp>
        <FadeUp delay={100}>
          <h2>受入のご検討・ご相談、<br/>まずはお気軽にお問い合わせください。</h2>
        </FadeUp>
        <FadeUp delay={200}>
          <p>業種・人数・ご希望時期をお伺いし、最適な受入プランをご提案いたします。資料請求のみのご相談も歓迎しております。</p>
          <button className="btn btn-primary" onClick={() => navigate("contact")}>
            お問い合わせフォーム <span className="arrow"><Icon name="arrow" size={16}/></span>
          </button>
        </FadeUp>
        <div className="cta-band-contact">
          <div className="cta-contact-item">
            <div className="label">TEL（本部）</div>
            <div className="value">06-6394-7770</div>
            <div className="label" style={{marginTop:8, color:"rgba(255,255,255,0.45)"}}>9:00 – 18:00（土日祝休）</div>
          </div>
          <div className="cta-contact-item">
            {/* 要確認: kanri@asiakumiai.jp は管理用アドレス。公開問い合わせ先がこれでよいか組合に確認。 */}
            <div className="label">MAIL</div>
            <div className="value">kanri@asiakumiai.jp</div>
            <div className="label" style={{marginTop:8, color:"rgba(255,255,255,0.45)"}}>来所は江坂事務所</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Footer */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="brand">
              <img className="brand-mark brand-mark-img" src={PHOTOS.logo} alt="LOOP" width="38" height="38" />
              <div className="brand-name" style={{color:"#fff"}}>
                亜細亜交流事業協同組合
                <span className="small" style={{color:"rgba(255,255,255,0.5)"}}>Asia Interchange Cooperative Business Union</span>
              </div>
            </div>
            <div className="footer-addr">
              <strong style={{color:"rgba(255,255,255,0.85)"}}>本部</strong><br/>
              〒532-0002 大阪府大阪市淀川区東三国2丁目32-17 ループ大阪<br/>
              TEL 06-6394-7770 ／ FAX 06-6394-7772<br/><br/>
              <strong style={{color:"rgba(255,255,255,0.85)"}}>江坂事務所</strong><br/>
              〒564-0063 大阪府吹田市江坂町1丁目6-3 ループ江坂<br/>
              TEL 06-6879-1790 ／ FAX 06-6879-1791<br/>
              <span style={{color:"rgba(255,255,255,0.55)"}}>※ご来所は江坂事務所までお願いいたします</span>
            </div>
          </div>
          <div>
            <h4>制度のご案内</h4>
            <div className="footer-links">
              <a onClick={() => navigate("ikusei")}>育成就労制度</a>
              <a onClick={() => navigate("tokutei")}>特定技能制度</a>
              <a onClick={() => navigate("cases")}>活躍事例</a>
            </div>
          </div>
          <div>
            <h4>組合について</h4>
            <div className="footer-links">
              <a onClick={() => navigate("about")}>組合案内</a>
              <a onClick={() => navigate("about")}>代表メッセージ</a>
              <a onClick={() => navigate("about")}>グループ法人</a>
              <a onClick={() => navigate("news")}>お知らせ</a>
            </div>
          </div>
          <div>
            <h4>お問い合わせ</h4>
            <div className="footer-links">
              <a onClick={() => navigate("contact")}>お問い合わせフォーム</a>
              <a onClick={() => navigate("faq")}>よくあるご質問</a>
              <a onClick={() => { window.location.hash = "privacy"; window.scrollTo({top:0, behavior:"instant"}); }}>プライバシーポリシー</a>
              <a onClick={() => { window.location.hash = "regulations"; window.scrollTo({top:0, behavior:"instant"}); }}>各種規定</a>
            </div>
            {/* 公開SNS（A-9）。X・その他は未提供のため設置しない。 */}
            <div className="footer-sns">
              <a href="https://www.facebook.com/asiakumiai/" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="sns-link">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true"><path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.9 3.78-3.9 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.44 2.9h-2.34V22c4.78-.76 8.44-4.92 8.44-9.94z"/></svg>
              </a>
              <a href="http://www.youtube.com/@asiakumiai5495" target="_blank" rel="noopener noreferrer" aria-label="YouTube" className="sns-link">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" aria-hidden="true"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.5v-7l6.3 3.5-6.3 3.5z"/></svg>
              </a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Asia Interchange Cooperative Business Union. ALL RIGHTS RESERVED.</div>
          <div>SITE BY NORTIQ LAB</div>
        </div>
      </div>
    </footer>
  );
}

/* Inner page hero
   fixId：修正依頼番号の目印（data-nq-fix）を呼び出し側から任意で付けるためのプロップ。
   共通コンポーネントに直接書くと全ページに同じ番号が付くため、対象ページからのみ渡す。 */
function PageHero({ kicker, title, lead, photo, crumbs, fixId }) {
  return (
    <section className="page-hero">
      <div className="page-hero-photo" data-nq-fix={fixId} style={{backgroundImage:`url(${photo})`}}></div>
      <div className="page-hero-inner">
        {crumbs && (
          <div className="crumbs">
            <a onClick={() => navigate("home")} style={{cursor:"pointer"}}>HOME</a>
            <span>/</span>
            <span style={{color:"#fff"}}>{crumbs}</span>
          </div>
        )}
        <div className="kicker">{kicker}</div>
        <h1 className="serif">{title}</h1>
        {lead && <p className="lead">{lead}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { navigate, useHash, FadeUp, Icon, Header, Footer, CTABand, PageHero });