// Family structure + Reserved share (유류분) section
const Family = () => {
  return (
    <section className="family-section" id="family">
      <div className="container">
        <div className="family-grid">
          {/* Left: narrative */}
          <div className="reveal">
            <div className="eyebrow">Family Structure · Reserved Share</div>
            <h2 className="section-title" style={{marginTop: 16}}>
              가족의 구조가<br/>
              설계의 첫 문장입니다
            </h2>
            <div className="gold-rule"/>
            <p className="family-lede">
              누가, 어떻게, 어느 시점에 자산을 이어받게 되는지 —
              가족의 구성과 관계는 상속·증여 설계의 <em>가장 근본적인 조건</em>입니다.
            </p>
            <ul className="family-points">
              <li>
                <span className="fp-mark serif">·</span>
                <div>
                  <strong>가족 구성 · 세대의 지도</strong>
                  <p>배우자, 자녀, 손자녀까지 — 자산이 흘러갈 방향을 함께 그립니다.</p>
                </div>
              </li>
              <li>
                <span className="fp-mark serif">·</span>
                <div>
                  <strong>유류분(遺留分) 검토 포인트</strong>
                  <p>법적으로 보장된 상속 지분과 실제 설계 사이의 간격을 미리 살펴봅니다.</p>
                </div>
              </li>
              <li>
                <span className="fp-mark serif">·</span>
                <div>
                  <strong>의사결정의 우선순위</strong>
                  <p>가족이 소중히 여기는 가치와 자산의 배치가 어긋나지 않도록 조율합니다.</p>
                </div>
              </li>
            </ul>
          </div>

          {/* Right: family tree visual */}
          <div className="reveal reveal-delay-1">
            <div className="family-tree">
              <div className="ft-header">
                <div className="ft-lbl mono">FAMILY MAP · SCHEMATIC</div>
                <div className="ft-title serif">가계 구조 시각화</div>
              </div>

              <svg viewBox="0 0 400 340" preserveAspectRatio="xMidYMid meet" className="ft-svg">
                {/* Gen 1 · 본인·배우자 · 굵은 네이비 원 */}
                <g>
                  <circle cx="130" cy="60" r="30" fill="white" stroke="#0f2637" strokeWidth="4"/>
                  <text x="130" y="66" textAnchor="middle" fontSize="16" fontWeight="800" fill="#0f2637" fontFamily="serif">본인</text>
                  <circle cx="270" cy="60" r="30" fill="white" stroke="#0f2637" strokeWidth="4"/>
                  <text x="270" y="66" textAnchor="middle" fontSize="16" fontWeight="800" fill="#0f2637" fontFamily="serif">배우자</text>
                  {/* 혼인선 · 진한 골드 · 매우 굵게 */}
                  <line x1="160" y1="60" x2="240" y2="60" stroke="#b8860b" strokeWidth="4"/>
                </g>

                {/* Vertical connector · 직계선 · 진한 네이비 파선 · 매우 굵게 */}
                <line x1="200" y1="60" x2="200" y2="150" stroke="#1a3a52" strokeWidth="3" strokeDasharray="7 4"/>
                <line x1="90" y1="150" x2="310" y2="150" stroke="#1a3a52" strokeWidth="3" strokeDasharray="7 4"/>

                {/* Gen 2 - 자녀들 · 굵은 네이비 원 */}
                <g>
                  <line x1="90" y1="150" x2="90" y2="180" stroke="#1a3a52" strokeWidth="3" strokeDasharray="7 4"/>
                  <circle cx="90" cy="205" r="26" fill="#f5f2ec" stroke="#0f2637" strokeWidth="3.5"/>
                  <text x="90" y="211" textAnchor="middle" fontSize="15" fontWeight="800" fill="#0f2637" fontFamily="serif">장남</text>
                </g>
                <g>
                  <line x1="200" y1="150" x2="200" y2="180" stroke="#1a3a52" strokeWidth="3" strokeDasharray="7 4"/>
                  <circle cx="200" cy="205" r="26" fill="#f5f2ec" stroke="#0f2637" strokeWidth="3.5"/>
                  <text x="200" y="211" textAnchor="middle" fontSize="15" fontWeight="800" fill="#0f2637" fontFamily="serif">차남</text>
                </g>
                <g>
                  <line x1="310" y1="150" x2="310" y2="180" stroke="#1a3a52" strokeWidth="3" strokeDasharray="7 4"/>
                  <circle cx="310" cy="205" r="26" fill="#f5f2ec" stroke="#0f2637" strokeWidth="3.5"/>
                  <text x="310" y="211" textAnchor="middle" fontSize="15" fontWeight="800" fill="#0f2637" fontFamily="serif">장녀</text>
                </g>

                {/* Gen 3 - 손자녀 · 확장 가족 · 진하게 */}
                <line x1="90" y1="231" x2="90" y2="258" stroke="#3a4a58" strokeWidth="2.5" strokeDasharray="4 3"/>
                <rect x="62" y="258" width="56" height="34" fill="white" stroke="#3a4a58" strokeWidth="2.5" strokeDasharray="4 3" rx="2"/>
                <text x="90" y="280" textAnchor="middle" fontSize="13" fontWeight="700" fill="#0f2637" fontFamily="Pretendard">손자녀</text>

                <line x1="310" y1="231" x2="310" y2="258" stroke="#3a4a58" strokeWidth="2.5" strokeDasharray="4 3"/>
                <rect x="282" y="258" width="56" height="34" fill="white" stroke="#3a4a58" strokeWidth="2.5" strokeDasharray="4 3" rx="2"/>
                <text x="310" y="280" textAnchor="middle" fontSize="13" fontWeight="700" fill="#0f2637" fontFamily="Pretendard">손자녀</text>

                {/* Legend · 범례 · 큰 글자·매우 진한 색 */}
                <g>
                  <line x1="40" y1="320" x2="68" y2="320" stroke="#b8860b" strokeWidth="4"/>
                  <text x="74" y="324" fontSize="13" fontWeight="700" fill="#0f2637" fontFamily="Pretendard">혼인</text>
                  <line x1="140" y1="320" x2="168" y2="320" stroke="#1a3a52" strokeWidth="3" strokeDasharray="7 4"/>
                  <text x="174" y="324" fontSize="13" fontWeight="700" fill="#0f2637" fontFamily="Pretendard">직계</text>
                  <rect x="240" y="315" width="14" height="10" fill="white" stroke="#3a4a58" strokeWidth="2.5" strokeDasharray="3 2" rx="1"/>
                  <text x="260" y="324" fontSize="13" fontWeight="700" fill="#0f2637" fontFamily="Pretendard">확장 가족</text>
                </g>
              </svg>

              <div className="ft-note">
                유류분 검토는 계산이 아니라 <em>가족을 이해하는 과정</em>입니다.<br/>
                구조가 정돈될수록 관계 또한 편안해집니다.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Family });