/* 세탁기 분해청소 상세페이지 — 전용 섹션. Nav/Footer/QuickMenu는 메인과 동일하게 재사용. */

const HOME = "/";

/* ---------- Detail Nav (메인과 동일한 디자인, 홈 링크만 메인으로) ---------- */
function DetailNav() {
  const { Icon } = window.WantedDesignSystem_954e41;
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const closeMenu = () => setMenuOpen(false);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "") + (menuOpen ? " menu-open" : "")}>
      <div className="wrap nav-inner">
        <a href={HOME} className="brand" style={{ textDecoration: "none" }}>
          <img src="assets/logo-kkf.png" alt="깔끔한친구들" className="brand-logo" />
        </a>
        <nav className="nav-links">
          <a href="/about">깔끔한친구들은?</a>
          <div className="nav-drop">
            <a href={HOME + "#services"} className="nav-drop-trigger">
              서비스 상품
              <Chevron />
            </a>
            <div className="nav-menu" role="menu">
              <a href="#top" role="menuitem" style={{ background: "var(--mint-soft)", color: "var(--mint-600)" }}>세탁기 클리닝</a>
              {window.SERVICE_LIST.filter((s) => s !== "세탁기 클리닝").map((s, i) =>
              <a key={i} href={window.SERVICE_URLS[s] || (HOME + "#services")} role="menuitem">{s}{!window.SERVICE_URLS[s] && <span className="soon">준비중</span>}</a>
              )}
            </div>
          </div>
          <a href="/reviews">고객 후기</a>
          <a href="/blog">작업사례 & 관리팁</a>
          
        </nav>
        <a href={window.TEL_HREF} className="nav-phone"
        style={{ color: scrolled ? "var(--mint-600)" : "#fff", textDecoration: "none", fontSize: 16 }}>
          {window.TEL}
        </a>
        <button className="nav-burger" aria-label={menuOpen ? "메뉴 닫기" : "메뉴 열기"}
          aria-expanded={menuOpen} onClick={() => setMenuOpen((v) => !v)}>
          <Icon name={menuOpen ? "close" : "menu"} size={26} />
        </button>
      </div>

      <div className={"nav-mobile" + (menuOpen ? " open" : "")}>
        <a href="/about" onClick={closeMenu}>깔끔한친구들은?</a>
        <div className="sub-label">서비스 상품</div>
        <a href="#top" className="svc cur" onClick={closeMenu}>세탁기 클리닝</a>
        {window.SERVICE_LIST.filter((s) => s !== "세탁기 클리닝").map((s, i) =>
        <a key={i} href={window.SERVICE_URLS[s] || (HOME + "#services")} className="svc" onClick={closeMenu}>{s}{!window.SERVICE_URLS[s] && <span className="soon">준비중</span>}</a>
        )}
        <a href="/reviews" onClick={closeMenu}>고객 후기</a>
        <a href="/blog" onClick={closeMenu}>작업사례 & 관리팁</a>
        
      </div>
    </header>);

}

/* ---------- 1. Page hero ---------- */
function PageHero() {
  const { Button } = window.WantedDesignSystem_954e41;
  return (
    <section className="phero" id="top" data-screen-label="세탁기-히어로">
      <div className="phero-bg">
        <video className="phero-video" autoPlay muted loop playsInline
          poster="assets/hero-poster.jpg">
          <source src="assets/hero-bg.mp4" type="video/mp4" />
        </video>
        <image-slot id="wash-hero-bg" shape="rect" fit="cover"
        placeholder="세탁기 청소 감성 이미지 자리 — 분해·세척 장면 실사로 교체 (영상 준비 전 대체)"></image-slot>
      </div>
      <div className="phero-scrim"></div>
      <div className="phero-inner">
        <div className="wrap">
          <div className="phero-crumb reveal">
            <a href={HOME}>홈</a>
            <span className="sep">›</span>
            <a href={HOME + "#services"}>서비스 상품</a>
            <span className="sep">›</span>
            <span className="cur">세탁기 클리닝</span>
          </div>
          <div className="reveal" data-d="1">
            <span className="phero-badge">세탁기 분해청소</span>
          </div>
          <h1 className="reveal" data-d="2">세탁기 청소,<br />제대로 해드리겠습니다</h1>
          <p className="phero-sub reveal" data-d="3">
            보여주기식 저가 분해청소가 아닙니다. 작은 부품 하나까지 분해해
            세탁조 속 곰팡이와 오염을 100% 제거합니다.
          </p>
        </div>
      </div>
    </section>);

}

/* ---------- 2. 문제 제기 (교육) ---------- */
const BAD_POINTS = [
"세탁조(인튜브)만 분리하고 보이는 면만 물로 헹굽니다.",
"손이 닿지 않는 부품 사이 곰팡이·세제 찌꺼기는 그대로 남습니다.",
"겉보기엔 깨끗해 보여도, 빨래에서 나던 냄새는 곧 다시 돌아옵니다."];

const GOOD_POINTS = [
"작은 부품까지 최소 단위로 완전 분해합니다.",
"부품 하나하나 개별 세척·살균해 오염물질을 100% 제거합니다.",
"작은 부품까지 냄새의 원인을 없앱니다."];


function EduProblem() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" id="why-wash" data-screen-label="세탁기-문제제기">
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">알고 계셨나요?</span>
          <h2 className="edu-q">
            분해 청소를 해도, <span className="mk">청소가 안 되는 부위</span>가<br />
            있다는 사실 알고 계셨나요?
          </h2>
          <p className="section-lead">
            세탁기 내부엔 다양한 부품이 있습니다. 완벽하게 청소하려면 이 부품들을 모두 분해해야 하는데,
            세탁조(인튜브)만 분해하고 보이는 면만 닦는 '보여주기식' 청소도 많습니다.
          </p>
        </div>

        <div className="contrast">
          <div className="con-card con-bad reveal" data-d="1">
            <span className="con-tag">일반 저가 분해청소</span>
            <h3>겉만 닦는<br />'보여주기식' 청소</h3>
            <ul className="con-list">
              {BAD_POINTS.map((t, i) =>
              <li key={i}>
                  <span className="con-ic"><Icon name="circle-close-fill" size={20} /></span>
                  <span>{t}</span>
                </li>
              )}
            </ul>
          </div>

          <div className="con-card con-good reveal" data-d="2">
            <span className="con-tag">깔끔한친구들</span>
            <h3>작은 부품까지 씻어내는<br />완전 분해청소</h3>
            <ul className="con-list">
              {GOOD_POINTS.map((t, i) =>
              <li key={i}>
                  <span className="con-ic"><Icon name="circle-check-fill" size={20} /></span>
                  <span>{t}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 3. 저가업체 vs 깔끔한친구들 (사례 갤러리) ---------- */
/* 깔끔한친구들 분해청소 사례 — 큰 사진 1 + 사진 4 + GIF 3 */
const CASE_PHOTOS = [
{ id: "case-p1", cap: "펄세이터 오염" },
{ id: "case-p2", cap: "세탁조 내벽" },
{ id: "case-p3", cap: "배수 필터" },
{ id: "case-p4", cap: "부품 전체 분해" }];

const CASE_GIFS = [
{ id: "case-g1", cap: "부품 세척 과정", src: "assets/case-1.mp4" },
{ id: "case-g2", cap: "고압 세척", src: "assets/case-2.mp4" },
{ id: "case-g3", cap: "살균 마감", src: "assets/case-3.mp4" }];


function Comparison() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" style={{ background: "var(--mint-tint)" }} data-screen-label="세탁기-비교">
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">무엇이 다른가</span>
          <h2 className="section-title">저가 청소와 깔끔한친구들,<br />결정적인 차이</h2>
          <p className="section-lead">같은 '분해청소'라는 이름을 써도 결과물은 전혀 다릅니다.<br />실제 작업 사진과 영상으로 직접 비교해보세요.</p>
        </div>

        {/* 상단: 저가 사례 사진 / 깔끔한친구들 대표 사진 (좌우 나란히) */}
        <div className="cmp-top">
          <div className="lowcard reveal" data-d="1">
            <div className="low-media">
              <image-slot id="cmp-low-case" shape="rect" fit="cover" placeholder="저가 분해 청소 업체 사례 사진 1장"></image-slot>
              <span className="case-lbl bad"><Icon name="circle-close-fill" size={18} color="#fff" />저가 분해 청소 업체 사례</span>
            </div>
            <div className="low-body">
              <p>세탁조(인튜브)만 분해하고 <b>보이는 면만 세척</b>합니다. 부품 사이 곰팡이·세제 찌꺼기는 그대로 남아, 냄새의 원인이 사라지지 않습니다.</p>
            </div>
          </div>

          <div className="lowcard is-good reveal" data-d="2">
            <div className="low-media">
              <image-slot id="case-hero" shape="rect" fit="cover" placeholder="깔끔한친구들 분해 청소 대표 사진 — 완전 분해 전경"></image-slot>
              <span className="case-lbl good"><Icon name="circle-check-fill" size={18} color="#fff" />깔끔한친구들 분해 청소 사례</span>
            </div>
            <div className="low-body">
              <p>작은 부품 하나까지 <b>최소 단위로 완전 분해</b>합니다. 부품별로 개별 세척·살균해, 눈에 보이지 않는 오염까지 100% 제거합니다.</p>
            </div>
          </div>
        </div>

        {/* 갤러리 강조 헤더 */}
        <div className="case-emph reveal">
          <span className="eyebrow">깔끔한친구들 분해 청소 사례</span>
          <h3>분해 정도가 곧 <span className="mk">"꼼꼼함의 차이"</span></h3>
          <p>깔끔한친구들은 작은 부품까지 최소 단위로 분해하여 오염 물질을 100% 제거하는 프리미엄 분해 청소를 진행합니다. 차원이 다른 결과를 아래 실제 작업 사진과 영상으로 확인하세요.</p>
        </div>

        {/* 사진 4장 */}
        <div className="case-rowlbl reveal"><span className="ic"><Icon name="image" size={17} /></span>부품별 세척 사진</div>
        <div className="case-row photos reveal" data-d="1">
          {CASE_PHOTOS.map((c) =>
          <div className="case-tile" key={c.id}>
              <image-slot id={c.id} shape="rect" fit="cover" placeholder={c.cap}></image-slot>
            </div>
          )}
        </div>

        {/* 작업 영상 3장 (무음 루프 MP4) */}
        <div className="case-rowlbl reveal"><span className="ic"><Icon name="square-play" size={17} /></span>작업 영상</div>
        <div className="case-row gifs reveal" data-d="1">
          {CASE_GIFS.map((c) =>
          <div className="case-tile" key={c.id}>
              <video className="case-video" src={c.src} autoPlay muted loop playsInline preload="metadata"></video>
              <span className="gif-badge"><span className="dot"><Icon name="square-play" size={9} color="var(--navy-900)" /></span>세부 부품 분해</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 4. Before & After ---------- */
function BeforeAfter() {
  const { Icon } = window.WantedDesignSystem_954e41;
  const [pos, setPos] = React.useState(50);
  const ref = React.useRef(null);
  const drag = React.useRef(false);

  const move = React.useCallback((clientX) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const p = Math.max(0, Math.min(100, (clientX - r.left) / r.width * 100));
    setPos(p);
  }, []);

  // Pointer events + touch-action:pan-y on the slider: a horizontal drag is
  // delivered here (comparison), a vertical drag scrolls the page and fires
  // pointercancel. Only mouse captures + jumps on press; touch waits for a
  // move so a scroll gesture starting on the image doesn't yank the handle.
  const onDown = (e) => {
    drag.current = true;
    if (e.pointerType === "mouse") {
      if (ref.current && ref.current.setPointerCapture) {
        try { ref.current.setPointerCapture(e.pointerId); } catch (err) {}
      }
      move(e.clientX);
    }
  };
  const onMove = (e) => { if (drag.current) move(e.clientX); };
  const onUp = () => { drag.current = false; };

  const thumbs = [
  { id: "ba-t1", cap: "먼지망 프레임" },
  { id: "ba-t2", cap: "펄쉐이터" },
  { id: "ba-t3", cap: "인튜브" }];


  return (
    <section className="section" data-screen-label="세탁기-비포애프터">
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">Before &amp; After</span>
          <h2 className="section-title">눈으로 확인하는<br />분해청소의 결과</h2>
          <p className="section-lead">가운데 손잡이를 좌우로 끌어 청소 전과 후를 직접 비교해보세요.</p>
        </div>

        <div className="ba-wrap reveal" data-d="1">
          <div className="ba-slider" ref={ref}
            onPointerDown={onDown} onPointerMove={onMove}
            onPointerUp={onUp} onPointerCancel={onUp} onPointerLeave={onUp}>
            <div className="ba-layer">
              <image-slot id="ba-after" shape="rect" fit="cover" placeholder="청소 후 사진 (After)"></image-slot>
            </div>
            <div className="ba-clip" style={{ width: pos + "%" }}>
              <div className="ba-layer" style={{ width: ref.current ? ref.current.getBoundingClientRect().width : "100vw" }}>
                <image-slot id="ba-before" shape="rect" fit="cover" placeholder="청소 전 사진 (Before)"></image-slot>
              </div>
            </div>
            <span className="ba-pill before">BEFORE</span>
            <span className="ba-pill after">AFTER</span>
            <div className="ba-handle" style={{ left: pos + "%" }}>
              <div className="ba-knob"><Icon name="chevron-left" size={16} /><Icon name="chevron-right" size={16} /></div>
            </div>
          </div>
          <p className="ba-cap">← 손잡이를 끌어 비교하세요 →</p>

          <div className="ba-thumbs">
            {thumbs.map((t) =>
            <div className="ba-thumb reveal" key={t.id}>
                <div className="ba-thumb-hd">{t.cap}</div>
                <div className="ba-pair">
                  <div className="ba-cell">
                    <image-slot id={t.id + "-before"} shape="rect" fit="cover" placeholder={t.cap + " 청소 전"}></image-slot>
                    <span className="ba-tag before">전</span>
                  </div>
                  <div className="ba-cell">
                    <image-slot id={t.id + "-after"} shape="rect" fit="cover" placeholder={t.cap + " 청소 후"}></image-slot>
                    <span className="ba-tag after">후</span>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 5. 차별점 6가지 ---------- */
const WASH_DIFFS = [
{ ic: "refresh", t: "3개월 무상 A/S 보장", d: "서비스 불만족·기기 오작동 등 3개월간 책임지고 무상 A/S로 대응합니다." },
{ ic: "company-check", t: "외주 없는 본사 운영", d: "하청 없이 100% 본사 직원이 직접 방문, 언제나 동일한 최상의 서비스를 약속합니다." },
{ ic: "sparkle-fill", t: "친환경 인증 세척제 사용", d: "웰존사 친환경 인증 전용 세척제만 사용, 유해 성분 걱정 없이 안심할 수 있습니다." },
{ ic: "umbrella", t: "전 인원 1억 책임보험 가입", d: "작업 중 가전 손상·예기치 못한 사고까지, 전 직원이 영업배상 1억 원 책임보험에 가입해 끝까지 책임집니다." },
{ ic: "tag", t: "추가요금 없는 가격 정찰제", d: "당일 갑자기 붙는 금액 없음. 명시된 금액 외 추가 비용은 일체 없습니다." },
{ ic: "eye", t: "세척 전·후 고객 확인 서비스", d: "세척 전후 상태를 직접 확인시켜 드리고, 만족하실 때까지 세척합니다." }];


function WashDifferentiators() {
  const { Card, Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" style={{ background: "var(--mint-tint)" }} data-screen-label="세탁기-차별점">
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">깔끔한친구들의 약속</span>
          <h2 className="section-title">믿고 맡길 수 있는<br />6가지 이유</h2>
        </div>
        <div className="diff-grid">
          {WASH_DIFFS.map((c, i) =>
          <Card key={i} className="diff-card reveal" data-d={i % 3} interactive radius={18}
          style={{ padding: "30px 28px 32px" }}>
              <div className="diff-ic"><Icon name={c.ic} size={26} /></div>
              <div className="diff-no">0{i + 1}</div>
              <h3 style={{ marginTop: 6 }}>{c.t}</h3>
              <p>{c.d}</p>
            </Card>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 6. 클리닝 프로세스 (8단계) ---------- */
const PROCESS = [
{ ic: "write", t: "작업 신청", d: "온라인·전화로 간편하게 접수합니다." },
{ ic: "calendar", t: "1일 전·당일 알림 톡 발송", d: "예약 날짜와 시간을 다시 안내해 드립니다." },
{ ic: "person-fill", t: "엔지니어 방문", d: "본사 소속 전문 엔지니어가 직접 방문합니다." },
{ ic: "eye", t: "외관 및 정상 작동 점검", d: "작업 전 제품 상태와 작동 여부를 확인합니다." },
{ ic: "tune", t: "완전 분해", d: "작은 부품까지 최소 단위로 분해합니다." },
{ ic: "sparkle-fill", t: "세척 및 살균", d: "부품별 개별 세척과 살균을 진행합니다." },
{ ic: "circle-check", t: "작동 상태 확인", d: "재조립 후 정상 작동 여부를 함께 확인합니다." },
{ ic: "check", t: "주변 정리정돈", d: "작업 주변까지 깨끗하게 정리하고 마무리합니다." }];


function Process() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" data-screen-label="세탁기-프로세스" style={{ paddingBottom: 56 }}>
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">클리닝 프로세스</span>
          <h2 className="section-title">신청부터 마무리까지,<br />8단계로 꼼꼼하게</h2>
          <p className="section-lead">정해진 순서대로 빠짐없이 진행합니다. 어느 단계 하나 대충 넘기지 않습니다.</p>
        </div>
        <div className="tl">
          {PROCESS.map((s, i) =>
          <div className={"tl-step reveal" + (i === 4 || i === 5 ? " key" : "")} data-d={i % 3} key={i}>
              <div className="hd">
                <div className="tl-no">{String(i + 1).padStart(2, "0")}</div>
                <span className="tl-ic"><Icon name={s.ic} size={22} /></span>
              </div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 7. 주문 전 필독 사항 ---------- */
const NOTICE = [
<>분해에 필요한 <b>최소 공간 확보가 어려워</b> 분해가 불가능한 경우</>,
<>세탁기 상단에 <b>건조기가 직렬로 설치된 모델</b>로 사전 협의가 안 된 경우</>,
<>제품에 이상이 있다고 판단되거나 나사 불량·기계적 분해 불가 등으로 세탁기 케어가 불가능한 경우, <b>출장 비용 20,000원</b>이 발생합니다.</>];


function NoticeBox() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section-sm" data-screen-label="세탁기-필독" style={{ paddingTop: 40, paddingBottom: 24 }}>
      <div className="wrap">
        <div className="notice reveal">
          <div className="notice-hd">
            <span className="ic"><Icon name="triangle-exclamation-fill" size={22} /></span>
            <h3>이런 경우 서비스가 불가합니다</h3>
          </div>
          <div className="notice-body">
            {NOTICE.map((t, i) =>
            <div className="notice-item" key={i}>
                <span className="n">{i + 1}</span>
                <p>{t}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 8. 유의사항 ---------- */
const CAUTIONS = [
{ ic: "camera", t: <>주문하신 가전 확인과 작업환경 사전 체크를 위해 <b>사진 전송을 요청</b>할 수 있습니다.</> },
{ ic: "calendar", t: <>일정 확정 후 <b>예약일 기준 1일 전, 당일 취소·변경 시</b><br />예약금이 청구됩니다. 이후 서비스 일정은 다소 지연될 수 있습니다.</> },
{ ic: "location", t: <>서비스 당일 <b>유료주차가 불가피한 경우</b> 주차 요금을 부담해 주셔야 합니다.</> }];


function Cautions() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section-sm" data-screen-label="세탁기-유의사항" style={{ paddingTop: 24, paddingBottom: 56 }}>
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">유의사항</span>
          <h2 className="section-title" style={{ fontSize: "clamp(24px,3.4vw,34px)" }}>예약 전 확인해 주세요</h2>
        </div>
        <div className="caution-grid">
          {CAUTIONS.map((c, i) =>
          <div className="caution-card reveal" data-d={i} key={i}>
              <span className="ic"><Icon name={c.ic} size={22} /></span>
              <p>{c.t}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 9. 예약 안내 (가격 + CTA) ---------- */
const PRICES = [
{
  kind: "통돌이(일반) 세탁기", desc: "상부 개방형 전자동 세탁기", amount: "120,000", feat: false, ic: "refresh",
  items: ["부품까지 완전 분해 세척", "청소 전후 확인 서비스", "3개월 무상 A/S"]
},
{
  kind: "드럼 세탁기", desc: "전면 개방형 드럼 세탁기", amount: "180,000", feat: true, ic: "tune",
  items: ["부품까지 완전 분해 세척", "청소 전후 확인 서비스", "3개월 무상 A/S"]
}];


function Pricing() {
  const { Button, Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section price" id="reserve" data-screen-label="세탁기-예약안내">
      <div className="wrap">
        <div className="intro center reveal">
          <span className="eyebrow" style={{ justifyContent: "center" }}>예약 안내</span>
          <h2 className="section-title">세탁기 클리닝 가격</h2>
          <p className="section-lead" style={{ margin: "18px auto 0" }}>가격 정찰제로 운영합니다. 안내드린 금액 외 당일 추가금은 없습니다.</p>
        </div>
        <div className="price-grid">
          {PRICES.map((p, i) =>
          <div className={"price-card reveal" + (p.feat ? " feat" : "")} data-d={i} key={i}>
              <div className="price-kind">{p.kind}</div>
              <div className="price-desc">{p.desc}</div>
              <div className="price-amt">
                <span className="num">{p.amount}</span>
                <span className="won">원</span>
              </div>
              <div className="price-note">부가세 포함 · 서울·경기 출장비 무료</div>
              <ul className="price-list">
                {p.items.map((it, j) =>
              <li key={j}><span className="ck"><Icon name="circle-check-fill" size={18} /></span>{it}</li>
              )}
              </ul>
              <div className="actions">
                <Button size="large" fullWidth leadingIcon="clock" onClick={() => window.location.assign(window.BOOK_URL)}
              style={{ background: p.feat ? "var(--mint-500)" : "var(--navy-800)", color: "#fff", height: 54, fontSize: 16, borderRadius: 12 }}>
                  온라인 예약하기
                </Button>
                <Button size="large" variant="outlined" onClick={() => {window.callPhone();}}
              style={{ height: 54, fontSize: 16, borderRadius: 12, flex: "0 0 auto", padding: "0 20px", color: "var(--navy-700)", boxShadow: "inset 0 0 0 1px var(--line-normal-strong)" }}
              leadingIcon="phone">
                  전화
                </Button>
              </div>
            </div>
          )}
        </div>
        <p className="price-foot">온라인 예약은 24시간 · 전화 상담 {window.TEL} (연중무휴)</p>
      </div>
    </section>);

}

Object.assign(window, {
  DetailNav, PageHero, EduProblem, Comparison, BeforeAfter,
  WashDifferentiators, Process, NoticeBox, Cautions, Pricing
});