// 튜브픽 v2 — why.html (왜 튜브픽?)
const TP2Why = () => {
  const T = window.TP2_THEME;
  const D = window.TP2_DATA;

  return (
    <TP2Page active="why.html">
      {/* HERO */}
      <section style={{
        padding: '100px 48px 80px',
        background: T.bg,
        borderBottom: `1px solid ${T.line}`,
        position: 'relative', overflow: 'hidden',
      }}>
        {/* 배경 모노 텍스트 */}
        <div style={{
          position: 'absolute', top: 20, right: -60,
          fontSize: 220, fontWeight: 900, fontFamily: T.mono,
          color: 'rgba(91,71,224,.04)', letterSpacing: -8, lineHeight: 1,
          pointerEvents: 'none', userSelect: 'none',
        }}>WHY?</div>
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
          <div style={{
            fontSize: 13, color: T.hot, fontWeight: 800, letterSpacing: 2, marginBottom: 18,
            fontFamily: T.mono,
          }}>{window.tp2t('why', 'hero.eyebrow', '━━ WHY TUBEPICK')}</div>
          <h1 className="tp2-rich-ink"
            style={{ fontSize: 84, fontWeight: 900, letterSpacing: -3, lineHeight: 1.02, margin: '0 0 24px' }}
            dangerouslySetInnerHTML={window.tp2h('why', 'hero.title',
              '검증되지 않은 채널은,<br/><span class="hot">당신의 시간과 돈</span>을<br/>동시에 날립니다.')}
          />
          <p className="tp2-rich-ink"
            style={{ fontSize: 19, color: T.sub, lineHeight: 1.7, maxWidth: 720, margin: 0 }}
            dangerouslySetInnerHTML={window.tp2h('why', 'hero.lead',
              '튜브픽은 단순한 채널 판매처가 아닙니다. <strong>5개국 도매 매니저가 1차 엄선</strong>, 튜브픽이 한 번 더 자체 검증한 채널만 판매하고, 구매 후 부진할 경우 <strong>한 달 토탈 AS 케어</strong>로 보장해 드립니다.')}
          />
        </div>
      </section>

      {/* 신뢰 섹션 (RISK 01/02 + 솔직한 이야기) */}
      <TP2TrustSection />

      {/* 차별점 4개 — 모노 카드 */}
      <section style={{ padding: '96px 48px', background: T.card, borderTop: `1px solid ${T.line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ marginBottom: 56, maxWidth: 720 }}>
            <div style={{ fontSize: 13, color: T.accent, fontWeight: 800, letterSpacing: 2, marginBottom: 14, fontFamily: T.mono }}>
              ━━ HOW WE'RE DIFFERENT
            </div>
            <h2 style={{ fontSize: 56, fontWeight: 900, letterSpacing: -2, margin: '0 0 16px', lineHeight: 1.05 }}>
              직구·검증 안 된 곳과<br/>
              <span style={{ color: T.accent }}>네 가지가 다릅니다.</span>
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {[
              {
                num: '01',
                title: '2단 검증 — 매니저 + 튜브픽',
                desc: '5개국 도매 매니저들이 각 시장에서 좋은 채널을 1차로 엄선합니다. 튜브픽이 자체 기준으로 한 번 더 검증·재선별하여, 두 단계를 모두 통과한 채널만 판매합니다.',
                tag: 'TWO-STAGE REVIEW',
                color: T.accent,
              },
              {
                num: '02',
                title: '채널이 만들어진 과정까지 검토',
                desc: '단순한 수익창출 여부가 아니라, 어떻게 만들어졌는지·기존 사용자의 애드센스 이력·신고 위험까지 들여다봅니다.',
                tag: 'DEEP REVIEW',
                color: T.hot,
              },
              {
                num: '03',
                title: '한 달 토탈 AS 케어',
                desc: '①정상 영상 5개 업로드 후 모두 조회수 500 미만이면 조회수 AS, ②구독자가 1,000명 이하로 떨어지면 구독자 AS, ③그래도 안 되면 한 달 무제한 채널 교체.',
                tag: 'CARE GUARANTEE',
                color: T.accent2,
              },
              {
                num: '04',
                title: '판매자도 같은 리스크를 안습니다',
                desc: '품질이 나쁘면 저희도 손해 나는 구조입니다. 그래서 채널 한 개를 들이는 데 평균 7일을 검증에 씁니다.',
                tag: 'SKIN IN THE GAME',
                color: T.ink,
              },
            ].map((it, i) => (
              <div key={i} style={{
                background: T.bg,
                border: `1px solid ${T.line}`,
                borderRadius: 18,
                padding: 36,
                position: 'relative',
                overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', top: 24, right: 28,
                  fontSize: 80, fontWeight: 900, fontFamily: T.mono,
                  color: it.color, opacity: 0.12,
                  lineHeight: 1, letterSpacing: -4,
                }}>{it.num}</div>
                <div style={{
                  fontSize: 10, fontWeight: 800, letterSpacing: 2,
                  color: it.color, fontFamily: T.mono, marginBottom: 18,
                }}>{it.tag}</div>
                <h3 style={{
                  fontSize: 26, fontWeight: 800, letterSpacing: -0.5,
                  margin: '0 0 14px', lineHeight: 1.2,
                  position: 'relative', zIndex: 1,
                }}>{it.title}</h3>
                <p style={{
                  fontSize: 15, color: T.sub, lineHeight: 1.75, margin: 0,
                  position: 'relative', zIndex: 1, maxWidth: 480,
                }}>{it.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 비교표 — 직구 vs 튜브픽 */}
      <section style={{ padding: '96px 48px', background: T.bg }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontSize: 13, color: T.hot, fontWeight: 800, letterSpacing: 2, marginBottom: 14, fontFamily: T.mono }}>
              ━━ COMPARED
            </div>
            <h2 style={{ fontSize: 56, fontWeight: 900, letterSpacing: -2, margin: 0, lineHeight: 1.05 }}>
              한눈에 보는 차이
            </h2>
          </div>

          <div style={{
            background: T.card,
            border: `1px solid ${T.line}`,
            borderRadius: 20,
            overflow: 'hidden',
          }}>
            {/* 헤더 행 */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr',
              padding: '20px 28px',
              background: T.ink, color: '#fff',
              fontSize: 13, fontWeight: 800, letterSpacing: 0.5,
            }}>
              <div></div>
              <div style={{ textAlign: 'center', color: 'rgba(255,255,255,.6)' }}>직구 / 검증 안 된 곳</div>
              <div style={{ textAlign: 'center', color: T.accent2 }}>● 튜브픽</div>
            </div>

            {[
              { item: '채널 검증', other: '판매자 1인 판단', tube: '5개국 매니저 1차 + 튜브픽 2차' },
              { item: '구매 후 채널이 정지되면', other: '환불 협의 (대부분 거부)', tube: '튜브픽 케어로 채널 교체' },
              { item: '조회수가 안 나올 때', other: '구매자 책임', tube: '조회수 AS → 채널 교체' },
              { item: 'AS 기간', other: '없음 / 7일 이내', tube: '한 달 토탈 AS 케어' },
              { item: '채널 만들어진 과정', other: '확인 어려움', tube: '제작 이력·애드센스 이력 검토' },
              { item: '운영 가이드', other: '없음', tube: '오픈톡 1:1 상담 + 가이드' },
            ].map((row, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr',
                padding: '20px 28px',
                borderTop: `1px solid ${T.line}`,
                fontSize: 15,
                alignItems: 'center',
              }}>
                <div style={{ fontWeight: 700, color: T.ink }}>{row.item}</div>
                <div style={{
                  textAlign: 'center', color: T.sub,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                }}>
                  <span style={{ color: '#c44', fontSize: 12 }}>✕</span>
                  {row.other}
                </div>
                <div style={{
                  textAlign: 'center', color: T.ink, fontWeight: 700,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                }}>
                  <span style={{ color: T.accent, fontSize: 12 }}>●</span>
                  {row.tube}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 숫자 — 다크 카운터 */}
      <section style={{ padding: '96px 48px', background: T.ink, color: '#fff' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ marginBottom: 48, textAlign: 'center' }}>
            <div style={{ fontSize: 13, color: T.accent2, fontWeight: 800, letterSpacing: 2, marginBottom: 14, fontFamily: T.mono }}>
              ━━ BY THE NUMBERS
            </div>
            <h2 style={{ fontSize: 56, fontWeight: 900, letterSpacing: -2, margin: 0, lineHeight: 1.05 }}>
              결과로 증명합니다.
            </h2>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 1, background: 'rgba(255,255,255,.08)',
            border: '1px solid rgba(255,255,255,.08)',
            borderRadius: 16, overflow: 'hidden',
          }}>
            {[
              { v: window.tp2t('trust', 'stat2.v', '120+'), l: window.tp2t('trust', 'stat2.l', '현재 검증 채널'), sub: '평균 입고 7일' },
              { v: window.tp2t('trust', 'stat3.v', '5개국'),  l: window.tp2t('trust', 'stat3.l', '도매 매니저 협력'),    sub: '글로벌 시장 다층 검증' },
              { v: '< 1%', l: '교체 발생률', sub: '검증 통과 채널 기준' },
              { v: '24h', l: '평균 응대 시간', sub: '평일 10–22시 즉시' },
            ].map((s, i) => (
              <div key={i} style={{
                background: T.ink, padding: '36px 28px',
              }}>
                <div style={{
                  fontSize: 56, fontWeight: 900, color: i === 0 ? T.hot : i === 1 ? T.accent2 : '#fff',
                  letterSpacing: -2, lineHeight: 1, fontFamily: T.mono, marginBottom: 12,
                }}>{s.v}</div>
                <div style={{ fontSize: 14, fontWeight: 700, color: '#fff', marginBottom: 6 }}>{s.l}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,.5)', fontFamily: T.mono, letterSpacing: 0.5 }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA 배너 */}
      <TP2CTABanner
        title="이제, 채널을 둘러볼 시간."
        sub="검증된 채널 라인업을 직접 확인해 보세요. 궁금한 건 오픈톡으로 바로 물어보셔도 됩니다."
        primary={{ label: '채널 구매하기 →', href: 'channels.html' }}
        secondary={{ label: '구매 가이드 보기', href: 'guide.html' }}
      />
    </TP2Page>
  );
};

window.TP2Why = TP2Why;