/* 후원 CTA — 본사 일시 후원 Dialog 트리거와 동일한 시각(보라→파랑 + HeartHandshake)
   클릭 시 /donate 로 이동 후 금액 선택 모달(1단계)이 바로 열림 */

/** `?open=once` + DonationFormDialog enableDeepLink */
const DONATE_HREF = "/donate?open=once#one-time-donation";

function DonateStrip() {
  const { t } = useApp();
  const d = t.donationCta;

  return (
    <section className="donate-strip section-pad" id="donate" aria-labelledby="donate-strip-heading">
      <div className="container">
        <div className="donate-strip-inner reveal">
          <p className="donate-strip-eyebrow">{d.eyebrow}</p>
          <h2 id="donate-strip-heading" className="donate-strip-title">{d.title}</h2>
          <p className="donate-strip-lede">{d.lede}</p>
          {/* 후원 페이지 DonationFormDialog 트리거와 동일: ui/button + purple→blue 그라데이션 오버라이드 */}
          <a className="donate-strip-btn" href={DONATE_HREF}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="donate-strip-btn-icon"
              aria-hidden="true"
            >
              <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
              <path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66" />
              <path d="m18 15-2-2" />
              <path d="m15 18-2-2" />
            </svg>
            {d.cta}
          </a>
        </div>
      </div>
    </section>
  );
}

window.DonateStrip = DonateStrip;