// Report preview section (summary cards + A4 documents)
const Report = () => {
  const summaryCards = [
    { k: '자산 구조 진단', v: 'Composition', desc: '부동산·금융·현금 비율과 균형' },
    { k: '상속세 추정', v: 'Tax Estimation', desc: '예상 세액과 시점별 시나리오' },
    { k: '유동성 진단', v: 'Liquidity', desc: '필요 현금과 보유 현금의 간격' },
    { k: '유류분 검토', v: 'Reserved Share', desc: '가족 구조에 따른 검토 포인트' },
    { k: 'PV · FV 분석', v: 'Present · Future', desc: '현재가치와 미래가치의 관점' },
    { k: 'K-Trust 설계 방향', v: 'Direction', desc: '연속성·명료성·통제력 관점' },
  ];

  return (
    <section className="report-section" id="report">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">Diagnosis Report</div>
          <h2 className="section-title">
            진단 리포트,<br/>
            <span style={{color: 'var(--gold-soft)'}}>정돈된 시선으로 받아보세요</span>
          </h2>
          <p className="section-desc">
            일회성 계산 결과가 아닌 <em>구조 진단서</em>입니다.
            7가지 관점에서 정리된 요약과 상세 리포트를 함께 제공합니다.
          </p>
        </div>

        <div className="report-layout">
          {/* Left: summary cards */}
          <div className="report-cards reveal">
            <div className="rc-header">
              <div className="rc-lbl mono">SUMMARY · 6 CARDS</div>
              <div className="rc-title serif">요약 리포트</div>
            </div>
            <div className="rc-grid">
              {summaryCards.map((c, i) => (
                <div key={i} className="rc-item">
                  <div className="rci-num mono">{String(i+1).padStart(2, '0')}</div>
                  <div className="rci-k">{c.k}</div>
                  <div className="rci-v">{c.v}</div>
                  <div className="rci-desc">{c.desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: A4 document mockup */}
          <div className="report-docs reveal reveal-delay-1">
            <div className="rc-header">
              <div className="rc-lbl mono">DETAILED · A4 REPORT</div>
              <div className="rc-title serif">상세 리포트</div>
            </div>
            <div className="doc-stack">
              <div className="doc doc-3"/>
              <div className="doc doc-2"/>
              <div className="doc doc-1">
                <div className="doc-head">
                  <div className="doc-brand">
                    <span className="db-mark">K</span>
                    <span className="db-name serif">-Trust</span>
                  </div>
                  <div className="doc-code mono">R.E.I.P–01</div>
                </div>
                <div className="doc-title serif">부동산 상속·증여<br/>설계 진단 리포트</div>
                <div className="doc-sub mono">Confidential · For Client Only</div>
                <div className="doc-rule"/>
                <div className="doc-section">
                  <div className="ds-lbl">01. 자산 구조</div>
                  <div className="ds-bar">
                    <div className="dsb-fill" style={{width: '78%'}}/>
                  </div>
                </div>
                <div className="doc-section">
                  <div className="ds-lbl">02. 세금 추정</div>
                  <div className="ds-bar">
                    <div className="dsb-fill" style={{width: '62%'}}/>
                  </div>
                </div>
                <div className="doc-section">
                  <div className="ds-lbl">03. 유동성 진단</div>
                  <div className="ds-bar">
                    <div className="dsb-fill" style={{width: '45%'}}/>
                  </div>
                </div>
                <div className="doc-lines">
                  <div className="dl"/><div className="dl"/><div className="dl short"/>
                  <div className="dl"/><div className="dl short"/>
                </div>
                <div className="doc-foot">
                  <div className="df-sig serif">Prof. Signature</div>
                  <div className="df-seal">
                    <svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="none" stroke="#d4af37" strokeWidth="0.6"/><text x="20" y="22" textAnchor="middle" fontSize="5" fill="#d4af37" fontFamily="serif">K-TRUST</text></svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="report-cta reveal">
          <a href="diagnose.html" className="btn btn-primary">
            상속·증여 진단 시작하기 <span className="arrow">→</span>
          </a>
          <a href="brochure.html" className="btn btn-gold">
            진단 리포트 받아보기
          </a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Report });