/* global React, ReactDOM */
const { useState } = React;

const NAV_ITEMS = [
  { ja: "ミッション",     href: "../index.html#mission" },
  { ja: "なぜカトルセか", href: "../index.html#why" },
  { ja: "採用職種",       href: "../index.html#joblist" },
  { ja: "働き方",         href: "../index.html#work" },
  { ja: "代表メッセージ", href: "../index.html#ceo" },
];

function Header({ open, setOpen }) {
  return (
    <>
      <header className="r-header">
        <div className="inner">
          <a href="../index.html" className="r-logo" aria-label="CATORCE Careers">
            <img src="../../assets/catorce-logo.png" alt="CATORCE" />
            <span className="careers-tag">CAREERS</span>
          </a>
          <nav className="r-nav">
            {NAV_ITEMS.map((n, i) => <a key={i} href={n.href}>{n.ja}</a>)}
            <a className="corp-link" href="../../index.html" target="_blank" rel="noopener noreferrer">コーポレートサイト</a>
            <a href="../index.html#cta" className="apply-btn">応募する <span className="arrow">→</span></a>
          </nav>
          <button
            className={"r-hamburger" + (open ? " open" : "")}
            aria-label="メニュー"
            onClick={() => setOpen(!open)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>
      <div className={"r-mobile-menu" + (open ? " open" : "")}>
        {NAV_ITEMS.map((n, i) => <a key={i} href={n.href} onClick={() => setOpen(false)}>{n.ja}</a>)}
        <a href="../../index.html" target="_blank" rel="noopener noreferrer">コーポレートサイト →</a>
        <a href="../index.html#cta" onClick={() => setOpen(false)}>応募する →</a>
      </div>
    </>
  );
}

function DetailHero({ j }) {
  return (
    <section className="r-detail-hero">
      <div className="wrap">
        <div className="crumbs">
          <a href="../../index.html">HOME</a><span className="sep">／</span>
          <a href="../index.html">CAREERS</a><span className="sep">／</span>
          <span>{j.en.toUpperCase()}</span>
        </div>
        <div className="pos-num">{j.num}</div>
        <h1>{j.title}</h1>
        <div className="en">{j.en}</div>
        <p className="catch">"{j.catch}"</p>
        <div className="tags">
          {j.tags.map(t => <span className="tag" key={t}>{t}</span>)}
        </div>
        <div className="summary-row">
          <div className="sr"><b>EMPLOYMENT</b>{j.tags.join(" / ")}</div>
          <div className="sr"><b>LOCATION</b>フルリモート（一部出張あり）</div>
          <div className="sr"><b>WORK STYLE</b>フレックス制 / コア 10–16時</div>
        </div>
      </div>
    </section>
  );
}

function Block({ id, title, en, items, cls }) {
  return (
    <div className={"r-block " + cls} id={id}>
      <h2>{title}<span className="en">{en}</span></h2>
      <ul>{items.map((it, i) => <li key={i}>{it}</li>)}</ul>
    </div>
  );
}

function DetailBody({ j }) {
  return (
    <section className="r-detail-body">
      <div className="wrap layout">
        <aside className="r-detail-aside">
          <div className="label">CONTENTS</div>
          <ul>
            <li><a href="#overview" className="active">ポジション概要</a></li>
            <li><a href="#duties">主な業務内容</a></li>
            <li><a href="#skills">必須・歓迎スキル</a></li>
            <li><a href="#fit">向いている人</a></li>
            <li><a href="#related">関連職種</a></li>
          </ul>
        </aside>
        <div className="r-detail-content">
          <div id="overview">
            <p className="overview">{j.overview}</p>
          </div>

          <Block
            id="duties" title="主な業務内容" en="DUTIES"
            items={j.duties} cls="duties"
          />

          <div className="r-block skills" id="skills">
            <div className="col must">
              <h3>必須スキル・経験 <span className="en">MUST HAVE</span></h3>
              <ul>{j.must.map((it, i) => <li key={i}>{it}</li>)}</ul>
            </div>
            <div className="col welcome">
              <h3>歓迎スキル・経験 <span className="en">NICE TO HAVE</span></h3>
              <ul>{j.welcome.map((it, i) => <li key={i}>{it}</li>)}</ul>
            </div>
          </div>

          <Block
            id="fit" title="こんな人に向いています" en="RIGHT FIT"
            items={j.fit} cls="fit"
          />

          <div style={{textAlign:"center", marginTop:48}}>
            <a className="btn btn-dark" href="../index.html#cta">このポジションに応募する <span className="arr">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Related({ j }) {
  const jobs = window.JOBS || [];
  const others = jobs.filter(x => x.id !== j.id).slice(0, 3);
  return (
    <section className="r-related" id="related">
      <div className="wrap">
        <div className="head">
          <div className="eyebrow">RELATED POSITIONS</div>
          <h2>関連する職種も見る</h2>
        </div>
        <div className="grid">
          {others.map(o => (
            <a key={o.id} className="rel-card" href={o.slug + ".html"}>
              <div className="num">{o.num}</div>
              <h4>{o.title}</h4>
              <p>"{o.catch}"</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="r-cta-band" id="cta">
      <div className="wrap grid">
        <div>
          <div className="eyebrow">LET'S TALK</div>
          <h2>まず、<br/>話しましょう。</h2>
          <p>
            職種が完全にマッチしなくても構いません。<br/>
            「AIの現場にいたい」という気持ちがあれば、まずカジュアルに話しましょう。
          </p>
          <div className="ctas">
            <a className="btn btn-primary" href="mailto:careers@catorce.jp?subject=採用応募" style={{background:"var(--accent)", color:"var(--ink)"}}>
              応募する <span className="arr" style={{background:"var(--ink)", color:"#fff"}}>→</span>
            </a>
            <a className="btn btn-light-ghost" href="mailto:careers@catorce.jp?subject=カジュアル面談希望">
              カジュアル面談 <span className="arr">→</span>
            </a>
          </div>
        </div>
        <div className="r-cta-card">
          <div className="label">CONTACT MENU</div>
          <div className="item"><div className="ic">✉</div><div><h5>メールで応募</h5><p>careers@catorce.jp</p></div></div>
          <div className="item"><div className="ic o">💬</div><div><h5>カジュアル面談（30分）</h5><p>採用担当または代表が対応</p></div></div>
          <div className="item"><div className="ic">📄</div><div><h5>他の職種を見る</h5><p>採用職種一覧へ戻る</p></div></div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="r-footer">
      <div className="wrap">
        <div className="top">
          <div className="brand">
            <img src="../../assets/catorce-logo-white.png" alt="CATORCE" />
            <span className="tag">CAREERS</span>
            <p>"日本の大企業をAIで変える"</p>
          </div>
          <div>
            <h5>CAREERS</h5>
            <ul>
              {(window.JOBS || []).slice(0, 4).map(j => (
                <li key={j.id}><a href={j.slug + ".html"}>{j.title}</a></li>
              ))}
              <li><a href="../index.html#joblist">すべての職種を見る →</a></li>
            </ul>
          </div>
          <div>
            <h5>COMPANY</h5>
            <ul>
              <li><a href="../../index.html" target="_top">コーポレートサイト</a></li>
              <li><a href="../../company-outline.html" target="_top">会社概要</a></li>
              <li><a href="../../index.html#services" target="_top">サービス</a></li>
            </ul>
          </div>
          <div>
            <h5>CONTACT</h5>
            <ul>
              <li><a href="mailto:careers@catorce.jp">careers@catorce.jp</a></li>
              <li><a href="#cta">応募・カジュアル面談</a></li>
            </ul>
          </div>
        </div>
        <div className="bottom">
          <div>© 2026 CATORCE Inc. All rights reserved.</div>
          <div className="links">
            <a href="../index.html">採用情報トップ</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  const jobs = window.JOBS || [];
  const j = jobs.find(x => x.id === window.__JOB_ID);
  if (!j) {
    return <div style={{padding:80, textAlign:"center"}}>職種データが見つかりません。</div>;
  }
  // Update document title at runtime as a safety net
  document.title = `${j.title}（${j.en}）の採用情報 | CATORCE Careers`;

  return (
    <>
      <Header open={menuOpen} setOpen={setMenuOpen} />
      <DetailHero j={j} />
      <DetailBody j={j} />
      <Related j={j} />
      <CTA />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);