// Section 07 — Security (refresh / light variant)
// Off-white field with sky bloom decoration. White cards on a faint sky
// tint. Teal shields, navy text. The gravitas is carried by composition
// and big numbers, not by a dark slab.
const SecuritySection = () => {
  const items = [
    {
      num: '01',
      en: 'PRIVATE DEPLOYMENT',
      jp: 'プライベート環境での実装',
      body: '顧客のクラウドアカウント (AWS / Azure / GCP) 内に直接デプロイ。学習データもプロンプトも、貴社の境界の外には出ません。',
      tags: ['VPC内実装', 'オンプレ可', '学習データ非提供'],
    },
    {
      num: '02',
      en: 'ACCESS & AUDIT LOG',
      jp: 'アクセス制御とログ管理',
      body: 'SSO / IDプロバイダ連携で、社員別の権限・部署別のデータスコープを設計。すべての推論・操作ログを保管し、監査要件に応えます。',
      tags: ['SSO/SAML', 'RBAC', '監査ログ保管'],
    },
    {
      num: '03',
      en: 'SENSITIVE DATA POLICY',
      jp: '機微情報の取り扱い設計',
      body: '図面・原価・顧客個人情報などのカテゴリ別に、AIに渡してよい範囲を貴社の社内ルールに合わせて設計。マスキング処理も実装可能。',
      tags: ['PII マスキング', '機密度タグ付け', '社内規程連携'],
    },
    {
      num: '04',
      en: 'SYSTEM INTEGRATION',
      jp: '既存システムとの整合性',
      body: '基幹システム・SaaS と安全に接続する設計を提供。データ連携基盤・APIゲートウェイを含めて、情シス部門と並走で構築します。',
      tags: ['ERP連携', 'API ゲートウェイ', '情シス並走'],
    },
  ];

  return (
    <section
      id="security"
      data-screen-label="07 Security"
      className="ej-root"
      style={{
        width: 1440,
        padding: '180px 64px',
        background: 'var(--off-white)',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* sky bloom decoration */}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          inset: 0,
          background:
            'radial-gradient(ellipse 50% 50% at 85% 10%, rgba(186,230,253,0.85), transparent 65%),'
            + ' radial-gradient(ellipse 45% 40% at 8% 95%, rgba(125,211,252,0.20), transparent 65%)',
          pointerEvents: 'none',
        }}
      ></div>

      <div style={{ position: 'relative' }}>
        <FadeIn>
          <SectionHead
            num="07"
            titleEn="THE SECURITY."
            titleJp="社内データを、外に出さないという前提。"
            accent="sky"
            lead={<>「AIに会社のデータを渡していいのか」——その不安を、設計段階から潰す。<strong style={{ color: 'var(--navy)', fontWeight: 600 }}>4つの観点</strong>で、貴社の社内規程に合った実装を提案します。</>}
          />
        </FadeIn>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {items.map((it, i) => (
            <FadeIn key={it.num} delay={i * 80}>
              <div
                style={{
                  background: 'white',
                  border: '1px solid var(--rule)',
                  borderRadius: 6,
                  padding: '48px 40px 40px',
                  boxShadow: '0 1px 0 rgba(11,62,111,0.02), 0 24px 60px -40px rgba(11,62,111,0.18)',
                  position: 'relative',
                  height: '100%',
                  minHeight: 360,
                }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                  <div
                    className="ej-en"
                    style={{
                      fontSize: 64,
                      fontWeight: 400,
                      color: 'var(--sky-bright)',
                      letterSpacing: '-0.03em',
                      lineHeight: 0.9,
                    }}
                  >
                    {it.num}
                  </div>
                  {/* shield mark — pale sky halo */}
                  <span
                    style={{
                      width: 44,
                      height: 44,
                      borderRadius: '50%',
                      background: 'rgba(186,230,253,0.5)',
                      border: '1px solid var(--sky-line)',
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <svg width="16" height="16" viewBox="0 0 14 14" fill="none">
                      <path
                        d="M7 1 L12 3 V7 C12 10 9.5 12 7 13 C4.5 12 2 10 2 7 V3 Z"
                        stroke="var(--sky-deep)"
                        strokeWidth="1.2"
                        fill="none"
                      />
                      <path d="M5 7 L6.5 8.5 L9 6" stroke="var(--sky-deep)" strokeWidth="1.3" strokeLinecap="round" />
                    </svg>
                  </span>
                </div>

                <div
                  className="ej-en"
                  style={{
                    fontSize: 24,
                    fontWeight: 400,
                    color: 'var(--navy)',
                    letterSpacing: '-0.015em',
                    marginBottom: 10,
                  }}
                >
                  {it.en}
                </div>
                <div className="ej-jp" style={{ fontSize: 16, color: 'var(--navy)', fontWeight: 600, marginBottom: 20 }}>
                  {it.jp}
                </div>
                <p className="ej-jp" style={{ margin: 0, fontSize: 14, lineHeight: 1.95, color: 'var(--ink)', maxWidth: 500 }}>
                  {it.body}
                </p>

                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 28 }}>
                  {it.tags.map((t, ti) => (
                    <span
                      key={ti}
                      className="ej-mono"
                      style={{
                        fontSize: 10,
                        padding: '5px 12px',
                        borderRadius: 999,
                        background: 'var(--sky-soft)',
                        border: '1px solid var(--sky-line)',
                        color: 'var(--navy)',
                      }}
                    >
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </FadeIn>
          ))}
        </div>

        <FadeIn>
          <div
            style={{
              marginTop: 64,
              padding: '24px 28px',
              background: 'white',
              borderRadius: 6,
              border: '1px solid var(--sky-line)',
              borderLeft: '3px solid var(--sky-bright)',
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <div className="ej-jp" style={{ fontSize: 14, color: 'var(--navy)', fontWeight: 500 }}>
              情シス部門との並走実績あり。NDA締結のうえ、貴社のセキュリティ基準書をベースに設計を進めます。
            </div>
            <div className="ej-mono" style={{ fontSize: 11, color: 'var(--sky-deep)' }}>
              NEXT — 08 / WHY US
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
};

window.SecuritySection = SecuritySection;