/* FAQ — 자주 묻는 질문 (B2B 통근 담당자 관점에서 핵심 10개만) */

const FAQS = [
  {
    q: '기존 사원증·출입카드와 얼굴인식을 함께 사용할 수 있나요?',
    a: '네. 셔틀아이디는 기존 사원증·출입카드 NFC 태깅과 AI 얼굴인식을 동시에 지원하는 멀티 인증 구조입니다. 사원증·출입카드는 본연의 출입·신원 확인·복지 등 역할을 그대로 유지하며, 셔틀아이디는 탑승 확인 단계에서 얼굴인식을 추가 인증 수단으로 도입합니다. 사원증 발급이 어려운 게스트·임시 인력은 얼굴인식 또는 QR 탑승권으로 처리하여 인증 누락을 방지합니다.',
  },
  {
    q: '도입 비용·TCO(총소유비용)는 얼마인가요?',
    a: 'Free 플랜 1계정 200명까지 영구 무료이며, 하드웨어 도입비 0원·유지보수비 0원 구조입니다. 기존 QR 단말기·NFC 리더기 도입 시 발생하던 버스 1대당 수십~수백만 원의 장비 비용과 매년 반복되는 유지보수·소모품 교체·현장 출장 비용이 전면 제거됩니다. Standard·Enterprise 플랜은 인식 건수 기반 투명 정산 체계로 운영 규모에 비례한 합리적 과금이 적용됩니다.',
  },
  {
    q: '셔틀아이디로 어떤 기능을 사용할 수 있나요?',
    a: '셔틀아이디는 통근버스 운영 전 영역을 1개 앱으로 통합 관리하는 B2B SaaS 입니다. 주요 기능은 (1) AI 얼굴인식 3가지 모드(로컬·클라우드·하이브리드)와 다인 동시 인식, (2) 사원증·QR 탑승권 멀티 인증 및 인식 실패 시 QR/NFC 자동 폴백, (3) GPS 통합 대시보드·실시간 차량 관제·정류장 도착·결행 알림, (4) AI 노선 설계·배차 관리·운행일지 자동화, (5) 인식 결과 보고서·잔류 대상자 확인·통계 대시보드, (6) 운행 종료 시 운행 리포트 PDF 자동 생성, (7) 감사 로그(Audit Log)·법적 증빙 자료 자동 생성, (8) 좌석 예약 링크 발송·탑승자 셀프 얼굴 등록(앱 설치 없이 SMS·카카오톡 링크), (9) 엑셀 일괄 등록·실시간 차량 위치 공유, (10) 행사 운행 모드(1일 행사·전세버스 전용), (11) 운수사·고객사·기사·탑승객 4 역할 권한 분리. Enterprise 플랜에서는 AI 노선 최적화·전용 관제 대시보드·기업별 화이트라벨(전용 앱 아이콘·로고)·전담 운영 매니저가 추가로 제공됩니다.',
  },
  {
    q: '산업단지·공단 통근버스에도 적합한가요?',
    a: '네. 산업단지 관리기관과 입주기업의 임직원 통근버스 운영에 최적화되어 있습니다. 여객자동차운수사업법상 산업단지 관리기관이 운영하는 통근버스는 전세버스운송사업 예외에 해당하며, 셔틀아이디는 이러한 환경에서 다수 노선·다수 입주기업을 통합 관리할 수 있도록 설계되었습니다. 공단별 지자체 지원사업 정산 증빙 자료로도 활용됩니다.',
  },
  {
    q: '얼굴 사진 등 개인정보는 어떻게 보호되나요?',
    a: '등록된 얼굴 사진은 인식 기능 제공 목적 외 다른 용도로 사용되지 않으며, 개인정보 보호법에 따라 안전하게 관리됩니다. 감사 로그로 모든 접근 이력이 타임스탬프와 함께 기록되며, 얼굴 사진은 언제든 관리자 앱·웹 관리자 페이지에서 수정·교체·삭제가 가능합니다. 삭제된 사진은 서버에서도 완전히 제거되며 이 과정 또한 감사 로그에 자동 기록됩니다.',
  },
  {
    q: '얼굴인식 정확도는 어느 정도인가요?',
    a: '환경에 따라 3가지 인식 방식을 선택할 수 있습니다. 로컬 인식은 스마트폰 자체 처리로 오프라인에서도 작동하며, 클라우드 인식은 서버 기반 최고 정확도로 마스크·역광 등 까다로운 환경에 대응합니다. 하이브리드는 로컬과 클라우드를 동시 활용해 정확도와 속도의 최적 균형을 제공합니다. 실제 사용 환경별로 Free 플랜으로 직접 검증해볼 것을 권장합니다.',
  },
  {
    q: '설치와 초기 설정은 얼마나 걸리나요?',
    a: '대부분의 통근버스 현장에서 30분 이내에 운영을 시작할 수 있습니다. 앱 설치 → 계정 생성 → 임직원 얼굴 등록(1인당 30초, 사진 일괄 등록 가능) → 노선·스케줄 설정 → 차량 거치 5단계로 당일 도입·당일 운영이 가능합니다. 별도의 하드웨어 설치공사나 네트워크 구성 작업이 필요 없습니다.',
  },
  {
    q: '운수사 관리자와 고객사 관리자가 권한을 분리해 사용할 수 있나요?',
    a: '네. 셔틀아이디는 운수사 관리자·고객사 관리자·기사님용 앱·탑승객용 링크 4가지 역할을 분리 지원합니다. 운수사는 전체 노선·차량·기사 운영을 관리하고, 고객사(기업) 담당자는 자사 임직원 탑승 현황·정산·감사 자료만 조회할 수 있도록 권한이 구분됩니다. 다중 관리자 동시 운영과 권한별 접근 제어가 기본입니다.',
  },
  {
    q: '대기업 규모 임직원 출퇴근에도 적합한가요?',
    a: '네. 다중 사업장·다중 노선·다중 관리자 구조를 지원하므로 대기업 임직원 출퇴근 버스 운영에도 확장 가능합니다. 공장 통근·본사 출퇴근·사업장 간 셔틀까지 통합 관리할 수 있으며, 협력사 직원 별도 인증·장기출입증·단기 출입증 등 복잡한 탑승 권한 구조도 얼굴인식 기반 다층 권한 관리로 구현 가능합니다. Enterprise 플랜 고객에게는 전담 운영 매니저가 배정됩니다.',
  },
  {
    q: '정산·분쟁 대응에 필요한 감사 자료가 제공되나요?',
    a: '네. 모든 인식·조회·변경 이력이 감사 로그(Audit Log)에 타임스탬프와 함께 자동 저장됩니다. 위탁 운수사와의 정산 근거, 내부 감사·외부 감사 대응, 임직원 민원 대응까지 전 영역에 즉시 활용 가능합니다. 공공기관 통근버스 사업 보조금 정산 자료로도 요구되는 수준을 충족합니다.',
  },
];

const FaqItem = ({q, a, idx, open, onToggle}) => (
  <div style={{
    borderBottom: '1px solid var(--sid-line)',
  }}>
    <button type="button" onClick={onToggle}
      style={{
        width: '100%', textAlign: 'left',
        padding: '24px 0',
        background: 'transparent', border: 'none', cursor: 'pointer',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
        color: 'inherit', fontFamily: 'inherit',
      }}
      aria-expanded={open}
    >
      <span style={{
        fontSize: 17, fontWeight: 700, color: 'var(--sid-ink)',
        letterSpacing: '-0.02em', lineHeight: 1.4, textWrap: 'balance',
      }}>
        <span style={{
          fontFamily: 'var(--font-numeric)', color: 'var(--sid-blue)', fontWeight: 800,
          marginRight: 14, letterSpacing: '-0.04em',
        }}>{String(idx + 1).padStart(2, '0')}</span>
        {q}
      </span>
      <span style={{
        width: 32, height: 32, borderRadius: 16, flexShrink: 0,
        background: open ? 'var(--sid-blue)' : 'var(--sid-bg-soft)',
        color: open ? '#fff' : 'var(--sid-fg-mid)',
        display: 'grid', placeItems: 'center',
        transition: 'background 160ms, color 160ms, transform 200ms ease',
        transform: open ? 'rotate(45deg)' : 'rotate(0deg)',
      }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <line x1="12" y1="5" x2="12" y2="19" />
          <line x1="5" y1="12" x2="19" y2="12" />
        </svg>
      </span>
    </button>
    <div style={{
      maxHeight: open ? 600 : 0, overflow: 'hidden',
      transition: 'max-height 300ms ease',
    }}>
      <div style={{
        padding: '0 56px 24px 44px',
        fontSize: 14, lineHeight: 1.7, color: 'var(--sid-fg-mid)',
      }}>{a}</div>
    </div>
  </div>
);

const SectionFaq = () => {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="faq" className="bg-soft">
      <div className="shell" style={{maxWidth: 920}}>
        <div className="section-head section-head--center">
          <div className="eyebrow"><span className="dot" />FAQ</div>
          <h2 className="section-title">자주 묻는 질문.</h2>
          <p className="section-sub">통근버스 도입 검토 단계에서 담당자들이 가장 많이 묻는 질문 10가지.</p>
        </div>
        <div style={{background: '#fff', borderRadius: 20, padding: '0 32px', border: '1px solid var(--sid-line)'}}>
          {FAQS.map((it, i) => (
            <FaqItem key={i} q={it.q} a={it.a} idx={i}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />
          ))}
        </div>

        <div style={{textAlign: 'center', marginTop: 32, color: 'var(--sid-fg-mid)', fontSize: 14}}>
          더 궁금한 점은 <a href="https://docs.shuttle.id" target="_blank" rel="noreferrer" style={{color: 'var(--sid-blue-link)', fontWeight: 700}}>이용 가이드</a> 또는{' '}
          <a href="mailto:hi@ride.bz" style={{color: 'var(--sid-blue-link)', fontWeight: 700}}>hi@ride.bz</a>로 문의 주세요.
        </div>
      </div>
    </section>
  );
};

Object.assign(window, {SectionFaq});