// Section 05 — Services
// 3 horizontal cards. Each card: amber "Service 01" tab top-left, EN/JP
// heading, lead paragraph, amber-check bullet list, footer with price hint
// + CTA arrow.
const ServicesSection = () => {
  const services = [
    {
      num: '01',
      en: 'GENERATIVE AI\nSYSTEM BUILD',
      jp: '生成AIを用いたシステム開発',
      accent: 'var(--teal)',
      lead: '貴社の業務に合わせたオーダーメイドのAIアプリ・自動化システムを設計・開発します。',
      bullets: [
        'オーダーメイドのAIアプリ開発',
        '業務に合わせたカスタム開発',
        '自動化システムの構築',
        '既存システムとのデータ連携・自動化連携',
      ],
      hint: '個社最適なシステムを求める企業様向け',
      hintClass: 'ej-amber-tab',
      meta: '4–8週間 / 個別見積',
    },
    {
      num: '02',
      en: 'M365 & POWER\nPLATFORM OPS',
      jp: 'MS環境下での業務改善',
      accent: 'var(--sky-bright)',
      lead: '既にある Microsoft 365 を賢く活用し、セキュリティを保ちながら業務改善を推進します。',
      bullets: [
        'M365 利活用支援',
        '生成AI（Copilot）活用支援',
        'Power Platform の内製化支援',
        'ノーコードでの業務アプリ構築',
      ],
      hint: '既存ツールを活かしたい企業様向け',
      hintClass: 'ej-sky-tab',
      meta: 'チケット制 / 月額',
    },
    {
      num: '03',
      en: 'CONSULTING &\nINTERNALIZATION',
      jp: 'コンサルテーション・内製化支援',
      accent: 'var(--amber-deep)',
      lead: 'AIの活用から、業務効率の向上まで現場に入り込んで支援します。',
      bullets: [
        '業務プロセスの可視化',
        '生成AI リテラシー研修',
        '業務効率化 ハンズオン支援',
        '社内推進体制の構築支援',
      ],
      hint: '内製化を目指す企業様向け',
      hintClass: 'ej-amber-tab',
      meta: '6ヶ月 / 伴走型',
    },
  ];

  return (
    <section
      id="services"
      data-screen-label="05 Services"
      className="ej-root"
      style={{ width: 1440, padding: '160px 64px', background: 'var(--paper)' }}
    >
      <FadeIn>
        <SectionHead
          num="05"
          titleEn="THE SERVICES."
          titleJp="3つのサービスで、業務の可視化から貴社にあったソリューション開発まで。"
          lead={<>「とりあえずChatGPTを契約」ではなく、<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>業務に効くAI</strong>を作るための3つのサービス。単発でも、組み合わせても利用できます。</>}
        />
      </FadeIn>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {services.map((s, i) => (
          <FadeIn key={s.num} delay={i * 100}>
            <article
              style={{
                background: 'white',
                border: '1px solid var(--rule)',
                position: 'relative',
                padding: '56px 36px 40px',
                display: 'flex',
                flexDirection: 'column',
                height: '100%',
                minHeight: 660,
              }}
            >
              {/* hint tab top-left — cycles amber / sky / amber */}
              <span
                className={s.hintClass}
                style={{ position: 'absolute', top: 0, left: 24 }}
              >
                {s.hint}
              </span>

              <div
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'flex-start',
                  marginBottom: 28,
                }}
              >
                <div
                  className="ej-mono"
                  style={{
                    fontSize: 13,
                    color: s.accent,
                    fontWeight: 600,
                    letterSpacing: '0.15em',
                  }}
                >
                  SERVICE {s.num}
                </div>
              </div>

              <h3
                className="ej-en"
                style={{
                  margin: 0,
                  fontSize: 28,
                  fontWeight: 400,
                  color: 'var(--navy)',
                  letterSpacing: '-0.015em',
                  lineHeight: 1.05,
                  whiteSpace: 'pre-line',
                }}
              >
                {s.en}
              </h3>
              <div className="ej-jp" style={{ fontSize: 14, color: 'var(--ink-60)', marginTop: 10, marginBottom: 24 }}>
                {s.jp}
              </div>

              <p className="ej-jp" style={{ fontSize: 14, lineHeight: 1.9, color: 'var(--ink)', margin: 0, marginBottom: 28 }}>
                {s.lead}
              </p>

              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12, flex: 1 }}>
                {s.bullets.map((b, bi) => (
                  <li
                    key={bi}
                    className="ej-jp"
                    style={{ display: 'flex', alignItems: 'flex-start', gap: 12, fontSize: 13, color: 'var(--ink)' }}
                  >
                    <AmberCheck size={18} />
                    <span style={{ lineHeight: 1.6 }}>{b}</span>
                  </li>
                ))}
              </ul>

              <div
                style={{
                  marginTop: 32,
                  paddingTop: 20,
                  borderTop: '1px solid var(--rule)',
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                <span
                  style={{
                    width: 36,
                    height: 36,
                    borderRadius: '50%',
                    background: 'var(--off-white)',
                    border: '1px solid var(--rule)',
                    display: 'inline-flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: 14,
                    color: 'var(--navy)',
                  }}
                >
                  →
                </span>
              </div>
            </article>
          </FadeIn>
        ))}
      </div>

      <FadeIn delay={200}>
        <div
          style={{
            marginTop: 56,
            padding: '24px 28px',
            background: 'white',
            border: '1px solid var(--rule)',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <AmberCheck size={22} />
            <div className="ej-jp" style={{ fontSize: 14, color: 'var(--navy)', fontWeight: 500 }}>
              どのサービスが自社に合うか分からない場合は、まず無料の業務診断から。
            </div>
          </div>
          <button
            style={{
              background: 'var(--navy)',
              color: 'white',
              border: 'none',
              padding: '14px 22px',
              borderRadius: 999,
              fontSize: 13,
              fontWeight: 500,
              fontFamily: 'var(--font-ui)',
              cursor: 'pointer',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 10,
            }}
          >
            無料診断を依頼する <span>→</span>
          </button>
        </div>
      </FadeIn>
    </section>
  );
};

window.ServicesSection = ServicesSection;