// KASHA website — 오시는 길 (카카오맵). 키 미설정 시 주소 안내 플레이스홀더 표시.
function MapSection() {
  const { Card, Icon } = window.DS;
  const cfg = (window.KASHA_INTEGRATIONS || {}).kakaoMap || {};
  const S = window.STUDIO || {};
  const ready = !!(cfg.enabled && cfg.jsKey && cfg.jsKey.indexOf("YOUR_") !== 0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!ready || !ref.current) return;
    var render = function () {
      if (!(window.kakao && window.kakao.maps)) return;
      window.kakao.maps.load(function () {
        var pos = new window.kakao.maps.LatLng(cfg.lat || 37.5447, cfg.lng || 127.0557);
        var map = new window.kakao.maps.Map(ref.current, { center: pos, level: 3 });
        new window.kakao.maps.Marker({ map: map, position: pos });
      });
    };
    if (window.kakao && window.kakao.maps) { render(); return; }
    var s = document.createElement("script");
    s.src = "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=" + cfg.jsKey;
    s.onload = render;
    document.head.appendChild(s);
  }, [ready]);

  return (
    <section style={{ background: "var(--gray-50)" }}>
      <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "80px 24px" }}>
        <div style={{ textAlign: "center", maxWidth: 560, margin: "0 auto" }}>
          <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", color: "var(--blue-500)" }}>LOCATION</div>
          <h2 style={{ fontSize: "var(--text-title-1)", letterSpacing: "var(--tracking-title)", marginTop: 10 }}>오시는 길</h2>
          <p style={{ marginTop: 12, color: "var(--text-secondary)", fontSize: "var(--text-body-lg)" }}>{cfg.label || "KASHA 스튜디오"} · {S.area || "서울 성수"}</p>
        </div>
        <Card padding="none" style={{ marginTop: 36, overflow: "hidden" }}>
          {ready ? (
            <div ref={ref} style={{ width: "100%", height: 360 }} />
          ) : (
            <div style={{ height: 360, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, background: "var(--gray-100)", color: "var(--text-tertiary)" }}>
              <Icon name="mapPin" size={36} color="var(--gray-400)" />
              <div style={{ fontSize: 15, fontWeight: 700, color: "var(--text-secondary)" }}>{cfg.label || "KASHA 성수 스튜디오"}</div>
              <div style={{ fontSize: 13 }}>카카오맵 키를 입력하면 실제 지도가 표시돼요.</div>
            </div>
          )}
        </Card>
      </div>
    </section>
  );
}
window.MapSection = MapSection;