/* 도입 의사결정 근거 — FOR OPERATIONS (4축, 각 축 핵심 1줄씩만) */

const OPS_AXES = [
  {
    n: '01',
    title: 'TCO 최소화',
    sub: '도입비·유지비 0원',
    desc: '전용 단말기·QR 리더기·NFC 리더기·설치공사 불필요. 1계정 200명까지 영구 무료.',
    metric: '₩0',
    metricLabel: 'HW 도입비',
    icon: 'coin',
  },
  {
    n: '02',
    title: '컴플라이언스',
    sub: '감사·증빙 자동화',
    desc: '모든 인식·조회·변경 이력을 감사 로그에 자동 기록. 개인정보보호법에 따른 제어 체계 제공.',
    metric: '100%',
    metricLabel: '감사 로그 자동화',
    icon: 'shield',
  },
  {
    n: '03',
    title: '운영 부담 제거',
    sub: '담당자 업무 자동화',
    desc: '설치 30분, 임직원 교육 불필요. 수기 출석·엑셀 집계·운행일지·보고서 자동 발송 전 과정 자동화.',
    metric: '30분',
    metricLabel: '당일 운영 개시',
    icon: 'gauge',
  },
  {
    n: '04',
    title: '확장성',
    sub: '대기업·다중 사업장',
    desc: '운수사·고객사·기사·탑승객 4 역할 권한 분리. 다중 노선·지점 통합 관리, Enterprise 전담 매니저 배정.',
    metric: '4 Role',
    metricLabel: '권한 분리 구조',
    icon: 'expand',
  },
];

const OpsIcon = ({name}) => {
  const p = {width: 22, height: 22, fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round'};
  if (name === 'coin') return <svg {...p} viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M9 9c0-1 1-2 3-2s3 1 3 2-1 2-3 2-3 1-3 2 1 2 3 2 3-1 3-2M12 5v2M12 17v2" /></svg>;
  if (name === 'shield') return <svg {...p} viewBox="0 0 24 24"><path d="M12 2L4 6v6c0 5 3.6 9 8 10 4.4-1 8-5 8-10V6l-8-4z" /><path d="M9 12l2 2 4-4" /></svg>;
  if (name === 'gauge') return <svg {...p} viewBox="0 0 24 24"><path d="M12 14l4-4M21 12a9 9 0 1 1-9-9c2.5 0 4.7 1 6.4 2.6" /></svg>;
  if (name === 'expand') return <svg {...p} viewBox="0 0 24 24"><polyline points="4 14 4 20 10 20" /><polyline points="20 10 20 4 14 4" /><line x1="14" y1="10" x2="21" y2="3" /><line x1="3" y1="21" x2="10" y2="14" /></svg>;
  return null;
};

const OpsAxisCard = ({axis}) => (
  <div className="card" style={{
    padding: 32, borderRadius: 20, height: '100%',
    display: 'flex', flexDirection: 'column', gap: 20,
  }}>
    <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: 'var(--sid-blue-tint)', color: 'var(--sid-blue)',
        display: 'grid', placeItems: 'center',
      }}>
        <OpsIcon name={axis.icon} />
      </div>
      <span style={{
        fontFamily: 'var(--font-numeric)', fontWeight: 800, fontSize: 14,
        color: 'var(--sid-fg-light)', letterSpacing: '-0.04em',
      }}>{axis.n}</span>
    </div>

    <div>
      <h3 style={{fontSize: 22, fontWeight: 800, color: 'var(--sid-ink)', margin: '0 0 4px', letterSpacing: '-0.03em'}}>{axis.title}</h3>
      <div style={{fontSize: 13, color: 'var(--sid-blue-link)', fontWeight: 600}}>{axis.sub}</div>
    </div>

    <p style={{
      fontSize: 14, color: 'var(--sid-fg-mid)', lineHeight: 1.65, margin: 0, flex: 1,
    }}>{axis.desc}</p>

    <div style={{
      paddingTop: 18, borderTop: '1px solid var(--sid-line-soft)',
      display: 'flex', alignItems: 'baseline', gap: 8,
    }}>
      <span style={{
        fontFamily: 'var(--font-numeric)', fontSize: 24, fontWeight: 800,
        letterSpacing: '-0.04em', color: 'var(--sid-ink)',
      }}>{axis.metric}</span>
      <span style={{fontSize: 12, color: 'var(--sid-fg-mid)', fontWeight: 500}}>{axis.metricLabel}</span>
    </div>
  </div>
);

const SectionOperations = ({onContactClick}) => (
  <section id="operations" className="bg-soft">
    <div className="shell">
      <div className="section-head section-head--center">
        <div className="eyebrow"><span className="dot" />FOR OPERATIONS</div>
        <h2 className="section-title">검토 기준 4가지.</h2>
        <p className="section-sub">
          임직원 통근 운영 담당자가 도입 검토 시 고려하는 비용 효율·컴플라이언스·운영 효율·확장성 4가지 핵심 기준을 모두 충족합니다.
        </p>
      </div>

      <div className="grid grid-4">
        {OPS_AXES.map(a => <OpsAxisCard key={a.n} axis={a} />)}
      </div>
    </div>
  </section>
);

Object.assign(window, {SectionOperations, OpsAxisCard});