function Pricing() {
  return (
    <section id="pricing" style={{ paddingTop: 140, paddingBottom: 120 }}>
      <div className="max">

        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 80 }}>
          <div className="kicker" style={{ marginBottom: 16 }}>§ 05 — Pricing</div>
          <h2 className="serif" style={{ fontSize: 80, lineHeight: 1.02, letterSpacing: '-0.03em' }}>
            합리적으로, <em>딱 한 가지.</em>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', marginTop: 20, maxWidth: 480, marginInline: 'auto' }}>
            복잡한 플랜 없이. 기본 가격 하나에 조건만 다릅니다.
          </p>
        </div>

        <div style={{ maxWidth: 720, marginInline: 'auto', display: 'flex', flexDirection: 'column', gap: 0 }}>

          {/* Base Price */}
          <div style={{
            background: 'var(--bg)',
            border: '1px solid var(--line)',
            padding: '56px 64px',
          }}>
            <div className="kicker" style={{ color: 'var(--muted)', marginBottom: 24 }}>Base Price</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span className="serif" style={{ fontSize: 120, lineHeight: 1, letterSpacing: '-0.04em', color: 'var(--ink)' }}>25</span>
              <span style={{ fontSize: 28, color: 'var(--ink)', fontWeight: 400 }}>만 원</span>
            </div>
            <p style={{ fontSize: 15, color: 'var(--ink-soft)', marginTop: 20, lineHeight: 1.7 }}>
              포트폴리오 사이트 1건 기준 · 기획·디자인·개발 포함<br />
              모든 작업은 1:1 상담 후 범위 확정
            </p>
          </div>

          {/* Marketing Discount */}
          <div style={{
            background: 'var(--coral)',
            padding: '44px 64px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 32,
            flexWrap: 'wrap',
          }}>
            <div>
              <div className="kicker" style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 14 }}>마케팅 동의 시 20% 할인</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="serif" style={{ fontSize: 80, lineHeight: 1, letterSpacing: '-0.03em', color: '#fff' }}>20</span>
                <span style={{ fontSize: 22, color: '#fff', fontWeight: 400 }}>만 원</span>
              </div>
              <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)', marginTop: 12, lineHeight: 1.6 }}>
                완성작을 포트폴리오·SNS에 활용하는 데 동의해주시면<br />
                5만 원 할인 적용됩니다.
              </p>
            </div>
            <div style={{
              background: 'rgba(255,255,255,0.18)',
              borderRadius: 4,
              padding: '20px 28px',
              textAlign: 'center',
              flexShrink: 0,
            }}>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)', marginBottom: 4 }}>기본가</div>
              <div style={{ fontSize: 18, color: 'rgba(255,255,255,0.6)', textDecoration: 'line-through' }}>25만 원</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)', margin: '8px 0 4px' }}>할인가</div>
              <div className="serif" style={{ fontSize: 32, color: '#fff', letterSpacing: '-0.02em' }}>20만 원</div>
            </div>
          </div>

          {/* Over 5 sessions */}
          <div style={{
            background: 'var(--ink)',
            padding: '40px 64px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            gap: 32,
            flexWrap: 'wrap',
          }}>
            <div>
              <div className="kicker" style={{ color: 'rgba(255,255,255,0.45)', marginBottom: 12 }}>포트폴리오 가격 안내</div>
              <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.85)', lineHeight: 1.7 }}>
                포트폴리오 기본 5건 포함 · <strong style={{ color: '#fff' }}>5건 초과 시 건당 +3만 원</strong>
              </p>
              <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.45)', marginTop: 8 }}>
                수정 범위·횟수는 상담 시 상세 안내드립니다.
              </p>
            </div>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 4, flexShrink: 0,
            }}>
              <span className="mono" style={{ fontSize: 13, color: 'rgba(255,255,255,0.45)' }}>+</span>
              <span className="serif" style={{ fontSize: 52, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1 }}>3</span>
              <span style={{ fontSize: 16, color: 'rgba(255,255,255,0.7)' }}>만 원 / 건</span>
            </div>
          </div>

        </div>

        {/* CTA */}
        <div style={{ textAlign: 'center', marginTop: 52 }}>
          <a href="consultation.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 12,
            padding: '16px 32px', borderRadius: 999,
            background: 'var(--ink)', color: 'var(--bg)',
            fontSize: 15, fontWeight: 500, textDecoration: 'none',
          }}>
            <span>무료 상담 신청하기</span><span>→</span>
          </a>
          <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 16 }}>
            상담은 무료이며, 범위 확정 후 계약이 진행됩니다.
          </p>
        </div>

      </div>
    </section>
  );
}

window.Pricing = Pricing;