// 튜브픽 v2 — channels.html
const TP2Pricing = () => {
  const T = window.TP2_THEME;
  const D = window.TP2_DATA;
  const F = window.TP2_FORMAT;
  // 가격은 D1(/api/public/pricing)에서, 못 받으면 정적 fallback
  const P = window.TP2_PRICING || D.pricing;
  const [tier, setTier] = React.useState('public');
  const careTier = P.care.tiers.find(t => t.id === tier) || P.care.tiers[0];
  const pct = (o, s) => (o && typeof s === 'number') ? Math.round((o - s) / o * 100) : 0;

  return (
    <TP2Page active="channels.html">
      {/* HERO */}
      <section style={{ padding: '80px 48px 56px', textAlign: 'center', borderBottom: `1px solid ${T.line}` }}>
        <div style={{ maxWidth: 980, margin: '0 auto' }}>
          <div style={{ fontSize: 13, color: T.accent, fontWeight: 700, letterSpacing: 1.5, marginBottom: 16 }}>
            ━━ PRICING
          </div>
          <h1 style={{ fontSize: 84, fontWeight: 900, letterSpacing: -3, margin: '0 0 20px', lineHeight: 1 }}>
            압도적인 품질과 AS,<br/>
            <span style={{
              background: `linear-gradient(110deg, ${T.accent} 0%, ${T.accent2} 100%)`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>친절한 안내까지.</span>
          </h1>
          <p style={{ fontSize: 19, color: T.sub, lineHeight: 1.6, margin: '0 auto', maxWidth: 640 }}>
            엄선된 채널, 한 달 무제한 AS, 1:1 카톡 응대 — 그리고 합리적인 가격까지. 튜브픽이 모두 갖춥니다.
          </p>

          {/* 3가지 강점 미니 배지 */}
          <div style={{
            display: 'flex', justifyContent: 'center', gap: 12,
            marginTop: 32, flexWrap: 'wrap',
          }}>
            {[
              { icon: '🏆', t: '2단 검증 통과 채널', d: '5개국 매니저 1차 + 튜브픽 2차' },
              { icon: '🛡️', t: '한 달 토탈 AS 케어', d: '조회수 · 구독자 · 채널 교체' },
              { icon: '💬', t: '친절한 1:1 안내', d: '평균 30분 응답' },
            ].map((b, i) => (
              <div key={i} style={{
                background: T.card, border: `1px solid ${T.line}`,
                borderRadius: 14, padding: '14px 20px',
                display: 'flex', alignItems: 'center', gap: 12,
                boxShadow: T.shadowSoft, textAlign: 'left',
              }}>
                <span style={{ fontSize: 24 }}>{b.icon}</span>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 800, color: T.ink, lineHeight: 1.2 }}>{b.t}</div>
                  <div style={{ fontSize: 12, color: T.sub, marginTop: 2 }}>{b.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 신뢰 섹션 — 가격표 위 */}
      <TP2TrustSection />

      {/* 오픈 기념 세일 안내 + 티어 토글 */}
      <section style={{ padding: '48px 48px 16px', textAlign: 'center', borderTop: `1px solid ${T.line}` }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          background: `linear-gradient(135deg, ${T.hot} 0%, #ff8a4a 100%)`,
          color: '#fff', padding: '12px 24px', borderRadius: 999,
          fontSize: 15, fontWeight: 800, letterSpacing: 0.3,
          boxShadow: '0 10px 28px rgba(255,90,95,.32)',
          marginBottom: 28,
          animation: 'tp2-pulse 3s ease-in-out infinite',
        }}>
          🔥 오픈 기념 한정특가 세일
          <span style={{
            background: 'rgba(255,255,255,.22)', padding: '3px 10px', borderRadius: 999,
            fontSize: 11, fontWeight: 700, letterSpacing: 0.5,
          }}>한정 수량 진행중</span>
        </div>
        <div style={{ fontSize: 13, color: T.sub, marginBottom: 16 }}>가격 구분</div>
        <TP2Toggle tiers={P.care.tiers} value={tier} onChange={setTier} />
      </section>

      {/* PRICING GRID */}
      <section style={{ padding: '48px 48px 96px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          {/* 메인 2개 카드 */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 16, marginBottom: 16 }}>
            {/* CARE */}
            <div style={{
              background: T.ink, color: '#fff', padding: 48, borderRadius: 24,
              position: 'relative', boxShadow: T.shadowBig, overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: -80, right: -80,
                width: 280, height: 280, borderRadius: '50%',
                background: `radial-gradient(circle, ${T.accent} 0%, transparent 70%)`,
                opacity: 0.4,
              }}/>
              <div style={{ position: 'relative' }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  background: T.hot, color: '#fff', padding: '5px 14px',
                  fontSize: 11, fontWeight: 800, borderRadius: 999, letterSpacing: 0.5,
                  marginBottom: 24,
                }}>★ BEST · A/S 보장</div>
                <h2 style={{ fontSize: 36, fontWeight: 900, margin: '0 0 8px', letterSpacing: -1 }}>
                  튜브픽 케어 채널
                </h2>
                <p style={{ fontSize: 14, color: 'rgba(255,255,255,.65)', margin: '0 0 32px', lineHeight: 1.6, maxWidth: 460 }}>
                  5개국 도매 매니저 1차 엄선 + 튜브픽 자체 검증을 통과한 채널 · 한 달 토탈 AS 케어 보장
                </p>

                <div style={{ paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.12)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 18, color: 'rgba(255,255,255,.45)', textDecoration: 'line-through' }}>
                      {F.won(P.care.original)}
                    </span>
                    <span style={{
                      fontSize: 12, fontWeight: 800, padding: '4px 10px', borderRadius: 999,
                      background: T.hot, color: '#fff', letterSpacing: 0.5,
                    }}>🔥 오픈 기념 -{pct(P.care.original, careTier.price)}%</span>
                    <span style={{
                      fontSize: 11, fontWeight: 700, padding: '4px 9px', borderRadius: 6,
                      background: 'rgba(139,124,240,.2)', color: '#c0b3ff', letterSpacing: 0.5,
                    }}>{F.won(P.care.original - careTier.price)} 절약</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16 }}>
                    <div>
                      <div style={{ fontSize: 52, fontWeight: 900, lineHeight: 1, letterSpacing: -1.5,
                        background: `linear-gradient(180deg, #fff 0%, ${T.accent2} 100%)`,
                        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                        whiteSpace: 'nowrap',
                      }}>{F.won(careTier.price)}</div>
                      <div style={{ fontSize: 12, color: 'rgba(255,255,255,.5)', marginTop: 6 }}>(+ 부가세 별도)</div>
                    </div>
                  </div>
                </div>

                <ul style={{ margin: '32px 0 0', padding: 0, listStyle: 'none', fontSize: 14 }}>
                  {/* 일반 항목 */}
                  <li style={{ display: 'flex', gap: 12, padding: '10px 0', color: 'rgba(255,255,255,.85)' }}>
                    <span style={{ color: T.accent2, fontWeight: 700 }}>✓</span>
                    5개국 도매 매니저 1차 엄선 + 튜브픽 자체 검증을 통과한 채널
                  </li>

                  {/* AS 강조 박스 */}
                  <li style={{
                    listStyle: 'none', margin: '12px 0',
                    background: 'linear-gradient(135deg, rgba(255,213,74,.18) 0%, rgba(255,184,0,.12) 100%)',
                    border: '1px solid rgba(255,213,74,.4)',
                    borderRadius: 12, padding: '16px 18px',
                    display: 'flex', gap: 14, alignItems: 'flex-start',
                  }}>
                    <span style={{
                      background: '#ffd54a', color: '#1a1500',
                      fontSize: 10, fontWeight: 900, letterSpacing: 1,
                      padding: '4px 9px', borderRadius: 6, flexShrink: 0,
                      marginTop: 2,
                    }}>A/S</span>
                    <span style={{ color: '#fff5c2', fontWeight: 600, lineHeight: 1.6 }}>
                      한 달 토탈 AS 케어 — ① 조회수 AS · ② 구독자 AS · ③ 무제한 채널 교체
                    </span>
                  </li>

                  <li style={{ display: 'flex', gap: 12, padding: '10px 0', color: 'rgba(255,255,255,.85)' }}>
                    <span style={{ color: T.accent2, fontWeight: 700 }}>✓</span>
                    평균 3일, 최대 7일 내 채널 이전
                  </li>
                  <li style={{ display: 'flex', gap: 12, padding: '10px 0', color: 'rgba(255,255,255,.85)' }}>
                    <span style={{ color: T.accent2, fontWeight: 700 }}>✓</span>
                    1:1 카카오 오픈톡 지원
                  </li>
                </ul>
                <a href="https://open.kakao.com/o/sqs5vuti" target="_blank" style={{
                  marginTop: 32, width: '100%',
                  background: '#fff', color: T.ink, padding: '16px 0',
                  fontSize: 15, fontWeight: 800,
                  borderRadius: 12, display: 'block', textAlign: 'center',
                }}>지금 구매하기 →</a>
              </div>
            </div>

            {/* SELECT */}
            <div style={{
              background: T.card, padding: 40, borderRadius: 24,
              border: `1px solid ${T.line}`, boxShadow: T.shadowSoft,
              display: 'flex', flexDirection: 'column',
            }}>
              <h3 style={{ fontSize: 26, fontWeight: 800, margin: '0 0 8px' }}>튜브픽 셀렉트 채널</h3>
              <p style={{ fontSize: 14, color: T.sub, margin: '0 0 32px', lineHeight: 1.6 }}>
                {D.pricing.select.sub}
              </p>
              <div style={{ paddingTop: 24, borderTop: `1px solid ${T.line}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', marginBottom: 4 }}>
                  <span style={{ fontSize: 16, color: T.dim, textDecoration: 'line-through' }}>
                    {F.won(P.select.original)}
                  </span>
                  <span style={{
                    fontSize: 11, fontWeight: 800, padding: '3px 9px', borderRadius: 999,
                    background: T.hot, color: '#fff', letterSpacing: 0.5,
                  }}>🔥 오픈 기념 -{pct(P.select.original, P.select.price)}%</span>
                </div>
                <div style={{ fontSize: 48, fontWeight: 900, letterSpacing: -1.5, marginTop: 4, color: T.accent, whiteSpace: 'nowrap' }}>
                  {F.won(P.select.price)}
                </div>
                <div style={{ fontSize: 12, color: T.accent2, fontWeight: 600, marginTop: 4 }}>
                  {F.won(P.select.original - P.select.price)} 절약 · (+ 부가세 별도)
                </div>
              </div>
              <ul style={{ margin: '24px 0 0', padding: 0, listStyle: 'none', fontSize: 14 }}>
                {[
                  '5개국 도매 매니저 1차 엄선 + 튜브픽 자체 검증을 통과한 채널',
                  '구독자 1,000명 + 시청시간 4,000시간',
                  '평균 3일, 최대 7일 이전',
                  '1:1 카카오 오픈톡 지원',
                ].map((f, i) => (
                  <li key={i} style={{ display: 'flex', gap: 12, padding: '8px 0', color: 'rgba(14,14,26,.78)' }}>
                    <span style={{ color: T.accent }}>✓</span>{f}
                  </li>
                ))}
              </ul>
              <a href="https://open.kakao.com/o/sqs5vuti" target="_blank" style={{
                marginTop: 'auto', paddingTop: 28,
              }}>
                <div style={{
                  background: T.bg, color: T.ink, border: `1px solid ${T.line}`,
                  padding: '14px 0', fontSize: 14, fontWeight: 700,
                  borderRadius: 12, textAlign: 'center',
                }}>문의하기</div>
              </a>
            </div>
          </div>

          {/* 추가 상품 (4개) */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {[P.appeal, P.bulk, P.adsense, P.custom].filter(Boolean).map((p, i) => (
              <div key={i} style={{
                background: T.card, borderRadius: 16, padding: 24,
                border: `1px solid ${T.line}`, boxShadow: T.shadowSoft,
                position: 'relative',
              }}>
                {p.status && (
                  <div style={{
                    position: 'absolute', top: 16, right: 16,
                    fontSize: 10, fontWeight: 800, letterSpacing: 1,
                    background: 'rgba(255,90,95,.12)', color: T.hot,
                    padding: '3px 8px', borderRadius: 999,
                  }}>{p.status}</div>
                )}
                <div style={{
                  display: 'inline-block',
                  fontSize: 10, fontWeight: 800, letterSpacing: 1,
                  background: 'rgba(91,71,224,.1)', color: T.accent,
                  padding: '3px 10px', borderRadius: 999, marginBottom: 14,
                }}>{i < 2 ? 'PREMIUM' : (i === 2 ? 'ADSENSE' : 'CUSTOM')}</div>
                <h4 style={{ fontSize: 16, fontWeight: 700, margin: '0 0 8px' }}>{p.name}</h4>
                <p style={{ fontSize: 12, color: T.sub, margin: '0 0 20px', lineHeight: 1.5, minHeight: 36 }}>{p.sub}</p>
                <div style={{ fontSize: 18, fontWeight: 800, color: T.accent, letterSpacing: -0.5 }}>
                  {typeof p.price === 'number' ? F.won(p.price) : (p.price.startsWith('₩') || p.price === '문의' ? p.price : `₩${p.price}`)}
                </div>
                <div style={{ fontSize: 11, color: T.dim, marginTop: 4 }}>(+ 부가세 별도)</div>
              </div>
            ))}
          </div>

          {/* 안내 */}
          <div style={{
            marginTop: 32, padding: 24,
            background: 'rgba(91,71,224,.04)', border: `1px solid rgba(91,71,224,.15)`,
            borderRadius: 12, fontSize: 13, color: T.sub, lineHeight: 1.7,
          }}>
            * 항소완료 채널은 유튜브 정책 위반 항소 절차를 성공적으로 완료한 검증된 채널입니다.<br/>
            * 해당 상품은 수요가 많아 미리 요청하시는 것을 추천드립니다.<br/>
            * 모든 가격은 부가세 별도이며, 결제 시점 환율 / 재고 상황에 따라 변동될 수 있습니다.
          </div>
        </div>
      </section>

      {/* 혜택 4가지 */}
      <section style={{ padding: '96px 48px', background: T.card, borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontSize: 13, color: T.accent, fontWeight: 700, letterSpacing: 1.5, marginBottom: 16 }}>
              ━━ BENEFITS
            </div>
            <h2 style={{ fontSize: 48, fontWeight: 800, letterSpacing: -1.5, margin: 0 }}>
              튜브픽 채널 혜택
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
              { n: '01', t: '압도적인 가격', d: '타사 대비 최소 30% 저렴한 가격으로 즉시 수익 창출 기회를 제공합니다.' },
              { n: '02', t: '최상급 채널 품질', d: '알고리즘 최적화 완료된 프리미엄 채널만 취급합니다.' },
              { n: '03', t: '한 달 토탈 AS 케어', d: '조회수 · 구독자 부진 시 단계별 AS, 그래도 안 되면 한 달 무제한 채널 교체.' },
              { n: '04', t: '초고속 이전', d: '대부분 3일 이내 이전 완료 (최대 7일).' },
            ].map(p => (
              <div key={p.n} style={{
                background: T.bg, borderRadius: 16, padding: 28,
                border: `1px solid ${T.line}`,
              }}>
                <div style={{
                  fontFamily: T.mono, fontSize: 12, color: T.accent, fontWeight: 800, letterSpacing: 1.5, marginBottom: 16,
                }}>{p.n}</div>
                <h3 style={{ fontSize: 18, fontWeight: 700, margin: '0 0 10px' }}>{p.t}</h3>
                <p style={{ margin: 0, color: T.sub, fontSize: 13.5, lineHeight: 1.65 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <TP2CTABanner title="지금이 바로 최고의 타이밍." sub="한정 특가는 물량 소진 시 종료됩니다. 놓치지 마세요." />
    </TP2Page>
  );
};

window.TP2Pricing = TP2Pricing;