// 튜브픽 v2 — index.html (홈)
// 히어로 "오늘부터 내 것" 최상단 + 처음부터 모든게 갖춰져 + 결과를 증명합니다 + 후기 + CTA
const TP2Home = () => {
  const T = window.TP2_THEME;
  const D = window.TP2_DATA;

  return (
    <TP2Page active="index.html">
      {/* HERO — Bold 톤의 빅 헤드라인 */}
      <section style={{ padding: '72px 48px 96px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)',
          width: 900, height: 700,
          background: `radial-gradient(circle, rgba(91,71,224,.16) 0%, transparent 60%)`,
          pointerEvents: 'none',
        }} />

        <div style={{ maxWidth: 1280, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: T.card, border: `1px solid ${T.line}`,
            padding: '6px 16px 6px 6px', borderRadius: 999,
            fontSize: 13, fontWeight: 500, marginBottom: 32,
            boxShadow: T.shadowSoft,
          }}>
            <span style={{
              background: T.hot, color: '#fff', padding: '3px 10px',
              fontSize: 11, fontWeight: 700, borderRadius: 999, letterSpacing: 0.5,
              animation: 'tp2-pulse 2s ease-in-out infinite',
            }}>● LIVE</span>
            항소완료 채널 신규 입고 — 한 달 토탈 AS 케어 포함
            <span style={{ color: T.sub, marginLeft: 4 }}>→</span>
          </div>

          <h1 style={{
            fontSize: 116, fontWeight: 900, lineHeight: 0.96, letterSpacing: -4,
            margin: '0 auto 28px', maxWidth: 1100,
          }}>
            돈 버는 채널,<br/>
            <span style={{
              background: `linear-gradient(110deg, ${T.accent} 0%, ${T.accent2} 50%, #d4a4ff 100%)`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            }}>오늘부터 내 것.</span>
          </h1>
          <p style={{
            fontSize: 21, color: T.sub, lineHeight: 1.55,
            maxWidth: 680, margin: '0 auto 44px',
          }}>
            구독자 1,000명 + 시청시간 4,000시간을 이미 통과한 검증된 채널.
            <br/>
            <strong style={{ color: T.ink }}>업로드 즉시 수익 발생, 평균 3일 내 이전 완료.</strong>
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="channels.html" style={{
              background: T.ink, color: '#fff',
              padding: '16px 32px', fontSize: 16, fontWeight: 700,
              borderRadius: 12, boxShadow: T.shadow,
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>지금 시작하기 →</a>
            <a href="guide.html" style={{
              background: T.card, color: T.ink, border: `1px solid ${T.line}`,
              padding: '16px 28px', fontSize: 16, fontWeight: 600,
              borderRadius: 12,
            }}>구매절차 보기</a>
          </div>

          {/* Mini stat row */}
          <div style={{
            display: 'flex', justifyContent: 'center', gap: 56,
            marginTop: 56, fontSize: 13, color: T.sub, flexWrap: 'wrap',
          }}>
            <span>✓ 1:1 카카오 오픈채팅 상담</span>
            <span>✓ 평균 3일 채널 이전</span>
            <span>✓ 한 달 토탈 AS 케어</span>
          </div>
        </div>
      </section>

      {/* 처음부터 모든 게 갖춰져 있습니다 (Bold 톤 + SaaS 카드) */}
      <section style={{ padding: '96px 48px', borderTop: `1px solid ${T.line}` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 64 }}>
            <div style={{ fontSize: 13, color: T.accent, fontWeight: 700, letterSpacing: 1.5, marginBottom: 16 }}>
              ━━ FEATURES
            </div>
            <h2 style={{ fontSize: 64, fontWeight: 900, letterSpacing: -2, margin: '0 0 16px', lineHeight: 1.05 }}>
              처음부터 모든 게<br/>
              <span style={{ color: T.accent }}>갖춰져 있습니다.</span>
            </h2>
            <p style={{ fontSize: 17, color: T.sub, maxWidth: 600, margin: '0 auto', lineHeight: 1.6 }}>
              직접 키울 때 들어가는 시간과 비용 — 이미 다 끝낸 채널을 그대로 받으세요.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {D.perks.map(p => (
              <div key={p.n} style={{
                background: T.card, borderRadius: 16, padding: 36,
                border: `1px solid ${T.line}`, boxShadow: T.shadowSoft,
                position: 'relative', overflow: 'hidden',
              }}>
                <div style={{
                  position: 'absolute', top: -20, right: -20,
                  fontSize: 140, fontWeight: 900, lineHeight: 1,
                  color: 'rgba(91,71,224,.04)', letterSpacing: -4,
                  fontFamily: T.mono,
                }}>{p.n}</div>
                <div style={{
                  width: 48, height: 48, borderRadius: 12,
                  background: 'rgba(91,71,224,.1)', color: T.accent,
                  display: 'grid', placeItems: 'center',
                  fontFamily: T.mono, fontSize: 15, fontWeight: 800, marginBottom: 24,
                  position: 'relative',
                }}>{p.n}</div>
                <h3 style={{ fontSize: 24, fontWeight: 800, margin: '0 0 12px', letterSpacing: -0.5, position: 'relative' }}>{p.t}</h3>
                <p style={{ margin: 0, color: T.sub, fontSize: 15.5, lineHeight: 1.7, position: 'relative' }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <TP2TrustSection />

      {/* 결과로 증명합니다 — Bold 카운터 + SaaS 카드 */}
      <section style={{ padding: '96px 48px', background: T.ink, color: '#fff' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
            <div>
              <div style={{ fontSize: 13, color: T.accent2, fontWeight: 700, letterSpacing: 1.5, marginBottom: 16 }}>
                ━━ PROOF
              </div>
              <h2 style={{ fontSize: 64, fontWeight: 900, letterSpacing: -2, margin: 0, lineHeight: 1.0 }}>
                결과로<br/>증명합니다.
              </h2>
            </div>
            <p style={{ fontSize: 15, color: 'rgba(255,255,255,.6)', maxWidth: 360, margin: 0, lineHeight: 1.7 }}>
              10개 이상 채널을 직접 운영하며 검증한 실제 수익 및 성장 지표입니다.
              모든 자료는 요청 시 원본 캡쳐로 제공됩니다.
            </p>
          </div>

          {/* 빅 카운터 */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            background: 'rgba(255,255,255,.03)',
            border: '1px solid rgba(255,255,255,.08)',
            borderRadius: 16, marginBottom: 24, overflow: 'hidden',
          }}>
            {[
              { v: 10, suf: '+', l: '날아간 채널 (판매자 경험)' },
              { v: 70, suf: '%+', l: '즉시 조회수 1천회 이상' },
              { v: 99, suf: '%', l: '이전 성공률' },
              { v: 30, suf: '일', l: '토탈 AS 케어' },
            ].map((s, i) => (
              <div key={i} style={{
                padding: '36px 32px',
                borderRight: i < 3 ? '1px solid rgba(255,255,255,.08)' : 'none',
              }}>
                <div style={{ fontSize: 64, fontWeight: 900, lineHeight: 1, letterSpacing: -2.5,
                  background: `linear-gradient(180deg, #fff 0%, ${T.accent2} 100%)`,
                  WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                }}>
                  <TP2Counter to={s.v} suffix={s.suf} />
                </div>
                <div style={{ fontFamily: T.mono, fontSize: 12, color: 'rgba(255,255,255,.5)', letterSpacing: 1.5, marginTop: 12 }}>
                  {s.l.toUpperCase()}
                </div>
              </div>
            ))}
          </div>

          {/* 채널 그리드 */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {D.channelCards.map((c, i) => (
              <div key={c.id} style={{
                background: 'rgba(255,255,255,.04)', borderRadius: 16, padding: 24,
                border: '1px solid rgba(255,255,255,.06)',
              }}>
                <TP2Placeholder
                  label={`channel · ${c.id}`} h={160}
                  bg="#1a1a2a" stripe="rgba(139,124,240,.18)" fg={T.accent2}
                />
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginTop: 18 }}>
                  <div>
                    <div style={{ fontFamily: T.mono, fontSize: 11, color: 'rgba(255,255,255,.5)', letterSpacing: 1.5 }}>
                      {c.topic.toUpperCase()}
                    </div>
                    <div style={{ fontSize: 17, fontWeight: 700, marginTop: 6 }}>{c.id}</div>
                    <div style={{ fontSize: 12, color: 'rgba(255,255,255,.5)', marginTop: 4 }}>구독자 {c.subs}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 22, fontWeight: 900, color: T.accent2, lineHeight: 1 }}>{c.views}</div>
                    <div style={{ fontFamily: T.mono, fontSize: 10, color: 'rgba(255,255,255,.5)', letterSpacing: 1, marginTop: 4 }}>MONTHLY</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 후기 */}
      <section style={{ padding: '96px 48px', background: T.card, 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 }}>
              ━━ TESTIMONIALS
            </div>
            <h2 style={{ fontSize: 52, fontWeight: 800, letterSpacing: -1.5, margin: 0 }}>
              실제 고객들의 이야기.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {D.testimonials.map((t, i) => (
              <div key={i} style={{
                background: T.bg, borderRadius: 16, padding: 28,
                border: `1px solid ${T.line}`,
              }}>
                <div style={{ display: 'flex', gap: 4, marginBottom: 16, color: '#f5b400' }}>★★★★★</div>
                <p style={{ margin: '0 0 24px', fontSize: 15, lineHeight: 1.7, color: T.ink }}>
                  "{t.quote}"
                </p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: '50%',
                    background: `linear-gradient(135deg, ${T.accent}, ${T.accent2})`,
                    display: 'grid', placeItems: 'center',
                    color: '#fff', fontWeight: 700, fontSize: 14,
                  }}>{t.name[0]}</div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700 }}>{t.name}</div>
                    <div style={{ fontSize: 12, color: T.sub }}>{t.role}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 가격 미리보기 */}
      <section style={{ padding: '96px 48px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', textAlign: 'center' }}>
          <div style={{ fontSize: 13, color: T.accent, fontWeight: 700, letterSpacing: 1.5, marginBottom: 16 }}>
            ━━ PRICING
          </div>
          <h2 style={{ fontSize: 52, fontWeight: 800, letterSpacing: -1.5, margin: '0 0 16px' }}>
            합리적인 가격, 명확한 보장.
          </h2>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            background: `linear-gradient(135deg, ${T.hot} 0%, #ff8a4a 100%)`,
            color: '#fff', padding: '10px 22px', borderRadius: 999,
            fontSize: 14, fontWeight: 800, letterSpacing: 0.3,
            boxShadow: '0 8px 24px rgba(255,90,95,.28)',
            margin: '0 0 24px',
            animation: 'tp2-pulse 3s ease-in-out infinite',
          }}>
            🔥 오픈 기념 한정특가 세일 진행 중
            <span style={{
              background: 'rgba(255,255,255,.22)', padding: '2px 9px', borderRadius: 999,
              fontSize: 11, fontWeight: 700, letterSpacing: 0.5,
            }}>한정 수량</span>
          </div>
          <p style={{ fontSize: 16, color: T.sub, margin: '0 0 48px' }}>
            상품 종류와 티어별 가격은 판매가격 페이지에서 자세히 확인하세요.
          </p>

          {(() => {
            const F = window.TP2_FORMAT;
            const P = window.TP2_PRICING || D.pricing;
            const pct = (o, s) => (o && s) ? Math.round((o - s) / o * 100) : 0;
            const carePub = (P.care && P.care.tiers && P.care.tiers[0]) || { price: 450000 };
            const items = [
              { name: P.care.name || '튜브픽 케어 채널', desc: '한 달 토탈 AS 케어 — 조회수 · 구독자 · 채널 교체',
                original: P.care.original, sale: carePub.price, prefix: 'from', highlight: true },
              { name: P.select.name || '튜브픽 셀렉트 채널', desc: '1천명 + 4천시간 채널',
                original: P.select.original, sale: P.select.price },
              { name: '항소완료 / 대량', desc: '맞춤 견적', text: '문의' },
            ];
            return (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, textAlign: 'left' }}>
                {items.map((p, i) => (
                  <div key={i} style={{
                    background: p.highlight ? T.ink : T.card,
                    color: p.highlight ? '#fff' : T.ink,
                    borderRadius: 16, padding: 28,
                    border: p.highlight ? 'none' : `1px solid ${T.line}`,
                    boxShadow: p.highlight ? T.shadowBig : T.shadowSoft,
                  }}>
                    <h3 style={{ fontSize: 20, fontWeight: 700, margin: '0 0 8px' }}>{p.name}</h3>
                    <p style={{ fontSize: 13, color: p.highlight ? 'rgba(255,255,255,.6)' : T.sub, margin: '0 0 18px' }}>{p.desc}</p>
                    {p.text ? (
                      <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: -1 }}>{p.text}</div>
                    ) : (
                      <>
                        {p.original ? (
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6, flexWrap: 'wrap' }}>
                            <span style={{
                              fontSize: 14, fontWeight: 600,
                              color: p.highlight ? 'rgba(255,255,255,.45)' : T.dim,
                              textDecoration: 'line-through',
                            }}>{F.won(p.original)}</span>
                            <span style={{
                              fontSize: 11, fontWeight: 800,
                              padding: '3px 9px', borderRadius: 999,
                              background: T.hot, color: '#fff', letterSpacing: 0.5,
                            }}>🔥 오픈 기념 -{pct(p.original, p.sale)}%</span>
                          </div>
                        ) : null}
                        <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                          {p.prefix ? (
                            <span style={{ fontSize: 14, fontWeight: 600,
                              color: p.highlight ? 'rgba(255,255,255,.6)' : T.sub }}>{p.prefix}</span>
                          ) : null}
                          <span style={{ fontSize: 30, fontWeight: 900, letterSpacing: -1.2 }}>{F.won(p.sale)}</span>
                        </div>
                      </>
                    )}
                  </div>
                ))}
              </div>
            );
          })()}

          <a href="channels.html" style={{
            display: 'inline-block', marginTop: 40,
            background: T.ink, color: '#fff', padding: '14px 28px',
            borderRadius: 12, fontSize: 14, fontWeight: 700,
          }}>전체 가격표 보기 →</a>
        </div>
      </section>

      <TP2CTABanner />
    </TP2Page>
  );
};

window.TP2Home = TP2Home;