// Hero + Top Navigation
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [pointsOpen, setPointsOpen] = React.useState(false);
  const pointsRef = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // 드롭다운 · 외부 클릭 시 · 닫힘
  React.useEffect(() => {
    if (!pointsOpen) return;
    const onDocClick = (e) => {
      if (pointsRef.current && !pointsRef.current.contains(e.target)) {
        setPointsOpen(false);
      }
    };
    document.addEventListener('mousedown', onDocClick);
    return () => document.removeEventListener('mousedown', onDocClick);
  }, [pointsOpen]);

  // ─── 설계 포인트 · 드롭다운 항목 ─────
  //   상속세 시뮬레이션 → diagnose.html?simulator=1 (auth-guard 통과 시 자동 오픈)
  //   나머지 3개 → 웰컴홈 내부 앵커
  const pointsMenu = [
    {
      label: '상속세 시뮬레이션',
      sub: '시간이 자산을 어떻게 바꾸는지 직접 보십시오',
      href: 'diagnose.html?simulator=1',
      featured: true,
    },
    {
      label: '원본수익권 현재가치 계산',
      sub: '직접 · 계산해보시죠 · (§65 + §33 · 정기금평가와 K-신탁의 결합)',
      href: '#annuity-plus',
      featured: true,
    },
    {
      label: '정기금평가 (§65) · PV/FV 원리',
      sub: '미래 수익권을 · 오늘의 가치로 · 정직하게 평가',
      href: '#points',
    },
  ];

  const items = [
    { label: '사례 발표', href: '#case' },
    { label: '진단 소개', href: '#intro' },
    // '설계 포인트' 는 · 별도 · 드롭다운 · 아래 렌더링
    { label: '리포트 안내', href: '#report' },
    { label: '상담 안내', href: '#consult' },
    // 외부 링크 · k-trust.kr 정식 상담 신청 페이지
    { label: '문의하기', href: 'https://www.k-trust.kr/', external: true },
  ];

  return (
    <nav className={`site-nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="nav-inner">
        <a href="#top" className="brand">
          <span className="brand-mark">K</span>
          <span className="brand-name serif">-Trust</span>
          <span className="brand-sub">부동산 상속·증여 설계</span>
        </a>
        <ul className="nav-links">
          <li><a href="#case">사례 발표</a></li>
          <li><a href="#intro">진단 소개</a></li>

          {/* ─── 설계 포인트 · 드롭다운 ─── */}
          <li className={`nav-dd ${pointsOpen ? 'is-open' : ''}`} ref={pointsRef}>
            <button
              type="button"
              className="nav-dd-trigger"
              aria-haspopup="true"
              aria-expanded={pointsOpen}
              onClick={() => setPointsOpen(v => !v)}
            >
              설계 포인트
              <span className="nav-dd-caret" aria-hidden="true">▾</span>
            </button>
            {pointsOpen && (
              <div className="nav-dd-panel" role="menu">
                {pointsMenu.map((m, i) => (
                  <a
                    key={i}
                    href={m.href}
                    className={`nav-dd-item ${m.featured ? 'is-featured' : ''}`}
                    role="menuitem"
                    onClick={() => setPointsOpen(false)}
                  >
                    <div className="nav-dd-label">
                      {m.featured && <span className="nav-dd-star" aria-hidden="true">⭐</span>}
                      {m.label}
                    </div>
                    <div className="nav-dd-sub">{m.sub}</div>
                  </a>
                ))}
              </div>
            )}
          </li>

          <li><a href="#report">리포트 안내</a></li>
          <li><a href="#consult">상담 안내</a></li>
          <li>
            <a href="https://www.k-trust.kr/" target="_blank" rel="noopener noreferrer" className="nav-ext">
              문의하기 <span className="nav-ext-site">(홈페이지 www.k-trust.kr)</span> <span className="nav-ext-mark" aria-hidden="true">↗</span>
            </a>
          </li>
        </ul>
        <a href="diagnose.html" className="nav-cta">
          진단 시작 <span className="arrow">→</span>
        </a>
      </div>
    </nav>
  );
};

const Hero = () => {
  return (
    <header className="hero" id="top">
      <div className="hero-bg-lines" aria-hidden>
        <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
          <defs>
            <linearGradient id="goldLine" x1="0" x2="1">
              <stop offset="0" stopColor="#d4af37" stopOpacity="0"/>
              <stop offset="0.5" stopColor="#d4af37" stopOpacity="0.35"/>
              <stop offset="1" stopColor="#d4af37" stopOpacity="0"/>
            </linearGradient>
          </defs>
          <path d="M-100 720 Q 400 560 900 640 T 1600 500" fill="none" stroke="url(#goldLine)" strokeWidth="1"/>
          <path d="M-100 780 Q 500 620 1000 700 T 1600 580" fill="none" stroke="url(#goldLine)" strokeWidth="0.6" opacity="0.6"/>
        </svg>
      </div>

      <div className="container hero-inner">
        <div className="hero-left">
          <div className="eyebrow reveal">K-TRUST · REAL ESTATE INHERITANCE PLANNING</div>
          <h1 className="hero-title serif reveal reveal-delay-1">
            부동산 상속·증여<br/>
            <span className="hero-title-accent">설계 진단</span>
          </h1>
          <div className="hero-lede reveal reveal-delay-2">
            <span className="gold-rule"/>
            <p>
              자산의 크기보다 중요한 것은,<br/>
              <em>상속과 증여의 순간에 구조가 얼마나 준비되어 있는가</em> 입니다.
            </p>
            <p className="hero-lede-sub">
              세금·유동성·가족 구조·미래 가치까지 —<br/>
              한 페이지에서 정돈된 시선으로 살펴봅니다.
            </p>
          </div>
          <div className="hero-cta reveal reveal-delay-3">
            <a href="diagnose.html" className="btn btn-primary">
              상속·증여 진단 시작하기 <span className="arrow">→</span>
            </a>
            <a href="brochure.html" className="btn btn-ghost">
              진단 리포트 받아보기
            </a>
          </div>
          <div className="hero-meta reveal reveal-delay-4">
            <div className="meta-item">
              <div className="meta-val serif">15<span className="meta-unit">min</span></div>
              <div className="meta-lbl">평균 진단 시간</div>
            </div>
            <div className="meta-sep"/>
            <div className="meta-item">
              <div className="meta-val serif">7<span className="meta-unit">개 관점</span></div>
              <div className="meta-lbl">구조 진단 항목</div>
            </div>
            <div className="meta-sep"/>
            <div className="meta-item">
              <div className="meta-val serif">1:1</div>
              <div className="meta-lbl">맞춤 리포트 제공</div>
            </div>
          </div>
        </div>

        <div className="hero-right reveal reveal-delay-2">
          <div className="hero-card">
            <div className="hero-card-top">
              <div className="hero-card-tag">
                <span className="dot"/> Confidential Report
              </div>
              <div className="hero-card-code mono">KT–2026 · R.E.I.P</div>
            </div>

            <div className="hero-card-title serif">
              부동산 상속·증여<br/>설계 진단 리포트
            </div>
            <div className="hero-card-sub">Real Estate Inheritance & Gift Planning Diagnosis</div>

            <div className="hero-card-rule"/>

            <div className="hero-card-rows">
              <div className="hcr">
                <span className="hcr-k">자산 구조 분석</span>
                <span className="hcr-v">Structure</span>
              </div>
              <div className="hcr">
                <span className="hcr-k">상속세 추정</span>
                <span className="hcr-v">Tax Estimation</span>
              </div>
              <div className="hcr">
                <span className="hcr-k">유동성 진단</span>
                <span className="hcr-v">Liquidity</span>
              </div>
              <div className="hcr">
                <span className="hcr-k">유류분 검토 포인트</span>
                <span className="hcr-v">Reserved Share</span>
              </div>
              <div className="hcr">
                <span className="hcr-k">현재가치 · 미래가치</span>
                <span className="hcr-v">PV · FV</span>
              </div>
              <div className="hcr">
                <span className="hcr-k">K-Trust 설계 방향</span>
                <span className="hcr-v">Direction</span>
              </div>
            </div>

            <div className="hero-card-foot">
              <div className="hero-card-sig">
                <div className="sig-line serif">Prof. Signature</div>
                <div className="sig-sub mono">K-TRUST ADVISORY</div>
              </div>
              <div className="hero-card-seal">
                <svg viewBox="0 0 60 60">
                  <circle cx="30" cy="30" r="28" fill="none" stroke="#d4af37" strokeWidth="0.6"/>
                  <circle cx="30" cy="30" r="22" fill="none" stroke="#d4af37" strokeWidth="0.4"/>
                  <text x="30" y="28" textAnchor="middle" fontSize="6" fill="#d4af37" fontFamily="serif" letterSpacing="1">K-TRUST</text>
                  <text x="30" y="38" textAnchor="middle" fontSize="4.5" fill="#d4af37" fontFamily="serif" letterSpacing="1.2">EST · 2026</text>
                </svg>
              </div>
            </div>
          </div>

          <div className="hero-card-bg" aria-hidden/>
        </div>
      </div>

      <div className="hero-scroll-hint" aria-hidden>
        <span>Scroll</span>
        <span className="hs-line"/>
      </div>
    </header>
  );
};

Object.assign(window, { Nav, Hero });