/* 셔틀아이디만의 차별점 — 경쟁 솔루션 12개 기능 비교표 */

const COMPARE_COLS = [
  {key: 'legacy', label: '기존 통근\n플랫폼', sub: 'QR · 카드 기반'},
  {key: 'charter', label: '전세버스\n중개', sub: '단순 중개 서비스'},
  {key: 'hw', label: '얼굴인식\nHW 단말기', sub: '전용 단말 설치'},
  {key: 'sid', label: '셔틀아이디', sub: 'AI · 스마트폰 1대', highlight: true},
];

const COMPARE_ROWS = [
  ['AI 얼굴인식 탑승 확인',          '-', '-',   'O', 'O'],
  ['사원증·QR 탑승권 병행 인증',     'O', '-',   '-', 'O'],
  ['별도 HW 장치 불필요',           '-', 'O',   '-', 'O'],
  ['탑승자 앱 설치 불필요',         '-', 'O',   'O', 'O'],
  ['1계정 200명 영구 무료',         '-', '-',   '-', 'O'],
  ['운행일지 자동화',               '부분', '-', '-', 'O'],
  ['노선 설계·최적화·통폐합',       '일부', '-', '-', 'O'],
  ['부정승차·미승인 탑승 차단',     '일부', '-', 'O', 'O'],
  ['감사 로그 (컴플라이언스)',      '-', '-',   '-', 'O'],
  ['출근 기록·근태 연동',           '-', '-',   '-', '예정'],
  ['GPS 실시간 관제·결행 알림',     'O', '-',   '-', 'O'],
  ['AI 안전 분석 (운행 점수)',     '-', '-',   '-', 'O'],
];

const Mark = ({val}) => {
  if (val === 'O') return (
    <span style={{
      display: 'inline-grid', placeItems: 'center',
      width: 26, height: 26, borderRadius: 13,
      background: 'var(--sid-blue-tint)', color: 'var(--sid-blue)',
    }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
    </span>
  );
  if (val === 'O-strong') return (
    <span style={{
      display: 'inline-grid', placeItems: 'center',
      width: 26, height: 26, borderRadius: 13,
      background: 'var(--sid-blue)', color: '#fff',
    }}>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
    </span>
  );
  if (val === '-') return <span style={{color: 'var(--sid-fg-light)', fontSize: 14}}>—</span>;
  // "부분" / "일부" / "예정" 텍스트
  const tone = val === '예정'
    ? {bg: 'var(--sid-yellow-soft)', fg: '#6B4F00'}
    : {bg: 'var(--sid-bg-tint)', fg: 'var(--sid-fg-mid)'};
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
      padding: '4px 10px', borderRadius: 999,
      background: tone.bg, color: tone.fg,
      fontSize: 11, fontWeight: 700,
    }}>{val}</span>
  );
};

const SectionCompare = () => (
  <section id="compare" className="bg-soft">
    <div className="shell">
      <div className="section-head">
        <div className="eyebrow"><span className="dot" />COMPARISON</div>
        <h2 className="section-title">셔틀아이디만의 차별점.</h2>
        <p className="section-sub">
          기존 통근버스 관리 플랫폼·전세버스 중개·얼굴인식 HW 단말기 등 레거시 솔루션과 비교했을 때,
          AI 탑승관리 앱 셔틀아이디만이 제공하는 12가지 핵심 기능입니다.
        </p>
      </div>

      <div className="compare-wrap">
        <div className="compare-table">
          {/* Header row */}
          <div className="compare-row compare-header">
            <div className="compare-cell compare-cell--label">기능</div>
            {COMPARE_COLS.map(c => (
              <div key={c.key} className={`compare-cell compare-col ${c.highlight ? 'is-highlight' : ''}`}>
                <div className="compare-col-label">{c.label}</div>
                <div className="compare-col-sub">{c.sub}</div>
              </div>
            ))}
          </div>

          {/* Body */}
          {COMPARE_ROWS.map((row, i) => (
            <div key={i} className="compare-row">
              <div className="compare-cell compare-cell--label">{row[0]}</div>
              <div className="compare-cell"><Mark val={row[1]} /></div>
              <div className="compare-cell"><Mark val={row[2]} /></div>
              <div className="compare-cell"><Mark val={row[3]} /></div>
              <div className="compare-cell is-highlight">
                <Mark val={row[4] === 'O' ? 'O-strong' : row[4]} />
              </div>
            </div>
          ))}
        </div>

        {/* Legend */}
        <div style={{
          display: 'flex', justifyContent: 'center', gap: 24, marginTop: 20,
          fontSize: 12, color: 'var(--sid-fg-mid)',
        }}>
          <span><Mark val="O" /> &nbsp;지원</span>
          <span><Mark val="부분" /> &nbsp;부분 지원</span>
          <span><Mark val="예정" /> &nbsp;로드맵</span>
          <span><Mark val="-" /> &nbsp;미지원</span>
        </div>
      </div>

      <style>{`
        .compare-wrap {
          background: #fff;
          border: 1px solid var(--sid-line);
          border-radius: 20px;
          padding: 32px;
          overflow-x: auto;
        }
        .compare-table {
          min-width: 720px;
          display: grid;
          grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(110px, 1fr));
          gap: 0;
        }
        .compare-row { display: contents; }
        .compare-cell {
          padding: 18px 16px;
          border-bottom: 1px solid var(--sid-line-soft);
          display: flex; align-items: center; justify-content: center;
          font-size: 14px;
          color: var(--sid-fg);
        }
        .compare-cell--label {
          justify-content: flex-start;
          font-weight: 600;
          color: var(--sid-ink);
          font-size: 13px;
        }
        .compare-cell.is-highlight {
          background: linear-gradient(180deg, rgba(69,132,255,0.06), rgba(69,132,255,0.03));
        }
        .compare-row.compare-header .compare-cell {
          padding: 22px 16px;
          border-bottom: 2px solid var(--sid-ink);
          flex-direction: column;
          gap: 4px;
        }
        .compare-row.compare-header .compare-cell.is-highlight {
          background: var(--sid-ink);
          color: #fff;
          border-bottom-color: var(--sid-ink);
          border-radius: 12px 12px 0 0;
        }
        .compare-col-label {
          font-size: 13px;
          font-weight: 800;
          letter-spacing: -0.02em;
          color: var(--sid-ink);
          white-space: pre-line;
          text-align: center;
          line-height: 1.25;
        }
        .compare-row.compare-header .compare-cell.is-highlight .compare-col-label { color: #fff; }
        .compare-col-sub {
          font-size: 11px;
          font-weight: 500;
          color: var(--sid-fg-light);
          text-align: center;
        }
        .compare-row.compare-header .compare-cell.is-highlight .compare-col-sub { color: rgba(255,255,255,0.65); }

        /* alternating row background — only on highlight col so it stays visible */
        .compare-table > .compare-row:last-child .compare-cell:not(.is-highlight) {
          border-bottom: none;
        }
        .compare-table > .compare-row:last-child .compare-cell.is-highlight {
          border-radius: 0 0 12px 12px;
          border-bottom: none;
        }
      `}</style>
    </div>
  </section>
);

Object.assign(window, {SectionCompare});