// 튜브픽 v2 — guide.html (구매절차)
const TP2Process = () => {
  const T = window.TP2_THEME;
  const D = window.TP2_DATA;

  return (
    <TP2Page active="guide.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 }}>
            ━━ HOW IT WORKS
          </div>
          <h1 style={{ fontSize: 84, fontWeight: 900, letterSpacing: -3, margin: '0 0 20px', lineHeight: 1 }}>
            3단계로 끝나는<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: 600 }}>
            복잡한 절차 없이, 오늘 신청하면 빠르게 수익을 시작하실 수 있습니다.
          </p>
        </div>
      </section>

      {/* STEPS */}
      <section style={{ padding: '80px 48px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          {D.steps.map((s, i) => (
            <div key={s.n} style={{
              display: 'grid', gridTemplateColumns: '120px 1fr',
              gap: 48, padding: '48px 0',
              borderTop: i === 0 ? `1px solid ${T.line}` : 'none',
              borderBottom: `1px solid ${T.line}`,
              position: 'relative',
            }}>
              <div>
                <div style={{
                  fontSize: 96, fontWeight: 900, lineHeight: 0.9, letterSpacing: -3,
                  background: `linear-gradient(180deg, ${T.accent} 0%, ${T.accent2} 100%)`,
                  WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                  fontFamily: T.mono,
                }}>{s.n}</div>
              </div>
              <div>
                <h3 style={{ fontSize: 36, fontWeight: 800, margin: '0 0 16px', letterSpacing: -0.8 }}>{s.t}</h3>
                <p style={{ fontSize: 17, color: T.sub, margin: '0 0 28px', lineHeight: 1.7, maxWidth: 720 }}>{s.d}</p>
                <div style={{
                  background: T.card, borderRadius: 16, padding: 24,
                  border: `1px solid ${T.line}`, boxShadow: T.shadowSoft,
                }}>
                  <div style={{ fontSize: 12, fontWeight: 700, color: T.accent, letterSpacing: 1.5, marginBottom: 14 }}>
                    {i === 0 ? '필요한 정보' : i === 1 ? '이전 과정' : '수익 창출 시작하기'}
                  </div>
                  <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                    {s.bullets.map((b, j) => (
                      <li key={j} style={{
                        display: 'flex', gap: 12, padding: '8px 0',
                        fontSize: 15, color: T.ink, lineHeight: 1.6,
                      }}>
                        <span style={{
                          width: 22, height: 22, borderRadius: '50%',
                          background: 'rgba(91,71,224,.1)', color: T.accent,
                          display: 'grid', placeItems: 'center',
                          fontSize: 12, fontWeight: 700, flexShrink: 0,
                        }}>✓</span>
                        {b}
                      </li>
                    ))}
                  </ul>
                  {s.meta && (
                    <div style={{
                      marginTop: 16, paddingTop: 16,
                      borderTop: `1px dashed ${T.line}`,
                      fontSize: 13, color: T.accent, fontWeight: 600,
                    }}>{s.meta}</div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* 안전 안내 */}
      <section style={{ padding: '80px 48px', background: T.card, borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.line}` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            <div style={{
              background: T.ink, color: '#fff', borderRadius: 20, padding: 36,
            }}>
              <div style={{ fontSize: 36, marginBottom: 16 }}>🛡️</div>
              <h3 style={{ fontSize: 22, fontWeight: 800, margin: '0 0 12px' }}>안전한 거래 프로세스</h3>
              <p style={{ margin: 0, color: 'rgba(255,255,255,.7)', fontSize: 14, lineHeight: 1.7 }}>
                유튜브 공식 채널 소유권 이전 절차만 사용합니다.
                전 과정을 카카오톡으로 실시간 안내드리며,
                계약서를 통해 안전하게 진행됩니다.
              </p>
            </div>
            <div style={{
              background: T.bg, color: T.ink, borderRadius: 20, padding: 36,
              border: `1px solid ${T.line}`,
            }}>
              <div style={{ fontSize: 36, marginBottom: 16 }}>💬</div>
              <h3 style={{ fontSize: 22, fontWeight: 800, margin: '0 0 12px' }}>1:1 카톡 상담</h3>
              <p style={{ margin: 0, color: T.sub, fontSize: 14, lineHeight: 1.7 }}>
                구매 전 상담부터 이전 과정, A/S까지
                전 과정을 카카오톡 오픈채팅으로 실시간 안내드립니다.
                평균 응답 시간 30분 이내.
              </p>
            </div>
          </div>
        </div>
      </section>

      <TP2CTABanner title="지금 바로 시작하세요." sub="카카오톡으로 간편하게 신청하고 수익 창출을 시작하세요." />
    </TP2Page>
  );
};

window.TP2Process = TP2Process;