/* 에어컨 분해청소 상세페이지 — 전용 섹션. Nav/Footer/QuickMenu는 메인과 동일하게 재사용.
   구조·톤·CSS(wash.css)는 세탁기 페이지와 동일, 내용만 에어컨용. */

const HOME = "/";
const THIS_SVC = "에어컨 클리닝";

/* ---------- 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)" }}>{THIS_SVC}</a>
              {window.SERVICE_LIST.filter((s) => s !== THIS_SVC).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}>{THIS_SVC}</a>
        {window.SERVICE_LIST.filter((s) => s !== THIS_SVC).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() {
  return (
    <section className="phero" id="top" data-screen-label="에어컨-히어로">
      <div className="phero-bg">
        <video className="phero-video" autoPlay muted loop playsInline
          poster="assets/ac-hero-poster.jpg">
          <source src="assets/ac-hero-bg.mp4" type="video/mp4" />
        </video>
        <image-slot id="ac-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">
            보이는 곳만이 아니라, 송풍팬 안쪽 깊은 곳
            곰팡이까지 완벽하게 제거합니다.
          </p>
        </div>
      </div>
    </section>);

}

/* ---------- 2. 문제 제기 (교육) ---------- */
const BAD_POINTS = [
"송풍팬을 부착한 채 보이는 면만 물로 헹굽니다.",
"송풍팬 안쪽·열교환기 냉각핀 깊은 곳 곰팡이는 그대로 남습니다.",
"겉보기엔 깨끗해도, 가동하면 곰팡이 포자가 다시 공기 중으로 날립니다."];

const GOOD_POINTS = [
"송풍팬을 포함해 탈거 가능한 모든 부품을 완전 분해합니다.",
"안쪽 깊은 곳 곰팡이·오염까지 부품별로 개별 세척·살균합니다.",
"곰팡이로 변색된 부위까지 완벽하게 표백 작업합니다."];


function EduProblem() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" id="why-ac" 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 깔끔한친구들 (사례 갤러리) ---------- */
const CASE_PHOTOS = [
{ id: "ac-case-p1", cap: "송풍팬 곰팡이" },
{ id: "ac-case-p2", cap: "열교환기 냉각핀" },
{ id: "ac-case-p3", cap: "드레인팬 오염" },
{ id: "ac-case-p4", cap: "부품 전체 분해" }];

const CASE_GIFS = [
{ id: "ac-case-g1", cap: "팬 분해 전", src: "assets/ac-case-1.mp4" },
{ id: "ac-case-g2", cap: "세척 전", src: "assets/ac-case-2.mp4" },
{ id: "ac-case-g3", cap: "세척 후", src: "assets/ac-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>

        {/* 상단: 송풍팬 부착(저가) vs 송풍팬 탈거(우리) 좌우 대비 */}
        <div className="cmp-top">
          <div className="lowcard reveal" data-d="1">
            <div className="low-media">
              <image-slot id="ac-cmp-low-case" shape="rect" fit="cover" placeholder="저가 분해 청소 업체 사례 — 송풍팬 부착 상태"></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="ac-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>합니다. 부품별로 개별 세척·살균해, 안쪽 깊은 곳 곰팡이까지 완벽히 제거합니다.</p>
            </div>
          </div>
        </div>

        {/* 갤러리 강조 헤더 */}
        <div className="case-emph reveal">
          <span className="eyebrow">깔끔한친구들은</span>
          <h3>분해 가능한 <span className="mk">모든 부품 분해</span></h3>
          <p>깔끔한친구들은 송풍팬을 포함한 탈거 가능한 모든 부품을 분해하여 안쪽 깊은 곳까지 곰팡이와 오염을 제거합니다. 또한 곰팡이로 인해 부품에 변색 된 부위까지 완벽하게 표백 작업을 진행합니다.<br />작은 꼼꼼함이 차원이 다른 결과를 만들어냅니다.</p>
        </div>

        {/* 송풍팬 탈거 후 vs 세척 후 (자리표시자) */}
        <div className="fanpair reveal" data-d="1">
          <div className="fan-cell">
            <image-slot id="ac-fan-dirty" shape="rect" fit="contain"
            placeholder="송풍팬 탈거 후 (오염) 사진"></image-slot>
            <span className="fan-label left">송풍팬 탈거 후</span>
          </div>
          <div className="fan-cell">
            <image-slot id="ac-fan-clean" shape="rect" fit="contain"
            placeholder="송풍팬 세척 후 (완료) 사진"></image-slot>
            <span className="fan-label right">송풍팬 세척 후</span>
          </div>
          <div className="fan-badge">
            <span>고난이도<br />송풍팬도<br />탈거세척</span>
            <span className="fan-arrow">------→</span>
          </div>
        </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장 (업로드 지원 · 무음 루프 재생): 팬 분해 전 / 세척 전 / 세척 후 */}
        <div className="case-rowlbl reveal"><span className="ic"><Icon name="square-play" size={17} /></span>작업 영상 <span style={{ color: "var(--label-assistive)", fontWeight: 500 }}>· 클릭하거나 영상을 끌어다 놓으세요</span></div>
        <div className="case-row gifs reveal" data-d="1">
          {CASE_GIFS.map((c) =>
          <div className="case-tile" key={c.id}>
              <video-slot id={c.id} src={c.src} placeholder={c.cap}></video-slot>
              <span className="gif-badge"><span className="dot"><Icon name="square-play" size={9} color="var(--navy-900)" /></span>{c.cap}</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);
  }, []);

  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: "ac-ba-t1", cap: "송풍팬" },
  { id: "ac-ba-t2", cap: "열교환기(냉각핀)" },
  { id: "ac-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="ac-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="ac-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 AC_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 ACDifferentiators() {
  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">
          {AC_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>높이 3.5m 이상</b>에 설치된 경우</>,
<><b>연식이 오래된 에어컨</b>은 A/S가 불가합니다</>,
<>제품에 이상이 있다고 판단되거나 나사 불량·기계적 분해 불가 등으로 에어컨 케어가 불가능한 경우, <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: "75,000", won: "원", feat: false, ic: "refresh",
  items: ["송풍팬까지 완전 분해 세척", "청소 전후 확인 서비스", "3개월 무상 A/S"]
},
{
  kind: "스탠드 에어컨", desc: "거실용 대형 스탠드형", amount: "120,000", won: "원~", feat: true, ic: "tune",
  items: ["냉각핀 앞·뒤 고압세척", "청소 전후 확인 서비스", "3개월 무상 A/S"]
},
{
  kind: "천장형(시스템) 에어컨", desc: "1way 100,000원 · 4way 140,000원", amount: "100,000", won: "원~", feat: false, ic: "sparkle-fill",
  items: ["1way / 4way 천장형 대응", "송풍팬까지 완전 분해 세척", "3개월 무상 A/S"]
},
{
  kind: "스탠드 + 벽걸이 패키지", desc: "함께 예약 시 패키지가", amount: "190,000", won: "원~", feat: false, ic: "tag",
  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 % 2} 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">{p.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">일부 프리미엄 모델·업소용·기름때 에어컨은 추가금이 있으며, 예약 시 안내드립니다.</p>
        <p className="price-foot" style={{ marginTop: 6 }}>온라인 예약은 24시간 · 전화 상담 {window.TEL} (연중무휴)</p>
      </div>
    </section>);

}

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