// MEGALIS — Careers section with expandable role cards + inline apply form

const careersStyles = `
  .careers-section {
    border-bottom: 1px solid var(--line);
    background: #E5423B;
    --fg: #ffffff;
    --fg-2: rgba(255, 255, 255, 0.82);
    --fg-3: rgba(255, 255, 255, 0.58);
    --line: rgba(255, 255, 255, 0.22);
    --line-2: rgba(255, 255, 255, 0.14);
    --bg: #E5423B;
    --bg-2: rgba(255, 255, 255, 0.06);
    --bg-3: rgba(255, 255, 255, 0.12);
  }

  .roles-list {
    display: flex;
    flex-direction: column;
  }
  .role {
    border-bottom: 1px solid var(--line);
    transition: background 0.25s var(--easing);
  }
  .role:hover { background: var(--bg-2); }
  .role-head {
    display: grid;
    grid-template-columns: 60px 1.4fr 1fr 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 28px var(--pad);
    cursor: pointer;
    text-align: left;
    width: 100%;
  }
  .role-num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fg-3);
  }
  .role-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(24px, 2.4vw, 36px);
    letter-spacing: -0.025em;
    line-height: 1;
  }
  body[data-lang="ja"] .role-title {
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: clamp(20px, 2vw, 28px);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .role-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
  }
  body[data-lang="ja"] .role-meta {
    font-family: var(--font-jp);
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 12px;
  }
  .role-toggle {
    width: 44px; height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s var(--easing);
    flex-shrink: 0;
  }
  .role:hover .role-toggle { border-color: var(--fg); }
  .role[data-open="true"] .role-toggle {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
    transform: rotate(45deg);
  }
  .role-toggle::before,
  .role-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
  }
  .role-toggle::before {
    width: 14px;
    height: 1.5px;
    transform: translate(-50%, -50%);
  }
  .role-toggle::after {
    width: 1.5px;
    height: 14px;
    transform: translate(-50%, -50%);
  }

  .role-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--easing);
  }
  .role[data-open="true"] .role-body { grid-template-rows: 1fr; }
  .role-body-inner {
    overflow: hidden;
  }
  .role-content {
    padding: 0 var(--pad) 40px;
    display: grid;
    grid-template-columns: 60px 1.4fr 1fr;
    gap: 24px;
  }
  .role-content .desc {
    grid-column: 2 / 3;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.55;
    color: var(--fg-2);
    max-width: 65ch;
  }
  body[data-lang="ja"] .role-content .desc {
    font-family: var(--font-jp);
    line-height: 1.8;
    font-size: 14px;
  }
  body[data-lang="ja"] .role-content .desc h4 {
    font-family: var(--font-jp);
    letter-spacing: 0.08em;
    text-transform: none;
    font-size: 12px;
  }
  .role-content .desc h4 {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin: 24px 0 8px;
  }
  .role-content .desc h4:first-child { margin-top: 0; }
  .role-content .desc ul {
    margin: 0;
    padding-left: 20px;
    color: var(--fg-2);
  }
  .role-content .desc ul li { margin-bottom: 6px; }
  .role-content .apply-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  .role-content .apply-side .label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
  }
  .btn-apply {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 18px 28px;
    background: var(--fg);
    color: var(--bg);
    transition: all 0.25s var(--easing);
    display: inline-flex;
    gap: 10px;
    align-items: center;
  }
  body[data-lang="ja"] .btn-apply {
    font-family: var(--font-jp);
    letter-spacing: 0.08em;
    text-transform: none;
    font-size: 13px;
  }
  .btn-apply:hover { background: var(--accent); color: var(--accent-fg); }

  .careers-foot {
    padding: 32px var(--pad);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .careers-foot .lead {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.6vw, 22px);
    color: var(--fg-2);
    max-width: 50ch;
  }
  .spontaneous {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg);
    border-bottom: 1px solid var(--fg-3);
    padding-bottom: 2px;
  }
  body[data-lang="ja"] .spontaneous {
    font-family: var(--font-jp);
    letter-spacing: 0.05em;
    text-transform: none;
    font-size: 12px;
  }
  body[data-lang="ja"] .careers-foot .lead {
    font-family: var(--font-jp);
    line-height: 1.7;
    font-size: clamp(15px, 1.3vw, 18px);
  }
  .spontaneous:hover { color: var(--accent); border-color: var(--accent); }

  @media (max-width: 800px) {
    .role-head { grid-template-columns: 40px 1fr auto; }
    .role-head .role-meta { display: none; }
    .role-content { grid-template-columns: 40px 1fr; }
    .role-content .desc { grid-column: 2 / 3; }
    .role-content .apply-side { grid-column: 2 / 3; }
  }
`;

function Careers() {
  const t = window.useI18n('careers');
  const ROLES = t.roles;
  const [open, setOpen] = React.useState(null);
  return (
    <>
      <style>{careersStyles}</style>
      <section className="careers-section" id="careers" data-screen-label="Careers">
        <header className="sec-head">
          <div>
            <div className="sec-num">{t.num}</div>
            <h2 className="sec-title">{t.title[0]}<br/>{t.title[1]}</h2>
          </div>
          <div className="sec-kana">{t.kana}</div>
        </header>

        <div style={{padding:"24px var(--pad)", borderBottom:"1px solid var(--line)", display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:"16px"}}>
          <p style={{margin:0, fontFamily:"var(--font-display)", fontSize:"clamp(18px, 1.6vw, 22px)", color:"var(--fg-2)", maxWidth:"60ch"}}>
            {t.introPre}
            <span style={{color:"var(--fg)"}}>{t.introArtists}</span>{t.introAnd}
            <span style={{color:"var(--fg)"}}>{t.introEngineers}</span>{t.introPost}
          </p>
          <span className="micro">{ROLES.length.toString().padStart(2,"0")} {t.countSuffix}</span>
        </div>

        <div className="roles-list">
          {ROLES.map((r, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className="role" data-open={isOpen}>
                <button className="role-head" onClick={() => setOpen(isOpen ? null : i)}>
                  <span className="role-num">№ {(i+1).toString().padStart(2,"0")}</span>
                  <span className="role-title">{r.title}</span>
                  <span className="role-meta">{r.location}</span>
                  <span className="role-meta">{r.type}</span>
                  <span className="role-toggle"></span>
                </button>
                <div className="role-body">
                  <div className="role-body-inner">
                    <div className="role-content">
                      <div className="desc">
                        <p style={{marginTop:0, fontSize:"18px", color:"var(--fg)"}}>{r.summary}</p>
                        <h4>{t.sectionRole}</h4>
                        <ul>
                          {r.responsibilities.map((x, j) => <li key={j}>{x}</li>)}
                        </ul>
                        <h4>{t.sectionMust}</h4>
                        <ul>
                          {r.musts.map((x, j) => <li key={j}>{x}</li>)}
                        </ul>
                      </div>
                      <div className="apply-side">
                        <span className="label">{t.applyLabel}</span>
                        <a href={`mailto:hr@megalisvfx.com?subject=${encodeURIComponent(r.title + ' — Application')}`} className="btn-apply">
                          {t.applyBtn} <span>→</span>
                        </a>
                        <p style={{fontFamily:"var(--font-mono)", fontSize:"11px", color:"var(--fg-3)", letterSpacing:"0.04em", lineHeight:1.6, margin:"8px 0 0", maxWidth:"30ch"}}>
                          {t.applyNote}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        <div className="careers-foot">
          <p className="lead">{t.footLead}</p>
          <a className="spontaneous" href="mailto:hr@megalisvfx.com?subject=Spontaneous%20application">
            {t.footBtn}
          </a>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Careers });