/**
 * K-Trust · 정기금평가와 K-신탁의 결합
 * ═══════════════════════════════════════════════════════════════
 *  · 슬라이드 A · 원본수익권 · 실시간 시뮬레이터 (상증법 §65 · §33)
 *  · 슬라이드 B · 10년 차 사망 시 · 두 가지 유형 비교표 (§13, §28)
 * 
 * 교수님 요청 (2026-08-23):
 *  · 자산가 질문 · 실무 · 결정적 무기
 *  · 공식 · 반드시 표시 · 전문가 이미지
 *  · 웰컴홈 마지막 · finale 앞 · 강력한 클로징 앵커
 * ═══════════════════════════════════════════════════════════════
 */

const AnnuityPlus = () => {
  // ─── 슬라이더 상태 ─────────
  const [buildingValue, setBuildingValue] = React.useState(3000);   // 건물 시가 (억) · 부동산 자산가 실전 규모
  const [trustYears, setTrustYears] = React.useState(15);            // 신탁 기간 (년)
  const [discountRate, setDiscountRate] = React.useState(0.03);      // 할인율 (기본 3%)

  // ─── 원본수익권 평가 · 실시간 계산 ─────
  // 원본수익권 평가액 = 건물 시가 / (1 + r)^n
  const originalPV = buildingValue / Math.pow(1 + discountRate, trustYears);
  const savingAmount = buildingValue - originalPV;
  const savingPct = buildingValue > 0 ? (savingAmount / buildingValue) * 100 : 0;

  // ─── 예시 · 증여세 시뮬 (간단 · 20% 가정 · 자세한 산출은 자문 단계) ─────
  //  · 일반 일시 증여 (100% 시가) vs 원본수익권 사전 증여 (할인 후 · 20% 예시)
  const generalGiftTax = buildingValue * 0.4;      // 10~30억 구간 40% · 예시
  const trustGiftTax = originalPV * 0.4;
  const taxSaved = generalGiftTax - trustGiftTax;

  return (
    <section className="ap-section" id="annuity-plus">
      {/* ═════════════ 슬라이드 A · 원본수익권 시뮬레이터 ═════════════ */}
      <div className="ap-slide ap-slide-a">
        <div className="ap-slide-inner">
          <div className="ap-head">
            <div className="ap-eyebrow mono">SPECIAL · §65 + §33 · 정기금평가와 K-신탁의 결합</div>
            <h2 className="ap-title serif">
              임대료만이 아닙니다.<br/>
              <em>건물(원본)</em>도 · 현재가치 할인 평가로 · 절세 증여 가능합니다
            </h2>
            <p className="ap-lead">
              신탁 계약 시점에 <strong>원본수익권</strong>을 자녀에게 지정하면,
              15년 뒤 귀속될 건물을 <strong>현재가치로 할인 평가</strong>하여 대폭 낮은
              증여세로 안전하게 승계할 수 있습니다.
            </p>
          </div>

          {/* ─── 원본수익권 평가 · 공식 · 전문가 이미지 ─── */}
          <div className="ap-formula">
            <div className="ap-formula-lbl mono">FORMULA · 상증법 시행령 §61 · 신탁이익 평가</div>
            <div className="ap-formula-eq serif">
              <span className="apfe-lhs">원본수익권 평가액</span>
              <span className="apfe-eq">=</span>
              <span className="apfe-frac">
                <span className="apfe-num">건물 시가</span>
                <span className="apfe-bar"></span>
                <span className="apfe-den">(1 + r)<sup>n</sup></span>
              </span>
            </div>
            <div className="ap-formula-notes">
              <div><span className="apfn-k mono">r</span> · 할인율 · <strong>3.0%</strong> (2025년 · 기획재정부 고시 · 상증법 시행규칙 §19의4)</div>
              <div><span className="apfn-k mono">n</span> · 신탁 잔여 기간 (년)</div>
            </div>
          </div>

          {/* ─── 실시간 시뮬레이터 ─── */}
          <div className="ap-sim">
            <div className="ap-sim-head">
              <div className="ap-sim-lbl mono">SIMULATOR · 원본수익권 현재가치 계산</div>
              <div className="ap-sim-title serif">직접 · 계산해보시죠</div>
            </div>

            <div className="ap-sim-controls">
              {/* 건물 시가 */}
              <div className="ap-ctl">
                <div className="ap-ctl-row">
                  <label className="ap-ctl-lbl">건물 시가</label>
                  <div className="ap-ctl-val serif">
                    {buildingValue.toLocaleString()}<span>억</span>
                  </div>
                </div>
                <input
                  type="range"
                  min="100"
                  max="5000"
                  step="100"
                  value={buildingValue}
                  onChange={e => setBuildingValue(+e.target.value)}
                  className="ap-slider"
                />
                <div className="ap-ctl-scale mono">100억 ─────── 5,000억</div>
              </div>

              {/* 신탁 기간 */}
              <div className="ap-ctl">
                <div className="ap-ctl-row">
                  <label className="ap-ctl-lbl">신탁 기간</label>
                  <div className="ap-ctl-val serif">
                    {trustYears}<span>년</span>
                  </div>
                </div>
                <input
                  type="range"
                  min="1"
                  max="30"
                  step="1"
                  value={trustYears}
                  onChange={e => setTrustYears(+e.target.value)}
                  className="ap-slider"
                />
                <div className="ap-ctl-scale mono">1년 ─────── 30년</div>
              </div>

              {/* 할인율 */}
              <div className="ap-ctl">
                <div className="ap-ctl-row">
                  <label className="ap-ctl-lbl">할인율</label>
                  <div className="ap-ctl-val serif">
                    {(discountRate * 100).toFixed(1)}<span>%</span>
                  </div>
                </div>
                <input
                  type="range"
                  min="0.01"
                  max="0.08"
                  step="0.005"
                  value={discountRate}
                  onChange={e => setDiscountRate(+e.target.value)}
                  className="ap-slider"
                />
                <div className="ap-ctl-scale mono">1% ─── 3% (2025) ─── 8%</div>
              </div>
            </div>

            {/* ─── 실시간 결과 · 3장 카드 ─── */}
            <div className="ap-sim-result">
              <div className="ap-res-card ap-res-general">
                <div className="ap-res-lbl mono">A · 일반 일시 증여</div>
                <div className="ap-res-desc">시가 100% 과세</div>
                <div className="ap-res-val serif">
                  {buildingValue.toLocaleString(undefined, {maximumFractionDigits: 0})}<em>억</em>
                </div>
                <div className="ap-res-note">할인 없음</div>
              </div>

              <div className="ap-res-arrow serif">→</div>

              <div className="ap-res-card ap-res-trust">
                <div className="ap-res-lbl mono">B · 원본수익권 사전 증여 ⭐</div>
                <div className="ap-res-desc">현재가치 할인 평가</div>
                <div className="ap-res-val serif">
                  {originalPV.toLocaleString(undefined, {maximumFractionDigits: 1})}<em>억</em>
                </div>
                <div className="ap-res-note">
                  ({buildingValue.toLocaleString()}억 ÷ (1.{(discountRate*100).toFixed(0).padStart(2,'0')})^{trustYears})
                </div>
              </div>

              <div className="ap-res-arrow serif">=</div>

              <div className="ap-res-card ap-res-saved">
                <div className="ap-res-lbl mono">🔴 과세표준 · 차감 효과</div>
                <div className="ap-res-desc">B − A 절감</div>
                <div className="ap-res-val serif ap-res-val-red">
                  −{savingAmount.toLocaleString(undefined, {maximumFractionDigits: 1})}<em>억</em>
                </div>
                <div className="ap-res-note ap-res-note-red">
                  <strong>{savingPct.toFixed(1)}%</strong> 평가액 절감
                </div>
              </div>
            </div>

            {/* ─── 인사이트 문구 ─── */}
            <div className="ap-insight">
              <span className="api-mark">💡</span>
              <div className="api-body">
                건물 시가 <strong>{buildingValue.toLocaleString()}억</strong> · <strong>{trustYears}년</strong> 뒤 자녀 귀속 조건으로
                원본수익권을 <strong>사전 증여</strong>하면 현재가치는 <strong>{originalPV.toLocaleString(undefined, {maximumFractionDigits: 1})}억</strong>으로 낮아져
                <strong className="api-hi"> 약 {savingAmount.toLocaleString(undefined, {maximumFractionDigits: 1})}억의 과세표준 차감 효과</strong>가 발생합니다.
              </div>
            </div>
          </div>

          {/* ─── 3대 시나리오 · 비교 카드 ─── */}
          <div className="ap-scenarios">
            <div className="ap-scn-eyebrow mono">3대 승계 시나리오 · 비교</div>

            <div className="ap-scn-grid">
              <div className="ap-scn-card">
                <div className="ap-scn-num mono">01</div>
                <div className="ap-scn-title serif">신탁 원본수익권<br/>사전 증여</div>
                <div className="ap-scn-basis">현재 시점 · 3.0% 할인 평가</div>
                <ul className="ap-scn-list">
                  <li><span className="apl-good">◎</span>정기금+원본 · 모두 할인 증여세 종결</li>
                  <li><span className="apl-good">◎</span>미래 건물 가치 상승분 · <strong>전액 비과세</strong></li>
                  <li><span className="apl-warn">△</span>계약 시점 · 자녀 증여세 재원 필요</li>
                </ul>
              </div>

              <div className="ap-scn-card ap-scn-recommend">
                <div className="ap-scn-badge">⭐ K-Trust 추천</div>
                <div className="ap-scn-num mono">02</div>
                <div className="ap-scn-title serif">임대료 정기금 증여<br/>+ 원본 사후 상속</div>
                <div className="ap-scn-basis">임대료로 · 종신보험 레버리지 · 상속세 재원 마련</div>
                <ul className="ap-scn-list">
                  <li><span className="apl-good">◎</span>당장 원본 증여세 부담 없음</li>
                  <li><span className="apl-good">◎</span>자녀 · <strong>임대료 정기 소득원</strong> 확보 (자금출처)</li>
                  <li><span className="apl-good">◎</span>임대료 → <strong>종신보험 납부</strong> → 상속세 재원 축적</li>
                </ul>
              </div>

              <div className="ap-scn-card ap-scn-dim">
                <div className="ap-scn-num mono">03</div>
                <div className="ap-scn-title serif">일반 일시 증여<br/>· 매매</div>
                <div className="ap-scn-basis">현재 시점 · 시가 · 100% 과세</div>
                <ul className="ap-scn-list">
                  <li><span className="apl-good">◎</span>구조 단순</li>
                  <li><span className="apl-bad">✕</span>증여세율 · 상위 구간 · 부담 최대</li>
                  <li><span className="apl-bad">✕</span>할인 혜택 · 전무</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ═════════════ 슬라이드 B · 10년 차 사망 시 · 비교표 ═════════════ */}
      <div className="ap-slide ap-slide-b">
        <div className="ap-slide-inner">
          <div className="ap-head">
            <div className="ap-eyebrow mono">FAQ · 자산가께서 가장 자주 물어보시는 질문</div>
            <h2 className="ap-title serif">
              <em>"그러다가 10년 차에 부모님이 사망하면 · 상속세는?"</em>
            </h2>
            <p className="ap-lead">
              상속세 및 증여세법 <strong>제13조 (사전증여재산 합산)</strong> · <strong>제28조 (기납부세액 공제)</strong>에 따라
              계약 시점의 <strong>수익권 지정 방식</strong>에 따라 두 가지 경로로 갈립니다.
            </p>
          </div>

          {/* ─── 두 가지 유형 · 비교표 ─── */}
          <div className="ap-compare">
            <table className="ap-compare-tbl">
              <thead>
                <tr>
                  <th className="apc-h-lbl">구분</th>
                  <th className="apc-h-a">
                    <div className="apc-h-tag">유형 A</div>
                    <div className="apc-h-title serif">계약 시 · 정기금 + 원본 · 동시 증여</div>
                  </th>
                  <th className="apc-h-b apc-h-featured">
                    <div className="apc-h-tag">⭐ 유형 B · K-Trust 실무 추천</div>
                    <div className="apc-h-title serif">정기금만 증여 · 원본 · 사후 승계</div>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td className="apc-k">10년 차 사망 시<br/>과세 대상</td>
                  <td className="apc-a">
                    10년 전 · <strong>사전증여가액 합산</strong><br/>
                    <span className="apc-sub">(10년 이내 · 상증법 §13)</span>
                  </td>
                  <td className="apc-b">
                    사망 시점 · <strong>건물 시가 전체</strong><br/>
                    <span className="apc-sub">10년간 오른 시가로 · 상속세 계산</span>
                  </td>
                </tr>
                <tr>
                  <td className="apc-k">자녀 · 증여세<br/>납부 재원</td>
                  <td className="apc-a apc-bad">
                    <span className="apc-icon">🔴</span> 계약 시점 · <strong>큰 부담</strong><br/>
                    <span className="apc-sub">원본까지 사전 증여 · 자녀 현금 필요</span>
                  </td>
                  <td className="apc-b apc-good">
                    <span className="apc-icon">🟢</span> <strong>정기금 임대료</strong>로 자연 축적<br/>
                    <span className="apc-sub">매년 수령 임대료 · <strong>종신보험 레버리지</strong> · 상속세 재원으로 활용</span>
                  </td>
                </tr>
                <tr>
                  <td className="apc-k">건물 가치<br/>상승분 반영</td>
                  <td className="apc-a apc-good">
                    <span className="apc-icon">🟢</span> 비과세<br/>
                    <span className="apc-sub">(10년 전 · 할인 평가액으로 합산)</span>
                  </td>
                  <td className="apc-b">
                    사망 시점 시가 반영<br/>
                    <span className="apc-sub">단, 정기금 임대료로 재원 축적됨</span>
                  </td>
                </tr>
                <tr>
                  <td className="apc-k">실무 · 자산가<br/>선호도</td>
                  <td className="apc-a">
                    <strong className="apc-eff-mid">이론 · 최적</strong><br/>
                    <span className="apc-sub">단, 자녀 재원 부담 · 진입 장벽</span>
                  </td>
                  <td className="apc-b apc-good">
                    <strong className="apc-eff-max">🟢🟢 K-Trust 실무 다수 선택</strong><br/>
                    <span className="apc-sub">임대료 · 상속세 자연 대비 · 부담 없음</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          {/* ─── 핵심 브리핑 · K-Trust 실무 관점 ─── */}
          <div className="ap-briefing">
            <div className="apb-mark">📌</div>
            <div className="apb-body">
              <div className="apb-lbl mono">CORE BRIEFING · K-Trust 실무 상담 핵심</div>
              <p className="apb-quote serif">
                <em>"원본을 한 번에 증여하면 · 자녀에게
                <strong className="apb-hi"> 큰 증여세 재원 부담</strong>이 생깁니다.
                K-Trust는 · <strong className="apb-hi">임대료(정기금)만 먼저 증여</strong>해서 ·
                그 임대 수익으로 · 훗날 상속세 재원을 <strong className="apb-hi">자연스럽게 마련</strong>하는
                방식을 실무에서 다수 선택합니다."</em>
              </p>
              <p className="apb-quote-two serif">
                <em>"건물 원본은 · 부모님 소유로 두고 · <strong>정기 임대료를 자녀에게 사전 증여</strong>합니다.
                자녀는 매년 임대료를 수령하며 · <strong className="apb-hi">종신보험 레버리지</strong>를 활용해
                <strong> 상속세 재원을 안정적으로 축적</strong>합니다.
                사망 시 · 원본은 신탁을 통해 자녀에게 이전되고 · 축적된 재원으로 · 상속세를 · 부담 없이 납부합니다."</em>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { AnnuityPlus });