// KASHA — 사이트 하단 푸터 + 약관/개인정보처리방침 팝업
// 이용약관·개인정보처리방침·사업자정보·SNS 링크. 약관/방침은 스크롤 팝업으로 열려요.

// 개인정보처리방침 본문(마크다운). 팝업에서 경량 렌더러로 표시돼요.
const PRIVACY_MD = `# 개인정보처리방침
_최종 업데이트: 2026-07-01_

## 1. 개요
본 개인정보처리방침은 **KASHA Photos**("당사", "우리")가 https://kashaphotos.site 웹사이트와 서비스를 이용하시거나 당사와 상호작용하실 때, 이용자의 개인정보를 어떻게 수집·이용·공유하는지를 설명합니다.

당사는 예약 처리, 촬영 서비스 제공, 문의 응대, 이용 경험 개선을 위해 개인정보를 처리합니다.

웹사이트 또는 서비스를 이용하시는 경우 본 방침에 따른 개인정보의 수집 및 이용에 동의하시는 것으로 간주됩니다. 동의하지 않으시는 경우 서비스를 이용하지 말아 주세요.

## 2. 수집하는 정보

### 2.1 이용자가 직접 제공하는 정보
당사는 이용자가 직접 제공하는 다음 정보를 수집합니다.
- 예약자 이름·연락처(휴대전화)·이메일
- 예약 내역 및 구매한 촬영 상품
- 결제 정보(결제 대행사가 처리하며, 당사 서버에는 카드 전체 번호를 저장하지 않습니다 — 아래 4항 참조)
- 쿠폰·적립 내역
- 문의·채팅 및 후기·평점
- 계정 정보(이메일, 비밀번호 — 해시 처리하여 저장)

### 2.2 자동으로 수집되는 정보
웹사이트 이용 시 쿠키 및 유사 기술을 통해 다음 정보가 자동으로 수집될 수 있습니다.
- **이용 데이터**: 방문 페이지, 페이지별 체류 시간, 유입 경로(referrer)
- **기기 데이터**: IP 주소, 브라우저 종류·버전, 운영체제, 기기 유형, 화면 해상도
- **쿠키 데이터**: 아래 5항(쿠키) 참조

## 3. 정보의 이용 목적
당사는 수집한 정보를 다음 목적으로 이용합니다.
- 예약 접수 및 촬영 서비스 제공
- 결제 처리 및 부정 거래 탐지·방지
- 예약 확인, 일정 안내, 알림 발송
- 환불·취소 및 문의 응대
- 웹사이트 이용 행태 분석을 통한 서비스 개선
- 법령상 의무 이행 및 적법한 요청에 대한 대응

## 4. 정보의 공유
당사는 다음과 같은 제3자에게 정보를 공유합니다. 이들은 계약상 당사가 지정한 목적 범위 내에서만 정보를 이용하고 적절히 보호할 의무를 부담합니다.

### 4.1 서비스 제공 업체
- **결제 대행사**(예: 토스페이먼츠, PayPal) — PCI-DSS 기준에 따라 결제 정보 처리
- **이메일·알림 발송 서비스** — 예약자 이름·연락처를 받아 알림 발송
- **이미지·클라우드 인프라 제공업체** — 서비스 운영에 필요한 데이터 저장
- **부정 거래 방지 서비스** — 위험 평가를 위한 주문 메타데이터·IP 수신

### 4.2 법적 준수 및 권리 보호
법령에 따라 요구되는 경우(예: 법원의 명령, 수사기관의 적법한 요청) 또는 당사·이용자·타인의 권리·재산·안전을 보호하기 위해 필요하다고 판단되는 경우 정보를 제공할 수 있습니다.

### 4.3 영업 양도
합병, 인수, 자산 양도 등이 발생하는 경우 이용자의 정보가 해당 거래의 일부로 이전될 수 있습니다. 이 경우 이메일 또는 웹사이트 공지 등으로 변경 사실과 이용자의 선택권을 안내합니다.

### 4.4 개인정보 판매 금지
당사는 이용자의 개인정보를 금전적 대가를 받고 제3자에게 판매하지 않습니다.

## 5. 쿠키 및 유사 기술
당사는 웹사이트 운영, 선호 설정 기억, 이용 행태 분석을 위해 쿠키 및 유사 추적 기술을 사용합니다.
- **필수 쿠키** — 웹사이트 작동에 필요(세션·보안 쿠키). 비활성화할 수 없습니다.
- **기능 쿠키** — 언어·지역 등 선호 설정 기억
- **분석 쿠키** — 방문 페이지·체류 시간 등 이용 행태 분석

브라우저 설정을 통해 쿠키를 관리할 수 있습니다. 일부 쿠키를 비활성화하면 웹사이트 기능이 제한될 수 있습니다.

## 6. 보유 및 이용 기간
당사는 서비스 제공, 법령상 의무 이행, 분쟁 해결, 약정 이행에 필요한 기간 동안 개인정보를 보유합니다.

거래·결제 기록은 관계 법령(전자상거래 등)에 따라 최대 **5년**간 보관합니다. 해당 기간이 만료되면 개인정보를 안전하게 파기하거나 익명화합니다.

## 7. 이용자의 권리
이용자는 자신의 개인정보에 대해 다음 권리를 행사할 수 있습니다.
- **열람권** — 당사가 보유한 개인정보의 열람 요청
- **정정권** — 부정확한 정보의 정정 요청
- **삭제권** — 개인정보의 삭제 요청(일부 예외 있음)
- **처리정지권** — 개인정보 처리의 정지 요청
- **수신 거부** — 마케팅 정보 수신 거부

권리 행사를 원하시면 아래 이메일로 연락해 주세요. 관계 법령이 정한 기간 내에 응답합니다.

## 8. 아동의 개인정보
당사 서비스는 만 **14세** 미만 아동을 대상으로 하지 않으며, 해당 아동의 개인정보를 고의로 수집하지 않습니다. 아동의 정보가 수집된 것으로 확인되면 아래 이메일로 알려 주시기 바라며, 신속히 삭제하겠습니다.

## 9. 방침의 변경
당사는 관행·기술·법령 변화 등을 반영하기 위해 본 방침을 수시로 변경할 수 있습니다. 중대한 변경 시 본 방침 상단의 "최종 업데이트" 날짜를 갱신하고, 필요한 경우 이메일 또는 웹사이트 공지 등으로 안내합니다.

## 10. 문의처
본 방침 또는 개인정보 권리 행사에 관한 문의는 아래로 연락해 주세요.

**KASHA Photos**
이메일: ixtlmrt@gmail.com
웹사이트: https://kashaphotos.site`;

// 이용약관 본문
const TERMS_MD = `# 이용약관
_최종 업데이트: 2026-07-05_

## 1. 목적
본 약관은 **KASHA Photos**("당사")가 운영하는 웹사이트(https://kashaphotos.site)에서 제공하는 촬영 예약·결제 및 관련 서비스의 이용 조건과 절차, 당사와 이용자의 권리·의무를 규정합니다.

## 2. 예약 및 결제
- 이용자는 웹사이트에서 촬영 상품을 선택하고 날짜·시간·장소를 지정하여 예약할 수 있습니다.
- 결제 완료 후 예약은 **대기 상태**로 접수되며, 당사의 확인을 거쳐 **확정**됩니다.
- 결제는 당사가 제공하는 결제 수단(카드·간편결제·계좌이체·해외결제 등)으로 진행되며, 결제 정보는 결제 대행사가 안전하게 처리합니다.

## 3. 취소 및 환불
- **촬영 예정일 7일 전까지** 취소하시면 결제 금액을 **전액(100%) 환불**해 드립니다.
- 촬영 예정일 **7일 이내(6일 전 ~ 당일)** 취소 시에는 환불이 불가합니다.
- 당사 귀책 사유(당사 사정으로 인한 일정 변경·촬영 불가 등)로 촬영이 진행되지 못한 경우에는 취소 시점과 관계없이 **전액 환불**합니다.
- 환불은 원결제수단으로 처리되며, 카드사·결제 대행사 정책에 따라 영업일 기준 처리에 다소 시간이 걸릴 수 있습니다.
- 환불·취소 요청은 마이페이지의 예약 취소 기능 또는 아래 문의처로 접수해 주세요.

## 4. 이용자의 의무
- 이용자는 예약 및 결제 시 정확한 정보를 제공해야 합니다.
- 타인의 정보를 도용하거나 서비스 운영을 방해하는 행위를 해서는 안 됩니다.
- 촬영 결과물의 저작권 및 이용 범위는 별도 안내에 따릅니다.

## 5. 콘텐츠 및 저작권
웹사이트에 게시된 포트폴리오·이미지·텍스트 등 모든 콘텐츠의 저작권은 당사 또는 정당한 권리자에게 있으며, 당사의 사전 동의 없이 복제·배포·상업적 이용을 할 수 없습니다.

## 6. 책임의 한계
당사는 천재지변, 이용자의 귀책 사유, 통신 장애 등 당사의 합리적 통제를 벗어난 사유로 발생한 손해에 대해 책임을 지지 않습니다.

## 7. 약관의 변경
당사는 관련 법령을 위반하지 않는 범위에서 본 약관을 변경할 수 있으며, 변경 시 웹사이트를 통해 공지합니다.

## 8. 문의처
**KASHA Photos**
이메일: ixtlmrt@gmail.com
웹사이트: https://kashaphotos.site`;

// 경량 마크다운 렌더러 — #/##/### 제목, - 목록, **굵게**, _기울임_, [링크](url), --- 구분선
function MarkdownDoc({ text }) {
  const lines = text.split("\n");
  const blocks = [];
  let list = null;
  const flush = () => { if (list) { blocks.push({ t: "ul", items: list }); list = null; } };

  const inline = (s, key) => {
    // **bold** / _italic_ / [text](url) 을 순차 처리
    const nodes = [];
    let rest = s, i = 0;
    const re = /(\*\*([^*]+)\*\*)|(_([^_]+)_)|(\[([^\]]+)\]\(([^)]+)\))/;
    let m;
    while ((m = re.exec(rest))) {
      if (m.index > 0) nodes.push(rest.slice(0, m.index));
      if (m[1]) nodes.push(<strong key={key + "-b" + i} style={{ color: "var(--text-strong)", fontWeight: 700 }}>{m[2]}</strong>);
      else if (m[3]) nodes.push(<em key={key + "-i" + i} style={{ color: "var(--text-tertiary)" }}>{m[4]}</em>);
      else if (m[5]) nodes.push(<a key={key + "-a" + i} href={m[7]} target="_blank" rel="noopener noreferrer" style={{ color: "var(--blue-600)", textDecoration: "underline" }}>{m[6]}</a>);
      rest = rest.slice(m.index + m[0].length); i++;
    }
    if (rest) nodes.push(rest);
    return nodes;
  };

  lines.forEach((raw, idx) => {
    const line = raw.replace(/\s+$/, "");
    if (line === "---") { flush(); blocks.push({ t: "hr" }); return; }
    if (line.startsWith("### ")) { flush(); blocks.push({ t: "h3", s: line.slice(4) }); return; }
    if (line.startsWith("## ")) { flush(); blocks.push({ t: "h2", s: line.slice(3) }); return; }
    if (line.startsWith("# ")) { flush(); blocks.push({ t: "h1", s: line.slice(2) }); return; }
    if (line.startsWith("- ")) { if (!list) list = []; list.push(line.slice(2)); return; }
    if (line.trim() === "") { flush(); return; }
    flush(); blocks.push({ t: "p", s: line });
  });
  flush();

  return (
    <div style={{ fontSize: 14.5, lineHeight: 1.7, color: "var(--text-secondary)" }}>
      {blocks.map((b, i) => {
        if (b.t === "h1") return <h2 key={i} style={{ fontSize: 22, fontWeight: 800, color: "var(--text-strong)", letterSpacing: "-0.01em", margin: i === 0 ? "0 0 6px" : "26px 0 6px" }}>{inline(b.s, "h1" + i)}</h2>;
        if (b.t === "h2") return <h3 key={i} style={{ fontSize: 17, fontWeight: 700, color: "var(--text-strong)", margin: "26px 0 8px" }}>{inline(b.s, "h2" + i)}</h3>;
        if (b.t === "h3") return <h4 key={i} style={{ fontSize: 15, fontWeight: 700, color: "var(--text-strong)", margin: "18px 0 6px" }}>{inline(b.s, "h3" + i)}</h4>;
        if (b.t === "hr") return <hr key={i} style={{ border: "none", borderTop: "1px solid var(--border-subtle)", margin: "22px 0" }} />;
        if (b.t === "ul") return (
          <ul key={i} style={{ margin: "6px 0 6px", paddingLeft: 20, display: "flex", flexDirection: "column", gap: 5 }}>
            {b.items.map((it, j) => <li key={j}>{inline(it, "li" + i + "-" + j)}</li>)}
          </ul>
        );
        return <p key={i} style={{ margin: "8px 0" }}>{inline(b.s, "p" + i)}</p>;
      })}
    </div>
  );
}

// 스크롤 가능한 법률 문서 팝업
function LegalModal({ open, onClose, doc }) {
  const { Icon } = window.DS;
  const { render, active } = window.useKashaModalAnim(open);   // 전역 모달 모션(열림/닫힘 통일)
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
  }, [open, onClose]);
  if (!render) return null;
  return ReactDOM.createPortal(
    <div style={{ position: "fixed", inset: 0, zIndex: 1200, display: "flex", alignItems: "center", justifyContent: "center", padding: 16, pointerEvents: active ? "auto" : "none" }}>
      <div className={"kasha-modal-scrim" + (active ? " open" : "")} onClick={onClose} style={{ position: "absolute", inset: 0, background: "var(--surface-overlay)" }} />
      <div className={"kasha-modal-panel" + (active ? " open" : "")} role="dialog" aria-modal="true" style={{ position: "relative", width: "100%", maxWidth: 620, maxHeight: "86vh", background: "var(--surface-card)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-xl)", display: "flex", flexDirection: "column", overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", padding: "14px 16px 0" }}>
          <button onClick={onClose} aria-label="닫기" style={{ width: 36, height: 36, borderRadius: 999, border: "none", background: "var(--gray-100)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
            <Icon name="x" size={18} color="var(--text-secondary)" />
          </button>
        </div>
        <div style={{ padding: "4px 32px 34px", overflowY: "auto", WebkitOverflowScrolling: "touch" }}>
          <MarkdownDoc text={doc} />
        </div>
      </div>
    </div>,
    document.body
  );
}

function SiteFooter() {
  const { Logo, Icon } = window.DS;
  window.KASHADB.useStore();
  const S = window.STUDIO || {};
  const [modal, setModal] = React.useState(null);   // "privacy" | "terms" | null

  const linkBtn = {
    background: "none", border: "none", padding: 0, cursor: "pointer",
    color: "var(--text-secondary)", fontSize: 13.5, fontFamily: "var(--font-sans)",
    textAlign: "left", lineHeight: 1.6,
  };
  const colTitle = { fontSize: 12, fontWeight: 700, color: "var(--text-tertiary)", letterSpacing: "0.04em", textTransform: "uppercase", marginBottom: 14 };

  return (
    <>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "56px 24px 40px" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "40px 64px", justifyContent: "space-between" }}>
          {/* 브랜드 */}
          <div style={{ minWidth: 200, maxWidth: 320 }}>
            <Logo size={26} />
            <p style={{ marginTop: 14, color: "var(--text-tertiary)", fontSize: 13.5, lineHeight: 1.7 }}>
              순간을 담는 가장 쉬운 방법.<br />
              {S.area || "서울 성수"} 인물 사진 스튜디오.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
              <a href="https://instagram.com/kasha_0426" target="_blank" rel="noopener noreferrer" aria-label="Instagram"
                 style={{ width: 40, height: 40, borderRadius: 12, border: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-secondary)" }}>
                <Icon name="instagram" size={19} />
              </a>
              <a href="https://x.com/kasha_0426_" target="_blank" rel="noopener noreferrer" aria-label="X"
                 style={{ width: 40, height: 40, borderRadius: 12, border: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-secondary)" }}>
                <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24h-6.65l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z"/></svg>
              </a>
              <a href="mailto:ixtlmrt@gmail.com" aria-label="이메일"
                 style={{ width: 40, height: 40, borderRadius: 12, border: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-secondary)" }}>
                <Icon name="share" size={18} />
              </a>
            </div>
          </div>

          {/* 바로가기 */}
          <div>
            <div style={colTitle}>바로가기</div>
            <nav style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <button style={linkBtn} onClick={() => setModal("terms")}>이용약관</button>
              <button style={{ ...linkBtn, fontWeight: 700, color: "var(--text-strong)" }} onClick={() => setModal("privacy")}>개인정보처리방침</button>
              <a href="mailto:ixtlmrt@gmail.com" style={{ ...linkBtn, textDecoration: "none" }}>문의하기</a>
            </nav>
          </div>

          {/* 사업자정보 */}
          <div style={{ maxWidth: 340 }}>
            <div style={colTitle}>사업자정보</div>
            <dl style={{ margin: 0, display: "grid", gridTemplateColumns: "auto 1fr", gap: "7px 14px", fontSize: 12.5, color: "var(--text-tertiary)", lineHeight: 1.6 }}>
              <dt style={{ color: "var(--text-secondary)", fontWeight: 600 }}>상호</dt><dd style={{ margin: 0 }}>{S.name || "KASHA"} Photos</dd>
              <dt style={{ color: "var(--text-secondary)", fontWeight: 600 }}>사업자등록번호</dt><dd style={{ margin: 0 }}>494-03-02091</dd>
              <dt style={{ color: "var(--text-secondary)", fontWeight: 600 }}>소재지</dt><dd style={{ margin: 0 }}>서울</dd>
              <dt style={{ color: "var(--text-secondary)", fontWeight: 600 }}>운영</dt><dd style={{ margin: 0 }}>{S.since || "2019"}년부터</dd>
              <dt style={{ color: "var(--text-secondary)", fontWeight: 600 }}>이메일</dt><dd style={{ margin: 0 }}>ixtlmrt@gmail.com</dd>
            </dl>
          </div>
        </div>

        <div style={{ marginTop: 44, paddingTop: 22, borderTop: "1px solid var(--border-subtle)", display: "flex", flexWrap: "wrap", gap: 12, justifyContent: "space-between", alignItems: "center", color: "var(--text-tertiary)", fontSize: 12.5 }}>
          <span>© 2026 KASHA Photos. 순간을 담다.</span>
          <span style={{ display: "flex", gap: 16 }}>
            <button style={{ ...linkBtn, fontSize: 12.5 }} onClick={() => setModal("terms")}>이용약관</button>
            <button style={{ ...linkBtn, fontSize: 12.5, color: "var(--text-secondary)", fontWeight: 600 }} onClick={() => setModal("privacy")}>개인정보처리방침</button>
          </span>
        </div>
      </div>

      <LegalModal open={modal === "privacy"} onClose={() => setModal(null)} doc={PRIVACY_MD} />
      <LegalModal open={modal === "terms"} onClose={() => setModal(null)} doc={TERMS_MD} />
    </>
  );
}

window.SiteFooter = SiteFooter;
