// Section 09 — Company / Founder
// Left: founder photo placeholder + bio. Right: company info table.
const CompanySection = () => {
  const tableRows = [
  ['社名', 'Exer Japan株式会社 / Exer Japan, Inc.'],
  ['設立', '2025年3月31日'],
  ['代表者', '代表取締役 北村 潤樹'],
  ['資本金', '2,000,000円'],
  ['本社所在地', '〒160-0016 東京都新宿区信濃町35　\n慶應義塾大学 信濃町キャンパス 2号館 9階 CRIK信濃町'],
  ['事業内容', '①業務効率化・内製化支援　\n②生成AIを活用した業務効率化の推進　\n③生成AIを活用したシステム開発・運用'],
  ['取引銀行', '西武信用金庫 / みずほ銀行'],
  ['適格請求書発行', '登録番号 T9011101111222']];


  const bio = [
  { y: '2011–16', t: '化学品商社　製造業・建設業向け設備・材料の販売に従事' },
  { y: '2016–23', t: '外資メーカー　営業・エリアマーケティング・チームマネジメント' },
  { y: '2021–23', t: 'グロービス経営大学院　経営学修士（MBA）取得' },
  { y: '2023–24', t: '建設人材スタートアップ　エンタープライズ営業の事業開発' },
  { y: '2024–25', t: '創業期DXスタートアップ　社内システム構築・経営・営業企画' },
  { y: '2025.03', t: 'Exer Japan株式会社 設立、代表取締役就任' }];


  return (
    <section
      id="company"
      data-screen-label="09 Company"
      className="ej-root"
      style={{ width: 1440, padding: '160px 64px', background: 'var(--paper)' }}>
      
      <FadeIn>
        <SectionHead
          num="05"
          titleEn="THE COMPANY."
          titleJp="会社概要と、創業の背景。"
          accent="amber" />
        
      </FadeIn>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 64, alignItems: 'start' }}>
        {/* LEFT — Founder (vertical stack: photo on top, text below) */}
        <FadeIn>
          <div>
            <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', marginBottom: 24, textAlign: 'center' }}>
              ／ FOUNDER
            </div>

            {/* Founder portrait */}
            <div
              style={{
                width: 260,
                aspectRatio: '4 / 5',
                margin: '0 auto',
                backgroundImage: 'url(assets/founder.jpg)',
                backgroundSize: 'cover',
                backgroundPosition: 'center top',
                border: '1px solid var(--rule)'
              }} />
            
            

            {/* Name + EN — centered in column */}
            <div style={{ marginTop: 24, textAlign: 'center' }}>
              <h3
                className="ej-jp"
                style={{
                  margin: 0,
                  fontSize: 28,
                  fontWeight: 600,
                  color: 'var(--navy)',
                  letterSpacing: '0.04em',
                  lineHeight: 1.1
                }}>
                北村 潤樹
              </h3>
              <div className="ej-en" style={{ fontSize: 13, color: 'var(--ink-60)', marginTop: 6, letterSpacing: '0.02em' }}>
                Junki Kitamura — Founder & CEO
              </div>
            </div>

            {/* Bio */}
            <div style={{ marginTop: 20, fontSize: 13, color: 'var(--ink)', lineHeight: 1.9 }} className="ej-jp">
              <p style={{ margin: 0 }}>
                明治大学 商学部卒 ／ グロービス経営大学院（MBA）卒
              </p>
              <p style={{ marginTop: 16 }}>
                キャリアの起点は、製造業の生産ラインや建設現場向けの材料・機器を扱う化学品商社。来る日も現場に足を運び、図面や工程、段取りの実情を肌で理解してきました。その後、外資系メーカーで営業・マーケティングとチームのメンバーマネジメントを担い、お客様の現場で困っている課題に向き合い続けてきました。
              </p>
              <p style={{ marginTop: 16 }}>
                直近ではDXスタートアップで社内システムの構築を主導。<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>生成AIによって、これまで現場に合わず諦めていたシステムが現実的に作れる時代になった</strong>ことを痛感し、その可能性に賭けて Exer Japan を創業しました。
              </p>
            </div>
          </div>
        </FadeIn>

        {/* RIGHT — Company Table */}
        <FadeIn delay={100}>
          <div>
            <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', marginBottom: 24 }}>
              ／ COMPANY PROFILE
            </div>

            <div style={{ background: 'white', border: '1px solid var(--rule)', boxShadow: '0 1px 0 rgba(11,62,111,0.02), 0 18px 50px -40px rgba(11,62,111,0.25)' }}>
              {tableRows.map(([k, v], i) =>
              <div
                key={i}
                style={{
                  display: 'grid',
                  gridTemplateColumns: '160px 1fr',
                  borderBottom: i < tableRows.length - 1 ? '1px solid var(--rule)' : 'none'
                }}>

                  <div
                  style={{
                    padding: '24px 24px',
                    background: 'var(--off-white)',
                    borderRight: '1px solid var(--rule)',
                    display: 'flex',
                    alignItems: 'center'
                  }}
                  className="ej-jp">
                    <span style={{ fontSize: 12, color: 'var(--navy)', fontWeight: 600 }}>{k}</span>
                  </div>
                  <div className="ej-jp" style={{ padding: '24px 24px', fontSize: 13, color: 'var(--ink)', lineHeight: 1.8, whiteSpace: 'pre-line', background: 'white' }}>
                    {v}
                  </div>
                </div>
              )}
            </div>
          </div>
        </FadeIn>
      </div>

      {/* TEAM — 3 contributors below the founder section */}
      <FadeIn delay={150}>
        <div style={{ marginTop: 120, paddingTop: 64, borderTop: '1px solid var(--rule)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 56, alignItems: 'stretch', marginBottom: 48 }}>
            <div>
              <div className="ej-mono" style={{ fontSize: 12, color: 'var(--ink-60)', marginBottom: 16 }}>
                ／ TEAM
              </div>
              <div className="ej-en" style={{
                fontSize: 36, fontWeight: 400, color: 'var(--navy)',
                letterSpacing: '-0.025em', lineHeight: 1
              }}>
                CORE CONTRIBUTORS.
              </div>
              <div className="ej-jp" style={{ fontSize: 13, color: 'var(--ink-60)', marginTop: 12 }}>
                Exer Japan を支えるメンバー
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-start', paddingLeft: 64 }}>
              <div className="ej-jp" style={{
                fontSize: 14, lineHeight: 1.95, color: 'var(--ink)', maxWidth: 560, marginTop: 28
              }}>
                Exer Japanを支える、技術・コンサル・現場理解を併せ持つチームメンバーです。<br />
                我々が、貴社の業務効率化を支援します。
              </div>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {[
            { name: 'R.Maeda', roleJp: '技術責任者／AIエンジニア', det: '大学・大学院でAI・最適化を研究後、大手日本企業にてデータ活用・AI導入に従事。生成AIを用いたプロダクト/システム開発に強み。', initials: 'RM', bg: 'linear-gradient(135deg, #BAE6FD, #7DD3FC)' },
            { name: 'H.Fujimaki', roleJp: '技監', det: '大手電機メーカーゼネラルマネージャー（GM／VP）を経て、子会社の貿易商社の代表取締役社長に就任。台湾・香港・上海の現地法人董事長を務め、満期退任。', initials: 'HF', bg: 'linear-gradient(135deg, #FDE68A, #FBBF24)' },
            { name: 'Y.Tsuji', roleJp: 'ITコンサルタント', det: '大手外資ベンダーに入社。通信事業者向けプリセールスSE、ソリューションセールスを経てデバイスの法人への営業部門マネージャーを務めた。', initials: 'YT', bg: 'linear-gradient(135deg, #BFDBFE, #7DD3FC)' }].
            map((m, mi) =>
            <div key={mi} style={{
              background: 'white', border: '1px solid var(--rule)', padding: '32px 32px 28px'
            }}>
                <div className="ej-jp" style={{ fontSize: 18, color: 'var(--navy)', fontWeight: 600, marginBottom: 6 }}>
                  {m.name}
                </div>
                <div className="ej-jp" style={{ fontSize: 12, color: 'var(--ink-60)' }}>
                  {m.roleJp}
                </div>
                <div className="ej-jp" style={{ fontSize: 12, color: 'var(--ink)', lineHeight: 1.85, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--rule)' }}>
                  {m.det}
                </div>
              </div>
            )}
          </div>
        </div>
      </FadeIn>
    </section>);

};

window.CompanySection = CompanySection;