// Section 08 — Why Us
// 3 horizontal columns. Each: large index, EN/JP heading, body, supporting
// stat or fact at bottom. Off-white field with thin column rules.
const WhyUsSection = () => {
  const items = [
    {
      num: '01',
      en: 'END-TO-END\nSUPPORT',
      jp: '可視化から定着まで、一社で',
      accent: 'var(--teal)',
      body: '業務課題の可視化・業務効率化・座学・ハンズオン・定着運用を全て社内で提供。外部パートナーを複数ㆣぐ手間をなくし、ひとつの担当者が一貫して伴走します。',
      fact: { v: '1社', l: '可視化〜定着までの対応窓口' }
    },
    {
      num: '02',
      en: 'ENTERPRISE-GRADE\nTECH TEAM',
      jp: '大企業DXを見てきたチーム',
      accent: 'var(--sky-bright)',
      body: '慶應院でAI・最適化を研究したデータサイエンティスト、日本Microsoftで Microsoft 365 導入を担当したITコンサル、大手電機メーカーGM出身のMBA技術顧問がチームを組んでいます。',
      fact: { v: '04名', l: 'コアチーム構成（大手DX出身）' }
    },
    {
      num: '03',
      en: 'ON-SITE\nKNOWLEDGE',
      jp: '製造・建設現場を理解している',
      accent: 'var(--amber-deep)',
      body: '代表自身が化学品商社と外資メーカーで製造業・建設業の現場を12年間担当。MBA取得を経て、現場と経営の両側を語りながら推進できます。',
      fact: { v: '12年', l: '製造・建設現場の担当経験' }
    }
  ];

  return (
    <section
      id="why-us"
      data-screen-label="08 Why Us"
      className="ej-root"
      style={{ width: 1440, padding: '160px 64px', background: 'var(--paper)' }}
    >
      <FadeIn>
        <SectionHead
          num="08"
          titleEn="EXER JAPAN."
          titleJp="なぜ私たちが選ばれるのか。"
          lead={<>業務理解・技術力・一貫した伴走体制。<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>現場を見てきた経営者</strong>と、<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>大企業DXを見てきたチーム</strong>が、中小企業の業務効率化を最後まで支えきれます。</>}
        />
      </FadeIn>

      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 0,
          border: '1px solid var(--rule)',
          background: 'white',
        }}
      >
        {items.map((it, i) => (
          <FadeIn key={it.num} delay={i * 100}>
            <div
              style={{
                padding: '56px 40px 48px',
                borderRight: i < 2 ? '1px solid var(--rule)' : 'none',
                display: 'flex',
                flexDirection: 'column',
                height: '100%',
                minHeight: 560,
                position: 'relative',
              }}
            >
              {/* corner index */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 40 }}>
                <div
                  className="ej-en"
                  style={{
                    fontSize: 120,
                    fontWeight: 400,
                    color: 'var(--navy)',
                    letterSpacing: '-0.04em',
                    lineHeight: 0.85,
                  }}
                >
                  {it.num}
                </div>
                <div className="ej-mono" style={{ fontSize: 10, color: it.accent, writingMode: 'vertical-rl', letterSpacing: '0.2em', paddingTop: 8 }}>
                  STRENGTH 0{i + 1}
                </div>
              </div>

              <div
                className="ej-en"
                style={{
                  fontSize: 28,
                  fontWeight: 400,
                  color: 'var(--navy)',
                  letterSpacing: '-0.02em',
                  lineHeight: 1.05,
                  whiteSpace: 'pre-line',
                  marginBottom: 12,
                }}
              >
                {it.en}
              </div>
              <div className="ej-jp" style={{ fontSize: 15, color: 'var(--ink-60)', fontWeight: 500, marginBottom: 28 }}>
                {it.jp}
              </div>

              <p className="ej-jp" style={{ margin: 0, fontSize: 14, lineHeight: 1.95, color: 'var(--ink)' }}>
                {it.body}
              </p>

              {/* fact */}
              <div
                style={{
                  marginTop: 'auto',
                  paddingTop: 32,
                  display: 'flex',
                  alignItems: 'baseline',
                  gap: 14,
                  borderTop: '1px solid var(--rule)',
                  marginTop: 36,
                }}
              >
                <div
                  className="ej-en"
                  style={{
                    fontSize: 44,
                    fontWeight: 400,
                    color: it.accent,
                    letterSpacing: '-0.025em',
                    lineHeight: 1,
                  }}
                >
                  {it.fact.v}
                </div>
                <div className="ej-jp" style={{ fontSize: 12, color: 'var(--ink-60)', lineHeight: 1.5 }}>
                  {it.fact.l}
                </div>
              </div>
            </div>
          </FadeIn>
        ))}
      </div>

      <FadeIn>
        <div
          style={{
            marginTop: 56,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <div className="ej-jp" style={{ fontSize: 14, color: 'var(--ink-60)' }}>
            → <span style={{ color: 'var(--navy)', fontWeight: 500 }}>会社概要と、創業者の経歴をご紹介します</span>
          </div>
          <div className="ej-mono" style={{ fontSize: 11, color: 'var(--ink-60)' }}>
            NEXT — 09 / COMPANY
          </div>
        </div>
      </FadeIn>
    </section>
  );
};

window.WhyUsSection = WhyUsSection;