// Tax + Liquidity section (why liquidity matters more than size alone)
const Tax = () => {
  return (
    <section className="tax-section dark" id="tax">
      <div className="tax-bg" aria-hidden>
        <svg viewBox="0 0 1440 800" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="taxGold" x1="0" x2="1">
              <stop offset="0" stopColor="#d4af37" stopOpacity="0"/>
              <stop offset="1" stopColor="#d4af37" stopOpacity="0.15"/>
            </linearGradient>
          </defs>
          <circle cx="1200" cy="200" r="300" fill="url(#taxGold)" opacity="0.4"/>
        </svg>
      </div>

      <div className="container tax-inner">
        <div className="tax-head reveal">
          <div className="eyebrow" style={{color: 'var(--gold)'}}>Estimated Tax · Liquidity</div>
          <h2 className="section-title" style={{color: 'white'}}>
            <span style={{color: 'var(--gold)'}}>재산</span>이 많을수록 <span style={{color: 'var(--gold)'}}>세금</span>은 커지고,<br/>
            <span style={{color: 'var(--gold)'}}>현금</span>이 부족할수록 <span style={{color: 'var(--gold)'}}>가족</span>은 흔들립니다.
          </h2>
          <p className="section-desc tax-lead" style={{color: '#dfe5eb'}}>
            재산은 충분해도, 정작 세금을 낼 <em className="tax-lead-hi">현금 유동성이 부족한 경우</em>가 많습니다. 부동산이 재산의 대부분이라면 더더욱 그렇습니다.
          </p>
        </div>

        <div className="tax-grid">
          {/* Estimated tax card */}
          <div className="tax-card reveal">
            <div className="tc-lbl mono">ESTIMATED · CASE</div>
            <div className="tc-title serif">상속세 추정</div>
            <p className="tc-desc">
              총 자산 규모와 구성, 가족 구조를 바탕으로<br/>
              시점별 예상 세액을 살펴봅니다.
            </p>
            <div className="tax-figure">
              <div className="tf-row">
                <span className="tf-k">총자산 (예시)</span>
                <span className="tf-v">50억 원</span>
              </div>
              <div className="tf-row">
                <span className="tf-k">부동산 비중</span>
                <span className="tf-v">68%</span>
              </div>
              <div className="tf-row">
                <span className="tf-k">공제 후 과세표준</span>
                <span className="tf-v">약 40억 원</span>
              </div>
              <div className="tf-row tf-row-hi">
                <span className="tf-k">예상 상속세</span>
                <span className="tf-v tf-v-gold serif">약 14억 원</span>
              </div>
            </div>
            <div className="tc-note mono">* 예시 시나리오이며 실제 결과는 다를 수 있습니다</div>
          </div>

          {/* Liquidity gap card */}
          <div className="tax-card tax-card-highlight reveal reveal-delay-1">
            <div className="tc-lbl mono" style={{color: 'var(--gold)'}}>LIQUIDITY GAP</div>
            <div className="tc-title serif">현금 유동성 부족</div>
            <p className="tc-desc">
              부동산은 있으나 세금을 낼 <em>현금</em>이 부족한 상황<br/>
              — 상속·증여 설계에서 가장 흔한 위기입니다.
            </p>

            <div className="liq-viz">
              <div className="liq-block">
                <div className="lb-lbl">필요 현금</div>
                <div className="lb-bar lb-bar-need">
                  <div className="lb-fill" style={{width: '100%'}}/>
                </div>
                <div className="lb-val serif">14억</div>
              </div>
              <div className="liq-block">
                <div className="lb-lbl">보유 현금</div>
                <div className="lb-bar">
                  <div className="lb-fill lb-fill-short" style={{width: '18%'}}/>
                </div>
                <div className="lb-val serif">2.5억</div>
              </div>
              <div className="liq-gap">
                <div className="lg-lbl">유동성 부족</div>
                <div className="lg-val serif">약 11.5억</div>
              </div>
            </div>

            <div className="tc-conclusion">
              부동산을 서둘러 처분해야 하거나<br/>
              가족 간 갈등의 원인이 되기도 합니다.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Tax });