// Page — Careers (採用)

const PageCareers = () => {
  const { theme } = useTheme();
  const { lang } = (window.useLang ? window.useLang() : { lang: 'jp' });
  const EN = lang === 'en';
  const pageRef = React.useRef(null);
  (window.useGsapPageEnter || ((_r) => {}))(pageRef);
  const v1 = {
    paper: theme.paper, paperDeep: theme.paperDeep, ink: theme.ink, sumi: theme.sumi,
    shu: theme.accent, muted: theme.muted, mutedLight: theme.mutedLight, line: theme.line,
    serif: theme.fonts.serif, sans: theme.fonts.sans, mono: theme.fonts.mono,
  };

  const positions = [
    { team: 'ENGINEERING', role: 'Senior Fullstack Engineer', type: EN ? 'Full-time' : '正社員', ref: 'ENG-001' },
    { team: 'ENGINEERING', role: 'AI / ML Engineer', type: EN ? 'Full-time' : '正社員', ref: 'ENG-002' },
    { team: 'PRODUCT',     role: 'Product Designer (Senior)', type: EN ? 'Full-time' : '正社員', ref: 'PRD-001' },
    { team: 'PRODUCT',     role: 'Product Manager — Curecipe', type: EN ? 'Full-time' : '正社員', ref: 'PRD-002' },
    { team: 'BUSINESS',    role: EN ? 'Field Sales — Food DX' : 'Field Sales — 飲食DX', type: EN ? 'Full-time' : '正社員', ref: 'BIZ-001' },
    { team: 'BUSINESS',    role: 'Customer Success', type: EN ? 'Full-time' : '正社員', ref: 'BIZ-002' },
    { team: 'CONSULTING',  role: 'AI Consultant', type: EN ? 'Full-time / Contract' : '正社員 ／ 業務委託', ref: 'CNS-001' },
    { team: 'OPERATIONS',  role: EN ? 'Corporate Management' : '経営管理 (Corporate)', type: EN ? 'Full-time' : '正社員', ref: 'OPS-001' },
  ];

  const values = [
    { k: EN ? 'Craft-first' : '職人主義', en: 'CRAFT-FIRST', desc: EN ? 'Do not wave Technology around. The human hand remains the protagonist.' : 'Technologyを振りかざさない。主役は常に現場の人の手。' },
    { k: EN ? 'Long run' : '長距離走', en: 'MARATHON', desc: EN ? 'Choose decade-long sincerity over short-term flash.' : '短期の派手さより、十年続く誠実さ。' },
    { k: EN ? 'Ownership' : '当事者性', en: 'OWNERSHIP', desc: EN ? 'Take the issue as your own. Do not wait for instructions.' : '自分の課題として引き受ける。指示を待たない。' },
    { k: EN ? 'Four-way good' : '四方良し', en: 'FOUR-WAY', desc: EN ? 'Always choose decisions where all four sides can stand.' : '事業の四方が揃う判断を、常に選ぶ。' },
  ];

  return (
    <div ref={pageRef} data-scroll-root style={{
      width: '100%',
      background: v1.paper, color: v1.ink, fontFamily: v1.sans,
    }}>
      {window.ScrollProgressBar ? <window.ScrollProgressBar /> : null}
      {window.MotionReady ? <window.MotionReady /> : null}
      {window.SiteNav ? <window.SiteNav active="careers" /> : null}

      {/* HERO */}
      <section style={{ padding: '100px 80px 80px', position: 'relative', overflow: 'hidden' }}>
        {window.DecorativeMotionField ? <window.DecorativeMotionField density={7} intensity={0.28} variant="score" /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={310} top={34} right={64} opacity={0.18} rotateDuration={40} delay={0.3} /> : null}
        {window.MorphLineMotif ? <window.MorphLineMotif size={130} bottom={40} left={92} opacity={0.14} rotateDuration={56} delay={1.4} reverse /> : null}
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu, marginBottom: 40 }}>
          CHAP. 陸 ／ CAREERS
        </div>
        <h1 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(64px, 9vw, 150px)', lineHeight: 1.0, margin: 0, letterSpacing: '-0.02em', position: 'relative', zIndex: 1 }}>
          {EN ? <>People who stand<br/><span style={{ color: v1.shu }}>beside makers</span>.</> : <>作り手側に、<br/><span style={{ color: v1.shu }}>立てる人</span>を。</>}
        </h1>
        <p style={{ fontFamily: v1.serif, fontSize: 17, lineHeight: 2.2, marginTop: 48, maxWidth: 720, color: v1.sumi }}>
          {EN
            ? <>Culina stands alongside food and maker businesses through Technology.<br/>We value sincerity toward the context of the workplace over spectacle.<br/>We are always looking for people who can stand on the maker's side.</>
            : <>Culinaは、食と職人の事業にTechnologyで寄り添う会社です。<br/>派手さより、現場の文脈に寄り添う誠実さを。<br/>職人の側に立てる人を、いつでもお待ちしています。</>}
        </p>
      </section>

      {/* Values */}
      <section style={{ padding: '100px 80px', borderTop: `1px solid ${v1.line}`, background: v1.paperDeep }}>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.muted, marginBottom: 32 }}>
          § 01 ／ VALUES
        </div>
        <h2 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 56, margin: '0 0 64px', letterSpacing: '-0.01em' }}>
          {EN ? <>Culina's <span style={{ color: v1.shu }}>four</span> principles.</> : <>Culinaの<span style={{ color: v1.shu }}>四つの</span>規矩。</>}
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: v1.line, border: `1px solid ${v1.line}` }}>
          {values.map((v, i) => (
            <div key={i} style={{
              background: v1.paper, padding: '40px 28px', minHeight: 260,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            }}>
              <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.shu }}>
                ◇ 0{i+1}
              </div>
              <div>
                <div style={{ fontFamily: v1.serif, fontSize: 40, lineHeight: 1 }}>{v.k}</div>
                <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.25em', color: v1.muted, marginTop: 8 }}>
                  {v.en}
                </div>
                <div style={{ fontFamily: v1.serif, fontSize: 13.5, lineHeight: 2, marginTop: 20, color: v1.sumi }}>
                  {v.desc}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Positions */}
      <section style={{ padding: '100px 80px', borderTop: `1px solid ${v1.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, marginBottom: 48 }}>
          <div>
            <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.muted, marginBottom: 12 }}>
              § 02 ／ OPEN POSITIONS
            </div>
            <h2 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 56, margin: 0, letterSpacing: '-0.01em' }}>
              {EN ? 'Open positions.' : '募集職種。'}
            </h2>
          </div>
          <div style={{ alignSelf: 'end', display: 'flex', gap: 24, fontFamily: v1.mono, fontSize: 11, letterSpacing: '0.2em', color: v1.muted }}>
            <span style={{ color: v1.shu }}>● ALL ({positions.length})</span>
            <span>○ ENG</span><span>○ PRD</span><span>○ BIZ</span><span>○ CNS</span>
          </div>
        </div>

        <div style={{ borderTop: `1px solid ${v1.ink}` }}>
          {positions.map((p, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: '120px 140px 1fr 140px 60px',
              gap: 32, padding: '28px 8px', borderBottom: `1px solid ${v1.line}`,
              alignItems: 'center', cursor: 'pointer',
              transition: 'background 0.15s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = v1.paperDeep}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.2em', color: v1.shu }}>
                {p.ref}
              </div>
              <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.25em', color: v1.muted }}>
                {p.team}
              </div>
              <div style={{ fontFamily: v1.serif, fontSize: 22 }}>{p.role}</div>
              <div style={{ fontFamily: v1.serif, fontSize: 13, color: v1.muted }}>{p.type}</div>
              <div style={{ textAlign: 'right', fontSize: 11, letterSpacing: '0.2em', color: v1.ink }}>応募 →</div>
            </div>
          ))}
        </div>
      </section>

      {/* Benefits */}
      <section style={{ padding: '100px 80px', borderTop: `1px solid ${v1.line}`, background: v1.paperDeep }}>
        <div style={{ fontFamily: v1.mono, fontSize: 10, letterSpacing: '0.3em', color: v1.muted, marginBottom: 32 }}>
          § 03 ／ WORKING AT CULINA
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 48 }}>
          {[
            { h: '働き方', items: ['リモート基本／月数回オフィス', 'フレックス制', '副業可'] },
            { h: '制度',   items: ['食事補助 月2万円', '書籍・カンファレンス補助', '職人訪問制度'] },
            { h: '環境',   items: ['渋谷桜丘／リノベーションオフィス', 'MacBook Pro 支給', 'Mentor制度'] },
          ].map((b, i) => (
            <div key={i} style={{ borderTop: `1px solid ${v1.ink}`, paddingTop: 24 }}>
              <div style={{ fontFamily: v1.serif, fontSize: 28, marginBottom: 20 }}>{b.h}</div>
              {b.items.map((it, j) => (
                <div key={j} style={{ fontFamily: v1.serif, fontSize: 15, lineHeight: 2.2, color: v1.sumi, borderBottom: `1px solid ${v1.line}`, paddingBottom: 8, marginBottom: 8 }}>
                  ＋ {it}
                </div>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '140px 80px', borderTop: `1px solid ${v1.line}`, textAlign: 'center' }}>
        <h3 style={{ fontFamily: v1.serif, fontWeight: 400, fontSize: 'clamp(48px, 6vw, 88px)', margin: 0, lineHeight: 1.2 }}>
          {EN ? <>To keep standing<br/><span style={{ color: v1.shu, fontStyle: 'italic' }}>beside makers</span>.</> : <>職人の側に、<span style={{ color: v1.shu, fontStyle: 'italic' }}>立ち続けるために</span>。</>}
        </h3>
        <div style={{ marginTop: 48, display: 'inline-flex', gap: 16, flexWrap: 'wrap' }}>
          <a href={((typeof window !== 'undefined' && window.__ASSET_BASE__) || './') + 'contact/'} style={{ textDecoration: 'none' }}>
            <button style={{ background: v1.shu, color: v1.paper, border: 'none', padding: '22px 36px', fontSize: 13, letterSpacing: '0.2em', fontFamily: v1.sans, cursor: 'pointer' }}>
              {EN ? 'Apply →' : 'エントリーする →'}
            </button>
          </a>
          <a href={((typeof window !== 'undefined' && window.__ASSET_BASE__) || './') + 'contact/'} style={{ textDecoration: 'none' }}>
            <button style={{ background: 'transparent', color: v1.ink, border: `1px solid ${v1.ink}`, padding: '22px 36px', fontSize: 13, letterSpacing: '0.2em', fontFamily: v1.sans, cursor: 'pointer' }}>
              {EN ? 'Casual interview' : 'カジュアル面談'}
            </button>
          </a>
        </div>
      </section>

      {window.SiteFooter ? <window.SiteFooter /> : <PageFooter />}
    </div>
  );
};
window.PageCareers = PageCareers;