/* 도입 프로세스 — 5단계 (앱 설치 → 얼굴 등록 → 노선 설정 → 거치 → 운영) */

const SectionProcess = () => {
  const steps = [
    {n: '01', title: '앱 설치', desc: 'Google Play 또는 App Store에서 셔틀아이디 앱을 설치합니다.', time: '1분'},
    {n: '02', title: '계정·임직원 등록', desc: '관리자 계정 생성 후 임직원 얼굴 사진을 일괄 또는 1인당 30초 등록.', time: '10분'},
    {n: '03', title: '노선·스케줄 설정', desc: '차고지·정류장·도착지 좌표 설정. 고정노선·가변노선 모두 지원.', time: '5분'},
    {n: '04', title: '스마트폰 거치', desc: '전면 카메라가 출입구를 향하도록 거치대에 고정합니다.', time: '2분'},
    {n: '05', title: '운행 시작', desc: '앱에서 "운행 시작" 탭. 카메라 앞을 지나는 임직원이 자동 인식됩니다.', time: '즉시'},
  ];

  return (
    <section id="process">
      <div className="shell">
        <div className="section-head">
          <div className="eyebrow"><span className="dot" />ONBOARDING</div>
          <h2 className="section-title">30분 도입,<br/>당일 운영 개시.</h2>
          <p className="section-sub">
            설치공사·네트워크 구성·교육 과정 없이 5단계 절차만 거치면 운영을 시작할 수 있습니다.
          </p>
        </div>

        <div className="process-track">
          {/* connector line */}
          <div className="process-line" aria-hidden />

          {steps.map((s, i) => (
            <div key={s.n} className="process-step">
              <div className="process-dot">
                <span className="process-dot-inner" />
              </div>
              <div className="process-card">
                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12}}>
                  <span style={{
                    fontFamily: 'var(--font-numeric)', fontWeight: 800, fontSize: 24,
                    letterSpacing: '-0.04em', color: 'var(--sid-blue)',
                  }}>{s.n}</span>
                  <span className="chip chip--gray" style={{fontSize: 11}}>{s.time}</span>
                </div>
                <h3 style={{
                  fontSize: 18, fontWeight: 800, color: 'var(--sid-ink)',
                  margin: '0 0 8px', letterSpacing: '-0.02em',
                }}>{s.title}</h3>
                <p style={{fontSize: 13, color: 'var(--sid-fg-mid)', lineHeight: 1.6, margin: 0}}>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>

        {/* outcome callout */}
        <div style={{
          marginTop: 56, padding: '32px 36px',
          background: 'var(--sid-blue-tint)', borderRadius: 20,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          flexWrap: 'wrap',
        }}>
          <div>
            <div style={{fontSize: 13, color: 'var(--sid-blue-link)', fontWeight: 700, marginBottom: 6}}>다음 출근 시간부터</div>
            <div style={{fontSize: 22, fontWeight: 800, color: 'var(--sid-ink)', letterSpacing: '-0.03em'}}>
              수기 집계·엑셀 작업이 운영 프로세스에서 제거됩니다.
            </div>
          </div>
          <a className="btn btn-primary btn-lg" href="https://docs.shuttle.id" target="_blank" rel="noreferrer">
            상세 가이드 보기
          </a>
        </div>
      </div>

      <style>{`
        .process-track {
          position: relative;
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 24px;
        }
        .process-line {
          position: absolute;
          top: 12px;
          left: 4%;
          right: 4%;
          height: 2px;
          background: linear-gradient(90deg, var(--sid-blue) 0%, var(--sid-blue-soft) 100%);
          border-radius: 2px;
        }
        .process-step { position: relative; }
        .process-dot {
          width: 26px; height: 26px;
          border-radius: 13px;
          background: var(--sid-blue);
          margin: 0 0 24px;
          display: grid; place-items: center;
          box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--sid-blue-soft);
          position: relative;
          z-index: 1;
        }
        .process-dot-inner {
          width: 8px; height: 8px;
          border-radius: 4px;
          background: #fff;
        }
        .process-card {
          padding: 22px;
          background: #fff;
          border: 1px solid var(--sid-line);
          border-radius: 16px;
          transition: border-color 160ms, box-shadow 200ms, transform 200ms;
        }
        .process-card:hover {
          border-color: var(--sid-blue-soft);
          box-shadow: var(--site-shadow-card);
          transform: translateY(-2px);
        }
        @media (max-width: 920px) {
          .process-track { grid-template-columns: repeat(2, 1fr); }
          .process-line { display: none; }
        }
        @media (max-width: 600px) {
          .process-track { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, {SectionProcess});