/* Features — 핵심 기능 (얼굴인식 / QR / NFC) + 운영 통합 카드 */

const ModeCard = ({tag, tagColor, title, desc, icon, primary}) => (
  <div className={`card`} style={{
    padding: 32,
    background: primary ? 'var(--sid-blue)' : '#fff',
    color: primary ? '#fff' : 'inherit',
    borderColor: primary ? 'var(--sid-blue)' : 'var(--sid-line)',
    position: 'relative',
    overflow: 'hidden',
  }}>
    <div style={{
      width: 56, height: 56, borderRadius: 14,
      background: primary ? 'rgba(255,255,255,0.16)' : 'var(--sid-blue-tint)',
      display: 'grid', placeItems: 'center', marginBottom: 24,
    }}>
      {icon}
    </div>
    <div style={{
      display: 'inline-block', fontSize: 11, fontWeight: 700,
      letterSpacing: '0.12em', textTransform: 'uppercase',
      color: primary ? 'rgba(255,255,255,0.7)' : tagColor,
      marginBottom: 10,
    }}>{tag}</div>
    <h3 style={{
      fontSize: 22, fontWeight: 800, letterSpacing: '-0.03em',
      margin: '0 0 12px',
      color: primary ? '#fff' : 'var(--sid-ink)',
      lineHeight: 1.25,
    }}>{title}</h3>
    <p style={{
      fontSize: 14, lineHeight: 1.65, margin: 0,
      color: primary ? 'rgba(255,255,255,0.86)' : 'var(--sid-fg-mid)',
    }}>{desc}</p>
  </div>
);

const FaceIcon = ({color = 'var(--sid-blue)'}) => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <path d="M4 8V5a1 1 0 0 1 1-1h3M20 8V5a1 1 0 0 0-1-1h-3M4 16v3a1 1 0 0 0 1 1h3M20 16v3a1 1 0 0 1-1 1h-3" />
    <circle cx="9" cy="11" r="0.8" fill={color} />
    <circle cx="15" cy="11" r="0.8" fill={color} />
    <path d="M9 15c1 .8 2 1.2 3 1.2s2-.4 3-1.2" />
  </svg>
);
const QrIcon = ({color = '#7A5800'}) => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="3" width="7" height="7" rx="1" />
    <rect x="14" y="3" width="7" height="7" rx="1" />
    <rect x="3" y="14" width="7" height="7" rx="1" />
    <path d="M14 14v3M17 14v7M14 20h3M21 17v4" />
    <rect x="5.5" y="5.5" width="2" height="2" fill={color} stroke="none"/>
    <rect x="16.5" y="5.5" width="2" height="2" fill={color} stroke="none"/>
    <rect x="5.5" y="16.5" width="2" height="2" fill={color} stroke="none"/>
  </svg>
);
const NfcIcon = ({color = '#0E7A3D'}) => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="5" width="18" height="14" rx="2.5" />
    <path d="M8 12c0-2.2 1.8-4 4-4M8 12c0 2.2 1.8 4 4 4M12 8c2.2 0 4 1.8 4 4M12 16c2.2 0 4-1.8 4-4" />
  </svg>
);

const SectionFeatures = () => {
  const cards = [
    {tag: 'AI 얼굴인식', tagColor: 'var(--sid-blue-link)', primary: true, icon: <FaceIcon color="#fff" />,
      title: '카메라에 비치면\n자동 인식 0.9초',
      desc: '로컬·클라우드·하이브리드 3가지 모드. 마스크·역광·야간에도 인식하며 다인 동시 처리까지 지원.'},
    {tag: '사원증·QR 탑승권', tagColor: '#7A5800', icon: <QrIcon />,
      title: '기존 사원증·QR과\n함께 사용',
      desc: '사원증 본연의 출입·신원 확인 역할은 그대로 유지. 탑승 확인 단계에서 얼굴인식·사원증·QR 중 현장에 적합한 방식을 선택해 운용합니다.'},
    {tag: 'NFC 태깅', tagColor: '#0E7A3D', icon: <NfcIcon />,
      title: '단말기 없이\n스마트폰으로 NFC',
      desc: 'NFC 단말기·RF 리더기 구매·설치 없이 운영자 스마트폰 한 대로 NFC 사원증 인증을 처리.'},
  ];
  return (
    <section id="features">
      <div className="shell">
        <div className="section-head section-head--center">
          <div className="eyebrow"><span className="dot" />MULTI-AUTH</div>
          <h2 className="section-title">3가지 인증 방식 —<br/>현장 환경에 맞게 선택합니다.</h2>
          <p className="section-sub">
            기존 사원증·출입카드 체계는 그대로 유지하면서, 탑승 확인 단계에 얼굴인식을 추가 도입하는 멀티 인증 구조. 단말기 증설 없이 1개 앱에서 통합 관리됩니다.
          </p>
        </div>

        <div className="grid grid-3">
          {cards.map(c => <ModeCard key={c.tag} {...c} />)}
        </div>

        {/* secondary feature list */}
        <div style={{marginTop: 56}}>
          <div className="grid grid-4">
            <MiniFeature
              icon={<Glyph path="M3 12l5 5L21 5" />}
              title="실시간 GPS 관제"
              desc="지도 위 탑승 현황 통합. 정류장 도착·결행 알림 자동 발송." />
            <MiniFeature
              icon={<Glyph path="M3 7h18M3 12h18M3 17h12" />}
              title="운행일지 자동화"
              desc="진출입 시각·소요시간·인원 자동 기록. 엑셀 다운로드." />
            <MiniFeature
              icon={<Glyph path="M12 2v6M3 12h6M21 12h-6M12 22v-6M5 5l4 4M19 5l-4 4M5 19l4-4M19 19l-4-4" />}
              title="AI 노선 최적화"
              desc="실제 탑승 데이터 기반 통폐합·증감차 판단 근거 자동 제공." />
            <MiniFeature
              icon={<Glyph path="M12 2L4 6v6c0 5 3.6 9 8 10 4.4-1 8-5 8-10V6l-8-4z" />}
              title="감사 로그"
              desc="모든 인식·조회·변경 이력 타임스탬프 자동 기록." />
            <MiniFeature
              isNew
              icon={<Glyph path="M3 12c0-5 4-9 9-9s9 4 9 9-4 9-9 9c-2 0-4-.7-5.5-1.8M3 12v4h4" />}
              title="QR/NFC 자동 폴백"
              desc="얼굴인식이 어려운 환경에서 QR·NFC로 자동 전환. 인식 누락 없음." />
            <MiniFeature
              isNew
              icon={<Glyph path="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM19 8v6M22 11h-6" />}
              title="탑승자 셀프 등록"
              desc="SMS·카카오톡 링크로 탑승자가 직접 얼굴 사진 등록. 관리자 입력 부담 제거." />
            <MiniFeature
              isNew
              icon={<Glyph path="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8" />}
              title="운행 리포트 PDF"
              desc="운행 종료 시 탑승 명단·하차 확인을 PDF로 자동 생성·발송." />
            <MiniFeature
              isNew
              icon={<Glyph path="M9 11l3 3 8-8M3 11l3 3 1-1M21 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16" />}
              title="엑셀 일괄 등록"
              desc="대규모 임직원 명단을 엑셀로 일괄 업로드. 신학기·인사이동 대응." />
          </div>
        </div>
      </div>
    </section>
  );
};

const MiniFeature = ({icon, title, desc, isNew}) => (
  <div style={{padding: '24px 4px', position: 'relative'}}>
    <div style={{
      width: 44, height: 44, borderRadius: 12,
      background: 'var(--sid-blue-tint)',
      display: 'grid', placeItems: 'center', marginBottom: 16,
      position: 'relative',
    }}>
      {icon}
      {isNew && (
        <span style={{
          position: 'absolute', top: -8, right: -10,
          padding: '3px 7px',
          background: 'var(--sid-yellow)',
          color: 'var(--sid-ink)',
          borderRadius: 999,
          fontSize: 9, fontWeight: 800,
          letterSpacing: '0.05em',
        }}>NEW</span>
      )}
    </div>
    <div style={{fontSize: 16, fontWeight: 700, color: 'var(--sid-ink)', marginBottom: 6}}>{title}</div>
    <div style={{fontSize: 13, color: 'var(--sid-fg-mid)', lineHeight: 1.6}}>{desc}</div>
  </div>
);

const Glyph = ({path}) => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--sid-blue)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d={path} />
  </svg>
);

Object.assign(window, {SectionFeatures, MiniFeature, ModeCard});